/* ============================================================================
   Ocean theme — visual redesign.

   This is a token override layer, not a rewrite. The existing stylesheets are
   ~700 lines of components already wired to CSS custom properties; redefining
   the properties restyles every card, button and panel at once, and leaves the
   component CSS as the single source of truth for layout. Rewriting instead
   would risk regressions in pages I would not have re-checked.

   Load order matters: this file must come after styles.css and shell.css.

   Palette reasoning
   -----------------
   The old scheme was near-black with gold. Gold reads as "vault" and fights an
   underwater scene — light does not glint like metal at depth. The new scheme
   keeps the brand green from the logo as the action colour, moves the base to
   deep blue-teal so panels sit *in* the water rather than on top of it, and
   reserves a warm amber for the few places that genuinely need a second accent
   (highlights, warnings) where it now reads as sunlight rather than bullion.
   ========================================================================== */

:root {
  /* Surfaces. Alpha rather than opaque: the ocean has to show through, which is
     what makes panels feel submerged instead of pasted on. */
  --bg-deep:      #01131f;
  --bg-base:      #04243a;
  --bg-elevated:  #073349;
  --bg-card:       rgba(9, 42, 64, 0.55);
  --bg-card-hover: rgba(14, 58, 86, 0.72);
  --bg-glass:      rgba(160, 220, 255, 0.05);

  /* Brand green stays the action colour — it is the logo. */
  --accent:       #2DBB60;
  --accent-light: #3BDD78;
  --accent-glow:  rgba(45, 187, 96, 0.20);

  /* Second accent: warm, low-saturation, used sparingly. */
  --gold:       #E8B04A;
  --gold-light: #F5CC7A;
  --gold-glow:  rgba(232, 176, 74, 0.18);

  --purple:      #5C8FA8;
  --purple-glow: rgba(92, 143, 168, 0.12);

  /* Text is very slightly blue — pure white on blue-green looks detached. */
  --text-primary:   #E8F4FB;
  --text-secondary: #A8C4D6;
  --text-muted:     #6E90A6;

  --border:        rgba(150, 210, 245, 0.10);
  --border-hover:  rgba(150, 210, 245, 0.22);
  --border-accent: rgba(45, 187, 96, 0.30);

  /* Shadows get a blue cast. A neutral black shadow on blue reads as dirt. */
  --shadow-card:       0 4px 24px rgba(0, 18, 32, 0.42), 0 1px 2px rgba(0, 12, 22, 0.30);
  --shadow-card-hover: 0 14px 44px rgba(0, 20, 36, 0.55), 0 2px 6px rgba(0, 12, 22, 0.34);
  --shadow-glow-gold:   0 0 40px rgba(232, 176, 74, 0.12);
  --shadow-glow-accent: 0 0 40px rgba(45, 187, 96, 0.14);
}

.light-theme {
  --bg-deep:      #EAF6FD;
  --bg-base:      #DCEEF9;
  --bg-elevated:  #FFFFFF;
  --bg-card:       rgba(255, 255, 255, 0.72);
  --bg-card-hover: rgba(255, 255, 255, 0.92);
  --bg-glass:      rgba(10, 60, 90, 0.04);

  --accent:       #17843F;
  --accent-light: #2DBB60;
  --accent-glow:  rgba(23, 132, 63, 0.15);

  --gold:       #B8791C;
  --gold-light: #D9962C;

  --text-primary:   #08283C;
  --text-secondary: #3A6076;
  --text-muted:     #6B8CA0;

  --border:        rgba(8, 40, 60, 0.10);
  --border-hover:  rgba(8, 40, 60, 0.20);
  --border-accent: rgba(23, 132, 63, 0.28);

  --shadow-card:       0 4px 20px rgba(10, 60, 90, 0.10);
  --shadow-card-hover: 0 12px 40px rgba(10, 60, 90, 0.16);
}

/* ── glass ────────────────────────────────────────────────────────────────
   Panels get a backdrop blur so the water behind them is visibly diffused
   rather than merely darkened. This is what sells "under water" more than any
   colour choice: refraction, not tint.
   backdrop-filter is skipped where unsupported — the alpha background alone
   still looks correct, just flatter. */
.card,
.stat,
.step,
.plat-card,
.panel,
.rp-grid > div {
  /* Radius reduced from 9px to 6px. Backdrop blur is recomputed every frame for
     every promoted layer, and its cost scales with the radius — a page showing
     a dozen panels at 9px was enough to drop frames while scrolling. 6px is
     visually almost identical and measurably cheaper.
     `contain: paint` tells the browser a panel's painting cannot escape its own
     box, so it can skip work for panels scrolled out of view. */
  /* Backdrop blur removed, deliberately.

     Measured on this page: with the ocean animating AND panels blurring their
     backdrop, scrolling ran at ~12fps. Each alone recovered only to ~24fps;
     both off reached ~50fps. Every panel with a backdrop-filter must re-sample
     what is behind it on every frame, and behind these panels is a moving
     scene — so the sample can never be cached.

     A choice had to be made between the two, and the swimming whale is the
     feature that was actually asked for. The panels keep a translucent tint, so
     the water still shows through and they still read as submerged; what they
     lose is the refraction, which almost nobody would name but everybody
     notices as stutter. */
  border: 1px solid var(--border);
  contain: paint;
}

/* Below this width nearly every panel is full-bleed and the backdrop behind it
   is barely visible anyway, so the blur buys nothing and costs the most — phone
   GPUs are exactly where this stutters. */
@media (max-width: 720px) {
  .card, .stat, .step, .plat-card, .panel, .rp-grid > div {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(7, 38, 58, 0.86);
  }
  .light-theme .card, .light-theme .stat, .light-theme .step,
  .light-theme .plat-card, .light-theme .panel { background: rgba(255,255,255,0.92); }
}

/* The header keeps its blur: there is exactly one of it, it is small, and it
   sits over the busiest part of the scene where legibility matters most. One
   blurred element is affordable; a dozen scrolling past is not. */
header {
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: linear-gradient(180deg, rgba(10, 46, 70, 0.72), rgba(4, 30, 48, 0.58)) !important;
  border-bottom: 1px solid rgba(150, 210, 245, 0.12);
}
.light-theme header {
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(240,249,255,.72)) !important;
  border-bottom-color: rgba(8, 40, 60, 0.10);
}

/* A hairline of light along the top edge of each card. Real surfaces underwater
   catch light on their upper edge; without it the panels look like flat holes. */
.card::before,
.plat-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170, 225, 255, .30), transparent);
  pointer-events: none;
}
.card, .plat-card { position: relative; }

/* ── depth on hover ───────────────────────────────────────────────────────
   Rising slightly and brightening reads as moving toward the light source,
   which is consistent with the scene. */
.card:hover,
.plat-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(45, 187, 96, .10);
}

/* ── buttons ──────────────────────────────────────────────────────────────
   The primary action keeps the brand green so it stays tied to the logo. */
.btn-primary {
  background: linear-gradient(135deg, #2DBB60, #17843F);
  border: 1px solid rgba(59, 221, 120, .35);
  box-shadow: 0 4px 18px rgba(23, 132, 63, .28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #3BDD78, #1FA050);
  box-shadow: 0 8px 26px rgba(45, 187, 96, .38);
}
.btn-ghost {
  background: rgba(150, 210, 245, .08);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(150, 210, 245, .12); border-color: var(--border-hover); }

/* ── charts ───────────────────────────────────────────────────────────────
   Candle colours shift from the old pure green/red to shades that sit in the
   same family as the water, so the chart belongs to the page. Red stays clearly
   red — profit and loss must never be ambiguous for the sake of a palette. */
:root {
  --chart-up:   #2DD47A;
  --chart-down: #FF5C5C;
  --chart-grid: rgba(150, 210, 245, 0.07);
}

/* ── selection and focus ─────────────────────────────────────────────────── */
::selection { background: rgba(45, 187, 96, .30); color: #EAF6FF; }
:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

/* ── scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(4, 30, 48, .5); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(45,187,96,.45), rgba(23,132,63,.45));
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(59,221,120,.6), rgba(45,187,96,.6)); background-clip: padding-box; }

/* ── reduced transparency ─────────────────────────────────────────────────
   Some users disable transparency at OS level for legibility. Honour it:
   solid panels, no blur. */
@media (prefers-reduced-transparency: reduce) {
  .card, .stat, .step, .plat-card, .panel, header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #07293E !important;
  }
  .light-theme .card, .light-theme .stat, .light-theme .step,
  .light-theme .plat-card, .light-theme .panel, .light-theme header {
    background: #FFFFFF !important;
  }
}

/* ── signup agreement ─────────────────────────────────────────────────────
   The risk warning moved out of the page footer and into account creation.
   A footer notice is seen by nobody; consent given at signup is both more
   honest and the point at which it actually matters. The box scrolls rather
   than being truncated — hiding half the terms behind an ellipsis would
   undermine the whole purpose. */
.fz-agree { margin: 4px 0 12px; }
.fz-agree-box {
  max-height: 150px; overflow-y: auto;
  background: var(--bg-glass); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  font-size: .78rem; line-height: 1.95; color: var(--text-secondary);
}
.fz-agree-box strong { display: block; color: var(--text-primary); margin-bottom: 6px; font-size: .84rem; }
.fz-agree-box p { margin: 0 0 7px; }
.fz-agree-box b { color: var(--text-primary); }
.fz-agree-box:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.fz-agree-check {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  font-size: .8rem; color: var(--text-secondary); cursor: pointer; line-height: 1.7;
}
.fz-agree-check input { accent-color: var(--accent); margin-top: 3px; flex-shrink: 0; }