/* ============================================================================
   Dashboard V2 — back to V1's terminal design as the base (per explicit
   request), with: (1) a re-themed accent palette, (2) a sidebar layout
   instead of single-column stacking, (3) a dimmed Velaris WebGL background
   (ported from 21st.dev, slowed down per feedback). Everything else — cards,
   gauges, tables, accordions, badges — is V1's own component system from
   style.css, untouched structurally, just re-colored via the variables it
   already reads.
   ========================================================================== */

/* ---- re-themed accent palette (style.css's components read these vars) ---- */
body.v2{
  --blue:#F59E0B;      /* was cyan-blue -> warm amber, now the primary accent */
  --gold:#FB7185;      /* was gold -> rose */
  --purple:#A78BFA;    /* was purple -> softer violet */
  --cyan:#2DD4BF;      /* was cyan -> teal */
  /* green/red kept as-is: win/loss stays a platform convention, not re-themed */
}

/* ---- entry forms (Tier 1 / Tier 2): were still capped at the old V1 width
   (680px, on a 1280px page) leaving huge dead space beside the card, and
   inputs still used the old bg-2 navy instead of the solid-black V2 look ---- */
body.v2 form.card{ max-width:1100px; padding:36px }
body.v2 .field label{ font-size:12.5px }
body.v2 .field input, body.v2 .field select, body.v2 .field textarea{
  background:#000; padding:11px 13px; font-size:14px; border-radius:9px;
}
body.v2 .field-row{ gap:18px }
body.v2 .field-row-3{ gap:18px }
body.v2 form.card h2{ font-size:16px }

/* ---- Velaris background: toned down from full brightness, still no blur ---- */
.v2-velaris-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; opacity:.5; filter:none; pointer-events:none }
body.v2 .wrap{ position:relative; z-index:1 }

/* ---- sidebar layout instead of V1's single stacked column ---- */
.v2-shell{display:grid;grid-template-columns:224px 1fr;gap:28px;align-items:start}
@media (max-width:900px){ .v2-shell{grid-template-columns:1fr} }

.v2-sidebar{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px}
.v2-sidebar .sb-card{
  position:relative;
  background:#000;border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  animation:rise-in var(--dur-slow) var(--ease-out) both;
}
.v2-sidebar .sb-card:nth-of-type(1){animation-delay:0ms}
.v2-sidebar .sb-card:nth-of-type(2){animation-delay:35ms}
.v2-sidebar .sb-card:nth-of-type(3){animation-delay:70ms}
.v2-sidebar .sb-card:nth-of-type(4){animation-delay:105ms}
.v2-sidebar .sb-card:nth-of-type(5){animation-delay:140ms}
@media (prefers-reduced-motion: reduce){ .v2-sidebar .sb-card{animation:none} }
.v2-sidebar .sb-card .sb-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.v2-sidebar .sb-card .sb-value{font-family:var(--mono);font-size:22px;font-weight:700}
.v2-sidebar .sb-card .sb-value.pos{color:var(--green-text)} .v2-sidebar .sb-card .sb-value.neg{color:var(--red)}
.v2-sidebar nav.sb-jump{display:flex;flex-direction:column;gap:2px}
.v2-sidebar nav.sb-jump a{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:9px 12px;border-radius:8px;
  letter-spacing:.03em;transition:background 140ms ease, color 140ms ease;
}
.v2-sidebar nav.sb-jump a:hover{background:var(--card-2);color:var(--text);text-decoration:none}

@media (max-width:900px){ .v2-sidebar{position:static} }
@media (max-width:680px){ .v2-sidebar{display:none} }

/* ============================================================================
   Vibrancy pass: V1's hardcoded glow/badge colors were tuned to the OLD
   blue (#58a6ff / rgb 88,166,255) and gold (#d29922 / rgb 210,153,34) hues.
   Those literals don't track the --blue/--gold variable overrides above, so
   under the new amber/rose theme they read muddy — this re-points every one
   of them at the real new hues (amber rgb 245,158,11 / rose rgb 251,113,133)
   and adds an actual shine: light-matched gradient accent bars, a diagonal
   sweep highlight on card hover, and color-tinted glows instead of plain
   black shadows.
   ========================================================================== */

body.v2 ::selection{ background: rgba(245,158,11,.35); color:#fff; }

body.v2 .abadge.watch{ border-color:rgba(251,113,133,.5); background:linear-gradient(135deg,rgba(251,113,133,.38),rgba(251,113,133,.12)) }
body.v2 .abadge.info{ border-color:rgba(245,158,11,.5); background:linear-gradient(135deg,rgba(245,158,11,.38),rgba(245,158,11,.12)) }
body.v2 .acard.watch{ border-color:rgba(251,113,133,.32); box-shadow:0 0 0 1px rgba(251,113,133,.12),0 8px 24px rgba(0,0,0,.35) }
body.v2 .acard.info{ border-color:rgba(245,158,11,.30); box-shadow:0 0 0 1px rgba(245,158,11,.10),0 8px 24px rgba(0,0,0,.35) }
body.v2 .acard.watch::before{ background:var(--gold) }
body.v2 .acard.info::before{ background:var(--blue) }
body.v2 .pill.deviated{ border-color:rgba(251,113,133,.4); background:rgba(251,113,133,.1) }

/* hero: re-hued glow + badge, plus a slow shimmer across the accent bar */
body.v2 .hero{
  background:
    radial-gradient(650px 220px at 100% 0%, rgba(245,158,11,.14), transparent 70%),
    radial-gradient(500px 260px at 0% 100%, rgba(167,139,250,.10), transparent 70%),
    #000;
}

/* solid black boxes (was the card/panel -> bg-2 gradient) */
body.v2 .card,
body.v2 .panel{ background:#000; }
body.v2 .hero::before{
  background:linear-gradient(180deg,var(--blue),var(--gold),var(--purple));
  background-size:100% 220%;
  animation:v2-bar-shimmer 6s ease-in-out infinite;
}
@keyframes v2-bar-shimmer{ 0%,100%{background-position:0 0} 50%{background-position:0 100%} }
body.v2 .hero-badge{ border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.08); color:var(--blue) }

/* Account Rules & Adherence panel (FundedNext Legacy 25K) */
body.v2 .he-risk-list{ display:flex; flex-direction:column; gap:20px }
body.v2 .he-risk-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 12px }
body.v2 .he-risk-lbl{ font-family:var(--mono); font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint) }
body.v2 .he-risk-val{ font-family:var(--mono); font-size:14px; color:var(--text) }
body.v2 .he-risk .bar{ margin-top:7px }
body.v2 .he-risk-foot{ margin-top:6px; font-family:var(--mono); font-size:12px; color:var(--faint) }
body.v2 .he-risk-foot b{ color:var(--muted); font-weight:600 }

/* benchmark days: 5 lit/unlit blocks instead of a progress bar */
body.v2 .bm-blocks{ display:flex; gap:6px; margin-top:6px }
body.v2 .bm-block{
  flex:1; height:10px; border-radius:2px;
  background:var(--bg); border:1px solid var(--border-soft);
}
body.v2 .bm-block.lit{ background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px rgba(45,212,191,.5) }

/* first main-column section should sit flush with the sidebar's top card
   for symmetry — .section normally carries a 36px top margin */
body.v2 #app > .section:first-child{ margin-top:0 }

/* trade log: clickable rows open a full-detail popup */
body.v2 tr.trade-row{ cursor:pointer; transition:background 120ms ease }
body.v2 tr.trade-row:hover{ background:var(--card-2) }

/* daily R calendar: bigger cells, clickable days */
body.v2 .cal{ gap:26px }
body.v2 .cal-month .mname{ font-size:11.5px }
body.v2 .cal-grid{ grid-template-columns:repeat(7,26px); grid-auto-rows:26px; gap:5px }
body.v2 .cal-cell{ width:26px; height:26px; border-radius:5px; transition:transform 120ms ease, box-shadow 120ms ease }
body.v2 .cal-dow{ font-size:10px }
body.v2 .cal-legend{ font-size:11px; margin-top:16px }
body.v2 .cal-legend .sw{ width:16px; height:16px }
body.v2 .cal-cell.has-data{ cursor:pointer }
body.v2 .cal-cell.has-data:hover{ transform:scale(1.15); box-shadow:0 0 0 2px rgba(255,255,255,.25) }

/* day summary panel — revealed and scrolled into view on cell click */
body.v2 .day-summary{ animation:rise-in 400ms ease both }
body.v2 .ds-stats{ display:flex; gap:28px; margin:14px 0 18px; flex-wrap:wrap }
body.v2 .ds-stat{ display:flex; flex-direction:column; gap:4px }
body.v2 .ds-bias{ margin-bottom:16px; display:flex; flex-direction:column; gap:8px }
body.v2 .ds-bias-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--border-soft); border-radius:8px; background:var(--card-2) }
body.v2 .ds-head{ display:flex; align-items:center; justify-content:space-between }
body.v2 .ds-close{
  width:26px; height:26px; border-radius:7px; flex:none;
  background:var(--card-2); border:1px solid var(--border); color:var(--muted);
  font-size:16px; line-height:1; cursor:pointer;
}
body.v2 .ds-close:hover{ color:var(--text); border-color:var(--muted) }

body.v2 .trade-modal-backdrop{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.72); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:24px;
}
body.v2 .trade-modal-backdrop.open{ display:flex }
body.v2 .trade-modal{
  position:relative; width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
  background:#000; border:1px solid var(--border); border-radius:14px;
  padding:28px; box-shadow:0 24px 64px rgba(0,0,0,.6);
}
body.v2 .trade-modal-close{
  position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:8px;
  background:var(--card-2); border:1px solid var(--border); color:var(--muted);
  font-size:18px; line-height:1; cursor:pointer;
}
body.v2 .trade-modal-close:hover{ color:var(--text); border-color:var(--muted) }
body.v2 .tm-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:20px; padding-right:36px }
body.v2 .tm-head h3{ font-family:var(--mono); font-size:19px; margin:0; color:var(--text) }
body.v2 .tm-r{ font-family:var(--mono); font-size:19px; font-weight:700 }
body.v2 .tm-pnl{ font-family:var(--mono); font-size:14px; color:var(--muted) }
body.v2 .tm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px }
body.v2 .tm-field{ display:flex; flex-direction:column; gap:4px }
body.v2 .tm-lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
body.v2 .tm-val{ font-family:var(--mono); font-size:13px; color:var(--text) }
body.v2 .tm-tags{ margin-top:18px; display:flex; flex-wrap:wrap; gap:6px }
body.v2 .tm-notes{ margin-top:18px }
body.v2 .tm-notes p{ margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--text) }
body.v2 .tm-photo{ margin-top:20px; width:100%; max-height:400px; object-fit:contain; border-radius:10px; border:1px solid var(--border); background:var(--bg) }
@media (max-width:560px){ body.v2 .tm-grid{ grid-template-columns:1fr } }

/* AI checks (Gemini) inside the trade modal */
body.v2 .tm-ai{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border-soft); display:flex; gap:10px; flex-wrap:wrap }
body.v2 .tm-ai-btn{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:#e6e6e6;
  padding:9px 16px; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,#7a7a7a,#f2f2f2 35%,#c4c4c4 55%,#5c5c5c 80%,#e8e8e8) border-box;
}
body.v2 .tm-ai-btn:hover{ color:#fff }
body.v2 .tm-ai-btn:disabled{ opacity:.6; cursor:default }
body.v2 .tm-ai-result{ margin-top:14px }
body.v2 .tm-ai-loading{ font-family:var(--mono); font-size:12px; color:var(--faint) }
body.v2 .tm-ai-verdict{ padding:14px 16px; border-radius:10px; background:var(--card-2); border:1px solid var(--border-soft) }
body.v2 .tm-ai-verdict p{ margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--text); white-space:pre-wrap }
body.v2 .tm-ai-error{ font-family:var(--mono); font-size:12px; color:var(--red) }

/* brand heading: bigger, still the mono terminal voice — now a home link */
body.v2 .brand h1{ font-size:28px; letter-spacing:.02em; }
body.v2 .brand h1 a{ color:inherit; text-decoration:none; transition:opacity 120ms ease }
body.v2 .brand h1 a:hover{ opacity:.8; text-decoration:none }

/* instrument chip: same silver-metallic ring language as the logout pill */
body.v2 .badge-instrument{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  color:#e6e6e6; padding:6px 16px; border-radius:999px;
  border:2px solid transparent;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,#7a7a7a,#f2f2f2 35%,#c4c4c4 55%,#5c5c5c 80%,#e8e8e8) border-box;
}

/* logout: silver-bordered pill, same shape/weight as the liquid-metal
   +Add Entry button (quieter counterpart — same metallic language, no shader) */
body.v2 .topbar button.logout{
  color:#d4d4d4; font-size:13px; border-radius:999px;
  padding:11px 24px; border:2px solid transparent;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,#7a7a7a,#f2f2f2 35%,#c4c4c4 55%,#5c5c5c 80%,#e8e8e8) border-box;
}
body.v2 .topbar button.logout:hover{
  color:#fff;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,#a8a8a8,#ffffff 35%,#e0e0e0 55%,#8a8a8a 80%,#ffffff) border-box;
}

/* dropdown menu: was the old navy card->bg-2 gradient, stood out against
   the solid-black V2 theme everywhere else — blend it in */
body.v2 .add-entry-menu{
  background:#000; border-color:var(--border);
}
body.v2 .add-entry-menu a:hover, body.v2 .add-entry-menu a:focus-visible{ background:var(--card-2) }

/* buttons: warm three-stop gradient instead of the old cool blue/purple one */
body.v2 .btn{
  background:linear-gradient(135deg,var(--purple),var(--gold) 55%,var(--blue));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px rgba(245,158,11,.22);
}
@media (hover:hover) and (pointer:fine){
  body.v2 .btn:hover{ box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 10px 26px rgba(245,158,11,.34) }
}

/* accent-bar gradients re-matched to the new hues (old ones assumed blue/gold) */
body.v2 .card.a-blue::before{ background:linear-gradient(180deg,#ffd699,var(--blue)) }
body.v2 .card.a-gold::before{ background:linear-gradient(180deg,#ffc3cd,var(--gold)) }

/* shine sweep on card hover — a soft diagonal highlight passing over the card */
body.v2 .card{ position:relative; overflow:hidden }
body.v2 .card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%);
  transform:translateX(-120%);
}
@media (hover:hover) and (pointer:fine){
  body.v2 .card:hover::after{ transform:translateX(120%); transition:transform 650ms var(--ease-out, ease) }
  body.v2 .card:hover{ box-shadow:0 1px 0 rgba(255,255,255,.04) inset }
}
@media (prefers-reduced-motion: reduce){
  body.v2 .hero::before{ animation:none }
  body.v2 .card::after{ display:none }
}

/* ============================================================================
   Liquid Metal Button, restored faithfully to the pasted component's own
   styling (dark #202020->#000 base, black-only elevation shadows, muted
   #666 label) — not the colored-glow compromise from the previous attempt.
   The shader itself is the real @paper-design/shaders library (loaded via
   CDN in the page script), not an approximation.
   ========================================================================== */
body.v2 .liquid-wrap{ position:relative }
body.v2 .liquid-3d{ position:relative; width:150px; height:44px }
body.v2 .liquid-label{
  position:absolute; inset:0; z-index:30; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:14px; font-weight:600; color:#ffffff;
  text-shadow:0px 1px 2px rgba(0,0,0,.5);
}
/* shell = bottom layer: full-size, holds the shader at FULL size so the
   colorful sheen spans the whole pill; elevation shadow lives here */
body.v2 .liquid-shell{
  position:absolute; inset:0; z-index:10; border-radius:999px;
  box-shadow:0px 0px 0px 1px rgba(0,0,0,.3), 0px 36px 14px 0px rgba(0,0,0,.02), 0px 20px 12px 0px rgba(0,0,0,.08), 0px 9px 9px 0px rgba(0,0,0,.12), 0px 2px 5px 0px rgba(0,0,0,.15);
  transition:box-shadow 150ms ease; overflow:hidden;
}
body.v2 .liquid-3d:hover .liquid-shell{
  box-shadow:0px 0px 0px 1px rgba(0,0,0,.4), 0px 12px 6px 0px rgba(0,0,0,.05), 0px 8px 5px 0px rgba(0,0,0,.1), 0px 4px 4px 0px rgba(0,0,0,.15), 0px 1px 2px 0px rgba(0,0,0,.2);
}
body.v2 .liquid-3d.pressed .liquid-shell{
  box-shadow:0px 0px 0px 1px rgba(0,0,0,.5), 0px 1px 2px 0px rgba(0,0,0,.3);
}
body.v2 .liquid-shader{ position:absolute; inset:0; width:100%; height:100% }
body.v2 .liquid-shader canvas{ width:100% !important; height:100% !important; display:block !important; display:block !important }

/* base = sits ON TOP of the shader, inset just a couple px so it covers
   the center and leaves only a thin ring of the shader visible at the
   edge — this is what actually produces the "glowing chrome outline,
   dark interior" look from the reference photo. */
body.v2 .liquid-base{
  position:absolute; inset:2.5px; z-index:20; border-radius:999px;
  background:linear-gradient(180deg,#202020 0%,#000000 100%);
  transition:transform 150ms ease;
}
body.v2 .liquid-3d.pressed .liquid-base{
  transform:translateY(1px) scale(0.98);
  box-shadow:inset 0px 2px 4px rgba(0,0,0,.4), inset 0px 1px 2px rgba(0,0,0,.3);
}
body.v2 .liquid-hit:focus-visible{ outline:2px solid var(--blue); outline-offset:3px }
body.v2 .liquid-hit{
  position:absolute; inset:0; z-index:40; background:transparent; border:none; cursor:pointer;
  border-radius:999px; overflow:hidden; padding:0;
}
.liquid-ripple{
  position:absolute; width:20px; height:20px; border-radius:50%; pointer-events:none; z-index:35;
  background:radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%) scale(0);
  animation:liquid-ripple-anim 600ms ease-out forwards;
}
@keyframes liquid-ripple-anim{ to{ transform:translate(-50%,-50%) scale(4); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .liquid-ripple{ animation:none; display:none } }