/* =====================================================================
   GoldArb — Dark Premium Fintech Theme
   ===================================================================== */

:root {
  --gold: #d4af37;
  --gold-bright: #f4d35e;
  --gold-dim: rgba(212, 175, 55, 0.15);

  --bg: #0a0e17;
  --bg-alt: #0d1220;
  --card: #121826;
  --card-alt: #171f30;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);

  --text: #f1f3f7;
  --text-dim: #a7b0c0;
  --text-muted: #6b7484;

  --green: #22c55e;
  --green-dim: rgba(34, 197, 94, 0.15);
  --red: #ef4444;
  --red-dim: rgba(239, 68, 68, 0.15);
  --amber: #f59e0b;
  --amber-dim: rgba(245, 158, 11, 0.15);
  --blue: #3b82f6;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);

  --sidebar-w: 280px;
  --topbar-h: 64px;
  --bottomnav-h: 62px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(1200px 600px at 15% -10%, #131a2c 0%, var(--bg) 55%);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- Layout */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, #0c1220 0%, #0a0e17 100%);
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 40;
  transition: transform .25s ease;
  scrollbar-width: thin;                              /* Firefox — thin sidebar scrollbar */
  scrollbar-color: rgba(212,175,55,0.25) transparent;  /* Firefox — thumb / track */
}
.sidebar::-webkit-scrollbar { width: 4px; }             /* Chrome/Safari/Edge — thin sidebar scrollbar */
.sidebar::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.25); border-radius: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand .mark {
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-brand .mark img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-brand .name { font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.sidebar-brand .name span { color: var(--gold); }

/* ---------------------------------------------------------------- Sidebar user card */
.app-user-card {
  padding: 10px 20px 15px;
  border-bottom: 1px solid var(--border);
}
.app-avatar {
  display: block;
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-strong);
  background: var(--card-alt); /* visible fallback fill if the avatar image 404s */
}
.app-user-name { font-weight: 700; font-size: 14.5px; color: var(--text); margin-top: 2px; }
.app-user-id { font-size: 12px; color: var(--gold-bright); margin-top: 2px; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.badge-ok { background: var(--green-dim); color: var(--green); }
.badge-danger { background: var(--red-dim); color: var(--red); }

/* Small utility classes used by the user card markup */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: 8px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 14px; }
.w-100 { width: 100%; }
.font-mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }

.nav-group { padding: 12px 12px 20px; }

.nav-section { margin: 4px 0; }
.nav-section-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer;
  padding: 11px 14px; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: normal;
  color: var(--text-dim);
  transition: color .15s ease;
}
.nav-section-toggle:hover { color: var(--text); }
.nav-section-toggle .nav-section-label {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: inherit;
}
.nav-section-toggle .nav-section-label i {
  width: 18px; text-align: center; font-size: 16px; opacity: .75;
}
.nav-section-toggle .chevron {
  font-size: 13px; opacity: .6; transition: transform .18s ease, opacity .18s ease;
}

/* Collapsed sections are muted (the default styling above). An OPEN
   section is only slightly brighter and gets an upward-pointing chevron
   — same font-size/weight as collapsed, so it never visually changes
   size next to a plain nav-link. */
.nav-section:not(.collapsed) > .nav-section-toggle {
  color: var(--text);
}
.nav-section:not(.collapsed) > .nav-section-toggle .nav-section-label i { opacity: 1; }
.nav-section:not(.collapsed) > .nav-section-toggle .chevron { transform: rotate(180deg); opacity: .9; }

.nav-section-body {
  overflow: hidden;
  max-height: 600px;
  margin-left: 23px; padding-left: 14px;
  border-left: 1.5px solid var(--border-strong);
  transition: max-height .2s ease, opacity .15s ease, margin-top .2s ease;
  opacity: 1; margin-top: 2px;
}
.nav-section.collapsed .nav-section-body { max-height: 0; opacity: 0; margin-top: 0; }
.nav-section-body > .nav-link:first-child { margin-top: 4px; }
.nav-section-body .nav-link { padding: 9px 10px; font-size: 13.5px; gap: 10px; }
.nav-section-body .nav-link i { width: 16px; font-size: 15px; }

.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: normal;
  margin: 3px 0;
  position: relative;
}
.nav-link i { width: 18px; text-align: center; font-size: 16px; opacity: .8; }
.nav-link:hover { background: var(--card-alt); color: var(--text); }
.nav-link.active {
  background: rgba(212,175,55,0.12);
  color: var(--gold-bright);
  font-weight: 700;
}
.nav-link.active::before {
  content: "";
  position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: var(--gold-bright);
}
.nav-link.active i { opacity: 1; }

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 30;
}
.topbar .left { display: flex; align-items: center; gap: 14px; }
.topbar .page-title { font-size: 18px; font-weight: 700; }
.topbar .right { display: flex; align-items: center; gap: 14px; }
.sidebar-toggle {
  display: none; background: none; border: none; color: var(--text);
  font-size: 20px; cursor: pointer;
}
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; position: relative;
}
.icon-btn:hover { color: var(--gold); border-color: var(--border-strong); }
.badge-dot {
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--bg);
}
.avatar-chip {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border);
}
.avatar-chip .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), #8a6316);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #1a1305;
}
.avatar-chip .un { font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------------------- Referral link button (topbar) */
/* Deliberately NOT gold — gold is reserved for primary financial actions
   (Buy/Sell/CTA) elsewhere in the app. This uses WhatsApp's own brand
   green so it reads instantly as "share via WhatsApp" and stands out
   from everything else in the header. */
.referral-btn {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #ffffff;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.referral-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
  color: #ffffff;
}
.referral-btn:active { transform: translateY(0); }
.referral-btn i { font-size: 15px; line-height: 1; }
.referral-btn .referral-label { white-space: nowrap; }

/* Soft pulsing ring behind the button — subtle, slow, draws the eye
   without being distracting (single ring, ~2.4s cycle). */
.referral-btn::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 1.5px solid #25D366;
  opacity: 0;
  animation: referral-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes referral-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .referral-btn::before { animation: none; display: none; }
}

.content { padding: 22px 24px 90px; flex: 1; }

/* ---------------------------------------------------------------- Cards */
.card {
  background: linear-gradient(180deg, var(--card) 0%, var(--card-alt) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 18px 20px; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.card-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.card-header .muted { color: var(--text-muted); font-size: 12.5px; }

.stat-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 1200px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 16px;
}
.stat-card .label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.stat-card .value { font-size: 20px; font-weight: 800; margin-top: 6px; letter-spacing: -.2px; }
.stat-card .delta { font-size: 12px; margin-top: 4px; font-weight: 600; }
.stat-card .delta.up { color: var(--green); }
.stat-card .delta.down { color: var(--red); }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1100px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Live gold card */
.live-gold-card {
  background: radial-gradient(600px 200px at 100% 0%, rgba(212,175,55,0.15), transparent), var(--card);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: var(--radius); padding: 22px;
}
.live-gold-card .pair { font-size: 13px; color: var(--text-dim); font-weight: 700; letter-spacing: .06em; }
.live-gold-card .price { font-size: 38px; font-weight: 800; margin: 6px 0; color: var(--gold-bright); }
.live-gold-card .chg { font-size: 14px; font-weight: 700; }
.live-gold-card .meta { display: flex; gap: 22px; margin-top: 16px; font-size: 12.5px; color: var(--text-muted); }
.live-gold-card .meta b { color: var(--text-dim); display: block; font-size: 13px; }

/* ---------------------------------------------------------------- Best opportunity */
.opp-card {
  border-radius: var(--radius); padding: 20px;
  background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.02));
  border: 1px solid rgba(212,175,55,0.3);
}
.opp-card .tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: #1a1305; background: var(--gold-bright); padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.opp-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; }
.opp-side { text-align: left; }
.opp-side .lbl { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.opp-side .val { font-size: 16px; font-weight: 700; margin-top: 2px; }
.opp-arrow { color: var(--gold); font-size: 18px; }

/* ---------------------------------------------------------------- Tables */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  vertical-align: middle; white-space: nowrap;
}
table.data-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.table-scroll { overflow-x: auto; }

.market-cell { display: flex; align-items: center; gap: 8px; }
.market-cell .flag { font-size: 18px; }

/* ---------------------------------------------------------------- Badges / P&L */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.pill.green { background: var(--green-dim); color: var(--green); }
.pill.red { background: var(--red-dim); color: var(--red); }
.pill.amber { background: var(--amber-dim); color: var(--amber); }
.pill.gray { background: rgba(255,255,255,0.06); color: var(--text-dim); }
.pill.gold { background: var(--gold-dim); color: var(--gold-bright); }

.text-up { color: var(--green); font-weight: 700; }
.text-down { color: var(--red); font-weight: 700; }

/* ---------------------------------------------------------------- Forms */
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
.form-group label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.form-control, select.form-control {
  width: 100%; background: var(--bg-alt); border: 1px solid var(--border-strong);
  color: var(--text); padding: 11px 13px; border-radius: 10px; font-size: 14px;
  outline: none; transition: border-color .15s;
}
.form-control:focus { border-color: var(--gold); }
.input-suffix { position: relative; }
.input-suffix .suffix {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 13px; pointer-events: none;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px; font-weight: 700; font-size: 14px;
  border: 1px solid transparent; cursor: pointer; transition: all .15s;
}
.btn-gold { background: linear-gradient(135deg, var(--gold-bright), #b3891f); color: #1a1305; }
.btn-gold:hover { filter: brightness(1.08); }
.btn-green { background: var(--green); color: #06210f; }
.btn-red { background: var(--red); color: #2a0808; }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }

/* ---------------------------------------------------------------- Profile page */
.profile-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }

.profile-card { overflow: hidden; }
.profile-card-banner {
  height: 76px;
  background: linear-gradient(120deg, #8a6316, var(--gold-bright), #8a6316);
  background-size: 200% 100%;
  animation: profile-banner-shift 6s ease-in-out infinite;
}
@keyframes profile-banner-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.profile-card-body { padding: 0 22px 22px; text-align: center; }

.profile-avatar-wrap { position: relative; width: 92px; margin: -46px auto 14px; }
.profile-avatar {
  width: 92px; height: 92px;
  border: 4px solid var(--card);
  box-shadow: var(--shadow);
}
.profile-avatar-edit-btn {
  position: absolute; right: -2px; bottom: 2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), #b3891f);
  color: #1a1305; border: 3px solid var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer;
  transition: transform .15s ease;
}
.profile-avatar-edit-btn:hover { transform: scale(1.08); }

.profile-name { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 4px; }

.profile-info-list { text-align: left; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.profile-info-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
}
.profile-info-row + .profile-info-row { border-top: 1px solid var(--border); }
.profile-info-row i {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
  background: var(--gold-dim); color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  margin-top: 1px;
}
.profile-info-row .lbl { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.profile-info-row .val { font-size: 13.5px; color: var(--text); margin-top: 2px; line-height: 1.5; word-break: break-word; }

.profile-avatar-modal-preview {
  width: 110px; height: 110px; border: 3px solid var(--border-strong);
  margin: 0 auto;
}

.tab-bar { display: flex; gap: 6px; background: var(--bg-alt); padding: 4px; border-radius: 10px; width: fit-content; }
.tab-bar button {
  background: none; border: none; color: var(--text-dim); padding: 7px 14px;
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tab-bar button.active { background: var(--gold-dim); color: var(--gold-bright); }

/* ---------------------------------------------------------------- Order summary */
.order-summary { background: var(--bg-alt); border-radius: 10px; padding: 14px 16px; }
.order-summary .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; color: var(--text-dim); }
.order-summary .row b { color: var(--text); font-weight: 700; }
.order-summary .row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; font-size: 15px; }
.order-summary .row.total b { color: var(--gold-bright); }

/* ---------------------------------------------------------------- Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(4,6,10,0.7); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius);
  width: 100%; max-width: 440px; box-shadow: var(--shadow);
}
.modal-box .modal-header { padding: 18px 20px; border-bottom: 1px solid var(--border); font-weight: 700; }
.modal-box .modal-body { padding: 18px 20px; }
.modal-box .modal-footer { padding: 16px 20px; display: flex; gap: 10px; border-top: 1px solid var(--border); }
.modal-box.wide { max-width: 720px; }
.modal-box.wide .modal-body { max-height: 60vh; overflow-y: auto; }

/* ---------------------------------------------------------------- Toasts */
.toast-stack { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--card); border: 1px solid var(--border-strong); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 12px 16px; font-size: 13.5px; box-shadow: var(--shadow);
  min-width: 240px; animation: toast-in .2s ease;
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------- Skeletons / empty */
.skel { background: linear-gradient(90deg, var(--card) 25%, var(--card-alt) 50%, var(--card) 75%); background-size: 200% 100%; animation: skel 1.3s infinite; border-radius: 8px; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.empty-state { text-align: center; padding: 46px 20px; color: var(--text-muted); }
.empty-state i { font-size: 32px; margin-bottom: 10px; display: block; color: var(--text-muted); }

/* ---------------------------------------------------------------- Auth pages */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { text-align: center; margin-bottom: 22px; }
.auth-logo .mark {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 10px;
  background: linear-gradient(135deg, var(--gold-bright), #a9791f);
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #1a1305; font-size: 22px;
}

/* ---------------------------------------------------------------- Mobile bottom nav */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottomnav-h);
  background: rgba(10,14,23,0.95); backdrop-filter: blur(10px); border-top: 1px solid var(--border);
  z-index: 45; align-items: center; justify-content: space-around;
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-muted); font-size: 10.5px; }
.bottom-nav a.active { color: var(--gold); }
.bottom-nav a i { font-size: 18px; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 960px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .sidebar-toggle { display: block; }
  .bottom-nav { display: flex; }
  .content { padding: 16px 14px 90px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .referral-btn { padding: 9px 11px; }
  .referral-btn .referral-label { display: none; }
}

.overlay-dim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 39; display: none; }
.overlay-dim.show { display: block; }

.spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.25);
  border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin-icon { display: inline-block; animation: spin 1s linear infinite; }

/* ---------------------------------------------------------------- Inline alert boxes (showAlert()) */
.gb-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--border-strong); border-left: 4px solid var(--gold);
  background: var(--card); color: var(--text); font-size: 13.5px; line-height: 1.5;
}
.gb-alert .gb-alert-icon { font-size: 18px; line-height: 1; margin-top: 1px; flex-shrink: 0; }
.gb-alert .gb-alert-body { flex: 1; }
.gb-alert-success { border-left-color: var(--green); }
.gb-alert-success .gb-alert-icon { color: var(--green); }
.gb-alert-danger { border-left-color: var(--red); }
.gb-alert-danger .gb-alert-icon { color: var(--red); }
.gb-alert-warning { border-left-color: var(--amber); }
.gb-alert-warning .gb-alert-icon { color: var(--amber); }
.gb-alert-info { border-left-color: var(--gold); }
.gb-alert-info .gb-alert-icon { color: var(--gold); }

/* ---------------------------------------------------------------- Security page: toggle switch */
.sec-toggle {
  position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0;
}
.sec-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.sec-toggle-track {
  position: absolute; inset: 0; border-radius: 999px; cursor: pointer;
  background: var(--card-alt); border: 1px solid var(--border-strong);
  transition: background .2s ease, border-color .2s ease;
}
.sec-toggle-track::before {
  content: ""; position: absolute; top: 2px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-dim);
  transition: transform .2s cubic-bezier(.4,0,.2,1), background .2s ease;
}
.sec-toggle input:checked + .sec-toggle-track { background: var(--green-dim); border-color: rgba(34,197,94,.4); }
.sec-toggle input:checked + .sec-toggle-track::before { transform: translateX(21px); background: var(--green); }

/* ---------------------------------------------------------------- Security page: identity row */
.sec-id-row { display: flex; align-items: center; gap: 14px; }
.sec-id-icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  background: var(--gold-dim); color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.sec-id-title { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.sec-id-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

/* ---------------------------------------------------------------- Security page: step wizard */
.sec-wizard { margin-top: 26px; padding-top: 24px; border-top: 1px dashed var(--border-strong); }
.stepper { display: flex; align-items: center; margin-bottom: 28px; }
.stepper-node { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.stepper-circle {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--card-alt); border: 2px solid var(--border-strong); color: var(--text-muted);
  transition: all .25s ease;
}
.stepper-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; }
.stepper-line { flex: 1; height: 2px; background: var(--border-strong); margin: 0 6px 22px; transition: background .3s ease; }
.stepper-node.done .stepper-circle { background: var(--gold-dim); border-color: var(--gold); color: var(--gold-bright); }
.stepper-node.done .stepper-label { color: var(--gold-bright); }
.stepper-node.active .stepper-circle { background: var(--gold); border-color: var(--gold); color: #1a1305; box-shadow: 0 0 0 4px var(--gold-dim); }
.stepper-node.active .stepper-label { color: var(--text); }
.stepper-line.done { background: var(--gold); }

.sec-panel { display: none; }
.sec-panel.active { display: block; }
.sec-panel-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; }

.sec-qr-box {
  width: 200px; margin: 0 auto; padding: 14px; border-radius: 16px;
  background: #ffffff; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.sec-qr-box img { width: 100%; display: block; }

.sec-secret-wrap { position: relative; margin: 14px auto 0; max-width: 380px; }
.sec-secret-box {
  background: var(--bg); border: 1px solid var(--border-strong); color: var(--gold-bright);
  padding: 14px 50px 14px 16px; border-radius: 10px;
  font-size: 15px; font-weight: 700; letter-spacing: .08em; word-break: break-all; text-align: left;
}
.sec-copy-btn {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border-strong); color: var(--text-dim);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sec-copy-btn:hover { color: var(--gold); border-color: var(--gold); }

/* ---------------------------------------------------------------- Security page: password strength meter */
.pw-strength { margin-top: -8px; margin-bottom: 16px; }
.pw-strength-bars { display: flex; gap: 5px; }
.pw-strength-bars span { flex: 1; height: 4px; border-radius: 4px; background: var(--card-alt); transition: background .2s ease; }
.pw-strength-label { font-size: 11px; font-weight: 700; margin-top: 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.pw-strength.weak .pw-strength-bars span:nth-child(1) { background: var(--red); }
.pw-strength.weak .pw-strength-label { color: var(--red); }
.pw-strength.fair .pw-strength-bars span:nth-child(-n+2) { background: var(--amber); }
.pw-strength.fair .pw-strength-label { color: var(--amber); }
.pw-strength.good .pw-strength-bars span:nth-child(-n+3) { background: var(--gold); }
.pw-strength.good .pw-strength-label { color: var(--gold-bright); }
.pw-strength.strong .pw-strength-bars span { background: var(--green); }
.pw-strength.strong .pw-strength-label { color: var(--green); }

/* ---------------------------------------------------------------- Deposit page */
.deposit-balance-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-alt); border-radius: 14px; padding: 18px 22px;
}
.deposit-balance-strip .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.deposit-balance-strip .val { font-family: var(--display, inherit); font-size: 26px; font-weight: 800; color: var(--gold-bright); margin-top: 4px; }
.deposit-balance-strip i { font-size: 26px; color: var(--gold); opacity: .6; }

.deposit-panel-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-bottom: 18px;
}
.deposit-network-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: var(--gold-dim); color: var(--gold-bright);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}

/* 220px left column (QR card + address card stacked) to the right of
   instructions; collapses to a single column on mobile (see 640px
   breakpoint below). */
.deposit-pay-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }

.deposit-pay-left { display: flex; flex-direction: column; gap: 14px; }

/* QR needs a real white background to stay scannable regardless of the
   dark theme — kept as its own card so nothing else has to be white. */
.deposit-qr-card {
  background: #ffffff; border-radius: 16px; padding: 16px;
  text-align: center; box-shadow: var(--shadow);
}
.deposit-qr-card .deposit-ticket-label { color: #6b7484; }
.deposit-qr-card img { width: 100%; margin: 0 auto; display: block; border-radius: 8px; }

/* Wallet address stays in the app's normal dark card styling — this is
   also what fixes the unreadable copy button from before: it was sitting
   on the white QR card, but .btn-outline's light text was never meant to
   render on a white background. Now it's on a dark card (correct
   contrast), and it's switched to .btn-gold for guaranteed readability
   regardless of what card it ever ends up on. */
.deposit-address-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px; text-align: center;
}
.deposit-address-card .deposit-ticket-label { color: var(--text-muted); }
.deposit-address-card .form-control { font-size: 11px; padding: 8px 10px; }

.deposit-ticket-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }

.deposit-instructions { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.deposit-instruction-item { display: flex; align-items: flex-start; gap: 12px; }
.deposit-instruction-item i { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--gold-dim); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.deposit-instruction-item b { display: block; font-size: 13.5px; color: var(--text); }
.deposit-instruction-item span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

.deposit-recap {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-alt); border-radius: 12px; padding: 12px 16px;
  margin-bottom: 18px;
}
.deposit-recap i { font-size: 16px; color: var(--gold); flex-shrink: 0; }
.deposit-recap div { min-width: 0; } /* lets the address truncate instead of forcing the row wider than its container */
.deposit-recap span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.deposit-recap b { display: block; font-size: 12px; color: var(--text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shared by the TXID input+paste row and the Back/Submit button row.
   min-width:0 on the input is the actual mobile fix: a flex item's
   default min-width is auto (= its content width), which stops it from
   shrinking below that and can push the row wider than the screen on
   narrow phones. Buttons keep their own intrinsic width, only the text
   input needs this. */
.deposit-input-row { display: flex; gap: 8px; }
.deposit-input-row input { min-width: 0; flex: 1; }

.deposit-countdown { font-size: 34px; font-weight: 800; color: var(--gold-bright); margin: 14px 0 4px; letter-spacing: .05em; }
.deposit-countdown.ok { color: var(--green); font-size: 40px; }
.deposit-countdown.warn { color: var(--amber); }

@media (max-width: 640px) {
  .deposit-pay-grid { grid-template-columns: 1fr; }
  .deposit-qr-card, .deposit-address-card { max-width: 260px; margin: 0 auto; width: 100%; }
  .deposit-balance-strip .val { font-size: 21px; }
  .deposit-panel-head { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 420px) {
  .deposit-balance-strip { padding: 14px 16px; }
}

/* ---------------------------------------------------------------- Deposit / fund history */
.fund-filter-form {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border);
}
.fund-filter-form .form-group { margin-bottom: 0; }
.fund-filter-form .form-control { width: auto; }

.fund-history-list { display: flex; flex-direction: column; gap: 12px; }

.fund-history-empty {
  text-align: center; padding: 50px 20px; color: var(--text-muted);
}
.fund-history-empty i { font-size: 34px; opacity: .5; margin-bottom: 10px; display: block; }
.fund-history-empty p { margin: 0; font-size: 13.5px; }

/* "Bar style": a rounded row with a colored left stripe matching status
   (green/amber/red) — this is the whole point of not using a table, so
   status is readable at a glance and nothing needs horizontal scrolling
   on a phone. */
.fund-row {
  background: var(--card-alt); border-radius: 12px; padding: 14px 16px;
  border-left: 4px solid var(--border-strong);
}
.fund-row.ok { border-left-color: var(--green); }
.fund-row.warn { border-left-color: var(--amber); }
.fund-row.bad { border-left-color: var(--red); }

.fund-row-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fund-amount { font-family: var(--display, inherit); font-size: 19px; font-weight: 800; color: var(--text); }
.fund-amount-net { font-size: 11.5px; color: var(--green); font-weight: 600; margin-top: 2px; }

/* ---------------------------------------------------------------- Inline field-status icon (live validation) */
/* Same pattern originally built inline for register.php's referral/email
   checks — promoted to the shared stylesheet so other pages (like
   wallet-pay's member-ID check) can reuse it instead of re-inlining it. */
.input-icon-wrap { position: relative; }
.input-icon-wrap .form-control { padding-right: 42px; }
.input-status-icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.input-status-icon.show { opacity: 1; }
.input-status-icon .spinner-ring {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.18);
  border-top-color: var(--gold); border-radius: 50%; animation: spin .6s linear infinite;
}
.input-status-icon .bi-check-circle-fill { color: var(--green); }
.input-status-icon .bi-x-circle-fill { color: var(--red); }

.fund-row-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}
.fund-row-meta span { display: flex; align-items: center; gap: 5px; }
.fund-tx-link {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0;
  color: var(--gold-bright); font-size: 12px; font-weight: 700; cursor: pointer;
}
.fund-tx-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .fund-filter-form { flex-direction: column; align-items: stretch; gap: 10px; }
  .fund-filter-form .form-control { width: 100%; }
  .fund-filter-form .btn { width: 100%; }
  .fund-row-main { flex-wrap: wrap; }
  .fund-row-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------------------------------------------------------------- Withdraw page */
/* Generic balance-strip, same visual as .deposit-balance-strip but under
   a neutral name since it's shared by both deposit and withdraw. */
.wallet-balance-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-alt); border-radius: 14px; padding: 18px 22px;
}
.wallet-balance-strip .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.wallet-balance-strip .val { font-family: var(--display, inherit); font-size: 26px; font-weight: 800; color: var(--gold-bright); margin-top: 4px; }
.wallet-balance-strip i { font-size: 26px; color: var(--gold); opacity: .6; }

.withdraw-fee-card {
  background: var(--bg-alt); border-radius: 12px; padding: 16px 18px;
  margin-top: 4px;
}
.withdraw-fee-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--text-dim); padding: 6px 0;
}
.withdraw-fee-row b { font-weight: 700; color: var(--text); }
.withdraw-fee-row.total {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 14.5px; color: var(--text);
}
.withdraw-fee-row.total b { font-size: 17px; color: var(--green); }

@media (max-width: 420px) {
  .wallet-balance-strip { padding: 14px 16px; }
  .wallet-balance-strip .val { font-size: 21px; }
}

@media (max-width: 576px) {
  .stepper-label { display: none; }
  .sec-qr-box { width: 100%; max-width: 200px; }
  .sec-secret-box { font-size: 13px; letter-spacing: .04em; }

}

/* ---------------------------------------------------------------- Team / referral page */
.row-3-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .row-3-stat { grid-template-columns: 1fr; } }

.team-stat-card {
  background: var(--card-alt); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; text-align: center;
}
.team-stat-card .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.team-stat-card .val { font-family: var(--display, inherit); font-size: 26px; font-weight: 800; color: var(--text); margin-top: 6px; }
.team-stat-card.ok .val { color: var(--green); }
.team-stat-card.bad .val { color: var(--red); }

.team-progress-track { height: 8px; border-radius: 999px; background: var(--card-alt); overflow: hidden; }
.team-progress-fill {
  height: 100%; border-radius: 999px; transition: width .3s ease;
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  animation: gb-progress-stripes 1s linear infinite;
}
@keyframes gb-progress-stripes {
  from { background-position: 1rem 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .team-progress-fill { animation: none; }
}
.team-progress-fill.ok { background-color: var(--green); }
.team-progress-fill.warn { background-color: var(--amber); }
.team-progress-fill.bad { background-color: var(--red); }

.team-view-btn {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--gold-dim); color: var(--gold-bright); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;
  transition: background .15s ease;
}
.team-view-btn:hover { background: var(--gold); color: #1a1305; }

/* ---------------------------------------------------------------- Referral share card */
.referral-share-card { overflow: hidden; }
.referral-share-body { padding: 0 24px 26px; text-align: center; margin-top: -20px; }
.referral-share-icon {
  width: 56px; height: 56px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--gold-dim); color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  border: 4px solid var(--card);
}
.referral-share-title { font-size: 19px; font-weight: 700; color: var(--text); margin: 0 0 4px; }

@media (max-width: 480px) {
  .referral-share-body { padding: 0 16px 22px; }
}

/* ---------------------------------------------------------------- Dashboard metric cards */
/* Explicit grid with its own hard-coded breakpoints (not the shared
   .stat-grid) so a future inline style on one page can never silently
   defeat responsiveness for every other page using .stat-grid — this
   exact bug (a hardcoded `style="grid-template-columns:repeat(4,1fr)"`
   overriding .stat-grid's own working mobile rules, since inline styles
   beat external media queries on specificity) is what broke the
   dashboard's 4 cards on mobile before. */
.gb-metric-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .gb-metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .gb-metric-grid { gap: 10px; } }

.gb-metric-card {
  background: linear-gradient(180deg, var(--card), var(--card-alt));
  border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  transition: transform .15s ease, border-color .15s ease;
}
.gb-metric-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.gb-metric-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  margin-bottom: 12px;
}
.gb-metric-icon.gold { background: var(--gold-dim); color: var(--gold-bright); }
.gb-metric-icon.green { background: var(--green-dim); color: var(--green); }
.gb-metric-icon.blue { background: rgba(56,139,253,0.15); color: #5aa9ff; }
.gb-metric-icon.amber { background: var(--amber-dim); color: var(--amber); }
.gb-metric-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.gb-metric-value { font-size: 17px; font-weight: 800; color: var(--text); margin-top: 5px; letter-spacing: -.2px; }

@media (max-width: 420px) {
  .gb-metric-card { padding: 12px; }
  .gb-metric-icon { width: 32px; height: 32px; font-size: 14px; margin-bottom: 8px; }
  .gb-metric-value { font-size: 14.5px; }
}

/* Ensures the two cards in the top row (live gold price / best
   opportunity) always match height instead of whichever has less
   content looking shorter next to its neighbor. */
.gb-align-stretch { align-items: stretch; }
.gb-align-stretch > * { height: 100%; }

.chart-wrap { position: relative; height: 320px; }
/* =====================================================================
   Live Gold Price Comparison — standalone terminal page.
   Uses the same CSS variables as style.css (--gold, --bg, --green, etc.)
   plus layout specific to this page's card/table hybrid design.
   ===================================================================== */

.lc-body {
  min-height: 100vh;
  padding-bottom: 24px;
}

/* ---------------------------------------------------------------- Header */
.lc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 14, 23, 0.9);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.lc-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lc-hamburger {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lc-logo {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  background: linear-gradient(135deg, var(--gold-bright), #a9791f);
  display: flex; align-items: center; justify-content: center;
  color: #1a1305; font-size: 16px;
}
.lc-title-block { min-width: 0; }
.lc-title { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-subtitle { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.lc-status-badge {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--green-dim); color: var(--green);
  padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em;
}
.lc-status-badge.error { background: var(--red-dim); color: var(--red); }
.lc-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: lc-pulse 1.6s ease-in-out infinite;
}
@keyframes lc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------------------------------------------------------------- Summary cards */
.lc-summary-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  padding: 12px 0px 4px;
}
@media (min-width: 700px) { .lc-summary-row { grid-template-columns: repeat(4, 1fr); } }
.lc-summary-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
}
.lc-summary-card i { font-size: 16px; color: var(--gold); flex-shrink: 0; }
.lc-summary-label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.lc-summary-value { font-size: 13px; font-weight: 700; margin-top: 1px; }
.lc-status-open { color: var(--green); }

/* ---------------------------------------------------------------- Desktop table head (hidden on mobile) */
.lc-table-head {
  display: none;
  padding: 12px 16px;
  margin: 12px 0px 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gold-bright); font-weight: 700;
}
@media (min-width: 900px) {
  .lc-table-head {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.9fr 1.4fr 0.9fr 1fr 1.3fr;
    align-items: center;
    gap: 10px;
  }
  .lc-col-usd, .lc-col-order { text-align: center; }
}
.lc-col i { margin-right: 4px; opacity: .8; }

/* ---------------------------------------------------------------- Rows container */
.lc-rows {
  padding: 10px 0px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 900px) {
  .lc-rows {
    padding: 0 0px;
    gap: 0;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
  }
}

/* ---------------------------------------------------------------- One row */
.lc-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  will-change: transform;
}
@media (min-width: 900px) {
  .lc-row {
    border-radius: 0;
    border-left: none; border-right: none; border-top: none;
    padding: 10px 4px;
  }
  .lc-row:last-child { border-bottom: none; }
}

/* Two layout blocks per row: mobile card, desktop table row. Only one is
   visible at a time — both hold the same data-field elements so JS can
   update every value once and have it apply to whichever is shown. */
.lc-row-desktop { display: none; }
@media (min-width: 900px) {
  .lc-row-mobile { display: none; }
  .lc-row-desktop {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.9fr 1.4fr 0.9fr 1fr 1.3fr;
    align-items: center;
    gap: 10px;
  }
  .lc-row-desktop .lc-col-usd,
  .lc-row-desktop .lc-col-order { text-align: center; }
  .lc-row-desktop .lc-market { flex-direction: row; }
  .lc-row-desktop .lc-market.lc-market-right { flex-direction: row-reverse; text-align: right; }
}

/* Mobile: 3-section layout (left market / center order-profit / right market) */
.lc-row-mobile-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.lc-market {
  display: flex; flex-direction: column; gap: 2px;
}
.lc-market.lc-market-right { text-align: right; align-items: flex-end; }
.lc-market-flag { font-size: 20px; line-height: 1; }
.lc-market-name { font-size: 12.5px; font-weight: 700; }
.lc-market-currency { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.lc-market-local { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-top: 2px; }
.lc-market-usd { font-size: 15px; font-weight: 800; color: var(--gold-bright); }

/* Center: profit + place order */
.lc-center {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 2px;
}
.lc-profit {
  display: flex; align-items: center; gap: 4px;
  font-size: 19px; font-weight: 800;
  transition: transform .25s ease;
}
.lc-profit.text-up { color: var(--green); }
.lc-profit.text-down { color: var(--red); }
.lc-profit.text-neutral { color: var(--text-muted); }
.lc-profit-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); font-weight: 700; margin-top: -4px;
}
.lc-place-order-btn {
  background: linear-gradient(135deg, var(--gold-bright), #b3891f);
  color: #1a1305; border: none; border-radius: 9px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  padding: 9px 18px; cursor: pointer; width: 100%;
  transition: filter .12s, transform .08s;
  min-height: 40px;
}
.lc-place-order-btn:hover { filter: brightness(1.08); }
.lc-place-order-btn:active { transform: scale(0.97); }
@media (min-width: 900px) { .lc-place-order-btn { padding: 8px 14px; } }

/* Flash animation on value change */
@keyframes lc-flash-green {
  0% { background: rgba(34,197,94,0.35); }
  100% { background: transparent; }
}
@keyframes lc-flash-red {
  0% { background: rgba(239,68,68,0.35); }
  100% { background: transparent; }
}
.lc-flash-up { animation: lc-flash-green 700ms ease-out; border-radius: 6px; }
.lc-flash-down { animation: lc-flash-red 700ms ease-out; border-radius: 6px; }

/* ---------------------------------------------------------------- Footer */
.lc-footer {
  margin: 16px 0px 0;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--text-muted);
}
.lc-footer-refresh { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.lc-footer-legend { display: flex; gap: 14px; font-weight: 600; }
.lc-footer-legend span { display: flex; align-items: center; gap: 3px; }

/* ---------------------------------------------------------------- Connection error notice */
.lc-connection-error {
  margin: 10px 16px 0;
  padding: 10px 14px;
  background: var(--red-dim);
  color: var(--red);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 8px;
}
.lc-connection-error.show { display: flex; }

/* ---------------------------------------------------------------- Sidebar override
   This page has no permanent sidebar-reserved layout (it's meant to fill
   the whole screen edge-to-edge), so the shared sidebar component is
   forced off-canvas here on EVERY screen size, not just mobile — unlike
   the normal app shell where it's always visible on desktop. Higher
   specificity (body.lc-body ...) wins over style.css's base rule. */
body.lc-body .sidebar {
  transform: translateX(-100%);
  transition: transform .25s ease;
}
body.lc-body .sidebar.open {
  transform: translateX(0);
}



/* ---------------------------------------------------------------- Dashboard: golden gradient overview cards */
.gb-gold-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .gb-gold-grid { grid-template-columns: repeat(2, 1fr); } }

.gb-gold-card {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 20px;
  background: linear-gradient(135deg, #f4d35e 0%, #d4af37 48%, #a9791f 100%);
  color: #1a1305;
  box-shadow: 0 10px 26px rgba(212,175,55,0.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gb-gold-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(212,175,55,0.4); }

.gb-gold-card::before {
  content: ""; position: absolute; top: -60%; left: -60%;
  width: 35%; height: 220%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: rotate(20deg);
  animation: gb-gold-shine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gb-gold-shine {
  0%   { left: -60%; }
  35%  { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-gold-card::before { animation: none; display: none; }
}

.gb-gold-card-icon {
  position: absolute; top: -14px; right: -10px;
  font-size: 68px; opacity: .16; color: #1a1305;
  pointer-events: none;
}
.gb-gold-card-label {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  opacity: .72;
}
.gb-gold-card-value {
  position: relative; z-index: 1;
  font-size: 22px; font-weight: 800; margin-top: 6px; letter-spacing: -.2px;
}

@media (max-width: 420px) {
  .gb-gold-card { padding: 16px; }
  .gb-gold-card-value { font-size: 18px; }
  .gb-gold-card-icon { font-size: 54px; }
}

/* ---------------------------------------------------------------- Dashboard: Total Network card (wide, composite) */
.gb-network-card {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 22px;
  background: linear-gradient(180deg, var(--card), var(--card-alt));
  border: 1px solid rgba(212,175,55,0.3);
  margin-bottom: 16px;
}
.gb-network-header {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 18px;
}
.gb-network-header i { color: var(--gold-bright); font-size: 18px; }
.gb-network-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 700px) { .gb-network-grid { grid-template-columns: repeat(2, 1fr); } }
.gb-network-stat { text-align: center; padding: 14px 10px; border-radius: 12px; background: var(--bg-alt); }
.gb-network-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.gb-network-stat .val { font-size: 22px; font-weight: 800; color: var(--gold-bright); margin-top: 6px; }
.gb-network-stat.ok .val { color: var(--green); }
.gb-network-stat.bad .val { color: var(--red); }

/* ---------------------------------------------------------------- Dashboard: Business Strategy / Remaining Team Profit */
.gb-strategy-card {
  border-radius: 16px; padding: 22px;
  background: linear-gradient(180deg, var(--card), var(--card-alt));
  border: 1px solid rgba(212,175,55,0.3);
  margin-bottom: 18px;
}


.gb-gold-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 480px) { .gb-gold-grid-2 { grid-template-columns: 1fr; } }

.gb-network-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gb-network-grid .span-2 { grid-column: 1 / -1; }

.gb-profit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.gb-strategy-divider { height: 1px; background: var(--border); margin: 20px 0; }

.gb-ratio-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.gb-ratio-seg.gold { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.gb-ratio-seg.dim { background: var(--card-alt); }
.gb-ratio-caption { font-size: 12.5px; color: var(--text-dim); font-weight: 700; margin-top: 8px; }



.team-progress-fill.ok { background-color: var(--green); }
.team-progress-fill.warn { background-color: var(--amber); }
.team-progress-fill.bad { background-color: var(--red); }
.team-progress-fill.running { background-color: var(--blue); }

/* ---------------------------------------------------------------- Arbitrage order history (running orders) */
.arb-order-countdown {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--text-dim); font-weight: 600; margin-top: 12px; margin-bottom: 6px;
}
.arb-order-countdown b { font-family: var(--display, inherit); color: var(--text); font-size: 14px; letter-spacing: .03em; }
.arb-order-detail-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
@media (max-width: 480px) { .arb-order-detail-grid { grid-template-columns: 1fr; } }
.arb-order-detail-item .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.arb-order-detail-item .val { font-size: 13px; color: var(--text); margin-top: 2px; word-break: break-word; }



/* ---------------------------------------------------------------- Arbitrage page: running order golden card */
.gb-order-gold-card {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 20px;
  background: linear-gradient(135deg, #f4d35e 0%, #d4af37 48%, #a9791f 100%);
  color: #1a1305;
  box-shadow: 0 10px 26px rgba(212,175,55,0.28);
  margin-bottom: 20px;
}
.gb-order-gold-card::before {
  content: ""; position: absolute; top: -60%; left: -60%;
  width: 35%; height: 220%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: rotate(20deg);
  animation: gb-gold-shine 5s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .gb-order-gold-card::before { animation: none; display: none; }
}

.gb-order-gold-header {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.gb-order-gold-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  opacity: .75; display: flex; align-items: center; gap: 6px;
}

.gb-order-profit-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a1305; color: var(--gold-bright);
  font-size: 12.5px; font-weight: 800;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.gb-order-gold-amount {
  position: relative; z-index: 1;
  font-size: 28px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 16px;
}
.gb-order-gold-amount-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  opacity: .65; margin-left: 8px;
}

.gb-order-gold-inset {
  position: relative; z-index: 1;
  background: rgba(10, 14, 23, 0.82);
  border-radius: 12px; padding: 14px 16px;
}
.gb-order-gold-inset .arb-order-countdown { margin-top: 0; }
.gb-order-gold-inset .arb-order-detail-grid { border-top-color: var(--border); }

.gb-order-gold-card .gb-gold-card-icon { opacity: .14; }

@media (max-width: 420px) {
  .gb-order-gold-card { padding: 16px; }
  .gb-order-gold-amount { font-size: 22px; }
  .gb-order-profit-badge { font-size: 11.5px; padding: 5px 10px; }
}


.gb-order-gold-inset {
  position: relative; z-index: 1;
  background: var(--bg); /* fully solid — the old rgba() overlay let gold bleed through and muddy the text */
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px; padding: 14px 16px;
}
.gb-order-gold-inset .arb-order-countdown { margin-top: 0; }
.gb-order-gold-inset .arb-order-detail-grid { border-top-color: var(--border); }

.arb-flag { font-size: 16px; line-height: 1; vertical-align: -2px; margin-right: 2px; }


.gb-gold-card-flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gb-gold-card-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a1305; color: var(--gold-bright);
  font-size: 12.5px; font-weight: 800;
  padding: 9px 16px; border-radius: 10px;
  white-space: nowrap; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform .15s ease, filter .15s ease;
}
.gb-gold-card-btn:hover { filter: brightness(1.15); transform: translateY(-1px); color: var(--gold-bright); }