/* Presentation only: shared, compact theme for the app and admin panel. */
:root {
  --green: #357b5b;
  --green2: #286348;
  --bg: #f4f6f5;
  --panel: #fff;
  --line: #e2e9e5;
  --text: #293d33;
  --muted: #687a70;
  --red: #bf5260;
  --shadow: 0 2px 8px rgba(32, 61, 45, .04);
}
body { background: var(--bg) !important; }
.topbar, .market-topbar, .bottom-nav {
  background: rgba(255, 255, 255, .98) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
.auth-card {
  padding: 20px;
  border-radius: 16px;
  border-color: var(--line);
  box-shadow: 0 6px 24px rgba(32, 61, 45, .06);
}
.brand, .primary { background: var(--green) !important; box-shadow: none !important; }
.primary { padding: 9px 12px; border-radius: 9px; }
.ghost, .iconbtn, .linkbtn, input, select, textarea { border-radius: 9px; }
input, select, textarea { background: #fcfdfc; border-color: var(--line); }
input:focus, select:focus, textarea:focus {
  border-color: #6b9b80;
  box-shadow: 0 0 0 2px rgba(53, 123, 91, .10);
}
.auth-tabs, .trade-tabs, .admin-tabs { background: #edf2ef; border-radius: 10px; }
.auth-tabs button, .trade-tabs button, .admin-tabs button { padding: 8px; }
.asset, .price, .card, .order, .admin-user, .admin-stat,
.market-live, .market-card, .chat-card, .bank-account-card {
  border-color: var(--line) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
}
.asset, .price, .card, .admin-stat { padding: 10px; }
.hero, .market-hero {
  background: #fafdFB !important;
  border-color: var(--line) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 10px;
}
.market-hero h1 { font-size: 20px; }
.market-grid { gap: 8px; }
.market-card { min-height: 126px; padding: 10px; }
.market-card > strong { margin-top: 11px; }
.market-card::before, .market-card::after { content: none; }
.market-icon { background: #eef5f0; border-radius: 10px; }
.market-card:hover, .hero:hover, .market-hero:hover, .cash-card:hover {
  transform: none;
  box-shadow: var(--shadow) !important;
}
.section-title { margin-top: 12px; }
.report-grid button { padding: 10px 9px; border-radius: 11px; box-shadow: var(--shadow); }
.dash-main-card {
  background: #347957 !important;
  box-shadow: 0 3px 12px rgba(32, 61, 45, .09) !important;
  border-radius: 14px !important;
}
.dash-total-wrap strong { text-shadow: none !important; }
.modal { background: rgba(28, 44, 35, .38); }
.modal-card { border-radius: 14px; box-shadow: 0 12px 36px rgba(28, 44, 35, .13); }
.admin-sidebar { border-color: var(--line); box-shadow: var(--shadow) !important; }
#profile .cash-wallet-user-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
:is(#ordersList, #adminPending) .order-card {
  border-width: 1px;
  box-shadow: var(--shadow);
}
:is(#ordersList, #adminPending) .order-card .order-card-header,
:is(#ordersList, #adminPending) .order-card .order-card-values { padding: 8px 10px; }
@media (max-width: 430px) {
  .market-hero { padding: 11px !important; }
  .market-hero h1 { font-size: 19px; }
  .market-card { min-height: 122px; }
}

/* User price cards: compact spacing with room for the selected trade actions. */
#priceGrid { gap: 8px; align-items: start; }
#priceGrid .market-card {
  min-height: 112px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e3eae6 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(32, 61, 45, .025) !important;
}
#priceGrid .market-card-top { gap: 7px; }
#priceGrid .market-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border-radius: 9px;
  background: #f0f5f2;
  color: #507b63 !important;
  font-size: 17px !important;
}
#priceGrid .market-icon svg { width: 18px; height: 18px; }
#priceGrid .market-card-top b { font-size: 11px; font-weight: 600; color: #3a4f43; }
#priceGrid .market-card-top span { margin-top: 1px; }
#priceGrid .live-mini {
  padding: 2px 5px;
  background: #f1f6f3;
  color: #527b62 !important;
  font-weight: 500;
}
#priceGrid .market-single-price { margin-top: 8px; min-height: 36px; }
#priceGrid .market-price-label {
  font-size: 9px !important;
  color: #728177 !important;
  margin-bottom: 3px !important;
}
#priceGrid .market-price-value {
  font-size: clamp(12px, 9cqw, 17px) !important;
  font-weight: 700;
  color: #293f32 !important;
  line-height: 1.4;
}
#priceGrid .market-card-bitcoin .market-price-value { font-size: clamp(11px, 8cqw, 15px) !important; }
#priceGrid .live-line { margin-top: 7px; gap: 4px; font-size: 8px; color: #74847a; }
#priceGrid .live-line .live-dot { width: 4px; height: 4px; background: #82a58e; animation: none; }
#priceGrid .market-card.market-card-selected {
  padding-bottom: 49px;
  border-color: #92b49f !important;
  background: #fcfefc;
}
#priceGrid .market-card:focus-visible { outline: 2px solid #719e82; outline-offset: 2px; }
#priceGrid .market-card-actions { inset: auto 9px 9px; gap: 6px; }
#priceGrid .market-card-actions button {
  min-height: 32px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  box-shadow: none;
}
#priceGrid .market-action-buy { background: #edf5ef !important; color: #38744d !important; border-color: #dbe9df !important; }
#priceGrid .market-action-sell { background: #faf0f0 !important; color: #aa555d !important; border-color: #efdddd !important; }