/*
 * Flusoil — Dark Charcoal + Oil-Gold Theme
 * Primary accent: #A88A63  (crude oil gold)
 * Background:     #0D0D0B  (near-black charcoal)
 * All logic intact — visual layer only.
 */

:root {
  --radius: 0.875rem;
  --font-sans: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* ── Backgrounds ─────────────────────────────── */
  --background:          #0D0D0B;
  --background-elevated: #131210;
  --foreground:          #F0EBE3;
  --foreground-muted:    #9E9286;

  /* ── Card / surface ──────────────────────────── */
  --card:              #1A1714;
  --card-hover:        #211E1A;
  --card-foreground:   #F0EBE3;
  --popover:           #1E1B17;
  --popover-foreground:#F0EBE3;

  /* ── Primary — oil gold ──────────────────────── */
  --primary:           #7A6247;
  --primary-strong:    #A88A63;
  --primary-foreground:#FFFFFF;
  --primary-glow:      rgba(168,138,99,0.20);

  /* ── Gold palette ────────────────────────────── */
  --gold:              #A88A63;
  --gold-strong:       #C4A47A;
  --gold-dim:          #5C4935;
  --gold-foreground:   #120E09;
  --gold-glow:         rgba(168,138,99,0.22);

  /* ── Secondary surfaces ──────────────────────── */
  --secondary:           #1E1B17;
  --secondary-foreground:#F0EBE3;
  --muted:               #221F1B;
  --muted-foreground:    #7A6E64;
  --accent:              #252118;
  --accent-foreground:   #F0EBE3;

  /* ── Semantic ────────────────────────────────── */
  --destructive:           #E5484D;
  --destructive-foreground:#FFFFFF;
  --success:               #22C55E;
  --success-dim:           #15803D;
  --warning:               #F5A524;
  --danger:                #E5484D;
  --info:                  #3B82F6;

  /* ── Borders & inputs ───────────────────────── */
  --border:        rgba(168,138,99,0.14);
  --border-strong: rgba(168,138,99,0.24);
  --border-accent: rgba(168,138,99,0.40);
  --input:         #17140F;
  --input-focus:   #1E1A14;
  --ring:          var(--gold);

  /* ── Shadows ─────────────────────────────────── */
  --shadow-glow:     0 0 40px -8px rgba(168,138,99,0.35);
  --shadow-card:     0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.8);
  --shadow-elevated: 0 20px 50px -20px rgba(0,0,0,0.7), 0 0 0 1px var(--border);

  /* ── Chart palette ───────────────────────────── */
  --chart-up:      #22C55E;
  --chart-down:    #E5484D;
  --chart-neutral: #A88A63;
  --chart-grid:    rgba(255,255,255,0.05);
}

html { min-height:100%; margin:0; overflow-x:clip; }
body { min-height:100%; margin:0; overflow-x:clip; }
*,*::before,*::after { box-sizing:border-box; }
html, body, button, input, select, textarea { font-family: var(--font-sans); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: fixed; z-index: 200; top: .75rem; left: .75rem;
  transform: translateY(-150%);
  border: 1px solid var(--border-accent); border-radius: .625rem;
  background: var(--card); color: var(--foreground);
  padding: .75rem 1rem; font-size: .875rem; font-weight: 600;
  box-shadow: var(--shadow-elevated);
  transition: transform .18s ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* Light mode stub */
.light {
  --background:    #F5F0E8;
  --foreground:    #1A1410;
  --card:          #FBF7F0;
  --card-foreground:#1A1410;
  --muted:         #EDE8DF;
  --muted-foreground:#6B5F52;
  --border:        rgba(168,138,99,0.20);
  --input:         #FBF7F0;
  --primary:       #7A6247;
  --primary-strong:#A88A63;
}

/* ── Glass ─────────────────────────────────────────────────────────── */
.glass {
  background-color: rgba(26,23,20,0.75);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--border);
}
.glass-strong {
  background-color: rgba(13,13,11,0.92);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border);
}

/* ── Grid / background patterns ────────────────────────────────────── */
.grid-pattern {
  background-image:
    linear-gradient(to right, rgba(168,138,99,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168,138,99,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
.grid-pattern-fine {
  background-image:
    linear-gradient(to right, rgba(168,138,99,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168,138,99,0.025) 1px, transparent 1px);
  background-size: 22px 22px;
}
.radial-spot {
  background-image: radial-gradient(circle at center,
    rgba(168,138,99,0.18) 0%, transparent 62%);
}
.radial-spot-brand {
  background-image: radial-gradient(circle at 50% 0%,
    rgba(168,138,99,0.22) 0%, transparent 60%);
}
.oil-accent {
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(168,138,99,0.07), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(100,80,50,0.09), transparent 60%);
}

/* ── Text gradients ─────────────────────────────────────────────────── */
.gradient-text {
  background-image: linear-gradient(115deg, #A88A63 0%, #C4A47A 45%, #D4B483 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-text-brand {
  background-image: linear-gradient(130deg, #D4B483 0%, #A88A63 50%, #C4A47A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-text-gold {
  background-image: linear-gradient(115deg, #D4B483 0%, #A88A63 50%, #C4A47A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Data labels ─────────────────────────────────────────────────────── */
.hairline { border: 1px solid var(--border); }
.terminal-panel {
  background: linear-gradient(180deg, #161310 0%, #0D0D0B 100%);
  border: 1p  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.data-value {
  font-family: ui-monospace,'JetBrains Mono',Menlo,monospace;
  font-variant-numeric: tabular-nums; font-weight: 600;
}

/* ── Section labels ──────────────────────────────────────────────────── */
.section-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: ui-monospace,'JetBrains Mono',Menlo,monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.section-label::before { content:''; width:8px; height:1px; background:currentColor; opacity:.7; }
.section-label-accent {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem; border-radius: 999px;
  background: rgba(168,138,99,0.09); border: 1px solid rgba(168,138,99,0.22);
  font-family: ui-monospace,'JetBrains Mono',Menlo,monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
/* .section-label-gold { alias } */

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-gold,
.btn-gold-outline {
  display: inline-flex; min-height: 2.875rem; align-items: center;
  justify-content: center; gap: .5rem; border-radius: .75rem;
  padding: .75rem 1rem; font-size: .875rem; font-weight: 700;
  line-height: 1.25; text-align: center;
}

/* Primary — gold gradient */
.btn-primary {
  background: linear-gradient(180deg, var(--gold-strong) 0%, var(--gold) 100%);
  color: #120E09;
  border: 1px solid rgba(196,164,122,0.45);
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset,
              0 10px 24px -10px rgba(168,138,99,0.55);
  transition: filter .18s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover  { filter: brightness(1.1); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 18px 36px -12px rgba(168,138,99,0.65); }
.btn-primary:active { transform: translateY(1px); }

/* Secondary */
.btn-secondary {
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--border-strong);
  transition: background .2s ease, border-color .2s ease;
}
.btn-secondary:hover { background: var(--card-hover); border-color: var(--border-accent); }

/* Ghost */
.btn-ghost {
  background: transparent; color: var(--muted-foreground);
  border: 1px solid transparent;
  transition: color .2s ease, background .2s ease;
}
.btn-ghost:hover { color: var(--foreground); background: var(--muted); }

.navbar-actions > a,
.navbar-actions > form,
.navbar-actions > form > button {
  display: inline-flex;
  min-height: 2.875rem;
  align-items: center;
}
.navbar-actions > form { margin: 0; }

.password-toggle { right: .25rem; transform: translateY(-50%); }
.password-toggle:focus,
.password-toggle:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(168,138,99,.72); }

.auth-form-panel { overflow-x:hidden; padding-top:1.25rem!important; padding-bottom:1.25rem!important; }
.auth-form-content { place-items:start center; padding-top:1.25rem; padding-bottom:2rem; }
.auth-visual-content { margin-top:1.25rem; margin-bottom:0; }
.auth-form-panel input,
.auth-form-panel select,
.auth-form-panel textarea { max-width:100%; min-width:0; }

@media (max-width:767px) {
  .auth-form-panel { padding-inline:1rem; }
  .auth-form-panel > div { min-width:0; }
}

.dashboard-menu-close-icon { display:none; }
#sidebar-trigger[aria-expanded="true"] .dashboard-menu-open-icon { display:none; }
#sidebar-trigger[aria-expanded="true"] .dashboard-menu-close-icon { display:block; }

/* Gold filled */
.btn-gold {
  background: linear-gradient(180deg, var(--gold-strong) 0%, var(--gold) 100%);
  color: #120E09;
  border: 1px solid rgba(196,164,122,0.45);
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 10px 24px -10px rgba(168,138,99,0.50);
  transition: filter .18s ease, transform .15s ease;
}
.btn-gold:hover  { filter: brightness(1.1); }
.btn-gold:active { transform: translateY(1px); }

/* Gold outline */
.btn-gold-outline {
  background: rgba(168,138,99,0.07); color: var(--gold);
  border: 1px solid var(--border-accent);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-gold-outline:hover { background: rgba(168,138,99,0.14); border-color: var(--gold); color: var(--gold-strong); }

/* Size helpers shared by public CTAs */
.contact-submit   { min-width: 10.5rem; }
.about-cta        { min-width: 10.75rem; padding-inline: 1.125rem; }
.about-cta--primary { box-shadow: 0 12px 28px -14px rgba(168,138,99,0.72); }
.help-inline-cta  { min-height: 3rem; padding-inline: 1rem; border-color: var(--border-accent); color: var(--foreground); }
.help-final-action{ min-width: 10.75rem; min-height: 3.125rem; }

/* ═══════════════════════════════════════════════════════════════
   INPUTS & FORMS
   ═══════════════════════════════════════════════════════════════ */
.input-base, .select-base {
  width: 100%; border-radius: calc(var(--radius) - 2px);
  background: var(--input); border: 1px solid var(--border-strong);
  color: var(--foreground); padding: .75rem 1rem; font-size: .875rem; line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input-base::placeholder, .select-base::placeholder { color: var(--muted-foreground); opacity: .8; }
.input-base:focus, .select-base:focus {
  outline: none; background: var(--input-focus);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(168,138,99,0.18);
}
.input-base:disabled, .select-base:disabled { opacity: .55; cursor: not-allowed; }
.select-base {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6E64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 1rem;
  padding-right: 2.5rem; cursor: pointer; background-color: var(--input);
}
.select-base option { background: var(--card); color: var(--foreground); }

.contact-form-control {
  background-color: var(--input) !important; color: var(--foreground) !important;
  border-color: var(--border-strong) !important;
}
.dark .contact-form-control  { color-scheme: dark; }
.light .contact-form-control { color-scheme: light; }
.contact-form-control::placeholder { color: var(--muted-foreground) !important; opacity: 1; }
.contact-form-control:hover  { border-color: var(--border-accent) !important; }
.contact-form-control:focus  { background-color: var(--input-focus) !important; }
.contact-form select.contact-form-control option { background: #1A1714; color: #F0EBE3; }
.contact-form select.contact-form-control option:checked { background: var(--gold-dim); color: #fff; }
.contact-topic-select { background-image:none!important; }

/* OTP inputs */
.otp-input {
  flex: 1 1 0; max-width: 3.25rem; aspect-ratio: 1/1.1;
  border-radius: calc(var(--radius) - 2px);
  background: var(--input); border: 1px solid var(--border-strong);
  color: var(--foreground); text-align: center;
  font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .12s ease;
}
.otp-input:focus {
  outline: none; background: var(--input-focus); border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(168,138,99,0.18); transform: translateY(-1px);
}
.otp-input:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 420px) { .otp-input { max-width: 2.75rem; font-size: 1.2rem; } }
@media (max-width: 360px) { .otp-input { max-width: 2.4rem;  font-size: 1.1rem; } }

/* ═══════════════════════════════════════════════════════════════
   BADGES & CARDS
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem; border-radius: 999px;
  font-size: .70rem; font-weight: 600; line-height: 1;
  letter-spacing: .02em; border: 1px solid transparent;
}
.badge-success { background: rgba(34,197,94,0.12);  color: #4ADE80; border-color: rgba(34,197,94,0.24); }
.badge-danger  { background: rgba(229,72,77,0.12);   color: #F87171; border-color: rgba(229,72,77,0.24); }
.badge-warning { background: rgba(245,165,36,0.12);  color: #FBBF24; border-color: rgba(245,165,36,0.24); }
.badge-info    { background: rgba(59,130,246,0.12);  color: #60A5FA; border-color: rgba(59,130,246,0.24); }
.badge-default { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
.badge-gold    { background: rgba(168,138,99,0.12); color: var(--gold); border-color: rgba(168,138,99,0.28); }
.badge-dot::before {
  content:''; width:6px; height:6px; border-radius:999px;
  background:currentColor; box-shadow:0 0 0 3px currentColor; opacity:.55;
}

/* Card base */
.card-base {
  background: var(--card); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card-base:hover { border-color: var(--border-accent); box-shadow: var(--shadow-card); }

/* Stat cards */
.stat-card {
  position: relative; border-width: 1px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, box-shadow .3s ease;
  cursor: default;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card--primary { border-color: rgba(168,138,99,0.25); }
.stat-card--success { border-color: rgba(34,197,94,0.22); }
.stat-card--warning { border-color: rgba(245,165,36,0.22); }
.stat-card--danger  { border-color: rgba(229,72,77,0.22); }
.stat-card--info    { border-color: rgba(59,130,246,0.22); }
.stat-card--gold    { border-color: rgba(168,138,99,0.25); }
.stat-card--primary:hover,.stat-card--gold:hover { border-color:var(--gold); box-shadow:0 0 28px -8px rgba(168,138,99,0.30); }
.stat-card--success:hover { border-color:var(--success); box-shadow:0 0 28px -8px rgba(34,197,94,0.28); }
.stat-card--warning:hover { border-color:var(--warning); box-shadow:0 0 28px -8px rgba(245,165,36,0.28); }
.stat-card--danger:hover  { border-color:var(--danger);  box-shadow:0 0 28px -8px rgba(229,72,77,0.28); }
.stat-card--info:hover    { border-color:var(--info);    box-shadow:0 0 28px -8px rgba(59,130,246,0.28); }

/* Stat icons */
.stat-icon { display:grid; place-items:center; border-radius:calc(var(--radius)-2px); flex-shrink:0; }
.stat-icon--primary,.stat-icon--gold { background:rgba(168,138,99,0.10); color:var(--gold); border:1px solid rgba(168,138,99,0.22); }
.stat-icon--success { background:rgba(34,197,94,0.10); color:#4ADE80; border:1px solid rgba(34,197,94,0.22); }
.stat-icon--warning { background:rgba(245,165,36,0.10); color:#FBBF24; border:1px solid rgba(245,165,36,0.22); }
.stat-icon--danger  { background:rgba(229,72,77,0.10);  color:#F87171; border:1px solid rgba(229,72,77,0.22); }
.stat-icon--info    { background:rgba(59,130,246,0.10); color:#60A5FA; border:1px solid rgba(59,130,246,0.22); }
.stat-icon--default { background:var(--muted); color:var(--muted-foreground); border:1px solid var(--border); }

/* Market cards */
.market-card { position:relative; border-width:1px; transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s; cursor:default; }
.market-card:hover { transform:translateY(-2px); }
.market-card--gainer { border-color:rgba(34,197,94,0.22); }
.market-card--active { border-color:rgba(168,138,99,0.25); }
.market-card--loser  { border-color:rgba(229,72,77,0.22); }
.market-card--gainer:hover { border-color:var(--success); box-shadow:0 0 28px -8px rgba(34,197,94,0.28); }
.market-card--active:hover { border-color:var(--gold);    box-shadow:0 0 28px -8px rgba(168,138,99,0.28); }
.market-card--loser:hover  { border-color:var(--danger);  box-shadow:0 0 28px -8px rgba(229,72,77,0.28); }

/* ═══════════════════════════════════════════════════════════════
   MARKET TICKER / STRIPS
   ═══════════════════════════════════════════════════════════════ */
.market-ticker { position:relative; border-block:1px solid var(--border); background:color-mix(in srgb,var(--card) 88%,var(--background)); padding:.875rem 0 .625rem; }
.market-ticker__eyebrow { color:var(--muted-foreground); font-family:ui-monospace,'JetBrains Mono',monospace; font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.market-ticker__status { border:1px solid var(--border); border-radius:999px; padding:.25rem .55rem; color:var(--muted-foreground); font-size:.65rem; }
.market-ticker__rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(10rem,1fr); gap:.625rem; overflow-x:auto; padding:.125rem 0 .625rem; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; scroll-snap-type:x proximity; }
.market-ticker__item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.25rem .75rem; min-height:4.25rem; padding:.75rem .875rem; border:1px solid var(--border); border-radius:.75rem; background:rgba(13,13,11,0.65); font-family:ui-monospace,'JetBrains Mono',monospace; font-size:.75rem; scroll-snap-align:start; }
.market-ticker__item strong { font-size:.9rem; font-weight:700; color:var(--foreground); }
.market-ticker__item>:last-child { grid-column:2; font-size:.7rem; }
.market-ticker__name { grid-column:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted-foreground); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.market-ticker__note { margin:0; color:var(--muted-foreground); font-size:.68rem; line-height:1.4; }
.market-primary-card { display:flex; min-height:13.75rem; flex-direction:column; align-items:flex-start; }
.market-primary-card>:last-child { margin-top:auto; }
@media (min-width:1024px) {
  .market-ticker__rail { grid-auto-flow:initial; grid-template-columns:repeat(7,minmax(0,1fr)); overflow:visible; }
  .market-ticker__item { grid-auto-rows:min-content; grid-template-columns:1fr; gap:.35rem; min-height:5rem; }
  .market-ticker__item>:last-child { grid-column:auto; }
}
.market-panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.market-range-tabs { display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:.25rem; padding:.25rem; border:1px solid var(--border); border-radius:.75rem; background:var(--background); color:var(--muted-foreground); font-size:.75rem; font-weight:600; }
.market-range-tabs button { min-width:2.35rem; padding:.375rem .5rem; border-radius:.5rem; }
.market-chart-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-top:.875rem; padding-top:.875rem; border-top:1px solid var(--border); }
.market-chart-meta span { display:flex; min-width:0; flex-direction:column; gap:.2rem; }
.market-chart-meta small { color:var(--muted-foreground); font-family:ui-monospace,'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; }
.market-chart-meta strong { overflow:hidden; color:var(--foreground); font-size:.78rem; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:480px) {
  .market-panel-header { flex-direction:column; }
  .market-range-tabs { width:100%; justify-content:space-between; }
  .market-range-tabs button { flex:1; }
  .market-chart-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .market-primary-card { min-height:11.5rem; }
}

/* Ticker strip (homepage) */
.ticker-strip { background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; white-space:nowrap; }
.ticker-item { display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1.5rem; border-right:1px solid var(--border); font-variant-numeric:tabular-nums; }
@keyframes ticker-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-track { display:inline-block; animation:ticker-scroll 60s linear infinite; }
@media (prefers-reduced-motion:reduce) { .ticker-track { animation:none; } }

/* ═══════════════════════════════════════════════════════════════
   ABOUT / HELP / CONTACT PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
.about-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.about-summary-card {
  display:flex; min-height:9.5rem; flex-direction:column; align-items:flex-start;
  justify-content:space-between; padding:1rem;
  border:1px solid var(--border); border-radius:.875rem; background:rgba(26,23,20,0.72);
}
.about-summary-card .stat-icon { margin-bottom:1rem; }
.about-summary-card__value { margin-top:auto; color:var(--foreground); font-size:clamp(1rem,2.4vw,1.25rem); font-weight:700; line-height:1.15; }
@media (min-width:640px) {
  .about-summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .about-summary-card { min-height:10.25rem; padding:1.125rem; }
}

.faq-toggle { touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background-color .2s ease,color .2s ease; }
.faq-toggle:hover { background:rgba(168,138,99,0.04); }
.faq-toggle:focus-visible { position:relative; z-index:1; }
.faq-content { display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .24s ease,opacity .2s ease,visibility 0s linear .24s; }
.faq-content>* { min-height:0; overflow:hidden; }
.faq-toggle[aria-expanded="true"] .faq-content { grid-template-rows:1fr; opacity:1; visibility:visible; transition-delay:0s; }
.faq-toggle i[data-lucide] { transition:transform .22s ease; }
.faq-toggle[aria-expanded="true"] i[data-lucide] { transform:rotate(45deg); }
.faq-item:has(.faq-toggle[aria-expanded="true"]) { border-color:var(--border-accent); }
@media (max-width:639px) { .about-cta,.help-final-action,.contact-submit { width:100%; } }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes ring { 0%,100%{transform:rotate(0)} 10%,30%,50%,70%,90%{transform:rotate(-10deg)} 20%,40%,60%,80%{transform:rotate(10deg)} }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
@keyframes slide-in-top { from{transform:translateY(-8px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes rise-sm { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes float-gentle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes slide-in-from-right-full { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slide-in-from-right-8 { from{transform:translateX(2rem);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slide-out-to-right-8 { from{transform:translateX(0);opacity:1} to{transform:translateX(2rem);opacity:0} }
@keyframes fade-out { from{opacity:1} to{opacity:0} }
@keyframes price-tick-up   { 0%{background:rgba(168,138,99,0.35);color:var(--gold-strong)} 100%{background:transparent} }
@keyframes price-tick-down { 0%{background:rgba(229,72,77,0.35);color:#F87171} 100%{background:transparent} }
@keyframes gold-shimmer { 0%{background-position:-300% center} 100%{background-position:300% center} }

.animate-ring       { animation:ring 1s ease-in-out; }
.animate-fade-in    { animation:fade-in .6s cubic-bezier(.16,1,.3,1) both; }
.animate-rise       { animation:rise .7s cubic-bezier(.16,1,.3,1) both; }
.animate-rise-sm    { animation:rise-sm .55s cubic-bezier(.16,1,.3,1) both; }
.animate-pulse-dot  { animation:pulse-dot 2s ease-in-out infinite; }
.animate-float      { animation:float-gentle 6s ease-in-out infinite; }
.animate-in         { animation-duration:300ms; animation-fill-mode:both; }
.fade-in            { animation-name:fade-in; }
.slide-in-from-top-2{ animation-name:slide-in-top; }
.slide-in-from-right-full { animation-name:slide-in-from-right-full; }
.slide-in-from-right-8    { animation-name:slide-in-from-right-8; }
.slide-out-to-right-8     { animation-name:slide-out-to-right-8; }
.fade-out           { animation-name:fade-out; }
.animate-out        { animation-duration:300ms; animation-fill-mode:both; }
.price-up   { animation:price-tick-up   .8s ease-out both; }
.price-down { animation:price-tick-down .8s ease-out both; }
.gold-shimmer {
  background:linear-gradient(90deg,rgba(168,138,99,0) 0%,rgba(196,164,122,.5) 40%,rgba(212,180,131,.6) 50%,rgba(196,164,122,.5) 60%,rgba(168,138,99,0) 100%);
  background-size:300% 100%; animation:gold-shimmer 2.4s ease infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBARS / RTL / MISC
   ═══════════════════════════════════════════════════════════════ */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
.custom-scrollbar::-webkit-scrollbar { width:5px; height:5px; }
.custom-scrollbar::-webkit-scrollbar-track { background:transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:rgba(168,138,99,0.18); border-radius:999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background:rgba(168,138,99,0.30); }
html { scrollbar-color:rgba(168,138,99,0.18) transparent; scrollbar-width:thin; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

[dir="rtl"] .lucide-arrow-right,[dir="rtl"] .lucide-chevron-right { transform:rotate(180deg); }
[dir="rtl"] .lucide-chevron-left { transform:rotate(180deg); }
[dir="rtl"] .text-right { text-align:left; } [dir="rtl"] .text-left { text-align:right; }

::selection { background:rgba(168,138,99,0.28); color:#F0EBE3; }
.hairline { border:1px solid var(--border); }
.divider-gold { height:1px; background:linear-gradient(90deg,transparent 0%,rgba(168,138,99,.35) 50%,transparent 100%); }
.ring-gold { box-shadow:0 0 0 2px rgba(168,138,99,.45); }
.border-gold { border-color:var(--border-accent)!important; }

/* Notification toast */
.notification-toast { position:relative; }
.legal-heading { font-size:1.05rem; line-height:1.5; font-weight:700; color:var(--foreground); }
.legal-copy { margin-top:.6rem; font-size:.9375rem; line-height:1.75; color:var(--muted-foreground); }
.notification-toast::before { content:''; position:absolute; left:0;top:0;bottom:0; width:3px; border-top-left-radius:inherit; border-bottom-left-radius:inherit; background:currentColor; opacity:.7; }

/* Progress bars */
.progress-bar { position:relative; overflow:hidden; border-radius:999px; background:var(--muted); }
.progress-bar>span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold-dim),var(--gold)); transition:width .6s cubic-bezier(.16,1,.3,1); }
.progress-bar-success>span { background:linear-gradient(90deg,#15803D,#22C55E); }
.progress-bar-warning>span { background:linear-gradient(90deg,#B45309,#F5A524); }

/* Sticky navbar */
#main-nav { position:fixed!important; top:0!important; z-index:1000!important; height:74px!important; margin:0!important; padding:0!important; background:rgba(28,25,21,.94)!important; backdrop-filter:blur(14px) saturate(125%); -webkit-backdrop-filter:blur(14px) saturate(125%); border-top:1px solid transparent; border-right:1px solid transparent; border-left:1px solid transparent; border-bottom:1px solid rgba(168,138,99,.12); }
#main-nav>div:first-child { height:74px!important; margin-top:0!important; padding-top:0!important; }
#main-nav.glass { background:rgba(26,23,20,.78)!important; backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); border-top-color:transparent; border-right-color:transparent; border-bottom-color:var(--border); border-left-color:transparent; }
#main-nav.nav-scrolled { background:rgba(26,23,20,.78)!important; backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); border-bottom-color:var(--border); }
#main-nav .text-muted-foreground { color:#C4A47A; }

/* Footer h4 underline animation */
footer h4 { position:relative; display:inline-block; }
footer h4::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:linear-gradient(90deg,var(--gold),transparent); transition:width .3s ease; border-radius:1px; }
@media (hover:hover) and (pointer:fine) { footer div:hover>h4::after { width:60%; } }
.transition-all { transition-property:all; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms; }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD APPLICATION SHELL
   ═══════════════════════════════════════════════════════════════ */
.dashboard-body  { height:100dvh; min-height:100dvh; margin:0!important; padding:0!important; color-scheme:dark; overflow:hidden!important; }
.dashboard-shell { position:relative; top:0; height:100dvh; min-height:100dvh; margin:0!important; padding:0!important; background:#0D0D0B; }
.dashboard-workspace { min-width:0; background:radial-gradient(ellipse at top right,rgba(168,138,99,0.06),transparent 34%),#0D0D0B; }
.dashboard-main  { isolation:isolate; }

/* Sidebar */
.dashboard-sidebar { position:relative; z-index:1100; background:linear-gradient(180deg,#181510 0%,#111009 100%); box-shadow:16px 0 40px -28px rgba(0,0,0,0.95); }
.dashboard-sidebar-brand { border-bottom:1px solid var(--border); }
.dashboard-sidebar nav { padding:.75rem .875rem; }
.dashboard-sidebar nav p,.dashboard-sidebar nav span { opacity:1!important; }
.dashboard-sidebar nav a {
  position:relative; min-height:2.75rem; border:1px solid transparent;
  color:var(--muted-foreground); font-weight:500;
}
.dashboard-sidebar nav a:hover {
  border-color:rgba(168,138,99,0.18);
  background:rgba(168,138,99,0.06);
  color:var(--foreground);
}
.dashboard-sidebar nav a.is-active {
  border-color:rgba(168,138,99,0.32);
  background:linear-gradient(90deg,rgba(168,138,99,0.16),rgba(168,138,99,0.06));
  color:#D4B483;
  box-shadow:inset 3px 0 0 var(--gold);
}
.dashboard-sidebar nav a.is-active i { color:var(--gold-strong); }

/* Sidebar profile card */
.sidebar-profile-card { position:relative; overflow:hidden; }
.sidebar-profile-card::before { content:''; position:absolute; top:-50%; right:-30%; width:10rem; height:10rem; border-radius:50%; background:radial-gradient(circle,rgba(168,138,99,0.10),transparent 70%); pointer-events:none; }
.sidebar-profile-card a { position:relative; z-index:1; }

/* Topbar */
.dashboard-topbar { position:relative; z-index:1100!important; height:4.25rem!important; min-height:4.25rem; margin:0!important; align-items:center; background:rgba(24,21,16,0.88); backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }
.dashboard-topbar > div { align-items:center; }
.dashboard-topbar > div:last-child,
.dashboard-topbar > div:last-child > div { align-items:center; }
.dashboard-topbar-actions a { display:inline-flex; min-height:2.25rem; align-items:center; justify-content:center; line-height:1; }

@media (max-width:639px) {
  .market-trades-scroll { max-width:100%; overflow-x:auto!important; touch-action:pan-x; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .market-trades-scroll table { min-width:28rem; }
  .investment-performance-card { width:100%; max-width:100%; min-width:0; overflow-x:auto!important; overscroll-behavior-x:contain; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch; }
  .investment-performance-card > .flex,
  .investment-performance-card > .p-4 { min-width:32rem; }
  .investment-performance-card > .p-4 { width:32rem; max-width:none; }
  .investment-performance-card .investment-performance-summary > div { min-width:0; max-width:100%; }
  .investment-performance-card .investment-performance-summary p,
  .investment-performance-card .investment-performance-stats p { overflow-wrap:anywhere; }
  .investment-performance-card .investment-performance-stats { width:100%; }
  .investment-performance-card .investment-engine-card { min-width:0; }
  .dashboard-main { overflow-y:auto!important; overflow-x:hidden!important; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
  .dashboard-topbar { gap:.25rem; padding-inline:.5rem; }
  .dashboard-topbar > div:first-child { gap:.375rem; }
  .dashboard-topbar .dashboard-topbar-actions a { padding-inline:.4rem; font-size:.625rem; }
  .dashboard-topbar > div:last-child { gap:.25rem; }
}

.dashboard-topbar input { color-scheme:dark; min-height:2.5rem; }
.dashboard-topbar #topbar-ticker-container>div { border-left:1px solid var(--border); padding-left:.75rem; }
.dashboard-topbar #topbar-ticker-container>div:first-child { border-left:0; padding-left:0; }

/* Dashboard surfaces */
.dashboard-main .card-base,.dashboard-main .terminal-panel { background:rgba(26,23,20,0.82); border-color:var(--border); }
.dashboard-main .data-label { color:#7A6E64; }
.dashboard-main .data-value,.dashboard-main .tabular-nums { font-variant-numeric:tabular-nums; }

/* Dashboard overview classes */
.dashboard-command-center { display:grid; gap:1rem; }
.dashboard-welcome { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; padding:.25rem 0; }
.dashboard-eyebrow { margin:0 0 .4rem; color:var(--gold); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.dashboard-welcome h1,.dashboard-panel-heading h2 { margin:0; color:var(--foreground); font-weight:800; letter-spacing:-.035em; }
.dashboard-welcome h1 { font-size:clamp(1.55rem,2.5vw,2.2rem); }
.dashboard-welcome>div>p:last-child { max-width:42rem; margin:.55rem 0 0; color:var(--muted-foreground); font-size:.9rem; line-height:1.55; }
.dashboard-quick-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
.dashboard-quick-actions .btn-primary,.dashboard-quick-actions .btn-secondary { min-height:2.65rem; }
.dashboard-visual-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(18rem,.85fr); gap:1rem; }
.dashboard-market-card,.dashboard-performance-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:1rem; background:linear-gradient(145deg,rgba(30,26,20,.96),rgba(18,16,12,.99)); box-shadow:var(--shadow-card); }
.dashboard-market-card { padding:1.25rem; }
.dashboard-performance-card { display:flex; min-height:100%; flex-direction:column; padding:1.25rem; }
.dashboard-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.dashboard-panel-heading h2 { font-size:1.05rem; }
.dashboard-demo-badge { display:inline-flex; border:1px solid var(--border); border-radius:999px; padding:.24rem .48rem; color:var(--muted-foreground); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.58rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.dashboard-price-change { text-align:right; }
.dashboard-price-change strong { display:block; color:var(--foreground); font-size:1.3rem; font-variant-numeric:tabular-nums; }
.dashboard-price-change span { display:inline-flex; align-items:center; gap:.2rem; margin-top:.2rem; color:var(--gold); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.7rem; }
.dashboard-chart-tabs { display:inline-flex; gap:.2rem; margin-top:1.1rem; padding:.22rem; border:1px solid var(--border); border-radius:.65rem; background:rgba(13,13,11,.7); }
.dashboard-chart-tabs button { min-width:2.25rem; border-radius:.45rem; padding:.32rem .45rem; color:var(--muted-foreground); font-size:.68rem; font-weight:700; }
.dashboard-chart-tabs button.is-selected { background:var(--gold-dim); color:#F0EBE3; }
.dashboard-chart-plot { height:13rem; margin-top:.7rem; border-radius:.75rem; background:rgba(13,13,11,.45); overflow:hidden; }
.dashboard-chart-plot svg { display:block; width:100%; height:100%; }
.chart-loading-state { display:grid; min-height:100%; margin:0; place-items:center; color:var(--muted-foreground); font-size:.8125rem; }
.dashboard-chart-grid path { fill:none; stroke:rgba(168,138,99,.06); stroke-width:1; }
.dashboard-market-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin-top:.85rem; padding-top:.85rem; border-top:1px solid var(--border); }
.dashboard-market-stats span,.dashboard-performance-values span { min-width:0; }
.dashboard-market-stats small,.dashboard-performance-values small { display:block; overflow:hidden; color:var(--muted-foreground); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.59rem; letter-spacing:.07em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.dashboard-market-stats b,.dashboard-performance-values b { display:block; margin-top:.25rem; overflow:hidden; color:var(--foreground); font-size:.77rem; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-performance-values { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1.35rem; }
.dashboard-performance-values span { border-radius:.7rem; padding:.75rem; background:rgba(13,13,11,.5); border:1px solid var(--border); }
.dashboard-performance-values b { font-size:1rem; }
.dashboard-mini-bars { display:flex; align-items:end; gap:.38rem; height:8.5rem; margin-top:1.1rem; padding:.65rem .35rem 0; border-bottom:1px solid var(--border); }
.dashboard-mini-bars i { display:block; flex:1; min-width:.35rem; border-radius:.3rem .3rem 0 0; background:linear-gradient(180deg,var(--gold-strong),var(--gold-dim)); opacity:.85; }
.dashboard-text-link { display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:1rem; color:var(--gold); font-size:.78rem; font-weight:700; }
.dashboard-legacy-market { display:none!important; }

@media (max-width:1023px) { .dashboard-visual-grid { grid-template-columns:1fr; } }
@media (max-width:639px) {
  .dashboard-welcome { align-items:stretch; flex-direction:column; gap:1rem; }
  .dashboard-quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .dashboard-quick-actions .btn-primary,.dashboard-quick-actions .btn-secondary { min-width:0; padding-inline:.5rem; font-size:.72rem; }
  .dashboard-chart-plot { height:10.5rem; }
  .dashboard-market-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-panel-heading { flex-wrap:wrap; }
  .dashboard-price-change { text-align:left; }
  .dashboard-command-center,
  .dashboard-visual-grid,
  .dashboard-market-card,
  .dashboard-performance-card { min-width:0; }
  .dashboard-main .dashboard-welcome h1 { overflow-wrap:anywhere; font-size:1.5rem; }
  .dashboard-main .dashboard-welcome > div { min-width:0; }
  .dashboard-main .dashboard-panel-heading { gap:.5rem; }
  .dashboard-main .dashboard-price-change strong { font-size:1.1rem; }
  .dashboard-main .dashboard-market-stats { gap:.35rem; }
  .dashboard-announcements-card,
  .dashboard-ledger-card { width:100%; max-width:100%; min-width:0; }
  .dashboard-announcements-card > div,
  .dashboard-ledger-card > div { min-width:0; }
  .dashboard-announcements-card .px-6,
  .dashboard-ledger-card .px-6 { padding-inline:1rem; }
  .dashboard-ledger-card table { min-width:34rem; }
  .dashboard-ledger-card .overflow-x-auto { display:block; max-width:100%; overflow-x:auto!important; overflow-y:hidden; touch-action:pan-x; -webkit-overflow-scrolling:touch; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE LAYER — mobile & tablet
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1023px) {
  body,#main-content,.dashboard-workspace { overflow-x:hidden!important; }
  .dashboard-shell,.dashboard-workspace,.dashboard-main { width:100%!important; max-width:100vw; }
  .dashboard-main > *,
  .dashboard-main .grid,
  .dashboard-main .dashboard-command-center { min-width:0!important; max-width:100%; }
  button,a,[role="button"] { min-height:44px; }
  html { font-size:15px; }
  #main-nav { height:74px; }
  #main-nav>div:first-child { height:74px; }
  body.mobile-menu-open { overflow:hidden!important; touch-action:none; }
  #mobile-menu { display:none; position:fixed; top:74px; left:0; right:0; bottom:0; height:calc(100dvh - 74px)!important; max-height:calc(100dvh - 74px); z-index:999!important; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:rgba(74,58,42,.88); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); border-bottom:1px solid rgba(196,164,122,.25); }
  #mobile-menu.is-open { display:block!important; }
  #mobile-menu .mobile-menu-inner { min-height:100%; background:rgba(26,23,20,.9); }
  #mobile-menu a,#mobile-menu form,#mobile-menu button { flex-shrink:0; }
  .mobile-menu-close-icon { display:none; }
  #mobile-menu-toggle[aria-expanded="true"] .mobile-menu-open-icon { display:none; }
  #mobile-menu-toggle[aria-expanded="true"] .mobile-menu-close-icon { display:block; }
  .grid[class*="lg:grid-cols-4"] { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .faq-toggle { min-height:3.5rem; }
  .dashboard-sidebar { position:fixed!important; top:0; left:0; bottom:0; z-index:1100!important; transform:translateX(-100%); transition:transform .28s cubic-bezier(.16,1,.3,1); overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:24px 0 60px rgba(0,0,0,.6); width:min(17.25rem,calc(100vw - 2.5rem)); }
  .dashboard-sidebar { top:4.25rem; }
  .dashboard-sidebar.sidebar-open { transform:translateX(0); }
  .dashboard-sidebar .sidebar-label { opacity:1!important; }
  .dashboard-workspace { width:100%; }
  .dashboard-sidebar nav a { min-height:3rem; }
  .lg\:grid-cols-12\.gap-6 { grid-template-columns:1fr!important; }
  .lg\:col-span-3,.lg\:col-span-9 { grid-column:span 1!important; }
}
@media (max-width:639px) {
  html { font-size:14.5px; }
  h1 { font-size:clamp(1.5rem,5vw,2rem)!important; }
  h2 { font-size:clamp(1.15rem,4vw,1.5rem)!important; }
  section[class*="pt-32"],section[class*="pt-40"] { padding-top:5.5rem; }
  section[class*="pb-20"],section[class*="pb-28"] { padding-bottom:3rem; }
  .ticker-strip { overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .ticker-track { animation:none!important; }
  .grid[class*="lg:grid-cols-3"],.grid[class*="sm:grid-cols-2"] { grid-template-columns:1fr!important; }
  .grid[class*="md:grid-cols-3"] { grid-template-columns:1fr!important; }
  section .btn-primary,section .btn-secondary { width:100%; justify-content:center; }
  footer { padding-top:3rem; padding-bottom:max(1.5rem,env(safe-area-inset-bottom)); }
  footer .grid.grid-cols-1 { gap:2rem; }
  footer .flex.flex-col.md\:flex-row-reverse { flex-direction:column; align-items:flex-start; gap:1rem; }
  .auth-card,[class*="max-w-md"].rounded-3xl,[class*="max-w-sm"].rounded-3xl { margin-inline:1rem; padding:1.75rem 1.25rem; }
  .about-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-summary-card { min-height:8rem; }
  .grid[class*="sm:grid-cols-3"] { grid-template-columns:1fr!important; }
  .grid[class*="md:grid-cols-2"].gap-4,.grid[class*="sm:grid-cols-2"].gap-4 { grid-template-columns:1fr!important; }
  .faq-content>* { padding:0 1rem 1.25rem; }
  .contact-info-row { grid-template-columns:1fr!important; }
  .contact-form input,.contact-form textarea,.contact-form select { font-size:1rem; }
  .dashboard-topbar { padding-inline:.75rem; height:3.75rem; min-height:3.75rem; }
  .dashboard-sidebar { top:3.75rem; }
  .dashboard-main { padding:1rem!important; }
  .dashboard-main > * { min-width:0; max-width:100%; }
  .dashboard-main .flex-wrap { row-gap:.75rem; }
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .dashboard-chart-plot { height:10rem; }
  .overflow-x-auto table { min-width:600px; }
  .grid.gap-6.lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] { grid-template-columns:1fr!important; }
  .grid.gap-3.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  code.break-all { word-break:break-all; font-size:.7rem; }
  .upload-zone { padding:1.25rem; }
  .grid.gap-3.grid-cols-2.sm\:grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .investment-claim-row,.referral-earning-row { flex-direction:column; align-items:flex-start; gap:.75rem; }
  .investment-claim-row .claim-single-btn,.referral-earning-row .claim-referral-btn { align-self:stretch; justify-content:center; }
  #claim-success-card { padding:1.5rem 1.25rem; }
  .grid.gap-3.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 { grid-template-columns:1fr!important; }
  .oil-table,table.w-full { font-size:.75rem; }
  table.w-full th,table.w-full td { padding:.5rem .625rem; }
  .chart-wrap { height:240px!important; }
  #compare-chart-wrap { height:160px!important; }
  #history-table-body { font-size:.7rem; }
  .oil-table th,.oil-table td { padding:.5rem .5rem; white-space:nowrap; }
  #doc-type-grid { grid-template-columns:1fr!important; }
  .grid.gap-4.sm\:grid-cols-2 { grid-template-columns:1fr!important; }
  .grid.gap-3.sm\:grid-cols-3 { grid-template-columns:1fr!important; }
  .grid.gap-3.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .flex.flex-wrap.gap-3>.flex-1 { flex:1 1 100%; }
  .flex.flex-wrap.gap-3>button { width:100%; justify-content:center; }
  .-mt-12.flex.flex-col.sm\:flex-row { flex-direction:column!important; align-items:flex-start; }
  .grid.grid-cols-2.sm\:grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .grid.sm\:grid-cols-2.gap-x-6.gap-y-5 { grid-template-columns:1fr!important; }
  .grid[class*="lg:grid-cols-2"] { grid-template-columns:1fr!important; }
  .space-y-3>div { flex-direction:column; align-items:flex-start; }
  .flex.items-center.gap-2.overflow-x-auto { padding-bottom:.25rem; }
  .notif-filter-btn { white-space:nowrap; font-size:.75rem; padding:.4rem .75rem; min-height:36px; }
  #notifications-page-list>div { padding:.75rem 1rem; }
  #notif-pagination { flex-direction:column; gap:.5rem; align-items:flex-start; }
  #notif-modal>div:last-of-type { max-height:calc(100dvh - 1rem); border-radius:1.5rem; margin:.5rem; width:calc(100vw - 1rem); }
  [id$="-modal"]>div:last-child,[id$="-overlay"]>div:not(:first-child) { margin:.75rem; max-height:calc(100dvh - 1.5rem); max-width:calc(100vw - 1.5rem); overflow-y:auto; }
  #toast-container { right:.5rem!important; left:.5rem!important; max-width:none!important; width:auto!important; }
  #notification-container { right:.5rem!important; left:.5rem!important; max-width:none!important; width:auto!important; }
  section.grid.gap-4.sm\:grid-cols-2 { grid-template-columns:1fr!important; }
  .flex.items-center.gap-1.p-1.rounded-xl.border { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width:479px) {
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns:1fr!important; }
}
@media (max-width:400px) {
  .dashboard-main { padding:.75rem!important; }
  .rounded-2xl,.rounded-3xl { border-radius:.875rem; }
  .text-xl.font-bold,.text-2xl.font-bold { font-size:1.15rem!important; }
  .text-2xl.font-extrabold { font-size:1.25rem!important; }
  td,th { font-size:.7rem; }
}
@media (max-width:767px) {
  #notification-container,#toast-container { max-width:calc(100vw - max(1rem,var(--sal) + var(--sar) + .5rem)); }
  #notification-container .notification-toast,#toast-container .notification-toast { width:100%; max-width:none; }
  #mobile-menu-toggle,#sidebar-trigger,#notification-trigger { min-width:44px; min-height:44px; }
  .data-label { font-size:10.5px; letter-spacing:.1em; }
  .overflow-x-auto { -webkit-overflow-scrolling:touch; }
  .overflow-x-auto>table { width:max-content; min-width:100%; }
}
@media (max-width:374px) {
  #navbar-brand { font-size:.95rem!important; max-width:calc(100vw - 9.5rem)!important; }
  #mobile-menu-toggle { width:2.5rem; height:2.5rem; }
}
@media (max-width:1023px) {
  .dashboard-main { padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))!important; }
}
@media (min-width:1024px) {
  .dashboard-main { padding-bottom:1.75rem!important; }
  .dashboard-sidebar { transform:none!important; position:static!important; }
  .sidebar-overlay { display:none!important; }
}
nav.lg\:hidden { padding-bottom:max(0px,env(safe-area-inset-bottom)); }
@media (max-height:500px) and (orientation:landscape) {
  .dashboard-sidebar { height:100dvh; overflow-y:auto; }
  nav.lg\:hidden { height:3.25rem; }
  .dashboard-main { padding-bottom:4rem!important; }
}
.sidebar-overlay { display:none; position:fixed; inset:0; z-index:89; background:rgba(0,0,0,.7); backdrop-filter:blur(3px); }
.sidebar-overlay.visible { display:block; }
@media (min-width:640px) and (max-width:1023px) { footer .max-w-sm { max-width:100%!important; } }


/* =========================================================
   RESPONSIVE GAPS — targeted fixes for remaining issues
   All existing @media rules above are preserved unchanged.
========================================================= */

/* ── stat-card--purple (used in dashboard overview) ──── */
.stat-card--purple { border-color: rgba(139,92,246,0.22); }
.stat-card--purple:hover { border-color:#8B5CF6; box-shadow:0 0 28px -8px rgba(139,92,246,0.28); }
.stat-icon--purple { background:rgba(139,92,246,0.10); color:#A78BFA; border:1px solid rgba(139,92,246,0.22); }

/* ── contact / help email overflow ──────────────────── */
.contact-email-link, a[href^="mailto"] { overflow-wrap:anywhere; word-break:break-all; }

/* ── iOS zoom fix: help search input ────────────────── */
@media (max-width:639px) {
  #help-search,
  input[type="search"],
  input[type="text"].help-search-input { font-size:1rem !important; }
}

/* ── plans.html core-rules strip: sm mid-step ───────── */
@media (min-width:480px) and (max-width:767px) {
  .plans-core-rules { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ── Tablet (768–1023px): platform-intro & investment
      sections get a proper 2-col step instead of jumping
      from 1-col straight to 12-col ─────────────────── */
@media (min-width:768px) and (max-width:1023px) {
  /* Platform Intro: text | terminal side-by-side */
  .platform-intro-grid { grid-template-columns: 1fr 1fr !important; }

  /* Investment section: visual | copy side-by-side */
  .investment-section-grid { grid-template-columns: 1fr 1fr !important; }

  /* about.html floating badge: only show at lg+ where the
     card is in its own right column — hide on tablet */
  .about-hero-float-badge { display: none !important; }

  /* about.html benchmark table 24h-range col: hide on tablet
     same as on mobile (col-span-3 hidden sm:block still shows
     on sm — this hides it until lg where the table has space) */
  .about-range-col { display: none !important; }
}

/* ── Floating hero chips: safe at lg+ only ───────────
   The chips use sm:block so they appear from 640px but
   the negative offsets can clip. Clip guard:           */
@media (min-width:640px) and (max-width:1023px) {
  /* Pull the chips back inside the card container so they
     don't overflow the viewport */
  .hero-float-left  { left: .75rem !important; transform: none !important; }
  .hero-float-right { right: .75rem !important; transform: none !important; }
}

/* ── Dashboard confirm modal: tighter padding on mobile */
@media (max-width:639px) {
  #confirm-modal-content { padding: 1.25rem !important; }
  #confirm-modal-content .size-16 { width:3rem; height:3rem; }
  #confirm-modal-content .size-16 i { width:1.5rem; height:1.5rem; }
  #confirm-modal-content h3 { font-size:1.25rem; }
  #confirm-modal-content .flex.items-center.gap-3 button { padding:0.625rem 1rem; font-size:0.875rem; }
}

/* ── Terminal wallet 2-col grid: prevent overflow on
   very narrow screens (< 380px) ─────────────────────  */
@media (max-width:379px) {
  .terminal-wallet-grid { grid-template-columns: 1fr !important; }
  .market-chart-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* ── plans.html lifecycle card-base: ensure padding ─── */
.lifecycle-step .card-base { padding: 1.25rem; }
@media (min-width:640px) {
  .lifecycle-step .card-base { padding: 1.5rem; }
}
in-width:1024px) {
  .dashboard-main { padding-bottom:1.75rem!important; }
  .dashboard-sidebar { transform:none!important; position:static!important; }
  .sidebar-overlay { display:none!important; }
}
nav.lg\:hidden { padding-bottom:max(0px,env(safe-area-inset-bottom)); }
@media (max-height:500px) and (orientation:landscape) {
  .dashboard-sidebar { height:100dvh; overflow-y:auto; }
  nav.lg\:hidden { height:3.25rem; }
  .dashboard-main { padding-bottom:4rem!important; }
}
.sidebar-overlay { display:none; position:fixed; inset:0; z-index:89; background:rgba(0,0,0,.7); backdrop-filter:blur(3px); }
.sidebar-overlay.visible { display:block; }
@media (min-width:640px) and (max-width:1023px) { footer .max-w-sm { max-width:100%!important; } }