/* ============================================================
   cmvng — app.css  ·  shared page styles
   Refined "charcoal" aesthetic · light + dark · soft tonal UI
   Builds on tokens.css.
   ============================================================ */

/* ---------------- dark / light theme ---------------- */
html[data-theme="dark"] {
  --canvas:   #0C0E12;
  --canvas-2: #0E1116;
  --surface:   #151921;
  --surface-2: #1B2029;
  --surface-3: #232A34;
  --ink-900: #F3F5F8;
  --ink-800: #E3E7EE;
  --ink-700: #CBD2DC;
  --ink-600: #A4AEBC;
  --ink-500: #87919F;
  --ink-400: #69727F;
  --ink-300: #495159;
  --ink-200: #333A43;
  --line:       #232A33;
  --line-soft:  #1A2027;
  --line-strong:#2C343E;
  --accent-wash:   color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-wash-2: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-deep:   var(--accent-bright);
  --up-wash:   color-mix(in srgb, var(--up) 22%, transparent);
  --up-deep:   #34E0A1;
  --down-wash: color-mix(in srgb, var(--down) 22%, transparent);
  --down-deep: #FF8088;
  --warn-wash: color-mix(in srgb, var(--warn) 22%, transparent);
  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
  --sh-md: 0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.45);
}

/* ---------------- top navigation ---------------- */
.appnav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--canvas-2) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line);
}
.appnav-in { display:flex; align-items:center; gap:16px; height:62px; max-width:1280px; margin:0 auto; padding:0 26px; }
.appnav .logo { font-size:19px; }
.navtabs { display:flex; align-items:center; gap:1px; margin-left:8px; flex-wrap:nowrap; }
.navtabs a { padding:7px 13px; border-radius:var(--r-full); font-size:13.5px; font-weight:500; color:var(--ink-500); white-space:nowrap; transition:background var(--dur),color var(--dur); cursor:pointer; }
.navtabs a:hover { background:var(--surface-2); color:var(--ink-900); }
.navtabs a.active { background:var(--ink-900); color:var(--canvas); }
.navtabs a.ftmo.active { background:var(--accent); color:#fff; }
.nav-spacer { flex:1; }
.nav-meta { display:flex; align-items:center; gap:10px; }
.theme-toggle { width:38px; height:38px; border-radius:var(--r-full); display:grid; place-items:center;
  background:var(--surface); box-shadow:var(--ring); color:var(--ink-600); transition:color var(--dur),background var(--dur); }
.theme-toggle:hover { color:var(--ink-900); background:var(--surface-2); }
.theme-toggle svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.9; fill:none; }
.theme-toggle .moon { display:none; } .theme-toggle .sun { display:block; }
html[data-theme="dark"] .theme-toggle .moon { display:block; }
html[data-theme="dark"] .theme-toggle .sun { display:none; }
.hamburger { display:none; width:38px; height:38px; border-radius:var(--r-full); box-shadow:var(--ring); background:var(--surface); align-items:center; justify-content:center; }
.hamburger svg { width:19px; height:19px; stroke:var(--ink-700); stroke-width:2; fill:none; }

@media (max-width: 820px){
  .navtabs {
    position: fixed; top: 62px; left: 0; right: 0;
    z-index: 49;                                 /* sits just below the nav bar */
    flex-direction: column; align-items: stretch; gap: 3px;
    background: var(--surface);                  /* fully opaque dropdown */
    border-bottom: 1px solid var(--line);
    padding: 0 14px;
    box-shadow: var(--sh-md);
    max-height: 0; overflow-y: auto;
    transition: max-height .26s var(--ease), padding .26s var(--ease);
  }
  .navtabs a { padding: 13px 16px; font-size: 15px; border-radius: var(--r-sm); }
  #navtoggle:checked ~ .appnav-in .navtabs {
    max-height: calc(100vh - 62px);              /* fill remaining viewport */
    padding: 12px 14px 18px;
  }
  .hamburger { display:flex; }
  /* Lock body scroll when menu is open + dim everything underneath */
  .appnav:has(#navtoggle:checked) ~ * { filter: brightness(.7); transition: filter .2s; }
}

/* ---------------- page shell ---------------- */
.page { max-width:1280px; margin:0 auto; padding:34px 26px 72px; }
.page-hd { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.page-hd h1 { font-size:30px; font-weight:700; letter-spacing:-.035em; }
.page-hd .sub { font-size:14px; color:var(--ink-400); margin-top:5px; }
.page-hd .sub b { color:var(--ink-600); font-weight:600; }

/* ---------------- KPI cards ---------------- */
.kpi-grid { display:grid; gap:16px; margin-bottom:28px; }
.kpi-grid.k5 { grid-template-columns:repeat(5,1fr); }
.kpi-grid.k4 { grid-template-columns:repeat(4,1fr); }
.kpi-grid.k3 { grid-template-columns:repeat(3,1fr); }
.kpi { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--ring); padding:20px; }
.kpi .l { font-size:12px; color:var(--ink-400); font-weight:500; letter-spacing:.01em; }
.kpi .v { font-size:28px; font-weight:700; letter-spacing:-.035em; margin-top:10px; }
.kpi .breakdown { display:flex; gap:10px; margin-top:9px; font-size:12px; }
.kpi .breakdown .w { color:var(--up-deep); font-weight:600; }
.kpi .breakdown .ls { color:var(--down-deep); font-weight:600; }
@media (max-width:1080px){ .kpi-grid.k5{ grid-template-columns:repeat(3,1fr);} .kpi-grid.k4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .kpi-grid.k5,.kpi-grid.k4,.kpi-grid.k3{ grid-template-columns:repeat(2,1fr);} }

.pos { color:var(--up); } .neg { color:var(--down); }

/* ---------------- full-bleed candle background ---------------- */
body { position:relative; }
.app-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  color:var(--ink-300); opacity:.06; }
html[data-theme="dark"] .app-bg { opacity:.10; }
.app-bg svg { width:100%; height:100%; display:block; }
.appnav, .appfoot, .page { position:relative; z-index:1; }
@media (prefers-reduced-motion: no-preference){
  .app-bg { transition:opacity .4s var(--ease); }
}

/* ---------------- panel + table (clean, airy) ---------------- */
.panel { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--ring); overflow:hidden; }
.panel-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 14px; }
.panel-hd h2 { font-size:15px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.panel-hd .meta { font-size:12px; color:var(--ink-400); }
.tbl-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
table.tbl th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-400); font-weight:600; padding:6px 16px 12px; border-bottom:1px solid var(--line); }
table.tbl th:first-child { padding-left:22px; } table.tbl th:last-child { padding-right:22px; }
table.tbl td { padding:14px 16px; border-top:1px solid var(--line-soft); white-space:nowrap; color:var(--ink-700); }
table.tbl td:first-child { padding-left:22px; } table.tbl td:last-child { padding-right:22px; }
table.tbl tbody tr { transition:background var(--dur); }
table.tbl tbody tr:hover td { background:color-mix(in srgb, var(--ink-500) 5%, transparent); }
table.tbl .num { text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
table.tbl th.num { text-align:right; }
table.tbl td b, .cellpair b { font-weight:600; color:var(--ink-900); }
.cellpair { display:inline-flex; align-items:center; gap:11px; }

/* ---------------- pair icons (flags + coins) ---------------- */
/* ---------------- pair icons: real flag + coin images ---------------- */
.pic { display:inline-flex; align-items:center; flex:none; }
.pic img { width:23px; height:23px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong); background:var(--surface-2); }
.pic img.q { margin-left:-9px; }
.pic.lg img { width:28px; height:28px; }
.rcoin { width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 1px var(--line); background:var(--surface-2); }
.rcoin.lg { width:36px; height:36px; }
.coin { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:12px; font-weight:700; color:#fff; letter-spacing:-.02em; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 4px rgba(0,0,0,.12); }
.coin.lg { width:36px; height:36px; font-size:14px; }
.coin svg { display:block; } .coin b { line-height:1; font-size:14px; }

/* ---------------- tags / pills ---------------- */
.tag { display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 10px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.tag-buy, .tag-win  { background:var(--up-wash);   color:var(--up-deep); }
.tag-sell, .tag-loss{ background:var(--down-wash);  color:var(--down-deep); }
.tag-be   { background:var(--surface-3); color:var(--ink-600); }
.tag-fill { background:var(--accent-wash); color:var(--accent-deep); }
.tag-neutral { background:var(--surface-2); color:var(--ink-500); }
.tf-chip { font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--ink-500); background:var(--surface-2); padding:3px 8px; border-radius:6px; }

.cls { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 12px; border-radius:var(--r-full); font-size:11px; font-weight:700; letter-spacing:.04em; }
.cls-keep { background:var(--up-wash); color:var(--up-deep); }
.cls-watch { background:var(--warn-wash); color:#9A6516; }
html[data-theme="dark"] .cls-watch { color:#F0B254; }
.cls-drop { background:var(--down-wash); color:var(--down-deep); }

/* ---------------- signal cards (feed, read-only) ---------------- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.scard { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--ring); overflow:hidden; transition:box-shadow var(--dur), transform var(--dur); }
.scard:hover { box-shadow:var(--ring), var(--sh-md); transform:translateY(-2px); }
.scard .top { display:flex; align-items:center; gap:12px; padding:18px 18px 14px; }
.scard .lv { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-radius:var(--r-sm); overflow:hidden; margin:0 18px 18px; }
.scard .lv > div { background:var(--surface); padding:11px 13px; }
.scard .lv span { font-size:10px; color:var(--ink-400); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.scard .lv b { display:block; font-size:14px; margin-top:3px; font-family:var(--font-mono); letter-spacing:-.02em; }

/* ---------------- trade paths (clean lane) ---------------- */
.paths { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--ring); overflow:hidden; }
.tpath { display:grid; grid-template-columns:230px 1fr 120px; gap:24px; align-items:center; padding:18px 22px; border-top:1px solid var(--line-soft); }
.tpath:first-child { border-top:0; }
.tpath .meta .nm { display:flex; align-items:center; gap:8px; }
.tpath .meta .px { font-family:var(--font-mono); font-size:12px; color:var(--ink-400); margin-top:5px; letter-spacing:-.02em; }
.lane { position:relative; height:40px; }
.lane .base { position:absolute; left:0; right:0; top:50%; height:3px; border-radius:3px; background:var(--surface-3); transform:translateY(-50%); }
.lane .range { position:absolute; top:50%; height:3px; border-radius:3px; transform:translateY(-50%); }
.lane .range.win { background:color-mix(in srgb, var(--up) 55%, transparent); }
.lane .range.loss { background:color-mix(in srgb, var(--down) 55%, transparent); }
.lane .whisk { position:absolute; top:calc(50% - 7px); width:2px; height:14px; border-radius:2px; }
.lane .whisk.mfe { background:var(--up); } .lane .whisk.mae { background:var(--down); }
.lane .entry { position:absolute; top:calc(50% - 9px); width:2.5px; height:18px; border-radius:2px; background:var(--ink-700); transform:translateX(-50%); }
.lane .exit { position:absolute; top:calc(50% - 6px); width:13px; height:13px; border-radius:50%; transform:translate(-50%,0); box-shadow:0 0 0 3px var(--surface); }
.lane .exit.win { background:var(--up); } .lane .exit.loss { background:var(--down); }
.lane .cap { position:absolute; font-size:9.5px; font-weight:600; color:var(--ink-400); font-family:var(--font-mono); top:-3px; transform:translateX(-50%); white-space:nowrap; }
.tpath .out { text-align:right; }
.tpath .out .r { font-size:11.5px; color:var(--ink-400); margin-top:3px; font-family:var(--font-mono); }
@media (max-width:720px){ .tpath{ grid-template-columns:1fr; gap:12px; } }

/* ---------------- sessions ---------------- */
.sess-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
@media (max-width:760px){ .sess-grid{ grid-template-columns:1fr; } }
.sess-card { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--ring); padding:20px; }
.sess-card .nm { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; }
.sess-card .nm .d { width:9px; height:9px; border-radius:50%; }
.sess-card .row { display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-top:1px solid var(--line-soft); color:var(--ink-600); }
.sess-card .row:first-of-type { border-top:0; margin-top:6px; }
.timeline { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--ring); padding:20px; margin-bottom:28px; }
.tl-track { position:relative; height:60px; border-radius:var(--r-md); overflow:hidden; display:flex; gap:2px; }
.tl-seg { height:100%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#fff; }
.tl-hours { display:flex; justify-content:space-between; margin-top:8px; font-size:10.5px; color:var(--ink-400); font-family:var(--font-mono); }

.spark { width:96px; height:30px; }

/* ---------------- footer ---------------- */
.appfoot { max-width:1280px; margin:0 auto; padding:26px; border-top:1px solid var(--line); color:var(--ink-400); font-size:12px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ---------------- share (light, clean) ---------------- */
.share-wrap { display:grid; grid-template-columns:1fr 280px; gap:28px; align-items:start; }
@media (max-width:880px){ .share-wrap{ grid-template-columns:1fr; } }
.share-card { position:relative; width:100%; max-width:740px; aspect-ratio:16/10; border-radius:var(--r-2xl); overflow:hidden;
  background:linear-gradient(165deg, var(--surface), color-mix(in srgb, var(--accent) 6%, var(--surface)));
  box-shadow:var(--ring), var(--sh-lg); padding:38px 42px; display:flex; flex-direction:column; }
.share-card .accentbar { position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--accent),var(--accent-bright)); }
.sc-top { display:flex; align-items:center; justify-content:space-between; }
.sc-tag { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); }
.sc-hero { margin-top:auto; }
.sc-hero .lbl { font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); }
.sc-hero .big { font-family:var(--font-mono); font-size:clamp(40px,7vw,72px); font-weight:700; letter-spacing:-.04em; line-height:1; margin-top:8px; }
.sc-stats { display:flex; gap:38px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.sc-stats .st .v { font-family:var(--font-mono); font-size:22px; font-weight:700; letter-spacing:-.02em; }
.sc-stats .st .k { font-size:12px; color:var(--ink-400); margin-top:3px; }
.sc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:22px; font-size:12.5px; color:var(--ink-400); }
.sc-foot b { color:var(--ink-700); }
.opt { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--ring); padding:20px; }
.opt h3 { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin-bottom:13px; }
.opt .seg { display:flex; flex-direction:column; gap:7px; }
.opt .seg button { text-align:left; padding:11px 14px; border-radius:var(--r-sm); font-size:14px; font-weight:500; color:var(--ink-600); background:var(--surface-2); }
.opt .seg button.on { background:var(--accent); color:#fff; }
.opt .dl { margin-top:16px; }

/* ============================================================
   Mobile responsive polish — added 2026-06-13
   Targets phones / small tablets to make all pages usable.
   ============================================================ */

@media (max-width: 720px) {
  .page { padding: 22px 16px 60px; }
  .page-hd { margin-bottom: 20px; }
  .page-hd h1 { font-size: 24px; }
  .page-hd .sub { font-size: 13px; }
  .panel-hd { padding: 14px 16px 10px; }
  .panel-hd h2 { font-size: 15px; }

  /* Tighter table cells on mobile */
  table.tbl { font-size: 12.5px; }
  table.tbl th { padding: 6px 10px 10px; font-size: 10px; }
  table.tbl td { padding: 11px 10px; }
  table.tbl th:first-child, table.tbl td:first-child { padding-left: 16px; }
  table.tbl th:last-child, table.tbl td:last-child { padding-right: 16px; }

  /* TF chip stays inline but tighter on mobile */
  .tf-chip { padding: 2px 6px; font-size: 10.5px; }

  /* KPI cards full-width pairs on phones */
  .kpi-grid.k5, .kpi-grid.k4, .kpi-grid.k3, .kpi-grid.k2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi .v { font-size: 22px; }
  .kpi .l { font-size: 10px; }

  /* Trade-path lane more compact on mobile */
  .tpath { padding: 14px 12px; }
  .lane { height: 28px; }

  /* Hide page-hd legend on phones to save space (rendered on desktop only) */
  .page-hd .row.gap-3 { display: none; }
}

@media (max-width: 480px) {
  .page-hd h1 { font-size: 21px; }
  .kpi-grid.k5, .kpi-grid.k4, .kpi-grid.k3 { grid-template-columns: 1fr; }
  .kpi .v { font-size: 24px; }

  /* Share preview card adapts on small phones */
  .share-card { padding: 18px 16px !important; }
  .sc-hero .big { font-size: 36px !important; }
  .sc-stats { grid-template-columns: 1fr !important; }
  .sc-stats .st .v { font-size: 18px !important; }

  /* Share chooser one column on tiny screens */
  .share-chooser { grid-template-columns: 1fr; padding: 14px 16px 18px; }
}