:root{
    /* 0721 device fix: one true nav-height datum. The bank scene anchored at a
       60px fallback while the real nav renders ~70px (<=1280) / 80px (>=1181),
       so the nav ate the scene crown; the home fold subtracted 68 vs a real 74. */
    --te-nav-h:74px; --nav-h:74px;
    /* DARK TEAL theme (site-wide) — matches the markets cockpit */
    --bg:#07090c; --bg-soft:#0d1116; --card:#0E0C09;
    --gold:#F6DE9B; --amber:#F6DE9B; --orange:#EFCE7E; --rust:#A8823B; --garnet:#8E2017;
    --ink:#F1E9DC; --ink-2:#B3A896; --ink-3:#8B8172; --ink-4:#6B6254;
    /* teal accent on near-black; molten ramp kept for the wordmark + CTA pops */
    --royal:#EFCE7E; --navy:#16213F;
    --violet:#EFCE7E; --violet-deep:#EFCE7E; --violet-bright:#F6DE9B;
    --fuchsia:#EFCE7E; --violet-soft:#2A2208; --violet-soft-2:#1C1705;
    --yes:#2FD07A; --yes-deep:#2FD07A; --yes-soft:#1C1705;
    --no:#f0584f; --no-deep:#f0584f; --no-soft:#2a1513;
    --line:#262019; --line-2:#1A1610;
    --grad:#EFCE7E;
    --grad-soft:#0d1116;
    --shadow-sm:none;
    --shadow:none;
    --shadow-lg:none;
    --display:"Newsreader", Georgia, "Times New Roman", serif;
    --sans:"Inter", system-ui, -apple-system, sans-serif;
    --mono:"DM Mono", ui-monospace, Menlo, monospace;
    --r:6px; --r-sm:4px; --r-lg:8px; --maxw:1140px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{ margin:0; background:var(--bg);
    color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
  ::selection{ background:#2A2208 }
  a{ color:inherit; text-decoration:none }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px }
  .mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }

  /* ── nav ── */
  /* near-opaque (no backdrop-filter) so a sticky nav never re-blurs the page on every scroll frame */
  .nav{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line) }
  .nav-in{ max-width:1440px; margin:0 auto; padding:15px 22px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px }
  .brand{ display:flex; align-items:center; gap:10px; min-width:0; justify-self:start }
  .logo{ width:30px; height:30px; border-radius:8px; flex:none;
    background:url("/favicon.svg?v=6") center/100% 100% no-repeat; box-shadow:var(--shadow-sm) }
  .brand-name{ font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em; line-height:1 }
  .demo-pill{ font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--violet-deep); background:var(--violet-soft); border:1px solid #EAD9C7; border-radius:5px; padding:1px 6px; vertical-align:middle; cursor:help }
  .brand-sub{ font-size:10.5px; color:var(--ink-3); margin-top:2px }
  .brand-sub a{ color:var(--violet); font-weight:600 }
  .nav-links{ display:flex; gap:6px; align-items:center; justify-self:center }
  .nav-links a{ font-size:13.5px; font-weight:600; color:var(--ink-2); padding:8px 12px; border-radius:9px }
  .nav-links a:hover{ color:var(--violet-deep); background:var(--violet-soft) }
  .wallet{ display:flex; align-items:center; gap:9px; padding:8px 14px; border-radius:999px;
    background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm); white-space:nowrap }
  .wallet .dot{ width:8px; height:8px; border-radius:50%; background:var(--grad) }
  .wallet .lab{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
  .wallet .amt{ font-family:var(--mono); font-weight:500; color:var(--violet-deep) }

  /* ── welcome ── */
  .welcome{ max-width:var(--maxw); margin:16px auto 0; padding:0 22px }
  .welcome-in{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--r);
    background:var(--grad-soft); border:1px solid #EAD9C7 }
  .welcome-in .ico{ font-family:var(--mono); font-weight:500; color:var(--violet-deep); background:#fff;
    border-radius:8px; padding:4px 9px; font-size:13px; box-shadow:var(--shadow-sm) }
  .welcome-in p{ margin:0; font-size:13.5px; color:var(--ink-2) }
  .welcome-in b{ color:var(--ink) }
  .welcome-in button{ margin-left:auto; border:none; background:transparent; color:var(--ink-3);
    font-size:18px; cursor:pointer; line-height:1; padding:2px 6px }

  /* ── hero ── */
  .hero{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; padding:46px 0 18px }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--violet-deep);
    background:var(--violet-soft); padding:6px 12px; border-radius:999px; margin-bottom:18px }
  .eyebrow .pulse{ width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 0 rgba(232,115,28,.5); animation:pulse 2.2s infinite }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(232,115,28,.45)} 70%{box-shadow:0 0 0 7px rgba(232,115,28,0)} 100%{box-shadow:0 0 0 0 rgba(232,115,28,0)} }
  h1.head{ font-family:var(--display); font-weight:800; font-size:clamp(34px,5.4vw,54px); line-height:1.02;
    letter-spacing:-.022em; margin:0 0 18px }
  h1.head .pop{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
  .sub{ font-size:clamp(15px,1.8vw,18px); color:var(--ink-2); max-width:34ch; margin:0 0 24px }
  .cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }
  .btn{ font-family:var(--sans); font-weight:700; font-size:15px; padding:13px 22px; border-radius:12px; border:none; cursor:pointer; transition:transform .14s ease, box-shadow .2s ease }
  .btn-primary{ color:#fff; background:var(--grad); box-shadow:var(--shadow-lg) }
  .btn-primary:hover{ transform:translateY(-2px) }
  .btn-ghost{ background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-sm) }
  .btn-ghost:hover{ border-color:var(--violet); color:var(--violet-deep) }
  .hero-stats{ display:flex; gap:22px; margin-top:26px }
  .hstat .v{ font-family:var(--mono); font-weight:500; font-size:22px; color:var(--ink) }
  .hstat .k{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:2px }

  /* ── featured trade card ── */
  .market{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden }
  .m-top{ padding:18px 20px 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
  .cat-chip{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.03em;
    padding:5px 11px; border-radius:999px; color:#fff }
  .cat-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.92) }
  .m-move{ margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:500; padding:3px 9px; border-radius:999px }
  .m-move.up{ color:var(--yes-deep); background:var(--yes-soft) } .m-move.dn{ color:var(--no-deep); background:var(--no-soft) }
  .m-move.flat{ color:var(--ink-3); background:var(--line-2) }
  .m-q{ font-family:var(--display); font-weight:700; font-size:clamp(18px,2.3vw,23px); line-height:1.22; letter-spacing:-.01em; padding:8px 20px 0; margin:0 }
  .rulecard{ margin:14px 20px 0; padding:11px 14px; background:var(--bg-soft); border:1px solid var(--line-2); border-radius:var(--r-sm) }
  .rulecard .rh{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet-deep); margin-bottom:5px }
  .rulecard p{ margin:0; font-size:13px; color:var(--ink-2); line-height:1.5 }
  .rulecard .src{ margin-top:6px; font-family:var(--mono); font-size:11px; color:var(--ink-3) }

  .m-body{ display:grid; grid-template-columns:206px 1fr; gap:8px; padding:16px 20px 4px; align-items:center }
  .ringwrap{ position:relative; width:188px; height:188px; margin:0 auto }
  .ringwrap svg{ width:188px; height:188px; transform:rotate(0deg) }
  .ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center }
  .ring-pct{ font-family:var(--mono); font-weight:500; font-size:42px; color:var(--ink); line-height:1; letter-spacing:-.02em }
  .ring-pct .pc{ font-size:.42em; color:var(--ink-3); margin-left:1px }
  .ring-lab{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:6px }
  .ring-pct.flash{ animation:flash .6s ease }
  @keyframes flash{ 0%{color:var(--violet)} 100%{color:var(--ink)} }
  .vsline{ text-align:center; font-size:12.5px; color:var(--ink-2); margin-top:2px }
  .vsline b{ font-family:var(--mono); font-weight:500; color:var(--ink) }
  .vsline .hd{ color:var(--violet-deep) }
  .chart{ min-width:0 }
  .chart svg{ display:block; width:100%; height:172px }

  /* ── trade ticket ── */
  .ticket{ margin:12px 20px 20px; padding:16px; background:var(--bg-soft); border:1px solid var(--line-2); border-radius:var(--r) }
  .sides{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .side-btn{ border:2px solid var(--line); background:#fff; border-radius:var(--r-sm); padding:12px 14px; cursor:pointer; text-align:left; transition:all .14s ease }
  .side-btn .s-name{ font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:space-between }
  .side-btn .s-px{ font-family:var(--mono); font-size:21px; font-weight:500; margin-top:3px }
  .side-btn[data-v=YES]{ color:var(--yes-deep) }
  .side-btn[data-v=NO]{ color:var(--no-deep) }
  .side-btn[aria-pressed=true][data-v=YES]{ border-color:var(--yes); background:var(--yes-soft) }
  .side-btn[aria-pressed=true][data-v=NO]{ border-color:var(--no); background:var(--no-soft) }
  .side-btn[aria-pressed=false]{ opacity:.66 }
  .side-btn:hover{ opacity:1 }
  .ticket-row{ display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap }
  .mode{ display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px }
  .mode button{ font-family:var(--sans); font-weight:600; font-size:12.5px; border:none; background:transparent; color:var(--ink-2); padding:7px 14px; border-radius:8px; cursor:pointer }
  .mode button[aria-pressed=true]{ background:var(--ink); color:#fff }
  .size{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap }
  .size label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }
  .size input{ width:86px; font-family:var(--mono); font-size:14px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink) }
  .chips{ display:flex; gap:5px }
  .chip{ font-family:var(--mono); font-size:12px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink-2); cursor:pointer }
  .chip:hover{ border-color:var(--violet); color:var(--violet-deep) }
  .preview{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); flex-wrap:wrap }
  .t-move{ font-family:var(--mono); font-size:12px; color:var(--violet-deep); margin-top:12px; text-align:center; min-height:0 }
  .pv-item .pl{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }
  .pv-item .pv{ font-family:var(--mono); font-size:16px; font-weight:500; color:var(--ink); margin-top:2px }
  .pv-item .pv.cost{ color:var(--violet-deep) }
  .do{ width:100%; margin-top:14px; font-family:var(--sans); font-weight:700; font-size:15.5px; padding:14px; border:none; border-radius:12px; cursor:pointer; color:#fff; background:var(--grad); box-shadow:var(--shadow-lg); transition:transform .14s ease }
  .do:hover{ transform:translateY(-2px) }
  .do:disabled{ opacity:.4; cursor:default; transform:none; box-shadow:none }
  .do.sell{ background:linear-gradient(135deg, var(--no), var(--no-deep)) }
  .t-msg{ font-family:var(--mono); font-size:12.5px; margin-top:11px; min-height:1.1em; text-align:center }
  .t-msg.bad{ color:var(--no-deep) } .t-msg.good{ color:var(--yes-deep) }
  .hold{ text-align:center; font-size:12px; color:var(--ink-3); margin-top:9px }
  .res-banner{ padding:16px 20px; margin:0 20px 20px; border-radius:var(--r); font-weight:700; text-align:center; font-size:15px }
  .res-banner.y{ background:var(--yes-soft); color:var(--yes-deep) }
  .res-banner.n{ background:var(--no-soft); color:var(--no-deep) }
  .res-banner.closed{ background:var(--violet-soft-2); color:var(--violet-deep) }
  .res-tools{ display:none; margin:0 20px 20px; padding:13px 16px; background:var(--violet-soft-2); border:1px dashed #D9C9F7; border-radius:var(--r-sm); align-items:center; gap:9px; flex-wrap:wrap }
  .res-tools.on{ display:flex }
  .res-tools .rl{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--violet-deep) }
  .res-btn{ font-family:var(--mono); font-size:12px; padding:8px 13px; border-radius:9px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink-2) }
  .res-btn.y:hover{ border-color:var(--yes); color:var(--yes-deep) }
  .res-btn.n:hover{ border-color:var(--no); color:var(--no-deep) }

  /* ── sections ── */
  .sec{ padding:50px 0 6px }
  .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap }
  h2{ font-family:var(--display); font-weight:700; font-size:clamp(24px,3.6vw,32px); letter-spacing:-.018em; margin:0 }
  .sec-head .note{ font-size:13px; color:var(--ink-3) }

  /* loop */
  .loop{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px }
  .step{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow-sm) }
  .step .n{ font-family:var(--mono); font-weight:600; font-size:13px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--royal); color:#fff; margin-bottom:11px }
  .step h3{ font-size:14px; font-weight:700; margin:0 0 4px }
  .step p{ margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.45 }

  /* board */
  .filters{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap }
  .search{ position:relative; flex:1; min-width:200px }
  .search input{ width:100%; font-family:var(--sans); font-size:14.5px; padding:11px 14px 11px 38px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink) }
  .search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.4 }
  .catbar{ display:flex; gap:7px; flex-wrap:wrap }
  .catchip{ font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:7px }
  .catchip .cd{ width:8px; height:8px; border-radius:50% }
  .catchip:hover{ border-color:var(--violet) }
  .catchip.on{ color:#fff; border-color:transparent }
  .toggle{ font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:8px; user-select:none }
  .toggle .sw{ width:36px; height:20px; border-radius:999px; background:var(--line); position:relative; transition:background .2s }
  .toggle .sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .2s }
  .toggle.on .sw{ background:var(--violet) } .toggle.on .sw::after{ transform:translateX(16px) }

  .new-form{ display:none; gap:9px; margin-bottom:16px }
  .new-form.on{ display:flex }
  .new-form input{ flex:1; min-width:0; font-family:var(--sans); font-size:15px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink) }
  .new-msg{ font-size:13px; color:var(--yes-deep); margin-bottom:14px; min-height:0 }
  .new-msg.show{ min-height:1.2em }

  .grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
  .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:0; cursor:pointer; transition:transform .14s ease, box-shadow .2s ease, border-color .2s; overflow:hidden; box-shadow:var(--shadow-sm) }
  .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent }
  .card.sel{ border-color:var(--violet); box-shadow:0 0 0 2px var(--violet-soft), var(--shadow) }
  .card-bar{ height:4px }
  .card-in{ padding:15px 16px }
  .card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px }
  .card-cat{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase }
  .card-move{ font-family:var(--mono); font-size:11px; font-weight:500 }
  .card-move.up{ color:var(--yes-deep) } .card-move.dn{ color:var(--no-deep) } .card-move.flat{ color:var(--ink-4) }
  .card-q{ font-weight:600; font-size:15px; line-height:1.32; color:var(--ink); min-height:2.6em }
  .card-bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:13px }
  .card-prob{ display:flex; align-items:baseline; gap:7px }
  .card-prob .big{ font-family:var(--mono); font-weight:500; font-size:25px; color:var(--ink) }
  .card-prob.res .big{ font-size:15px }
  .card-spark{ width:96px; height:34px }
  .card-spark svg{ display:block; width:96px; height:34px }
  .card-yn{ display:flex; gap:8px; font-family:var(--mono); font-size:11px; margin-top:11px }
  .card-yn .y{ color:var(--yes-deep) } .card-yn .n{ color:var(--no-deep) }
  .card-vol{ font-family:var(--mono); font-size:10.5px; color:var(--ink-2); margin-top:9px }
  .card-src{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

  /* positions */
  .ptable{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm) }
  .prow{ display:grid; grid-template-columns:1fr 70px 70px 96px 96px; gap:12px; align-items:center; padding:13px 18px; border-top:1px solid var(--line-2); font-size:13.5px }
  .prow.h{ border-top:none; background:var(--bg-soft); font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3) }
  .prow .pm{ font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .prow .ps{ font-family:var(--mono); font-weight:500 }
  .prow .ps.y{ color:var(--yes-deep) } .prow .ps.n{ color:var(--no-deep) }
  .prow .pn{ font-family:var(--mono); text-align:right }
  .prow .pnl{ font-family:var(--mono); text-align:right; font-weight:500 }
  .prow .pnl.pos{ color:var(--yes-deep) } .prow .pnl.neg{ color:var(--no-deep) }
  .empty{ padding:22px 18px; font-size:13.5px; color:var(--ink-3); text-align:center }

  /* record + leaderboard */
  .lb-grid{ display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:start }
  .record{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow-sm) }
  .record .rlab{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px }
  .record input{ width:100%; font-family:var(--mono); font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-soft); color:var(--ink); margin-bottom:16px }
  .rstats{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
  .rstat{ background:var(--bg-soft); border-radius:var(--r-sm); padding:12px 14px }
  .rstat .k{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3) }
  .rstat .v{ font-family:var(--mono); font-weight:500; font-size:19px; color:var(--ink); margin-top:4px }
  .rstat .v.pos{ color:var(--yes-deep) } .rstat .v.neg{ color:var(--no-deep) }
  .season{ margin-top:14px; font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:7px }
  .season .pill{ font-family:var(--mono); font-size:11px; color:var(--violet-deep); background:var(--violet-soft); padding:3px 9px; border-radius:999px }

  .lboard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm) }
  .lrow{ display:grid; grid-template-columns:42px 1fr auto auto; gap:14px; align-items:center; padding:13px 18px; border-top:1px solid var(--line-2) }
  .lrow:first-child{ border-top:none }
  .lrow.me{ background:var(--violet-soft-2) }
  .lrank{ font-family:var(--mono); font-size:14px; font-weight:600; color:#CBD2DE; text-align:center; background:linear-gradient(135deg,#2C3343,#1A1F2B); border-radius:8px; padding:3px 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.07) }
  /* podium gets real metallic foil, gold then silver then bronze, then deep jewel tones */
  .lrow.top .lrank{ font-weight:700; border-radius:8px; padding:3px 0 }
  .lrow.r1  .lrank{ background:radial-gradient(72% 62% at 26% 14%, rgba(255,255,255,.97) 0%, rgba(255,255,255,.4) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FFF7D6 0%,#F6D866 26%,#D2A026 52%,#8C6A12 78%,#F8E390 100%); color:#3A2A02; box-shadow:inset 0 1px 1px rgba(255,255,255,.95), inset 0 -4px 6px rgba(120,85,6,.55), 0 0 10px rgba(214,168,40,.45), 0 1px 6px rgba(170,128,12,.5); text-shadow:0 1px 0 rgba(255,255,255,.5) }
.lrow.r2  .lrank{ background:radial-gradient(72% 62% at 26% 14%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.42) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FFFFFF 0%,#E4E7EA 28%,#B2B8BE 54%,#7E858C 80%,#EDEFF1 100%); color:#2E3338; box-shadow:inset 0 1px 1px rgba(255,255,255,1), inset 0 -4px 6px rgba(88,96,103,.5), 0 0 10px rgba(176,184,192,.45), 0 1px 6px rgba(150,158,164,.45); text-shadow:0 1px 0 rgba(255,255,255,.6) }
.lrow.r3  .lrank{ background:radial-gradient(72% 62% at 26% 14%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.34) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#F8D2A6 0%,#D8945A 32%,#AE6A30 60%,#7A451B 82%,#EEBC86 100%); color:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.6), inset 0 -4px 6px rgba(70,40,10,.55), 0 0 10px rgba(176,108,52,.45), 0 1px 6px rgba(160,95,42,.45); text-shadow:0 1px 1px rgba(80,45,15,.6) }
.lrow.r4  .lrank{ background:radial-gradient(70% 60% at 26% 14%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.36) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FFF0AA 0%,#FFCE48 38%,#F8A81A 70%,#D2820E 100%); color:#5A3402; box-shadow:inset 0 1px 1px rgba(255,255,255,.92), inset 0 -5px 7px rgba(150,90,8,.5), 0 0 12px rgba(255,182,52,.62), 0 1px 6px rgba(240,165,40,.45); text-shadow:0 1px 0 rgba(255,255,255,.45) }
.lrow.r5  .lrank{ background:radial-gradient(70% 60% at 26% 14%, rgba(255,255,255,.93) 0%, rgba(255,255,255,.34) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FFD274 0%,#FBA63E 40%,#EE8616 72%,#BE5E0A 100%); color:#5A2D02; box-shadow:inset 0 1px 1px rgba(255,255,255,.88), inset 0 -5px 7px rgba(140,72,6,.5), 0 0 12px rgba(251,158,46,.6), 0 1px 6px rgba(236,135,22,.45); text-shadow:0 1px 0 rgba(255,236,190,.45) }
.lrow.r6  .lrank{ background:radial-gradient(70% 60% at 26% 14%, rgba(255,255,255,.91) 0%, rgba(255,255,255,.32) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FFBE5C 0%,#F78A26 42%,#EA7418 74%,#B25410 100%); color:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.78), inset 0 -4px 6px rgba(130,58,8,.5), 0 0 12px rgba(244,124,30,.58), 0 1px 6px rgba(232,115,28,.45); text-shadow:0 1px 1px rgba(110,48,10,.55) }
.lrow.r7  .lrank{ background:radial-gradient(70% 60% at 26% 14%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.3) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FFA850 0%,#F06E1E 44%,#DE5618 76%,#A23C0E 100%); color:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.72), inset 0 -4px 6px rgba(110,44,8,.5), 0 0 12px rgba(236,102,26,.58), 0 1px 6px rgba(214,84,26,.45); text-shadow:0 1px 1px rgba(104,40,10,.6) }
.lrow.r8  .lrank{ background:radial-gradient(70% 60% at 26% 14%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.3) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FF9452 0%,#EA5424 46%,#D43E1E 80%,#982810 100%); color:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.7), inset 0 -4px 6px rgba(95,30,12,.5), 0 0 12px rgba(228,78,32,.6), 0 1px 6px rgba(192,57,43,.45); text-shadow:0 1px 1px rgba(96,30,14,.6) }
.lrow.r9  .lrank{ background:radial-gradient(70% 60% at 26% 14%, rgba(255,255,255,.84) 0%, rgba(255,255,255,.28) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FA7E46 0%,#E03E22 48%,#C42A1A 82%,#921C10 100%); color:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.66), inset 0 -4px 6px rgba(80,20,12,.5), 0 0 13px rgba(224,62,36,.62), 0 1px 6px rgba(165,42,30,.45); text-shadow:0 1px 1px rgba(88,22,14,.62) }
.lrow.r10 .lrank{ background:radial-gradient(70% 60% at 26% 14%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.26) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#F66C42 0%,#D2301C 50%,#B0221A 82%,#7E160E 100%); color:#fff; box-shadow:inset 0 1px 1px rgba(255,255,255,.62), inset 0 -4px 6px rgba(74,14,9,.5), 0 0 13px rgba(214,48,30,.62), 0 1px 6px rgba(142,32,23,.45); text-shadow:0 1px 1px rgba(82,18,12,.64) }
  .lhandle{ font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .lres{ font-family:var(--mono); font-size:11px; color:var(--ink-3) }
  .lpnl{ font-family:var(--mono); font-weight:500; text-align:right }
  .lpnl.pos{ color:var(--yes-deep) } .lpnl.neg{ color:var(--no-deep) }
  .lb-empty{ padding:24px 18px; font-size:13.5px; color:var(--ink-3); line-height:1.6; text-align:center }

  /* how it works */
  .cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:8px }
  .ic{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow-sm) }
  .ic .emoji{ font-size:20px } /* decorative accent only */
  .ic h3{ font-family:var(--sans); font-weight:700; font-size:14.5px; margin:10px 0 6px }
  .ic p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5 }
  .ic .tag{ font-family:var(--mono); font-size:.86em; color:var(--violet-deep); background:var(--violet-soft); padding:1px 6px; border-radius:5px }
  .calib{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-top:13px; box-shadow:var(--shadow-sm) }
  .brier{ font-family:var(--mono); font-size:13px; color:var(--ink-2); margin-bottom:15px }
  .brier b{ color:var(--ink); font-weight:500; font-size:17px }
  .calbars{ display:grid; gap:7px }
  .calrow{ display:grid; grid-template-columns:64px 1fr 46px; gap:12px; align-items:center; font-family:var(--mono); font-size:10.5px; color:var(--ink-3) }
  .caltrack{ height:14px; background:var(--bg-soft); border:1px solid var(--line); border-radius:4px; overflow:hidden; position:relative }
  .calfill{ height:100%; background:var(--grad); opacity:.5 }
  .calmark{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--no) }
  .page-note{ margin-top:18px; padding:16px 18px; background:var(--violet-soft-2); border:1px solid #EAD9C7; border-radius:var(--r); font-size:13px; color:var(--ink-2); line-height:1.6 }
  .legal{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow-sm) }
  .legal .lh{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--violet-deep); margin:14px 0 6px }
  .legal .lh:first-child{ margin-top:0 }
  .legal p{ margin:0; font-size:13px; color:var(--ink-2); line-height:1.62; max-width:78ch }
  .page-note b{ color:var(--ink) }

  footer{ margin-top:54px; border-top:1px solid var(--line); padding:30px 0 56px }
  .foot-in{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center }
  .foot-meta{ font-size:12px; color:var(--ink-3) }
  .foot-meta b{ color:var(--ink-2); font-weight:700 } .foot-meta .sep{ margin:0 7px; opacity:.5 }
  .foot-links a{ font-size:12px; color:var(--ink-3); margin-left:14px } .foot-links a:hover{ color:var(--violet-deep) }
  .disc{ font-size:11.5px; color:var(--ink-4); margin-top:16px; line-height:1.6; max-width:80ch }
  .disc-copy{ display:block; margin-top:12px; letter-spacing:.02em }
  .reset{ background:transparent; border:none; color:var(--ink-4); font-size:11.5px; cursor:pointer; margin-top:14px; text-decoration:underline }

  :focus-visible{ outline:2px solid var(--violet); outline-offset:2px; border-radius:4px }

  /* load reveal */
  .reveal{ opacity:0; transform:translateY(10px); animation:rise .6s cubic-bezier(.2,.7,.3,1) forwards }
  .reveal.d1{ animation-delay:.05s } .reveal.d2{ animation-delay:.12s }
  @keyframes rise{ to{ opacity:1; transform:none } }

  @media (max-width:880px){
    .hero{ grid-template-columns:1fr; gap:26px; padding:30px 0 8px }
    .m-body{ grid-template-columns:1fr }
    .ringwrap{ width:170px; height:170px } .ringwrap svg{ width:170px; height:170px }
    .lb-grid{ grid-template-columns:1fr }
    .loop{ grid-template-columns:1fr 1fr } .cards3{ grid-template-columns:1fr 1fr }
    .ptable{ overflow-x:auto } .prow{ min-width:520px }
  }
  @media (max-width:560px){
    .nav-in{ display:flex } .nav-links{ display:none } .loop{ grid-template-columns:1fr 1fr }
    .hero-stats{ gap:16px } .foot-in{ flex-direction:column; align-items:flex-start }
  }
  @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto } .reveal{ opacity:1; transform:none } }
  /* board sort + watchlist + toast (upgrades) */
  .sortseg{ display:inline-flex; gap:3px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:3px }
  .sortseg button{ font-family:var(--sans); font-weight:600; font-size:12.5px; border:none; background:transparent; color:var(--ink-2); padding:7px 13px; border-radius:7px; cursor:pointer; transition:background .15s, color .15s }
  .sortseg button[aria-pressed="true"]{ background:#fff; color:var(--violet-deep); box-shadow:var(--shadow-sm) }
  .card-tr{ display:inline-flex; align-items:center; gap:9px }
  .card-star{ border:none; background:transparent; cursor:pointer; font-size:15px; line-height:1; color:#C7BFE0; padding:1px 2px; border-radius:6px; transition:color .15s, transform .12s }
  .card-star:hover{ color:var(--violet); transform:scale(1.18) }
  .card-star.on{ color:#F4A93C }
  .toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,18px); z-index:80; pointer-events:none;
    background:#1b1209; color:#fff; font-family:var(--sans); font-weight:600; font-size:13.5px; padding:12px 18px; border-radius:12px;
    box-shadow:0 12px 34px rgba(20,12,4,.42); opacity:0; transition:opacity .22s ease, transform .22s ease; max-width:90vw }
  .toast.good{ background:linear-gradient(135deg,#2FD07A,#1FA85F) }
  .toast.show{ opacity:1; transform:translate(-50%,0) }
  /* badges */
  .badge{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; vertical-align:middle; line-height:1.4 }
  .b-soon{ background:var(--no-soft); color:var(--no-deep) }
  .b-week{ background:var(--violet-soft); color:var(--violet-deep) }
  .b-new{ background:var(--violet-soft); color:var(--violet-deep) }
  .b-thin{ background:var(--line-2); color:var(--ink-3) }
  .b-settled{ background:var(--yes-soft); color:var(--yes-deep) }
  .b-closed{ background:var(--line-2); color:var(--ink-3) }
  .card-badges{ display:flex; gap:5px; flex-wrap:wrap; margin-top:10px }
  .m-badges{ display:inline-flex; gap:6px; flex-wrap:wrap; margin-left:2px }
  /* leaderboard v2 */
  .lbtabs{ margin-bottom:12px }
  .lb-foot{ font-size:11.5px; color:var(--ink-3); line-height:1.55; margin-top:11px; padding:0 4px }
  .lb-prov{ padding:12px 18px; border-top:1px dashed var(--line); font-family:var(--mono); font-size:12px; color:var(--ink-3) }
  .lrow.prov{ opacity:.62 }
  .lsample{ font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); background:var(--line-2); border-radius:5px; padding:1px 6px; margin-left:8px; vertical-align:middle }
  /* trader profile */
  .profile{ margin-top:16px; padding:15px; background:var(--grad-soft); border:1px solid #EAD9C7; border-radius:var(--r) }
  .profile .ph{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px }
  .profile .prank{ font-family:var(--mono); font-size:12px; color:var(--violet-deep); background:#fff; border-radius:999px; padding:4px 11px; box-shadow:var(--shadow-sm) }
  .profile .pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
  .pcell{ background:#fff; border-radius:var(--r-sm); padding:9px 11px }
  .pcell .pk{ font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) }
  .pcell .pv{ font-family:var(--mono); font-size:14px; font-weight:500; color:var(--ink); margin-top:3px }
  .pcell .pv.pos{ color:var(--yes-deep) } .pcell .pv.neg{ color:var(--no-deep) }
  .pcall{ font-size:11.5px; color:var(--ink-2); margin-top:9px; line-height:1.45 }
  .pcall b{ color:var(--ink) } .pcall .g{ color:var(--yes-deep) } .pcall .r{ color:var(--no-deep) }
  .pshare{ width:100%; margin-top:12px; font-family:var(--sans); font-weight:700; font-size:13px; padding:10px; border:1px solid var(--violet); background:#fff; color:var(--violet-deep); border-radius:10px; cursor:pointer }
  .pshare:hover{ background:var(--violet-soft) }
  .profile .pempty{ font-size:12.5px; color:var(--ink-2); line-height:1.5 }
  /* settlement */
  .res-tools input{ flex:1; min-width:160px; font-family:var(--mono); font-size:12px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink) }
  .res-audit{ margin:0 20px 20px; padding:14px 16px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r) }
  .res-audit .ra-h{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet-deep); margin-bottom:9px }
  .res-audit .ra-row{ display:flex; justify-content:space-between; gap:14px; padding:5px 0; border-top:1px solid var(--line-2); font-size:12.5px; color:var(--ink-3) }
  .res-audit .ra-row:first-of-type{ border-top:none }
  .res-audit .ra-row b{ color:var(--ink); font-weight:600; text-align:right }
  .res-audit .ra-row a{ color:var(--violet-deep); text-decoration:underline }
  /* calibration lens */
  .calibpanel{ margin:8px 20px 4px; border-radius:var(--r-lg); overflow:hidden;
    background:radial-gradient(900px 360px at 12% -30%, #2A1F52 0%, rgba(42,31,82,0) 60%), linear-gradient(155deg,#160F2E 0%,#241A47 100%);
    border:1px solid #3a2a18; box-shadow:0 16px 40px rgba(20,12,4,.28) }
  .cp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 0 }
  .cp-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#C9B6FF }
  .cp-dot{ width:7px; height:7px; border-radius:50%; background:#A78BFA; box-shadow:0 0 10px 1px #A78BFA }
  .cp-tag{ font-family:var(--display); font-weight:600; font-size:14px; color:#E8E1FB; opacity:.86; font-style:italic }
  .cp-body{ display:grid; grid-template-columns:206px 1fr; gap:20px; padding:13px 18px 14px; align-items:start }
  .cp-chart{ background:rgba(255,255,255,.03); border:1px solid #352A5E; border-radius:var(--r); padding:12px 12px 8px; position:static }
  .cp-chart svg{ display:block; width:100%; height:auto }
  .cp-axis{ display:flex; justify-content:space-between; gap:10px; margin-top:6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.02em }
  .cp-axis .k-id{ color:#8E84B8 } .cp-axis .k-cv{ color:#C9B6FF }
  .cp-read{ min-width:0 }
  .cp-fore{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:4px }
  .cp-big{ font-family:var(--mono); font-weight:500; font-size:30px; color:#fff; line-height:1; margin-top:3px; letter-spacing:-.02em }
  .cp-path{ display:flex; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:#9C92C4; padding-bottom:3px }
  .cp-path .up{ color:#5FE3B6 } .cp-path .dn{ color:#FF8FA8 }
  .cp-sec{ margin:16px 0 8px !important; display:flex; align-items:baseline; gap:8px }
  .cp-mut{ font-weight:500; letter-spacing:0; text-transform:none; color:#8478AB; font-size:10px }
  .cp-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
  .cpm{ background:rgba(255,255,255,.04); border:1px solid #352A5E; border-radius:var(--r-sm); padding:10px 11px }
  .cpk{ font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#9388C0 }
  .cpv{ font-family:var(--mono); font-size:17px; font-weight:500; color:#fff; margin-top:4px }
  .cp-qual{ display:flex; flex-wrap:wrap; gap:7px }
  .cp-qual span{ font-family:var(--mono); font-size:11px; color:#C5BBE4; background:rgba(255,255,255,.05); border:1px solid #352A5E; border-radius:999px; padding:4px 10px }
  .cp-qual span.src{ color:#9C92C4 }
  .cp-qual span.warn{ color:#2a1206; background:#F4C152; border-color:#F4C152; font-weight:700 }
  .cp-you{ display:flex; flex-wrap:wrap; gap:7px }
  .cp-you span{ font-family:var(--mono); font-size:11px; color:#C5BBE4; background:rgba(255,255,255,.05); border:1px solid #352A5E; border-radius:999px; padding:4px 10px }
  .cp-you span b{ color:#fff } .cp-you span.mut{ color:#8478AB; background:none; border:none; padding:4px 0 }
  .cp-cat{ margin:0 0 10px; font-size:12.5px; line-height:1.6; color:#C5BBE4 } .cp-cat b{ color:#fff }
  .cp-foot{ margin:0; font-size:11.5px; line-height:1.62; color:#9C92C4 }
  .res-btn.lock{ border-color:#C9B6FF; color:var(--violet-deep); font-weight:700 }
  .res-btn.lock:hover:not(:disabled){ background:var(--violet-soft) }
  .res-btn:disabled{ opacity:.4; cursor:default }
  @media (max-width:980px){ .cp-body{ grid-template-columns:1fr } .cp-chart{ max-width:300px; margin:0 auto; position:static } }

/* ============================================================
   MULTI-PAGE SITE LAYER (landing, content, legal, join, faq)
   ============================================================ */
.brand-link{ display:flex; align-items:center; gap:10px; min-width:0 }
.brand-link .logo{ width:30px; height:30px }
.nav-cta{ color:#fff !important; background:var(--grad); padding:8px 15px !important; border-radius:10px !important; box-shadow:var(--shadow-sm) }
.nav-cta:hover{ transform:translateY(-1px); background:var(--grad) !important; color:#fff !important }
.nav-links a.active{ color:var(--violet-deep); background:var(--violet-soft) }

/* page hero for content pages */
.phero{ padding:54px 0 26px; max-width:760px }
.phero .kicker{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--violet-deep); background:var(--violet-soft); padding:6px 12px; border-radius:999px; margin-bottom:18px }
.phero h1{ font-family:var(--display); font-weight:800; font-size:clamp(30px,4.6vw,46px); line-height:1.05; letter-spacing:-.022em; margin:0 0 16px }
.phero h1 .pop{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.phero p{ font-size:clamp(15px,1.7vw,18px); color:var(--ink-2); margin:0; max-width:62ch }

/* full-width tinted band */
.band{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:40px }
.band.dark{ background:linear-gradient(155deg,#160d06,#241206); border-color:#3a2a18; color:#F6E4C2 }
.band.dark h2{ color:#fff } .band.dark .sec-head .note{ color:#A99FD0 }
.band-in{ max-width:var(--maxw); margin:0 auto; padding:48px 22px }

/* feature cards */
.feat{ display:grid; gap:14px }
.feat.c2{ grid-template-columns:repeat(2,1fr) } .feat.c3{ grid-template-columns:repeat(3,1fr) } .feat.c4{ grid-template-columns:repeat(4,1fr) }
.fcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow-sm) }
.fcard .fi{ width:40px; height:40px; border-radius:11px; background:#FCF1E9; border:1px solid #F4DFD0; display:flex; align-items:center; justify-content:center; margin-bottom:13px }
.fcard .fi svg{ width:23px; height:23px }
.fcard h3{ font-family:var(--sans); font-weight:700; font-size:16px; margin:0 0 7px }
.fcard p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55 }
.fcard.dark{ background:rgba(255,255,255,.04); border-color:#352A5E } .fcard.dark h3{ color:#fff } .fcard.dark p{ color:#C5BBE4 }

/* big value row */
.valrow{ display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; padding:30px 0 }
.valrow.flip .vtext{ order:2 }
.vtext h2{ font-family:var(--display); font-weight:700; font-size:clamp(22px,3vw,30px); letter-spacing:-.018em; margin:0 0 12px }
.vtext p{ font-size:15px; color:var(--ink-2); line-height:1.6; margin:0 0 14px; max-width:52ch }
.vart{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow) }

/* CTA band */
.cta-band{ background:linear-gradient(135deg,#33312E,#A21CD6 55%,#C026D3); border-radius:var(--r-lg); padding:40px; text-align:center; box-shadow:var(--shadow-lg); margin:46px 0 }
.cta-band h2{ font-family:var(--display); font-weight:800; font-size:clamp(24px,3.4vw,34px); color:#fff; margin:0 0 10px; letter-spacing:-.02em }
.cta-band p{ color:#F1E7FE; font-size:16px; margin:0 0 22px }
.cta-band .btn-white{ background:#fff; color:var(--violet-deep); font-weight:700; padding:13px 26px; border-radius:12px; display:inline-block; border:none; cursor:pointer }
.cta-band .btn-white:hover{ transform:translateY(-2px) }

/* comparison table */
.vs{ width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); font-size:14px }
.vs th, .vs td{ text-align:left; padding:13px 16px; border-top:1px solid var(--line-2) }
.vs thead th{ border-top:none; background:var(--bg-soft); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) }
.vs thead th.us{ color:var(--violet-deep) }
.vs td.feature{ font-weight:600; color:var(--ink) }
.vs td.us{ background:var(--violet-soft-2); font-weight:600; color:var(--violet-deep) }
.vs .yes{ color:var(--yes-deep); font-weight:700 } .vs .no{ color:var(--ink-4) }

/* FAQ */
.faq{ display:grid; gap:10px }
.faq details{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden }
.faq summary{ cursor:pointer; padding:16px 18px; font-weight:600; font-size:15px; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--violet); font-size:18px }
.faq details[open] summary::after{ content:"\2212" }
.faq details[open] summary{ border-bottom:1px solid var(--line-2) }
.faq .fa{ padding:14px 18px 18px; font-size:14px; color:var(--ink-2); line-height:1.62 }
.faq .fa a{ color:var(--violet-deep); text-decoration:underline }

/* forms (join) */
.form-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow); max-width:520px }
.field{ margin-bottom:16px }
.field label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px }
.field input, .field select{ width:100%; font-family:var(--sans); font-size:15px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--bg-soft); color:var(--ink) }
.field input:focus, .field select:focus{ outline:2px solid var(--violet); outline-offset:1px; border-color:var(--violet) }
.field .hint{ font-size:12px; color:var(--ink-3); margin-top:6px }
.checkline{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-2); margin-bottom:16px }
.form-ok{ display:none; padding:16px 18px; background:var(--yes-soft); color:var(--yes-deep); border-radius:var(--r); font-weight:600; font-size:14px; line-height:1.5 }
.form-ok.on{ display:block }

/* prose pages (legal, content) */
.prose{ max-width:74ch }
.prose h2{ font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.015em; margin:34px 0 12px }
.prose h3{ font-family:var(--sans); font-weight:700; font-size:16px; margin:22px 0 8px }
.prose p, .prose li{ font-size:14.5px; color:var(--ink-2); line-height:1.7 }
.prose ul{ padding-left:20px } .prose li{ margin-bottom:6px }
.prose .updated{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-bottom:18px }
.toc{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; margin-bottom:26px }
.toc a{ color:var(--violet-deep); font-size:13.5px; display:inline-block; margin:3px 14px 3px 0; text-decoration:none }
.toc a:hover{ text-decoration:underline }

/* rich footer with sitemap columns */
.foot-rich{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px; padding:8px 0 26px }
.foot-col h2{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px }
.foot-col a{ display:block; font-size:13.5px; color:var(--ink-2); margin-bottom:9px } .foot-col a:hover{ color:var(--violet-deep) }
.foot-brand .brand-name{ font-size:17px } .foot-brand p{ font-size:13px; color:var(--ink-3); line-height:1.6; margin:10px 0 0; max-width:34ch }

@media (max-width:880px){
  .feat.c3, .feat.c4{ grid-template-columns:1fr 1fr }
  .valrow{ grid-template-columns:1fr } .valrow.flip .vtext{ order:0 }
  .foot-rich{ grid-template-columns:1fr 1fr } .vs{ font-size:12.5px }
}
@media (max-width:560px){ .feat.c2, .feat.c3, .feat.c4{ grid-template-columns:1fr } .foot-rich{ grid-template-columns:1fr } .cta-band{ padding:28px 20px } }

/* ============================================================
   UX PASS: mobile nav, accessibility, density
   ============================================================ */
/* skip link and screen-reader utility */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skiplink{ position:absolute; left:12px; top:-46px; z-index:100; background:var(--violet-deep); color:#fff; padding:9px 14px; border-radius:8px; font-weight:700; font-size:13px; transition:top .15s }
.skiplink:focus{ top:10px }

/* CSS-only hamburger nav (works on every static page, no JS) */
.nav-toggle{ position:absolute; opacity:0; width:1px; height:1px }
.hamburger{ display:none; width:40px; height:40px; border-radius:9px; border:1px solid var(--line);
  background:var(--card); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; margin-left:auto; order:10 }
.hamburger span{ display:block; width:18px; height:2px; background:var(--ink-2); border-radius:2px; transition:transform .18s, opacity .18s }
.nav-toggle:focus-visible + .hamburger{ outline:2px solid var(--violet); outline-offset:2px }

/* Hamburger up to 1280px (Andy 0717, the Mango Trader / Mango Arcade /
   Pineapple Bank rename): the longer names + logo + wallet + logout only fit
   on one line from ~1281 up (measured: collide at 1181, kiss the logo at
   1280, clear from 1281 with the tightened band below). Below 1281 the tidy
   logo+hamburger takes over. The COCKPIT keeps its own 1181 breakpoint —
   this gate is the top nav's alone. */
@media (max-width:1280px){
  .nav-in{ display:flex; align-items:center; gap:12px }
  .hamburger{ display:inline-flex; width:44px; height:44px }
  /* 0721 device fix: the 44px touch floor used to live only <=560, leaving every
     tablet (561-1280) a 40px hamburger and ~34px auth pills */
  .nav .nav-auth .nav-login, .nav .nav-auth .nav-cta{ min-height:44px; display:inline-flex; align-items:center }
  .nav .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:2px; padding:10px; margin:0; background:var(--card); border-bottom:1px solid var(--line); box-shadow:var(--shadow) }
  .nav-toggle:checked ~ .nav-links{ display:flex }
  .nav .nav-links a{ padding:12px 14px; border-radius:9px; font-size:15px; min-height:44px; display:flex; align-items:center }
  .nav-toggle:checked + .hamburger span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  .nav-toggle:checked + .hamburger span:nth-child(2){ opacity:0 }
  .nav-toggle:checked + .hamburger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
  .wallet{ order:3 }
}

/* bigger touch targets and readable type on phones */
@media (max-width:560px){
  .chip, .mode button, .sortseg button, .catchip, .res-btn{ min-height:44px }
  .card-star{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center }
  .badge, .card-src, .cpk, .lsample, .calrow, .cp-axis, .demo-pill, .pcell .pk, .brand-sub, .wallet .lab, .pv-item .pl{ font-size:11.5px }
  .ticket-row{ flex-direction:column; align-items:stretch }
  .size{ margin-left:0 } .size input{ width:100% }
  .chips{ width:100%; justify-content:space-between }
  .disc{ font-size:12px; color:var(--ink-3) }
  .ptable{ font-size:12.5px } .prow{ min-width:420px }
}

/* ============================================================
   INSTITUTIONAL FINANCE LAYER (Polymarket / Kalshi grade)
   One block, token-driven, so it stays maintainable and reusable.
   ============================================================ */
/* every figure is tabular and lining so a ticking number never shifts width */
body{ font-variant-numeric:tabular-nums lining-nums }
.prow .pn, .prow .pnl, .lrow .lpnl, .rstat .v, .cpv, .card-prob .big, .pv-item .pv,
.ring-pct, .hstat .v, .wallet .amt, .lrank{ font-variant-numeric:tabular-nums lining-nums }
/* financial magnitudes right-align so decimals and commas stack for instant scanning */
.prow .pn, .prow .pnl, .lrow .lpnl{ text-align:right }

/* receipt-style execution preview: label flush left, value flush right, dotted rule between */
.preview{ flex-direction:column; align-items:stretch; gap:0; padding:4px 14px }
.pv-item{ display:flex; flex-direction:row; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px dashed var(--line) }
.pv-item:last-child{ border-bottom:none }
.pv-item .pl{ margin:0 } .pv-item .pv{ margin:0; text-align:right }

/* active-side tint so a trader never fills the wrong side by accident */
.ticket{ transition:background .25s ease, border-color .25s ease }
.ticket.side-yes{ background:linear-gradient(0deg, rgba(16,185,129,.05), rgba(16,185,129,.05)), var(--bg-soft); border-color:rgba(16,185,129,.30) }
.ticket.side-no{ background:linear-gradient(0deg, rgba(239,68,68,.05), rgba(239,68,68,.05)), var(--bg-soft); border-color:rgba(239,68,68,.30) }

/* recessed segmented Buy / Sell */
.mode{ background:var(--bg-soft); box-shadow:inset 0 1px 3px rgba(14,17,22,.07) }
.mode button{ transition:background .22s cubic-bezier(.16,1,.3,1), color .22s }

/* spring physics and engineered elevation on cards */
.card{ transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .2s ease }
.card:hover{ transform:translateY(-3px); box-shadow:0 12px 22px -8px rgba(14,17,22,.14) }

/* price-flash trainer: brief tint then fade, so momentum is felt out of the corner of the eye */
@keyframes flash-up{ 0%{ background:var(--yes-soft) } 100%{ background:transparent } }
@keyframes flash-dn{ 0%{ background:var(--no-soft) } 100%{ background:transparent } }
.flash-up{ animation:flash-up .6s ease } .flash-dn{ animation:flash-dn .6s ease }

/* mobile positions pivot to a card stack, never hide a trader's money */
@media (max-width:680px){
  .ptable{ overflow:visible }
  .prow.h{ display:none }
  .prow{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; min-width:0; padding:14px 16px; align-items:baseline; border-top:1px solid var(--line-2) }
  .prow .pm{ grid-column:1 / -1; font-size:15px; font-weight:700; white-space:normal }
  .prow .ps, .prow .pn, .prow .pnl{ grid-column:1 / -1; display:flex; justify-content:space-between; font-size:13px }
  .prow .ps::before{ content:"Side"; color:var(--ink-3); font-weight:600 }
  .prow .pn::before{ content:attr(data-label); color:var(--ink-3); font-weight:600 }
  .prow .pnl::before{ content:"Unrealized"; color:var(--ink-3); font-weight:600 }
  .prow .pn, .prow .pnl{ text-align:right }
}
@media (prefers-reduced-motion:reduce){ .flash-up, .flash-dn{ animation:none } }

/* ── trading page header: full width, no empty column ── */
.trade-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:30px 0 18px }
.trade-head{ max-width:640px; min-width:0 }
.trade-head .eyebrow{ margin-bottom:12px }
.trade-h1{ font-family:var(--display); font-weight:800; font-size:clamp(28px,4vw,38px); letter-spacing:-.02em; margin:0 }
.trade-lede{ font-size:15px; color:var(--ink-2); margin:9px 0 0; max-width:54ch }
.trade-top .hero-stats{ margin:0 }

/* ============================================================
   EDITORIAL LAYER - paper and ink, serif voice, no gradients.
   Madison Avenue, not crypto. Restraint over decoration.
   ============================================================ */
h1.head, .phero h1, .trade-h1{ font-weight:500; letter-spacing:-.012em; line-height:1.06 }
h2{ font-weight:500; letter-spacing:-.01em }
.brand-name{ font-weight:600; letter-spacing:-.005em }
.m-q, .cp-tag, .vtext h2, .cta-band h2{ font-weight:500 }
/* emphasis is an editorial italic, never a gradient */
.head .pop, .phero h1 .pop{ background:none; -webkit-text-fill-color:currentColor; color:var(--royal); font-style:italic; font-weight:500 }
/* eyebrow and kicker become quiet uppercase labels, no pill */
.eyebrow, .kicker{ background:none !important; border:none !important; padding:0 !important; color:var(--violet-deep) !important;
  font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em }
.eyebrow .pulse{ width:6px; height:6px; background:var(--royal); box-shadow:none; animation:none }
/* buttons: solid royal blue, hairline ghost, no lift or glow */
.btn{ font-weight:600; letter-spacing:.01em }
.btn-primary{ background:var(--grad); box-shadow:none }
.btn-primary:hover{ transform:none; background:var(--violet-deep) }
.btn-ghost{ box-shadow:none }
.btn-ghost:hover{ border-color:var(--royal); color:var(--violet-deep) }
.cta-band{ background:var(--navy); box-shadow:none }
.cta-band .btn-white{ background:#fff; color:var(--violet-deep) }
.cta-band p{ color:#C9CFDE }
/* nav: paper, hairline, blue active */
.nav{ background:rgba(250,250,247,.86) }
.nav-links a.active, .nav-links a:hover{ color:var(--violet-deep); background:var(--violet-soft) }
.nav-cta, .nav-cta:hover{ background:var(--royal) !important; color:#fff !important }
.demo-pill{ color:var(--violet-deep); background:var(--violet-soft); border-color:var(--line) }
.wallet .dot{ background:var(--royal) } .wallet .amt{ color:var(--violet-deep) }
.logo{ box-shadow:none; border:1px solid var(--line) }
/* dark sections and the calibration lens: deep navy, not black */
.band.dark{ background:var(--navy); border-color:#27345C }
.band.dark p{ color:#C9CFDE !important }
.fcard.dark{ background:rgba(255,255,255,.04); border-color:#27345C }
.calibpanel{ background:#18233E; border-color:#2A3760 }
.cp-eyebrow{ color:#B7C4E2 } .cp-dot{ background:#B7C4E2; box-shadow:none }
.cp-tag{ color:#E6EAF4 }
.vart{ background:var(--navy) !important; border-color:#27345C !important }
.kicker[style]{ color:#C9CFDE !important; background:none !important }
/* gentler, flowing motion */
.reveal{ animation-duration:.7s; animation-timing-function:cubic-bezier(.16,1,.3,1) }
.card{ transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .2s }

/* ── low-profile expanding search (collapsed to a single magnifier) ── */
.search-mini{ display:inline-flex; align-items:center; height:38px; width:38px; flex:none;
  border:1px solid var(--line); border-radius:999px; background:var(--card); overflow:hidden;
  transition:width .28s cubic-bezier(.16,1,.3,1), border-color .2s ease }
.search-mini:focus-within,
.search-mini:has(input:not(:placeholder-shown)){ width:clamp(210px,30vw,300px); border-color:var(--ink) }
.search-ico{ flex:none; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--ink-3); cursor:pointer; border-radius:999px }
.search-mini:focus-within .search-ico,
.search-mini:has(input:not(:placeholder-shown)) .search-ico{ color:var(--ink) }
.search-mini input{ flex:1; min-width:0; border:none; background:none; outline:none; color:var(--ink);
  font-family:var(--sans); font-size:14px; padding:0 14px 0 2px; opacity:0; transition:opacity .2s ease }
.search-mini:focus-within input,
.search-mini:has(input:not(:placeholder-shown)) input{ opacity:1 }

/* mobile docking of the trade ticket is handled once, in the 880px rule below,
   scoped to .market-side .ticket so only the markets ticket docks. */

/* ============================================================
   EXCHANGE DASHBOARD - two-column market, sticky ticket rail,
   horizontal probability bar. Polymarket/Kalshi density,
   editorial palette. Borders define containers, not shadows.
   ============================================================ */
/* two distinct cards on the warm page bg: a content card + a sticky ticket card.
   This is what kills the blank white void — the shorter column simply ends and the
   warm page background shows, instead of an empty white expanse inside one big card. */
.market{ display:grid; grid-template-columns:1fr 336px; gap:16px; box-shadow:none; overflow:visible; align-items:start; background:transparent; border:none; border-radius:0 }
.market-main{ min-width:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.market-side{ min-width:0; align-self:stretch }
.market-side .ticket{ position:sticky; top:78px; margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg) }
.market-main .chart{ padding:4px 20px 10px } .market-main .chart svg{ height:184px }

/* horizontal tug-of-war probability bar (replaces the circular dial) */
.prob-bar{ margin:14px 20px 6px }
.prob-labels{ display:flex; justify-content:space-between; font-family:var(--sans); font-weight:700; font-size:14px; margin-bottom:8px }
.prob-labels .y-lab{ color:var(--yes-deep) } .prob-labels .n-lab{ color:var(--no-deep) }
.prob-labels span span{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.prob-track{ height:12px; border-radius:6px; display:flex; overflow:hidden; background:var(--line) }
.prob-track .pf-y{ background:var(--yes); transition:width .25s cubic-bezier(.16,1,.3,1) }
.prob-track .pf-n{ background:var(--no); transition:width .25s cubic-bezier(.16,1,.3,1) }
.prob-bar .vsline{ margin-top:8px; text-align:left; font-size:12px; color:var(--ink-3) }

/* segmented Yes / No control: flush, shared track, active fills solid */
.sides{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r); padding:4px; gap:4px }
.side-btn{ border:none !important; background:transparent; opacity:1; border-radius:var(--r-sm);
  transition:background .2s ease, color .2s ease }
.side-btn[aria-pressed="false"]{ color:var(--ink-3) }
.side-btn[aria-pressed="true"][data-v="YES"]{ background:var(--yes); color:#fff; box-shadow:var(--shadow-sm) }
.side-btn[aria-pressed="true"][data-v="NO"]{ background:var(--no); color:#fff; box-shadow:var(--shadow-sm) }
.side-btn[aria-pressed="true"] .s-px, .side-btn[aria-pressed="true"] .s-name{ color:#fff }

/* big mono contracts input; whole-ticket tint is redundant with the segmented control */
.size input{ font-size:19px; text-align:right; font-family:var(--mono); width:100% }
.ticket.side-yes, .ticket.side-no{ background:var(--card); border-color:var(--line) }

@media (max-width:980px){
  .market{ grid-template-columns:1fr }
  .market-main{ border-right:none; border-bottom:1px solid var(--line) }
  .market-side .ticket{ position:sticky; top:auto; bottom:0; border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(25,24,19,.12); border-radius:var(--r-lg) var(--r-lg) 0 0 }
}

/* demo-mode badge and visible demo-controls toggle */
.demo-mode-badge{ display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:5px 12px }
.demo-ctrl-toggle{ display:inline-block; margin:8px 16px 0; font-family:var(--sans); font-size:12px; font-weight:600;
  color:var(--ink-3); background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 12px; cursor:pointer }
.demo-ctrl-toggle:hover, .demo-ctrl-toggle.on{ color:var(--ink); border-color:var(--ink) }

/* armed confirm state on the trade button */
.do.armed{ box-shadow:0 0 0 3px rgba(232,115,28,.32); filter:brightness(.95) saturate(1.05) }
.do.armed::after{ content:""; }

/* trade activity ledger */
.act-tools{ display:flex; gap:10px; align-items:center; margin:0 0 12px; flex-wrap:wrap }
.btn-sm{ padding:7px 14px; font-size:13px }
.actlog{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card) }
.actrow{ display:grid; grid-template-columns:128px 132px 1fr auto auto; gap:14px; align-items:center;
  padding:11px 14px; border-bottom:1px solid var(--line-2); font-size:13.5px }
.actrow:last-child{ border-bottom:none }
.acttime{ font-family:var(--mono); font-size:12px; color:var(--ink-3) }
.actside{ font-weight:600 } .actside.y{ color:var(--yes-deep) } .actside.n{ color:var(--no-deep) }
.actq{ color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.actpx{ font-family:var(--mono); color:var(--ink-2); text-align:right }
.actcost{ font-family:var(--mono); font-weight:600; text-align:right; min-width:80px }
.actlog .empty{ padding:22px 16px; color:var(--ink-3); text-align:center }
@media (max-width:680px){
  .actrow{ grid-template-columns:1fr auto; gap:2px 12px }
  .actq{ grid-column:1/-1; white-space:normal }
  .actpx{ text-align:left; color:var(--ink-3) }
}
/* tabular numerals wherever numbers matter, so prices never jitter */
.mono,.v,.amt,.lpnl,.pv,.cpv,.cp-big,.rstat .v,.hstat .v,.actrow,.prob-labels span span,.s-px{ font-variant-numeric:tabular-nums lining-nums }

/* homepage hero: core line + conversion form */
.hero-core{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--violet-deep); margin:14px 0 20px }
.hero-form{ width:100%; max-width:100%; padding:24px }
.hero-form .hf-head{ margin-bottom:16px }
.hero-form .hf-kicker{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--violet-deep) }
.hero-form .hf-head h2{ font-size:24px; margin:6px 0 4px; font-weight:600 }
.hero-form .hf-head p{ font-size:13.5px; color:var(--ink-2); margin:0 }
.hero-form .frow{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.hf-alt{ display:block; text-align:center; margin-top:12px; font-size:13px; color:var(--ink-3) }
.hf-alt:hover{ color:var(--violet-deep) }
@media (max-width:520px){ .hero-form .frow{ grid-template-columns:1fr } }

/* homepage demo preview: two featured markets side by side */
.demo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:940px; margin:0 auto }
@media (max-width:760px){ .demo-grid{ grid-template-columns:1fr } }

/* mobile polish for the prediction-market hero and new sections */
@media (max-width:560px){
  .hero-form{ padding:20px }
  .hero-core{ font-size:16px }
  .demo-grid{ gap:14px }
  .trade-h1{ font-size:30px }
  .demo-mode-badge{ font-size:10px; padding:5px 10px }
}

/* ============================================================
   LANDING. Cinematic scroll narrative, hidden chrome, reveals.
   ============================================================ */
#scrollbar{ position:fixed; top:0; left:0; height:2px; width:100%; background:var(--royal); transform:scaleX(0); transform-origin:0 50%; z-index:70 }

/* hidden chrome, revealed on intent (body.ui set by scroll.js) */
.snav{ position:fixed; top:0; left:0; right:0; z-index:60; background:rgba(250,250,247,.975); border-bottom:1px solid var(--line); opacity:0; transform:translateY(-100%); pointer-events:none; transition:opacity .4s ease, transform .45s cubic-bezier(.16,1,.3,1) }
body.ui .snav{ opacity:1; transform:none; pointer-events:auto }
.snav-in{ max-width:var(--maxw); margin:0 auto; padding:11px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px }
.snav .brand-name{ font-size:16px }
.snav-links{ display:flex; align-items:center; gap:22px; font-weight:500; font-size:14px }
.snav-links a{ color:var(--ink-2) } .snav-links a:hover{ color:var(--violet-deep) }
.snav .nav-cta{ background:var(--royal); color:#fff; padding:8px 16px; border-radius:var(--r-sm) }
.snav .nav-cta:hover{ background:var(--violet-deep); color:#fff }

.dotnav{ position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:13px; opacity:0; pointer-events:none; transition:opacity .4s ease }
body.ui .dotnav{ opacity:1; pointer-events:auto }
.dotnav a{ width:10px; height:10px; border-radius:50%; border:1.5px solid var(--ink-4); position:relative; transition:border-color .25s, background .25s }
.dotnav a.on{ background:var(--royal); border-color:var(--royal) }
.dotnav a:hover{ border-color:var(--royal) }
.dotnav a::after{ content:attr(data-t); position:absolute; right:20px; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:11px; font-weight:600; color:var(--ink-2); background:var(--card); border:1px solid var(--line); border-radius:5px; padding:3px 8px; opacity:0; pointer-events:none; transition:opacity .2s }
.dotnav a:hover::after{ opacity:1 }

/* reveal system */
.landing [data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1) }
.landing [data-reveal].in{ opacity:1; transform:none }
.landing [data-reveal][data-d="1"]{ transition-delay:.09s }
.landing [data-reveal][data-d="2"]{ transition-delay:.18s }
.landing [data-reveal][data-d="3"]{ transition-delay:.27s }
.landing [data-reveal][data-d="4"]{ transition-delay:.36s }
.landing [data-reveal][data-d="5"]{ transition-delay:.45s }
.landing [data-reveal][data-d="6"]{ transition-delay:.54s }

/* scenes */
.landing .scene{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:96px 24px; position:relative }
.landing .scene-c{ width:100%; max-width:var(--maxw); margin:0 auto }
.landing .scene.tall{ min-height:100vh }

/* about page: the old landing rendered as a normal flowing in-site page.
   Neutralize the one-screen-per-scene full-height behavior and reveal every
   block by default (the immersive scroll engine is not loaded here). */
.aboutpage [data-reveal]{ opacity:1 !important; transform:none !important; transition:none }
.aboutpage .scene, .aboutpage .scene.tall{ min-height:auto !important; height:auto !important; justify-content:flex-start; padding:60px 24px }
.aboutpage .scene.hero{ padding-top:50px; padding-bottom:40px }
@media (max-width:760px){
  .aboutpage .scene, .aboutpage .scene.tall{ min-height:auto !important; padding:44px 20px }
}

/* hero */
.landing .hero .kick{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--violet-deep) }
.mega{ font-family:var(--display); font-weight:500; font-size:clamp(44px,9vw,108px); line-height:1.02; letter-spacing:-.02em; margin:18px 0 0 }
.mega .pop{ font-style:italic; color:var(--royal) }
.landing .lede{ font-size:clamp(16px,2.2vw,21px); color:var(--ink-2); max-width:620px; margin:22px auto 0; line-height:1.5 }
#scrollcue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink-3); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; transition:opacity .5s }
#scrollcue svg{ animation:cuebob 1.8s ease-in-out infinite }
#scrollcue.gone{ opacity:0; pointer-events:none }
@keyframes cuebob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }

/* shared scene type */
.landing .big{ font-family:var(--display); font-weight:500; font-size:clamp(30px,5.2vw,56px); line-height:1.08; letter-spacing:-.015em; margin:0 }
.landing .sub{ font-size:clamp(15px,2vw,19px); color:var(--ink-2); max-width:640px; margin:20px auto 0; line-height:1.55 }
.landing .core{ font-family:var(--display); font-style:italic; font-size:clamp(17px,2.3vw,22px); color:var(--violet-deep); margin:20px 0 0 }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes popdot{ from{ opacity:0; transform:scale(.4) } to{ opacity:1; transform:none } }

/* consensus-gap infographic */
.gapfig{ margin:40px auto 0; max-width:560px }
.gapfig svg{ width:100% }
.g-lab{ font-family:var(--mono); font-size:10px; fill:var(--ink-3) }
.gapfig .g-truth, .gapfig .g-cons{ stroke-dasharray:560; stroke-dashoffset:560 }
.gapfig .g-dot, .gapfig .g-lab{ opacity:0; transition:opacity .6s .9s }
.gapfig.in .g-truth{ animation:draw 1.4s cubic-bezier(.16,1,.3,1) forwards }
.gapfig.in .g-cons{ animation:draw 1.4s cubic-bezier(.16,1,.3,1) forwards .25s }
.gapfig.in .g-dot, .gapfig.in .g-lab{ opacity:1 }

/* the questions */
.qlist{ margin:40px auto 0; max-width:760px; text-align:left; border-top:1px solid var(--line) }
.qrow{ display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"cat q px"; align-items:center; gap:16px; padding:18px 6px; border-bottom:1px solid var(--line); color:var(--ink); transition:background .2s, padding .2s }
.qrow:hover{ background:var(--bg-soft); padding-left:14px; padding-right:14px }
.qcat{ grid-area:cat; font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--c); border-radius:5px; padding:4px 8px; white-space:nowrap }
.qq{ grid-area:q; font-size:clamp(15px,1.9vw,18px); font-weight:500; line-height:1.3 }
.qp{ grid-area:px; font-family:var(--mono); font-size:22px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums }
.seeall{ margin-top:26px } .seeall a{ font-weight:600; color:var(--violet-deep) }

/* scored, two columns */
.score .two{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; text-align:left; max-width:980px }
.reliability{ justify-self:center } .reliability svg{ width:100%; max-width:300px }
.reliability .r-curve{ stroke-dasharray:420; stroke-dashoffset:420 }
.reliability.in .r-curve{ animation:draw 1.6s cubic-bezier(.16,1,.3,1) forwards .15s }
.reliability .r-dot{ opacity:0; transform-box:fill-box; transform-origin:center }
.reliability.in .r-dot{ animation:popdot .5s ease forwards }
.reliability.in .r-dot:nth-of-type(1){ animation-delay:.7s } .reliability.in .r-dot:nth-of-type(2){ animation-delay:.9s }
.reliability.in .r-dot:nth-of-type(3){ animation-delay:1.1s } .reliability.in .r-dot:nth-of-type(4){ animation-delay:1.3s }

/* podium */
.podium{ margin:48px auto 0; display:flex; align-items:flex-end; justify-content:center; gap:16px; height:200px }
.pod{ width:92px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end }
.pod .pr{ font-family:var(--mono); font-weight:700; font-size:15px; margin-bottom:8px; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.5) }
.pod .pb{ width:100%; border-radius:8px 8px 0 0; transform:scaleY(0); transform-origin:bottom; transition:transform 1s cubic-bezier(.16,1,.3,1) }
.podium.in .p1 .pb{ transform:none; transition-delay:.1s } .podium.in .p2 .pb{ transform:none; transition-delay:.25s } .podium.in .p3 .pb{ transform:none; transition-delay:.4s }
.p1 .pb{ height:158px; background:linear-gradient(135deg,#FFF3C4 0%,#F4D35E 28%,#C9991F 54%,#8C6A12 78%,#F6DE86 100%) } .p1 .pr{ background:linear-gradient(135deg,#E9C75A,#A9842A); color:#3A2D06 }
.p2 .pb{ height:116px; background:linear-gradient(135deg,#FFFFFF 0%,#DEE3E9 28%,#A8AFBB 54%,#7E8794 78%,#EEF1F5 100%) } .p2 .pr{ background:#9aa1ad; color:#2A2E36 }
.p3 .pb{ height:86px; background:linear-gradient(135deg,#F4CCA0 0%,#D08A4E 34%,#A2602B 62%,#7A451B 82%) } .p3 .pr{ background:#C77F3F; color:#fff }

/* who */
.who .words{ font-family:var(--display); font-weight:500; font-size:clamp(34px,7vw,76px); line-height:1.12; letter-spacing:-.02em; margin:0 }
.who .words span{ display:inline-block }
.who .words span:nth-child(2){ color:var(--royal) }

/* contact */
.contact .form-card{ max-width:460px; margin:32px auto 0; text-align:left }

/* landing footer */
.land-foot{ border-top:1px solid var(--line); padding:42px 0; background:var(--bg) }
.lf-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.lf-links{ display:flex; gap:18px; flex-wrap:wrap; font-size:14px } .lf-links a{ color:var(--ink-2) } .lf-links a:hover{ color:var(--violet-deep) }
.land-foot .disc{ margin-top:18px; font-size:11.5px; color:var(--ink-3); line-height:1.6 }

@media (max-width:760px){
  .dotnav{ display:none }
  .snav{ opacity:1; transform:none; pointer-events:auto }
  .snav-links a:not(.nav-cta){ display:none }
  .score .two{ grid-template-columns:1fr; gap:28px; text-align:center }
  .reliability svg{ max-width:240px }
  .landing .scene{ padding:84px 20px; min-height:90vh }
  .qrow{ grid-template-columns:1fr auto; grid-template-areas:"cat px" "q px" }
  .qp{ align-self:center }
}
@media (prefers-reduced-motion: reduce){
  .landing [data-reveal]{ opacity:1; transform:none; transition:none }
  .gapfig .g-truth, .gapfig .g-cons, .reliability .r-curve{ stroke-dashoffset:0 }
  .gapfig .g-dot, .gapfig .g-lab, .reliability .r-dot{ opacity:1; animation:none }
  .podium .pb{ transform:none }
  #scrollcue svg{ animation:none }
}

/* keyboard users reveal the hidden chrome by focusing it */
.snav:focus-within, .dotnav:focus-within{ opacity:1 !important; transform:none !important; pointer-events:auto !important }
/* a quiet, always-present hero CTA and operator line */
.hero-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:30px; font-weight:600; font-size:15px; color:#fff; background:var(--royal); padding:12px 26px; border-radius:var(--r-sm); transition:background .2s ease }
.hero-cta:hover{ background:var(--violet-deep); color:#fff }
.hero-op{ margin-top:16px; font-size:12.5px; color:var(--ink-3); letter-spacing:.01em }
/* mobile: a real wrapped menu, not just the CTA */
@media (max-width:760px){
  .snav-in{ flex-wrap:wrap; gap:6px 14px; padding:10px 16px }
  .snav-links{ width:100%; justify-content:flex-start; gap:14px; flex-wrap:wrap; font-size:13px }
  .snav-links a:not(.nav-cta){ display:inline-block }
  .snav .nav-cta{ padding:6px 13px }
}

/* join gate box in the beta welcome banner */
.welcome .join-row{ display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap }
.welcome #joinHandle{ font-family:var(--sans); font-size:14px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); color:var(--ink); width:150px }
.welcome #joinHandle:focus{ border-color:var(--royal); outline:none }
.welcome .join-row .btn{ padding:9px 18px }
@media (max-width:600px){ .welcome .join-row{ width:100%; margin-left:0 } .welcome #joinHandle{ flex:1; width:auto } }

/* ticket balance, live tape toggle, punchier consensus graphic */
.ticket-bal{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 12px; padding:9px 13px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-sm); font-size:12.5px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; text-transform:uppercase }
.ticket-bal b{ font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; font-variant-numeric:tabular-nums }
.live-pill{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 11px 4px 22px; cursor:pointer; position:relative; vertical-align:middle }
.live-pill::before{ content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--ink-4) }
.live-pill.on{ color:var(--yes-deep); border-color:var(--yes-soft) }
.live-pill.on::before{ background:var(--yes); box-shadow:0 0 0 0 rgba(26,122,85,.5); animation:livedot 1.8s ease-out infinite }
@keyframes livedot{ 0%{ box-shadow:0 0 0 0 rgba(26,122,85,.5) } 70%{ box-shadow:0 0 0 6px rgba(26,122,85,0) } 100%{ box-shadow:0 0 0 0 rgba(26,122,85,0) } }
.gapfig{ max-width:600px }
.gapfig .g-truth{ filter:drop-shadow(0 2px 6px rgba(232,115,28,.25)) }
.gapfig .g-dot{ filter:drop-shadow(0 0 5px var(--royal)) }
.gapfig.in .g-dot{ animation:gappulse 2.2s ease-in-out infinite 1.3s }
@keyframes gappulse{ 0%,100%{ r:5 } 50%{ r:7.5 } }
.gapfig .g-lab{ font-size:11px; font-weight:600 }
/* the real Macrofund logo blends onto paper */
img[src="/macrofund-logo.png"]{ mix-blend-mode:multiply }

/* ── Live trade tape ── */
.livedot{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none }
.livedot.on{ background:var(--yes); animation:ltpulse 1.8s infinite }
@keyframes ltpulse{ 0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)} 70%{box-shadow:0 0 0 6px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }
.lt-list{ list-style:none; margin:0; padding:0; max-height:248px; overflow:hidden }
.lt-row{ display:flex; align-items:center; gap:9px; padding:9px 14px; border-bottom:1px solid rgba(0,0,0,.05); font-size:13px; animation:ltin .45s ease }
.lt-row:last-child{ border-bottom:none }
@keyframes ltin{ from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none} }
.lt-dot{ width:7px; height:7px; border-radius:50%; flex:none }
.lt-h{ font-family:var(--mono); font-weight:600; color:var(--ink); white-space:nowrap }
.lt-side{ font-family:var(--mono); font-size:11px; font-weight:700; padding:1px 6px; border-radius:4px; white-space:nowrap }
.lt-side.y{ color:#0f7a39; background:rgba(22,163,74,.12) }
.lt-side.n{ color:#b3261e; background:rgba(220,38,38,.1) }
.lt-sh{ font-family:var(--mono); color:var(--ink-2); white-space:nowrap }
.lt-q{ flex:1 1 auto; min-width:0; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lt-p{ font-family:var(--mono); font-weight:600; color:var(--ink); white-space:nowrap }
.lt-ago{ font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap }
@media (max-width:640px){
  .lt-q{ flex-basis:100%; order:5; font-size:12px; white-space:normal }
  .lt-row{ flex-wrap:wrap; gap:6px 8px }
}

/* instant-start row */
.join-or{ font-size:12.5px; color:var(--ink-3); white-space:nowrap }
.join-row{ flex-wrap:wrap; align-items:center }

/* Macrofund footer mark */
.mf-foot{ width:56px; height:auto; display:block; margin:14px 0 2px; mix-blend-mode:multiply; opacity:.85 }

/* ── Live trades ticker (flowing, seamless) ── */
.ticker{ display:flex; align-items:center; margin:16px 0 2px; background:var(--card); border:1px solid var(--line); border-radius:999px; overflow:hidden; height:42px }
.ticker-badge{ display:flex; align-items:center; gap:7px; padding:0 15px; height:100%; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.09em; color:var(--ink-2); background:var(--bg-soft); border-right:1px solid var(--line); white-space:nowrap; flex:none }
.ticker-win{ flex:1; overflow:hidden; position:relative; height:100% }
#liveTicker{ display:inline-flex; align-items:center; height:100%; white-space:nowrap; animation:tkscroll 55s linear infinite; will-change:transform }
.ticker-win:hover #liveTicker{ animation-play-state:paused }
@keyframes tkscroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tk-item{ display:inline-block; padding:0 4px; font-size:13px; color:var(--ink-2) }
.tk-h{ font-family:var(--mono); color:var(--ink); font-weight:600 }
.tk-s{ font-family:var(--mono); font-size:10px; font-weight:700; padding:1px 5px; border-radius:4px; margin:0 2px }
.tk-s.y{ color:#0f7a39; background:rgba(22,163,74,.12) }
.tk-s.n{ color:#b3261e; background:rgba(220,38,38,.1) }
.tk-q{ color:var(--ink-2) }
.tk-p{ font-family:var(--mono); font-weight:600; color:var(--ink) }
.tk-sep{ color:var(--ink-3); padding:0 10px }
.who{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--violet-deep); margin-right:8px }
.who:empty{ display:none }
.nav-login{ font-size:13.5px; font-weight:600; color:var(--ink-2); padding:8px 10px; border-radius:9px }
.nav-login:hover{ color:var(--violet-deep) }

/* ticker: slower, dismissible, mobile-friendly */
#liveTicker{ animation-duration:240s }
.ticker-off{ flex:none; border:none; background:transparent; color:var(--ink-3); font-size:19px; line-height:1; padding:0 13px; cursor:pointer; height:100% }
.ticker-off:hover{ color:var(--ink) }
.ticker-show{ display:inline-block; margin:6px 0 2px; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--violet-deep); background:none; border:none; cursor:pointer; padding:4px 0 }
@media (max-width:640px){
  .ticker{ height:38px; margin:12px 0 2px }
  .ticker-badge{ padding:0 10px; font-size:10px; letter-spacing:.06em }
  .tk-item{ font-size:12px; padding:0 3px }
  .tk-q{ display:none }
  #liveTicker{ animation-duration:180s }
}

body.signed-in .nav-login, body.signed-in .nav-cta{ display:none }
body:not(.signed-in) #logoutLink{ display:none }
/* logged OUT never shows the Balance/Stash chip (only Log in + Claim). Fixes the
   header showing Balance 0 + Log out + Log in + Claim all at once. */
body:not(.signed-in) .wallet{ display:none !important }
#logoutLink{ font-size:13px; font-weight:600; color:var(--ink-3) }
#logoutLink:hover{ color:var(--no) }
.who{ font-size:13px; color:var(--ink-3); font-weight:600 }

/* nav: keep it a single clean row that never wraps */
.brand-name{ white-space:nowrap }
.nav-links a{ white-space:nowrap }

.mode button[aria-pressed=true][data-v="SELL"]{ background:var(--no); color:#fff }

/* account area: own right-anchored slot so auth changes never move the page links */
.nav-auth{ margin-left:auto; justify-self:end; display:flex; align-items:center; gap:12px }
body:not(.signed-in) .wallet{ display:none }
@media (max-width:560px){ .nav-auth{ gap:8px } .nav-auth .wallet .lab{ display:none } }

.brand-link .brand-name{ color:var(--royal) }

.board-pager{ display:flex; align-items:center; justify-content:center; gap:16px; margin:20px 0 4px }
.board-pager .bp-ind{ font-family:var(--mono); font-size:13px; color:var(--ink-3) }
.board-pager button[disabled]{ opacity:.4; cursor:default }

/* ============================================================
   CROSS-DEVICE UX FIXES (phone / tablet audit)
   ============================================================ */
/* nav: shrink the wordmark on phones so the row never overflows the CTA */
@media (max-width:560px){
  .nav-in{ gap:8px; padding:12px 16px }
  .brand-name{ font-size:15px }
}
/* nav: hide the wallet "Balance" label on tablets + narrow laptops so the signed-in row fits */
@media (max-width:1024px){ .nav-auth .wallet .lab{ display:none } }
/* board: tablets get two columns (the forced single column moved down to phones) */
@media (max-width:580px){ .grid{ grid-template-columns:1fr } }
/* explainer cards step 3 -> 2 -> 1 like the rest of the site */
@media (max-width:560px){ .cards3{ grid-template-columns:1fr } }
/* leaderboard rows: stack the sub-line + P/L under the handle on phones */
@media (max-width:560px){
  .lrow{ grid-template-columns:36px 1fr auto; grid-template-rows:auto auto; gap:3px 10px; padding:13px 14px }
  .lrow .lrank{ grid-row:1/3; align-self:center }
  .lrow .lhandle{ grid-column:2; grid-row:1 }
  .lrow .lpnl{ grid-column:3; grid-row:1 }
  .lrow .lres{ grid-column:2/4; grid-row:2; font-size:12px }
}
/* iOS Safari: 16px inputs stop the focus-zoom on sign-up, login, search + ticket */
@media (max-width:560px){
  .field input, .field select, .field textarea, .search input, .search-mini input,
  .new-form input, .record input, .res-tools input, .welcome #joinHandle{ font-size:16px }
}
/* welcome banner: stack on phones instead of one non-wrapping row */
@media (max-width:600px){
  .welcome-in{ flex-wrap:wrap; position:relative }
  .welcome-in p{ flex:1 1 100% }
  .welcome-in button{ position:absolute; top:8px; right:10px; margin:0 }
}
/* trade ticket: 44px contracts field on phones */
@media (max-width:560px){ .size input{ min-height:44px } }
/* touch devices of any width (incl. iPad) get 44px controls */
@media (pointer:coarse){
  .chip, .mode button, .sortseg button, .catchip, .res-btn, .board-pager button{ min-height:44px }
  .card-star{ min-width:44px; min-height:44px }
  /* 0725 device audit #3: the menu trigger is the ONLY nav control and was 38px */
  .nav24-trigger{ min-width:44px; min-height:44px }
  /* 0721 device fix: inputs under 16px trigger iOS Safari's focus zoom — the old
     16px rules were width-gated and missed landscape iPads (1181-1366) */
  .field input, .field select, .field textarea{ font-size:16px }
}
/* legal disclaimer + reset link: readable contrast (was ~2.2:1 on paper) */
.disc, .reset{ color:var(--ink-3) }
/* join + how-it-works inline grids collapse responsively */
.join-layout{ display:grid; grid-template-columns:1fr minmax(0,520px); gap:36px; align-items:start; padding:46px 0 }
.join-layout > *{ min-width:0 }
@media (max-width:900px){ .join-layout{ grid-template-columns:1fr; gap:28px; padding:34px 0 } }
.score-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start }
@media (max-width:760px){ .score-grid{ grid-template-columns:1fr; gap:24px } }
/* desktop: lift the smallest functional labels off the readability floor */
@media (min-width:561px){ .calrow{ font-size:11px } .cpk{ font-size:10px } .lsample{ font-size:10px } }
/* reduced motion: the live trades ticker becomes scrollable rather than frozen and clipped */
@media (prefers-reduced-motion:reduce){ .ticker-win{ overflow-x:auto } }

/* keep the board top below the sticky nav when a toggle re-renders it */
#board{ scroll-margin-top:84px }
/* ── the logo: bold molten-3D "Tradeeverything.com", globe as the .com o, no box ── */
.brand-name{ font-family:"Baloo 2", system-ui, sans-serif; font-weight:800; font-size:19px;
  display:inline-block; white-space:nowrap; line-height:1 }
.brand-link .brand-name{ color:inherit }
.brand-name .te-word{ font-size:1.4em; letter-spacing:.006em;
  background:linear-gradient(176deg,#FFD24A,#F6DE9B 28%,#F59412 60%,#A8823B); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:1px 1px 0 #b5471a, 2px 2.4px 0 #8c2a16, 2.5px 3.5px 2px rgba(70,18,6,.25) }
.brand-name .te-globe{ width:.58em; height:.58em; vertical-align:-.05em; margin:0 .005em; filter:drop-shadow(1.5px 2px 0 #8c2a16) drop-shadow(2px 3px 2px rgba(70,18,6,.25)) }
.foot-brand .brand-name{ font-size:17px }
@media (max-width:640px){ .brand-name{ font-size:16px } }
.brand-link .logo{ display:none }
/* mango currency glyph: stands in for the word "Mangos" at value spots */
.mango{ width:1.05em; height:1.05em; display:inline-block; vertical-align:-0.17em; margin-left:1px; flex:none }

/* ── landing hero: the big stacked molten logo + warm accents ── */
.hero-logo{ position:relative; display:inline-block; margin:4px auto 0; padding:0 2%; z-index:1 }
.hero-logo .hl-orbit{ position:absolute; left:50%; top:50%; width:130%; height:178%; transform:translate(-50%,-52%) rotate(-9deg); pointer-events:none; z-index:0 }
.hl-row{ position:relative; z-index:2; font-family:"Baloo 2",sans-serif; font-weight:800; line-height:.84; letter-spacing:-.02em; white-space:nowrap }
.hl-row1{ font-size:clamp(50px,9vw,104px); transform:scaleX(.93); transform-origin:center }
.hl-row2{ font-size:clamp(58px,11vw,130px); transform:scaleX(.92); transform-origin:center; display:inline-flex; align-items:flex-end; justify-content:center; gap:.04em }
.hl-molten{ background:linear-gradient(177deg,#FFF3C9 0%,#FFE08A 9%,#FFC23C 24%,#F7A11E 44%,#EC7C18 62%,#D5521F 80%,#B5301F 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:2px 2px 0 #6E5A24, 4px 4px 0 #7c2614, 6px 7px 0 #5a1c0f, 6px 10px 12px rgba(70,18,6,.24) }
.hl-globe{ width:.6em; height:.6em; vertical-align:-.03em; margin:0 .012em; filter:drop-shadow(3px 4px 0 #7c2614) drop-shadow(5px 8px 7px rgba(70,18,6,.28)) }
.hero-tag{ font-family:var(--display); font-weight:500; font-size:clamp(20px,3vw,36px); letter-spacing:-.015em; line-height:1.1; margin:22px 0 0; color:var(--ink) }
.hero-tag .pop{ font-style:italic; color:#EFCE7E }
.landing .hero-cta{ background:linear-gradient(165deg,#F7A11E,#EFCE7E 55%,#A8823B); box-shadow:0 2px 0 #6E5A24, 0 7px 16px rgba(70,18,6,.22) }
.landing .hero-cta:hover{ background:linear-gradient(165deg,#F7A11E,#EFCE7E 55%,#A8823B); filter:brightness(1.06); color:#fff }
.landing .hero .kick{ color:#A8823B }
@media (max-width:560px){ .hero-logo .hl-orbit{ display:none } }

/* ── warm the primary actions + accents to compliment the molten logo ── */
.btn-primary, .nav-cta, .snav .nav-cta{ background:linear-gradient(165deg,#F7A11E,#EFCE7E 55%,#A8823B) !important; box-shadow:0 1.5px 0 #6E5A24, 0 5px 13px rgba(70,18,6,.2) }
.btn-primary:hover, .nav-cta:hover, .snav .nav-cta:hover{ background:linear-gradient(165deg,#F7A11E,#EFCE7E 55%,#A8823B) !important; filter:brightness(1.06); color:#fff !important; transform:translateY(-1px) }
.landing .big .pop, .landing .mega .pop, .landing .core{ color:#EFCE7E }
.snav-links a:hover{ color:#A8823B }

/* teal accent tokens for content pages — matches the cockpit (dark theme) */
body.warm{ --royal:#EFCE7E; --violet:#EFCE7E; --violet-deep:#EFCE7E; --violet-bright:#F6DE9B; --grad:#EFCE7E; --violet-soft:#2A2208; --violet-soft-2:#1C1705 }
body.warm .head .pop, body.warm .phero h1 .pop, body.warm h1 .pop{ color:#EFCE7E }

/* one font + size for body text across the info pages (about, how-it-works, faq, legal) */
.prose p, .prose li, .faq .fa, .fcard p, .step p, .vtext p{ font-family:var(--sans); font-size:14.5px; line-height:1.6 }
.sugg-ic{ width:17px; height:17px; flex:none }

/* warm orbit emblem in the markets stats header */
.hero-orbit{ width:90px; height:90px; flex:none }
@media (max-width:640px){ .hero-orbit{ width:64px; height:64px } }

/* ============ warm CTA band (molten-field winner; replaces the old purple band) ============ */
.cta-band{ position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(112deg,#300705 0%,#58110D 28%,#88210F 52%,#BE4019 76%,#EA7A22 100%);
  border-radius:22px; padding:60px 44px; text-align:center;
  box-shadow:0 30px 60px -28px rgba(74,15,12,.6); margin:46px 0 }
.cta-band::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(55% 96% at 50% 122%, rgba(255,214,120,.42) 0%, rgba(255,194,60,0) 60%) }
.cta-band h2{ font-family:var(--display); font-weight:500; font-size:clamp(20px,2.6vw,30px);
  color:#FCF3E2; margin:0 0 14px; letter-spacing:-.018em; line-height:1.02 }
.cta-band p{ color:rgba(252,243,226,.84); font-size:16.5px; margin:0 auto 26px; max-width:52ch; line-height:1.55 }
.cta-band .btn-white{ background:#FCF3E2; color:#1A1B1F; font-weight:600; padding:15px 30px;
  border-radius:13px; display:inline-block; border:none; cursor:pointer;
  box-shadow:0 16px 36px -14px rgba(255,170,60,.6); transition:transform .15s ease }
.cta-band .btn-white:hover{ transform:translateY(-2px) }

/* ============ warm nav: molten underline active state (molten-underline winner) ============ */
.nav-links a{ position:relative }
.nav-links a:hover, .nav .nav-links a:hover{ background:transparent!important; color:var(--ink)!important }
.nav-links a.active, .nav .nav-links a.active,
body.markets-cockpit .nav-links a.active{ background:transparent!important; color:#EFCE7E!important }
body.warm .nav-links a.active{ color:#EFCE7E!important }
.nav-links a::after{ content:""; position:absolute; left:50%; bottom:3px; height:2.5px; width:22px; border-radius:3px;
  background:linear-gradient(90deg,#F6DE9B,#EFCE7E 55%,#A8823B); transform:translateX(-50%) scaleX(0);
  transform-origin:center; opacity:0; transition:transform .2s cubic-bezier(.4,0,.2,1), opacity .2s ease }
.nav-links a:hover::after{ transform:translateX(-50%) scaleX(1); opacity:.55 }
.nav-links a.active::after{ transform:translateX(-50%) scaleX(1); opacity:1; width:26px; height:3px; box-shadow:0 1px 6px rgba(232,115,28,.5) }

/* ============================================================
   iOS / PHONE HARDENING v2 (no horizontal overflow)
   ============================================================ */
@media (max-width:640px){
  /* welcome banner: a clean vertical stack so the button row never widens the page */
  .welcome-in{ flex-direction:column; align-items:stretch; gap:10px; padding:13px 14px }
  .welcome-in .ico{ align-self:flex-start }
  .welcome-in p{ width:100%; flex:0 0 auto }
  .welcome .join-row{ width:100%; margin:0; flex-wrap:wrap; gap:8px }
  .welcome .join-row .btn{ flex:0 1 auto }
  .welcome-in > button{ position:absolute; top:8px; right:10px }
  /* nav: smaller wordmark + non-wrapping auth so the top row fits a phone */
  .brand-name{ font-size:14px }
  .nav-login{ white-space:nowrap; padding:8px 8px }
  .nav-cta{ white-space:nowrap }
  .nav-in{ gap:8px }
}
/* belt-and-suspenders: nothing may force a sideways scroll on a phone */
@media (max-width:640px){ html, body{ max-width:100%; overflow-x:clip } }

/* === secondary / ghost buttons: warm + finished, not plain default === */
.btn-ghost{ background:#FFFDFB; color:var(--ink); border:1px solid #EAD9C7; box-shadow:0 1px 2px rgba(90,45,12,.06) }
.btn-ghost:hover{ border-color:#EFCE7E; color:#A8823B; background:#FFF6EE; transform:translateY(-1px) }
.nav-login{ color:var(--ink-2) }
.nav-login:hover{ color:#A8823B; background:#FCEEE3 }

/* fix: the live-ticker marquee (flex:1 without min-width:0) was forcing the page wider than a phone */
.ticker{ min-width:0; max-width:100% }
.ticker-win{ min-width:0 }

/* ============================================================
   MOBILE / iOS FIX PASS (audit-driven) - shared across all pages
   ============================================================ */
/* sticky-safe global horizontal guard */
html, body{ overflow-x:clip }
/* NAV wordmark: the .te-word 1.4em multiplier was defeating the mobile shrink and
   bleeding over Log in / Join. Shrink the inner span + clip the brand so it always fits. */
@media (max-width:560px){
  .nav-in{ gap:8px }
  .brand{ min-width:0; flex:0 1 auto; overflow:hidden }
  .brand-link{ min-width:0; overflow:hidden; display:inline-flex; align-items:center }
  .brand-name{ min-width:0; max-width:100%; overflow:hidden }
  .brand-name .te-word{ font-size:1.05em }
  .nav-auth{ flex:0 0 auto; gap:8px }
  .nav-login, .nav-cta{ min-height:44px; display:inline-flex; align-items:center }
}
/* 0721 T1: iPhone 16 Pro (402) clipped the wordmark to "Tradeeverything.co" —
   the shrink step only lived <=400. The 401-440 phones now get the same step
   so the full mark including .com always shows (brand law: .com never drops). */
@media (max-width:440px){ .brand-name .te-word{ font-size:0.82em } .nav-login{ padding:7px 6px; font-size:12.5px } .nav-cta{ padding:7px 11px } }
@media (max-width:400px){ .nav-in{ gap:6px } .brand-name .te-word{ font-size:0.82em } .nav-login{ padding:7px 4px; font-size:12.5px } .nav-cta{ padding:7px 10px; font-size:12.5px } }
/* LANDING big stacked hero logo: lower the clamp floors + never exceed the screen */
@media (max-width:560px){
  .hl-row1{ font-size:clamp(32px,9vw,104px) }
  .hl-row2{ font-size:clamp(34px,10.5vw,130px) }
  .hero-logo, .hl-row{ max-width:100% }
}
@media (max-width:400px){ .hero-logo{ transform:scale(.86); transform-origin:top center } }
/* LANDING sticky scroll-nav: keep Join visible at 360 */
@media (max-width:380px){ .snav-links{ gap:10px; font-size:12px; flex-wrap:wrap; row-gap:6px } .snav .nav-cta{ padding:6px 11px } }
.snav-links a{ display:inline-flex; align-items:center; padding:7px 3px }
/* HOW-IT-WORKS steps single column on phones */
@media (max-width:560px){ .loop{ grid-template-columns:1fr } }
/* phone tap targets (>=44px) */
@media (max-width:560px){
  .welcome > button, #welcomeX, .ticker-off, .hamburger{ min-width:44px; min-height:44px }
  .toc a, .foot-col a{ padding:7px 0 }
}

/* account reset is only meaningful for a signed-in user (was leaking into logged-out markets page) */
.reset{ display:none }
body.signed-in .reset{ display:inline-flex }


/* ===================== POPPED board card (card-bar-spark POP winner) ===================== */
.card{ position:relative; contain:layout style; background:linear-gradient(180deg,#FFFEFB 0%,#FFFFFF 30%,#FFFCF6 100%); border:1px solid var(--line); border-radius:18px; overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(60,40,12,.05),0 16px 40px -22px rgba(150,75,18,.34); --c1:#EFCE7E; --c2:#F6DE9B; --c3:#A8823B }
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--c3),var(--c1) 48%,var(--c2)); z-index:3 }
.card::after{ content:""; position:absolute; left:-12%; top:104px; width:66%; height:140px; background:radial-gradient(closest-side,var(--c2),transparent 72%); opacity:.13; pointer-events:none; z-index:0 }
.card.sel{ border-color:var(--c1); box-shadow:0 0 0 2px color-mix(in srgb,var(--c1) 40%,transparent),0 16px 40px -22px rgba(150,75,18,.4) }
.card .card-in{ position:relative; z-index:1; padding:16px 17px 15px }
.card .card-top{ display:flex; align-items:center; gap:8px; margin-bottom:12px }
.card .card-cat{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c3); padding:5px 10px 5px 9px; border-radius:8px; background:linear-gradient(135deg,color-mix(in srgb,var(--c2) 26%,#fff),color-mix(in srgb,var(--c1) 16%,#fff)); border:1px solid color-mix(in srgb,var(--c1) 30%,#fff); display:inline-flex; align-items:center; gap:6px; white-space:nowrap }
.card .card-cat .dot{ width:5px; height:5px; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c3)) }
.card .spacer{ flex:1 }
.card .card-move{ font-family:var(--mono); font-size:11px; font-weight:500; padding:3px 8px; border-radius:7px; display:inline-flex; align-items:center; gap:3px; background:var(--bg-soft); color:var(--ink-3) }
.card .card-move.up{ color:#1F7A48; background:#E6F1EA } .card .card-move.dn{ color:#9E2A1E; background:#F8E9E6 }
.card .card-move .arw{ font-size:10px; line-height:1 }
.card .card-star{ width:24px; height:24px; padding:0; border:none; background:none; cursor:pointer; display:grid; place-items:center; color:var(--ink-4); flex:none }
.card .card-star svg{ width:16px; height:16px } .card .card-star.on{ color:var(--gold) }
.card .card-q{ font-family:var(--display); font-weight:600; font-size:16.5px; line-height:1.28; color:var(--ink); letter-spacing:-.005em; min-height:2.56em; margin:0 0 13px }
.card .focal{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:13px }
.card .prob{ display:flex; align-items:flex-start; gap:3px; line-height:1; flex:none }
.card .prob .big{ font-family:var(--mono); font-weight:500; font-size:58px; letter-spacing:-.045em; line-height:.8; background:linear-gradient(168deg,var(--c2) 4%,#F6DE9B 32%,var(--c1) 62%,var(--c3) 104%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--c1) }
.card .prob.res .big{ font-family:var(--sans); font-size:21px; font-weight:700; -webkit-text-fill-color:initial }
.card .prob .pc{ font-family:var(--mono); font-size:20px; font-weight:500; margin-top:3px; color:var(--c1) }
.card .prob .yeslab{ align-self:flex-end; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#1F7A48; background:#E6F1EA; padding:3px 7px; border-radius:6px; margin-bottom:8px; margin-left:2px }
.card .spark{ position:relative; width:132px; height:60px; flex:none; align-self:center; background:linear-gradient(180deg,color-mix(in srgb,var(--c2) 11%,#fff),color-mix(in srgb,var(--c1) 6%,#fff)); border:1px solid color-mix(in srgb,var(--c1) 20%,var(--line)); border-radius:11px; padding:4px 6px 5px }
.card .spark .peak{ position:absolute; top:5px; right:8px; font-family:var(--mono); font-size:8.5px; font-weight:500; color:var(--c3); background:color-mix(in srgb,var(--c2) 20%,#fff); padding:1px 5px; border-radius:5px; border:1px solid color-mix(in srgb,var(--c1) 18%,#fff) }
.card .spark svg{ display:block; width:100%; height:100%; overflow:visible }
.card .bar{ position:relative; height:16px; border-radius:9px; overflow:hidden; background:#F8E9E6; margin-bottom:9px; box-shadow:inset 0 1px 3px rgba(120,30,18,.16) }
.card .bar .fill{ position:absolute; inset:0 auto 0 0; border-radius:9px; background:linear-gradient(90deg,#1F7A48,#2F8F5B 72%,#4fb37e) }
.card .bar .no-fill{ position:absolute; inset:0 0 0 auto; border-radius:9px; background:linear-gradient(90deg,#d8594a,#A8823B 55%,#9E2A1E) }
.card .bar .tick{ position:absolute; top:-2px; bottom:-2px; width:3px; background:#fff; border-radius:2px; z-index:2; box-shadow:0 0 0 1px rgba(40,12,6,.28) }
.card .card-yn{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; margin-bottom:13px } .card .card-yn .y{ color:#1F7A48 } .card .card-yn .n{ color:#9E2A1E } .card .card-yn b{ font-weight:500 }
.card .fcost{ display:flex; align-items:center; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:8px 4px; margin-bottom:13px }
.card .fcost .lab{ font-size:8.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); padding:0 10px; line-height:1.2; flex:none; max-width:74px }
.card .fcost .cell{ flex:1; text-align:center; border-left:1px solid var(--line) }
.card .fcost .ck{ font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.card .fcost .cv{ font-family:var(--mono); font-size:15px; font-weight:500; margin-top:1px } .card .fcost .cell.y .cv{ color:#1F7A48 } .card .fcost .cell.n .cv{ color:#9E2A1E }
.card .card-meta{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ink-2); line-height:1.5 } .card .card-meta b{ font-weight:500; color:var(--ink) }
.card .card-src{ font-family:var(--mono); font-size:9.5px; color:var(--ink-3); margin-top:7px; padding-top:9px; border-top:1px solid var(--line); display:flex; align-items:center; gap:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.card .card-src .src-dot{ width:4px; height:4px; border-radius:50%; background:var(--c1); flex:none } .card .card-src .lbl{ font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-4); font-size:8.5px }

/* custom warm icons for the "Why a price reads as a forecast" cards (replaced emoji) */
.cards3 .ic .emoji{ font-size:0; line-height:0; display:flex; align-items:center; margin-bottom:14px }
.cards3 .ic .emoji svg{ width:36px; height:36px; display:block }

/* detail panel: big molten % + popped Yes/No bar (match the board cards) */
.m-focal{ display:flex; align-items:flex-start; gap:4px; padding:8px 20px 0; line-height:1 }
.m-big{ font-family:var(--mono); font-weight:500; font-size:clamp(40px,5vw,56px); letter-spacing:-.04em; line-height:.85; background:linear-gradient(168deg,#F6DE9B 4%,#F6DE9B 32%,#EFCE7E 62%,#A8823B 104%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#EFCE7E }
.m-pc{ font-family:var(--mono); font-size:20px; font-weight:500; color:#EFCE7E; margin-top:4px }
.m-yeslab{ align-self:flex-end; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#1F7A48; background:#E6F1EA; padding:3px 7px; border-radius:6px; margin-bottom:5px; margin-left:4px }
.prob-track{ height:17px; border-radius:9px; background:#F8E9E6; box-shadow:inset 0 1px 3px rgba(120,30,18,.16) }
.prob-track .pf-y{ background:linear-gradient(90deg,#1F7A48,#2F8F5B 72%,#4fb37e); box-shadow:2px 0 0 #fff }
.prob-track .pf-n{ background:linear-gradient(90deg,#d8594a,#A8823B 55%,#9E2A1E) }

/* no flash of the raw "Tradeeverything.com" text before nav.js paints the molten lockup —
   but the hide is self-limiting: if nav.js never arrives, the raw name reveals at 3s
   (0725 device audit #6b: "not yet" must never look like "never") */
.brand-name:not([data-wm]){ visibility:hidden; animation:te-wm-reveal 1ms linear 3s forwards }
@keyframes te-wm-reveal{ to{ visibility:visible } }

/* leaderboard: podium emblem on the heading + top-3 podium tint; kill the violet "me" row */
.lb-emblem{ display:inline-block; vertical-align:-7px; width:40px; margin-right:11px }
.lb-emblem svg{ width:40px; height:30px; display:block; filter:drop-shadow(0 2px 3px rgba(150,75,18,.22)) }
.lrow.me{ background:#FFF4E2 !important; box-shadow:inset 3px 0 0 #EFCE7E }
.lboard .lrow.r1{ background:linear-gradient(90deg, rgba(244,211,94,.14), transparent 56%) }
.lboard .lrow.r2{ background:linear-gradient(90deg, rgba(168,175,187,.13), transparent 56%) }
.lboard .lrow.r3{ background:linear-gradient(90deg, rgba(208,138,78,.13), transparent 56%) }
.lboard .lrow.r1 .lhandle{ font-weight:700; font-size:15px }

/* ===== Calibration Lens: DARK MOLTEN (espresso + gold) ===== */
.calibpanel{
  background:
    radial-gradient(135% 105% at 12% -8%, rgba(232,115,28,.10) 0%, rgba(232,115,28,0) 44%),
    radial-gradient(120% 92% at 20% 2%, #1B1815 0%, #141210 56%, #100E0C 100%) !important;
  border:1px solid #3A332B !important;
  box-shadow:
    0 32px 74px -28px rgba(10,7,5,.80),
    0 8px 22px -12px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,194,90,.07) !important;
}
.cp-eyebrow{ color:#FFB347 !important; text-shadow:0 0 18px rgba(247,161,30,.32); }
.cp-dot{
  background:radial-gradient(circle at 36% 30%, #FFE0A0 0%, #F6DE9B 40%, #EFCE7E 100%) !important;
  box-shadow:0 0 13px 3px rgba(255,166,40,.85), 0 0 4px 1px rgba(255,200,120,1) !important;
}
.cp-chart{
  background:radial-gradient(130% 115% at 50% 0%, #1B1815 0%, #141210 70%, #100E0C 100%);
  border:1px solid #3A332B;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,194,60,.10),
    inset 0 0 26px rgba(0,0,0,.30);
}
.cp-axis .k-id{ color:#CC9E62; }
.cp-axis .k-cv{ color:#B58B53; }
.cp-sec{ color:#F7A11E; }
.cp-mut{ color:#BC9665 !important; }
.cp-big{ color:#FFF7EC; text-shadow:0 0 24px rgba(255,170,55,.16); }
.cp-path{ color:#C7A573; }
.cp-path .up{ color:#5FE39A; }
.cpm{
  background:linear-gradient(180deg, #1B1815 0%, #141210 100%);
  border:1px solid #3A332B;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.7);
}
.cp-metrics .cpm:first-child, .cpm.yes{ border-left:4px solid #2FD07A;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.7), -5px 0 16px -9px rgba(47,208,122,.6); }
.cp-metrics .cpm:last-child, .cpm.no{ border-left:4px solid #EFCE7E;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.7), -5px 0 16px -9px rgba(232,115,28,.65); }
.cpk{ color:#D6A968; }
.cpv{ color:#FFF7EC; }
.cp-qual span{
  color:#FFC76B !important;
  background:rgba(255,180,70,.07) !important;
  border:1px solid #3A332B !important;
}
.cp-qual span.src{
  color:#C79A5E !important;
  background:rgba(255,180,70,.035) !important;
  border:1px solid #422A18 !important;
}
.cp-you{ color:#D8B988 !important; }
.cp-you .mut, .cp-you span.mut{ color:#BA9667 !important; background:none !important; border:none !important; }
.cp-cat{ color:#DEC295 !important; }
.cp-cat b{ color:#F6DE9B !important; text-shadow:0 0 14px rgba(255,166,40,.35); }
.cp-foot{ color:#CBA77C !important; }

/* ===== Live standings heading lockup (molten bar) ===== */
.lbhf{
  --gold:#F6DE9B; --amber:#F6DE9B; --orange:#EFCE7E; --rust:#A8823B; --garnet:#8E2017;
  margin:0 0 18px;          /* docks the bar onto the board below; tune to the board's own top margin in production */
  position:relative; z-index:2;
}

/* ===== the single molten element the type lives INSIDE ===== */
.lbhf__bar{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:18px;
  padding:16px 22px 17px;
  border-radius:18px 18px 13px 13px;
  background:
    radial-gradient(150% 130% at 100% 50%, rgba(232,115,28,.16) 0%, rgba(232,115,28,0) 56%),
    radial-gradient(120% 150% at 0% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #FFF4DE 0%, #FCE6C2 52%, #F7D9A6 100%);
  border:1px solid rgba(232,115,28,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -12px 24px -16px rgba(192,57,43,.30),
    0 14px 32px -16px rgba(142,32,23,.44),
    0 2px 6px -3px rgba(192,57,43,.18);
}
/* molten left channel — terminal edge marker */
.lbhf__bar::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--gold) 0%, var(--orange) 50%, var(--rust) 100%);
}
/* molten floor rule baked into the bar */
.lbhf__bar::after{
  content:""; position:absolute; left:5px; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--orange) 42%, var(--rust) 78%, var(--garnet));
  opacity:.9;
}

/* ===== podium emblem — echoes the rank pills below ===== */
.lbhf__emblem{ display:flex; align-items:flex-end; gap:5px; flex:0 0 auto; padding-left:4px; }
.lbhf__pod{
  font-family:"DM Mono",ui-monospace,monospace; font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  width:30px; border-radius:9px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95), inset 0 -4px 6px rgba(120,75,8,.5), 0 0 9px rgba(214,168,40,.30), 0 2px 5px -1px rgba(150,80,12,.5);
}
.lbhf__pod--1{
  height:46px; color:#3A2A02;
  background:radial-gradient(72% 62% at 26% 14%, rgba(255,255,255,.97) 0%, rgba(255,255,255,.4) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FFF7D6 0%,#F6D866 26%,#D2A026 52%,#8C6A12 78%,#F8E390 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.lbhf__pod--2{
  height:34px; color:#2E3338;
  background:radial-gradient(72% 62% at 26% 14%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.42) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#FFFFFF 0%,#E4E7EA 28%,#B2B8BE 54%,#7E858C 80%,#EDEFF1 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.lbhf__pod--3{
  height:28px; color:#fff;
  background:radial-gradient(72% 62% at 26% 14%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.34) 24%, rgba(255,255,255,0) 52%), linear-gradient(135deg,#F8D2A6 0%,#D8945A 32%,#AE6A30 60%,#7A451B 82%,#EEBC86 100%);
  text-shadow:0 1px 1px rgba(80,45,15,.6);
}
/* hairline divider after the emblem */
.lbhf__emblem::after{
  content:""; position:relative; left:9px;
  width:1px; height:40px;
  background:linear-gradient(180deg, rgba(232,115,28,0) 0%, rgba(232,115,28,.42) 50%, rgba(232,115,28,0) 100%);
}

/* ===== titles — true molten headline ===== */
.lbhf__titles{ display:flex; flex-direction:column; gap:3px; flex:1 1 auto; margin-left:9px; }
.lbhf__title{
  margin:0;
  font-family:"Baloo 2",system-ui,sans-serif; font-weight:800;
  font-size:34px; line-height:1; letter-spacing:.2px; width:max-content;
  /* molten metal: bright gold crest -> amber -> orange -> garnet base */
  background:linear-gradient(176deg,
    #FFD862 0%, #FBB231 14%, #F08A1E 38%, #D9501F 64%, #B22A1C 86%, #8E2017 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  /* warm halo so glyphs sit on the bar with weight */
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 5px 12px rgba(192,57,43,.2));
}
.lbhf__sub{
  font-family:"Inter",sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#B07A3C;
}

/* ===== count meta — anchors the right side ===== */
.lbhf__meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  flex:0 0 auto; line-height:1;
  padding-right:16px; margin-right:2px;
  border-right:1px solid rgba(232,115,28,.28);
}
.lbhf__count{
  font-family:"DM Mono",ui-monospace,monospace; font-weight:500; font-size:18px;
  color:#9A3318; letter-spacing:-.01em;
}
.lbhf__countlbl{
  font-family:"Inter",sans-serif; font-weight:600; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#BC8A56;
}

/* ===== live indicator — pulsing molten dot ===== */
.lbhf__live{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  padding:7px 13px; border-radius:999px;
  background:linear-gradient(180deg,#EFCE7E 0%,#A8823B 100%);
  border:1px solid rgba(142,32,23,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px -1px rgba(192,57,43,.45);
}
.lbhf__livetxt{
  font-family:"DM Mono",ui-monospace,monospace; font-weight:500; font-size:12px;
  letter-spacing:.24em; color:#FFFFFF; text-shadow:0 1px 1px rgba(120,30,10,.5);
}
.lbhf__dot{
  position:relative; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #FFE9B0, #F6DE9B 65%);
  box-shadow:0 0 7px rgba(255,224,138,.9);
}
.lbhf__dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid rgba(255,224,138,.7);
  animation:lbhf-pulse 1.9s ease-out infinite;
}
@keyframes lbhf-pulse{
  0%{ transform:scale(.55); opacity:.95 }
  100%{ transform:scale(1.6); opacity:0 }
}

/* ===== Live masthead (reusable page header) ===== */
.tmast{ margin:18px 0 26px }
.tmast{
  --tm-gold:#F6DE9B; --tm-amber:#F6DE9B; --tm-orange:#EFCE7E; --tm-rust:#A8823B;
  --tm-ink:#33312E;
  display:flex;
  align-items:stretch;
  gap:30px;
  padding:18px 30px 20px;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 170% at 7% -12%, rgba(255,194,60,.22) 0%, rgba(255,194,60,0) 54%),
    radial-gradient(130% 210% at 100% 130%, rgba(192,57,43,.07) 0%, rgba(192,57,43,0) 50%),
    linear-gradient(180deg, #FFFCF4 0%, #FBF6EB 100%);
  border:1px solid #F0E4D1;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 12px 32px -20px rgba(192,57,43,.36);
}

/* molten hairline along the very top edge */
.tmast::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--tm-gold) 0%, var(--tm-amber) 34%, var(--tm-orange) 66%, var(--tm-rust) 100%);
  opacity:.92;
}
/* warm molten underglow seam along the bottom */
.tmast::after{
  content:"";
  position:absolute; left:18px; right:18px; bottom:0; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(255,194,60,0) 0%, var(--tm-gold) 18%, var(--tm-orange) 52%, var(--tm-rust) 86%, rgba(192,57,43,0) 100%);
  opacity:.8;
}

/* ---- brand cluster ---- */
.tmast-brand{ display:flex; align-items:center; gap:15px; flex:none; }

/* vertical wall separating brand cell from stats */
.tmast-wall{
  width:1px; flex:none; align-self:stretch; margin:3px 0;
  background:linear-gradient(180deg, rgba(232,115,28,0) 0%, rgba(232,115,28,.4) 50%, rgba(232,115,28,0) 100%);
}
.tmast-globe{
  width:66px; height:66px; display:block; flex:none;
  filter:drop-shadow(0 7px 14px rgba(192,57,43,.24));
}
.tmast-id{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }

.tmast-word{
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:23px; line-height:1; letter-spacing:-.2px;
  color:var(--tm-rust); white-space:nowrap;
}
.tmast-word span{ color:var(--tm-orange); font-weight:700; }

.tmast-live{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Mono',monospace; font-weight:500;
  font-size:10.5px; letter-spacing:1.7px;
  color:var(--tm-rust);
}
.tmast-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--tm-orange); flex:none;
  box-shadow:0 0 0 0 rgba(232,115,28,.55);
  animation:tmastpulse 1.8s ease-out infinite;
}
.tmast-sep{ color:rgba(192,57,43,.42); margin:0 -3px; }
.tmast-status{ color:#A8814C; letter-spacing:1.6px; }
@keyframes tmastpulse{
  0%{ box-shadow:0 0 0 0 rgba(232,115,28,.5); }
  70%{ box-shadow:0 0 0 8px rgba(232,115,28,0); }
  100%{ box-shadow:0 0 0 0 rgba(232,115,28,0); }
}

/* ---- stats strip ---- */
.tmast-stats{
  flex:1 1 auto;
  display:flex; align-items:center;
  gap:0;
}
.tmast-stat{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px;
}
.tmast-num{
  position:relative;
  display:inline-block;
  font-family:'DM Mono',monospace; font-weight:500;
  font-size:32px; line-height:1; letter-spacing:-.6px;
  color:var(--tm-ink);
  font-variant-numeric:tabular-nums;
  padding-bottom:9px;
}
/* warm ledger underline tucked under each figure */
.tmast-num::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:28px; height:2px; border-radius:2px; transform:translateX(-50%);
  background:linear-gradient(90deg, var(--tm-gold), var(--tm-orange));
  opacity:.85;
}
.tmast-lab{
  font-family:'Inter',sans-serif; font-weight:700;
  font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
  color:#B07A4A;
}
.tmast-rule{
  width:1px; height:42px; flex:none;
  background:linear-gradient(180deg, rgba(232,115,28,0) 0%, rgba(232,115,28,.34) 50%, rgba(232,115,28,0) 100%);
}

/* ===== molten section-header system (rail + icon) ===== */
.shd{ display:flex; align-items:center; gap:13px; margin:0 0 14px }
.shd-mark{ margin-right:3px }
.shd-rail{ flex:0 0 auto; width:5px; height:46px; align-self:center; border-radius:5px; background:linear-gradient(180deg,#F6DE9B 0%,#F6DE9B 38%,#EFCE7E 70%,#A8823B 100%); box-shadow:0 2px 8px rgba(192,57,43,.22) }
.shd-mark{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; background:linear-gradient(155deg,#FEF1DA 0%,#F9DFBC 100%); border:1px solid #F0CB9C; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(192,57,43,.10) }
.shd-mark svg{ width:24px; height:24px; display:block }
.shd-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1 }
.shd-kick{ font-family:"DM Mono",monospace; font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#C0673A }
.shd-title{ margin:0; font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:clamp(20px,5.4vw,28px); letter-spacing:-.01em; color:#2A2018; line-height:1.1; overflow-wrap:anywhere }
/* curated per-market context + the yes/no gloss at the decision point */
.m-context{ font-family:var(--sans); font-size:13.5px; line-height:1.56; color:var(--ink-2); margin:2px 20px 10px }
.yn-def{ font-size:12px; line-height:1.5; color:var(--ink-3); margin:11px 0 0 }

.e-cold{ top:20px; left:36px; color:rgba(122,114,106,.85); }
.e-hot{ top:20px; right:30px; color:rgba(160,84,31,.98); }

/* self track-record block (renderProfile) + homepage live affordance + suggest hint */
.profile{ background:var(--bg-soft); border:1px solid var(--line-2); border-radius:var(--r); padding:16px 18px; margin-bottom:18px }
.profile .pempty{ font-size:13px; color:var(--ink-2); line-height:1.55 } .profile .pempty b{ color:var(--ink) }
.profile .ph b{ font-family:var(--display); font-size:17px }
.qp-live{ color:#1F7A48; font-weight:700; font-size:12px; letter-spacing:.02em }
.new-hint{ font-size:12px; color:var(--ink-3); line-height:1.5; margin:8px 2px 0 }

/* "Today on the board" glance strip */
.glance{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:0 0 18px }
.glance-tile{ text-align:left; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); padding:13px 15px; cursor:pointer; display:flex; flex-direction:column; gap:5px; font-family:inherit; transition:transform .14s ease, box-shadow .14s ease }
.glance-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.gl-lab{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#C0673A }
.gl-q{ font-family:var(--display); font-size:14px; font-weight:600; color:var(--ink); line-height:1.25 }
.gl-v{ font-family:var(--mono); font-size:12.5px; color:var(--ink-2) }
.gl-v.up{ color:var(--yes-deep) } .gl-v.dn{ color:var(--no-deep) }
@media (max-width:680px){ .glance{ grid-template-columns:1fr } }

/* welcome banner removed in favor of the consistent masthead header */
#welcomeWrap{ display:none !important }

/* fix: the molten hero wordmark (background-clip:text + 4 stacked drop-shadows) glitched into
   offset boxes on scroll because Chrome re-rasterized the text-clip every frame. Promote it to
   its own cached GPU layer so it composites instead of re-clipping. */
.hero-logo{ isolation:isolate }
.hl-molten{ transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden }

/* .shd section title on a dark band: white title, gold kicker */
.band.dark .shd-title{ color:#fff }
.band.dark .shd-kick{ color:#F7C66B }

/* .shd section titles inside .prose (legal page) must out-specify .prose h2 */
.prose .shd{ margin:38px 0 14px } .prose .shd:first-of-type{ margin-top:6px }
.prose .shd-title{ font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:26px; letter-spacing:-.01em; color:#2A2018; line-height:1.12; margin:0 }

/* mobile: the masthead + Live-standings lockup overflowed narrow screens (image check) */
@media (max-width:720px){
  .tmast{ flex-direction:column; align-items:stretch; gap:13px; padding:15px 16px 16px }
  .tmast-wall{ display:none }
  .tmast-stats{ justify-content:space-between; padding-top:12px; border-top:1px solid rgba(232,115,28,.16) }
  .tmast-num{ font-size:22px } .tmast-lab{ font-size:9.5px; letter-spacing:1px }
}
@media (max-width:560px){
  .lbhf__bar{ gap:9px; padding:12px 13px }
  .lbhf__title{ font-size:21px }
  .lbhf__sub{ font-size:9px; letter-spacing:.13em }
  .lbhf__pod{ width:23px }
  .lbhf__pod--1{ height:34px } .lbhf__pod--2{ height:27px } .lbhf__pod--3{ height:22px }
  .lbhf__live{ padding:5px 9px } .lbhf__livetxt{ font-size:10px; letter-spacing:.13em }
}

/* masthead stats: equal 3-col grid on mobile so the third stat + label never clip */
@media (max-width:720px){
  .tmast-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
  .tmast-rule{ display:none }
  .tmast-num{ font-size:21px }
  .tmast-lab{ font-size:9px; letter-spacing:.4px }
}

/* masthead mobile: let the 3 stat columns shrink (1fr defaults to min-content and blows the band past the viewport) */
@media (max-width:720px){
  .tmast{ max-width:100%; box-sizing:border-box }
  .tmast-stats{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .tmast-stat{ min-width:0 }
  .tmast-num{ font-size:20px } .tmast-lab{ font-size:8.5px; letter-spacing:.3px; white-space:nowrap }
}

/* suggest-a-market confirmation state (warm success, never cold blue) */
.btn.ok{ background:#2f8a5a !important; color:#fff !important; box-shadow:none !important; cursor:default; transform:none; }

/* shrink the thousands comma in masthead stats (it read too large) */
.tmast-num .tn-c{ font-size:.58em; letter-spacing:-.01em; }

/* hero wordmark 3D extrude lives in TEXT-SHADOW on .hl-molten (the molten text),
   NOT a filter:drop-shadow over the clipped-text subtree. A filter over a
   background-clip:text element is the macOS-Chrome trigger that ghost-boxes the
   wordmark when the hero re-composites on scroll; text-shadow paints no filter
   layer, so it never glitches. The globe SVG keeps its own drop-shadow (it is not
   clipped text, so it is safe). Rows stay layer-promoted for a stable composite. */
.hero-logo{ isolation:isolate }
.hl-row1, .hl-row2{ transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden }
/* the molten wordmark must NOT ride a transform-based reveal: a transformed ancestor
   re-triggers the background-clip:text re-raster on scroll (the ghost-box bug). Fade only. */
.landing .hero-logo[data-reveal]{ transform:none; transition:opacity .9s cubic-bezier(.16,1,.3,1) }
.landing .hero-logo[data-reveal].in{ transform:none }

/* order entry: Market/Limit toggle, limit field, open orders */
.ordtype{ margin-bottom:10px }
/* Market<->Limit toggle: the limit-price row COLLAPSES (no phantom gap) and flows open. */
.limit-collapse{ display:grid; grid-template-rows:0fr; margin-bottom:0; opacity:0; pointer-events:none;
  transition:grid-template-rows .22s ease, margin-bottom .22s ease, opacity .16s ease }
.limit-collapse[data-armed="1"]{ grid-template-rows:1fr; margin-bottom:12px; opacity:1; pointer-events:auto }
.limit-collapse > .limit-row{ overflow:hidden; min-height:0 }
.limit-row{ display:flex; align-items:center; gap:10px }
.limit-row label{ font-size:13px; color:var(--ink-2); font-weight:600 }
.limit-in{ position:relative; display:inline-flex; align-items:center }
.limit-in input{ width:88px; text-align:right; padding:8px 24px 8px 10px; border:1px solid var(--line); border-radius:8px; font-family:var(--mono); font-size:15px; background:var(--card); color:var(--ink) }
.limit-pct{ position:absolute; right:9px; color:var(--ink-3); font-size:13px; pointer-events:none }
.locked-tag{ font-size:11px; color:var(--ink-3); font-weight:500; margin-left:5px }
/* full-width card below the market detail (moved out of the ticket so the ticket
   stays balanced with the calibration lens — no more blank column) */
.open-orders{ margin:2px 0 18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 18px 6px }
.oo-head{ font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:8px }
#ooList{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); column-gap:30px }
.oo-row{ border-bottom:1px solid var(--line) }
.oo-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line) }
.oo-row:last-child{ border-bottom:none }
.oo-main{ font-size:13px; color:var(--ink); line-height:1.4 }
.oo-side{ font-family:var(--mono); font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:5px; letter-spacing:.04em }
.oo-side.buy{ background:rgba(47,140,91,.14); color:#1F7A48 }
.oo-side.sell{ background:rgba(192,57,43,.12); color:#9E2A1E }
.oo-sub{ color:var(--ink-3); font-size:11px; margin-top:2px }
.oo-cancel{ font-size:12px; padding:5px 11px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--ink-2); cursor:pointer; flex:0 0 auto; font-weight:600 }
.oo-cancel:hover{ background:#FFF0E6; color:#A8823B; border-color:#E8C7B0 }

/* ── order book · molten depth ladder (combined depth per price) ── */
.depth{ margin:11px 0 3px; padding:11px 12px 10px;
  background:linear-gradient(180deg,#FFFFFF,#FCFBF8); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:inset 0 1px 0 #fff, var(--shadow-sm) }

.dl-head{ display:flex; align-items:center; gap:8px; font-size:10px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px }
.dl-head::before{ content:""; flex:0 0 14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--no), var(--gold) 52%, var(--yes)) }
.dl-head::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line), transparent) }

/* tight terminal rows · faint per-side zebra so each stack reads as a wall */
.dl-row{ display:grid; grid-template-columns:30px 1fr 44px; align-items:center;
  column-gap:9px; height:18px; padding:0 5px; border-radius:3px;
  font-variant-numeric:tabular-nums; transition:background .12s ease }
.dl-row.ask:nth-of-type(odd){ background:rgba(240,88,79,.035) }
.dl-row.bid:nth-of-type(even){ background:rgba(47,208,122,.035) }
.dl-row:hover{ background:rgba(232,115,28,.06) }

.dl-px{ font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:12px; font-weight:700; letter-spacing:-.01em }
.dl-row.ask .dl-px{ color:var(--no-deep) }
.dl-row.bid .dl-px{ color:var(--yes-deep) }

/* track: recessed channel with a hairline inset so the saturated fill reads as printed-on */
.dl-bar{ position:relative; display:block; height:13px; border-radius:2px;
  background:var(--bg-soft); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(14,17,22,.05) }
.dl-row.ask .dl-bar{ background:rgba(240,88,79,.06) }
.dl-row.bid .dl-bar{ background:rgba(47,208,122,.06) }

/* fill: saturates to FULL brand color + top sheen + a luminous leading edge */
.dl-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:2px 1px 1px 2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30); transition:width .22s cubic-bezier(.22,1,.36,1) }
.dl-row.ask .dl-fill{ background:linear-gradient(90deg, rgba(240,88,79,.32), var(--no) 86%);
  border-right:1px solid #FF6A5E }
.dl-row.bid .dl-fill{ background:linear-gradient(90deg, rgba(47,208,122,.32), var(--yes) 86%);
  border-right:1px solid #2FD07A }

.dl-sz{ font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:11px; font-weight:600; color:var(--ink-2); text-align:right }

/* best ask + best bid (the rows hugging the mid) get the glow — tagged .best in renderDepth */
.dl-row.ask.best{ background:rgba(240,88,79,.085) }
.dl-row.bid.best{ background:rgba(47,208,122,.085) }
.dl-row.best .dl-px{ font-weight:800 }
.dl-row.best .dl-sz{ color:var(--ink); font-weight:700 }
.dl-row.best .dl-bar{ height:14px }
.dl-row.ask.best .dl-bar{ box-shadow:inset 0 0 0 1px rgba(240,88,79,.16), 0 0 6px rgba(240,88,79,.22) }
.dl-row.bid.best .dl-bar{ box-shadow:inset 0 0 0 1px rgba(47,208,122,.16), 0 0 6px rgba(47,208,122,.22) }
.dl-row.best .dl-fill{ border-right-width:2px }

/* mid: a punchy molten seam dividing the book — the loudest single element */
.dl-mid{ display:flex; align-items:center; gap:9px; margin:7px 0; padding:6px 9px;
  border-radius:6px; background:linear-gradient(180deg,#FFF7EC,#FFEFD8);
  border:1px solid #F2D9A8; box-shadow:inset 0 1px 0 #fff, 0 1px 5px rgba(232,115,28,.12) }
.dl-mid-lab{ font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rust); font-weight:800; opacity:.85 }
.dl-mid-v{ font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--orange);
  text-shadow:0 1px 0 rgba(255,255,255,.6) }
.dl-mid-sp{ margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:10px; font-weight:700; color:var(--garnet);
  padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.7);
  border:1px solid #EFCB95; box-shadow:inset 0 1px 0 #fff }

/* ── ticket polish: vivid segmented toggles, warm focus, molten CTA, capped open-orders ── */
.mode{ background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
  padding:3px; box-shadow:inset 0 1px 3px rgba(14,17,22,.07) }
.mode button{ font-family:var(--sans); font-weight:600; font-size:12.5px; border:none;
  background:transparent; color:var(--ink-2); padding:7px 14px; border-radius:7px; cursor:pointer;
  transition:background .18s cubic-bezier(.16,1,.3,1), color .18s, box-shadow .18s }
.mode button:hover[aria-pressed=false]{ color:var(--ink) }
.mode button[aria-pressed=true]{ background:linear-gradient(180deg,#fff,#FBFAF7); color:var(--ink);
  box-shadow:0 1px 2px rgba(14,17,22,.16), inset 0 1px 0 #fff, 0 0 0 1px var(--line) }
.mode button[aria-pressed=true][data-v=BUY]{ color:#fff;
  background:linear-gradient(180deg, var(--yes), var(--yes-deep));
  box-shadow:0 1px 3px rgba(47,208,122,.32), inset 0 1px 0 rgba(255,255,255,.22) }
.mode button[aria-pressed=true][data-v=SELL]{ color:#fff;
  background:linear-gradient(180deg, var(--no), var(--no-deep));
  box-shadow:0 1px 3px rgba(240,88,79,.32), inset 0 1px 0 rgba(255,255,255,.22) }
.size input:focus, .limit-in input:focus{ outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(232,115,28,.16) }
.preview{ border-left:3px solid var(--orange) }
.pv-item .pv.cost{ color:var(--orange); font-weight:700 }
.do{ letter-spacing:.01em;
  background:linear-gradient(180deg, var(--amber), var(--orange) 55%, var(--rust));
  box-shadow:0 6px 16px rgba(232,115,28,.28), inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease }
.do:hover{ transform:translateY(-2px); filter:saturate(1.06) brightness(1.02) }
.do:disabled{ opacity:.4; cursor:default; transform:none; box-shadow:none; filter:none }
.do.sell{ background:linear-gradient(180deg,#F0584F, var(--no-deep) 60%, var(--garnet));
  box-shadow:0 6px 16px rgba(240,88,79,.28), inset 0 1px 0 rgba(255,255,255,.28) }
/* cap the open-orders so a long list never blows out the ticket card height */
#ooList{ max-height:236px; overflow-y:auto; overscroll-behavior:contain;
  margin-right:-4px; padding-right:4px }
#ooList::-webkit-scrollbar{ width:6px } #ooList::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px }

/* ============================================================
   MARKETS PAGE — "COCKPIT TERMINAL" + COOL/BLUE SCHEME
   Everything below is scoped to body.markets-cockpit so no
   other page is touched. Blue replaces the warm molten ramp
   here; Yes-green and No-red stay for sides and bid/ask.
   ============================================================ */
body.markets-cockpit{
  /* cool/blue tokens — override the warm molten layer on this page only */
  --ck-page:#07090c; --ck-card:#FFFFFF; --ck-line:#262019;
  --ck-blue:#EFCE7E; --ck-blue-deep:#C9A34E; --ck-blue-bright:#F6DE9B; --ck-sky:#F6DE9B;
  --ck-blue-soft:#2A2208; --ck-blue-soft-2:#1C1705;
  /* dark data panels */
  --ck-dark-1:#0E0C09; --ck-dark-2:#0D0B08; --ck-dark-3:#07090c;
  --ck-dark-border:#4A3C1C; --ck-dark-text:#EDE5D8; --ck-dark-mut:#A79C8D; --ck-dark-sky:#F6DE9B;
  /* repoint the molten accent vars to the blue ramp for everything on this page */
  --royal:var(--ck-blue); --violet:var(--ck-blue); --violet-deep:var(--ck-blue-deep);
  --violet-bright:var(--ck-blue-bright); --grad:var(--ck-blue);
  --violet-soft:var(--ck-blue-soft); --violet-soft-2:var(--ck-blue-soft-2);
  --gold:var(--ck-sky); --amber:var(--ck-blue-bright); --orange:var(--ck-blue);
  --rust:var(--ck-blue-deep); --garnet:#2a1206; --grad-soft:var(--ck-blue-soft);
  --maxw:1440px;
  background:var(--ck-page);
}
body.markets-cockpit ::selection{ background:#2A2208 }

/* ===== A · Monument welcome header (cockpit masthead) =====
   Full molten hero for new (signed-out) visitors who need the pitch;
   collapses to the tight terminal bar once signed in (see .signed-in block). */
body.markets-cockpit .tmast{
  display:block; text-align:center; overflow:hidden;
  margin:14px 0 12px; padding:30px 22px 20px;
  border:1px solid rgba(232,115,28,.20); border-radius:16px;
  background:radial-gradient(130% 150% at 50% -22%, #1c1007 0%, #0b0805 52%, #07090c 100%);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,200,140,.05);
}
body.markets-cockpit .tmast::after{ display:none }
body.markets-cockpit .tmast-hero{ position:relative }
body.markets-cockpit .tmast-hero::before{
  content:""; position:absolute; left:50%; top:-46px; width:min(560px,88%); height:250px;
  transform:translateX(-50%); pointer-events:none; filter:blur(4px);
  background:radial-gradient(closest-side, rgba(245,145,32,.34), rgba(232,115,28,.08) 58%, transparent 74%);
}
body.markets-cockpit .tmast-kick{
  position:relative; font-family:'Inter',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:#cf9155; margin:0 0 12px;
}
body.markets-cockpit .tmast-title{
  position:relative; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(34px,5vw,56px); line-height:.94; letter-spacing:-.015em;
  /* identical molten mango + extrude as the .hl-molten logo wordmark, so the home hero and the about logo match exactly */
  background:linear-gradient(177deg,#FFF3C9 0%,#FFE08A 9%,#F6DE9B 24%,#F7A11E 44%,#EC7C18 62%,#D5521F 80%,#B5301F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:2px 2px 0 #6E5A24, 4px 4px 0 #7c2614, 6px 7px 0 #5a1c0f, 6px 10px 12px rgba(70,18,6,.24), 0 0 46px rgba(245,145,32,.28);
}
body.markets-cockpit .tmast-lede{
  position:relative; margin:13px 0 0; font-family:'Inter',sans-serif;
  font-size:clamp(15px,1.7vw,18px); font-weight:600; color:#f0d3b4;
}
body.markets-cockpit .tmast-stats{ width:100%; justify-content:center; gap:0; margin-top:18px; padding-top:16px; border-top:1px solid rgba(232,115,28,.14) }
body.markets-cockpit .tmast-stat{ flex:0 1 auto; padding:0 30px }
body.markets-cockpit .tmast-num{ font-size:22px; background:linear-gradient(176deg,#F6DE9B,#EFCE7E 60%,#C9A34E); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--ck-blue) }
body.markets-cockpit .tmast-num::after{ display:none }
body.markets-cockpit .tmast-lab{ color:#c99464 }

/* signed-in traders → collapse to the tight terminal bar (maximise the board) */
body.markets-cockpit.signed-in .tmast{ text-align:left; padding:12px 18px; background:radial-gradient(120% 200% at 6% -20%, rgba(255,194,60,.10), transparent 55%), #0b0805; box-shadow:none; border-color:rgba(232,115,28,.14) }
body.markets-cockpit.signed-in .tmast-hero{ display:none }
body.markets-cockpit.signed-in .tmast-stats{ justify-content:flex-start; gap:26px; margin-top:0; padding-top:0; border-top:none }
body.markets-cockpit.signed-in .tmast-stat{ padding:0 }
body.markets-cockpit.signed-in .tmast-num{ font-size:20px }

/* ── THE COCKPIT GRID ── */
body.markets-cockpit #cockpit{
  display:grid;
  grid-template-rows:auto;
  align-items:start;
  margin:6px 0 8px;
  position:relative;
}
/* on tall enough desktops, lock the cockpit to the viewport so rails scroll independently */
@media (min-width:1180px) and (min-height:680px){
  body.markets-cockpit #cockpit{
    grid-template-rows:1fr;
    height:calc(100vh - 168px);
    min-height:620px;
  }
  /* new visitors see the full welcome hero, so give the board a shorter frame */
  body.markets-cockpit:not(.signed-in) #cockpit{
    height:calc(100vh - 300px);
    min-height:500px;
  }
  body.markets-cockpit .ckpt-rail{ height:100%; }
  body.markets-cockpit .ckpt-center{ height:100%; }
  body.markets-cockpit .ckpt-side{ height:100%; }
}

/* ── REGION A — left rail (board) ── */
body.markets-cockpit .ckpt-rail{
  grid-column:1; padding:0; margin:0; background:transparent; border:none;
  display:flex; flex-direction:column; min-width:0;
  background:var(--ck-card); border:1px solid var(--ck-line); border-radius:14px; overflow:hidden;
}
body.markets-cockpit .ckpt-rail .rail-sticky{
  position:sticky; top:0; z-index:5; background:var(--ck-card);
  border-bottom:1px solid var(--ck-line); padding:13px 13px 11px;
}
body.markets-cockpit .ckpt-rail{ overflow-y:auto; overscroll-behavior:contain; }
body.markets-cockpit .rail-tophead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px }
body.markets-cockpit .rail-title{ font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.01em; color:#2a1206 }
body.markets-cockpit .rail-newbtn{ width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--ck-line); background:var(--ck-blue-soft); color:var(--ck-blue-deep); cursor:pointer }
body.markets-cockpit .rail-newbtn:hover{ background:var(--ck-blue); color:#fff; border-color:var(--ck-blue) }
body.markets-cockpit .rail-newbtn .sugg-ic{ width:17px; height:17px }
body.markets-cockpit .ckpt-rail .filters{ gap:8px; margin-bottom:10px; align-items:center }
body.markets-cockpit .ckpt-rail .new-form{ margin-bottom:10px }
body.markets-cockpit .ckpt-rail .catbar{ gap:6px; max-height:none }
body.markets-cockpit .ckpt-rail .glance{ grid-template-columns:1fr; gap:8px; margin:11px 13px 4px }
/* single-column dense card list */
body.markets-cockpit .ckpt-rail .grid{ grid-template-columns:1fr; gap:10px; padding:11px 13px 6px }
body.markets-cockpit .ckpt-rail .board-pager{ margin:6px 0 14px; position:sticky; bottom:0; background:var(--ck-card); padding:8px 0 }
/* compress each board card to two tight lines */
body.markets-cockpit .ckpt-rail .card{ border-radius:12px; box-shadow:0 1px 2px rgba(14,32,30,.05) }
body.markets-cockpit .ckpt-rail .card:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(16,48,45,.30) }
body.markets-cockpit .ckpt-rail .card .card-in{ padding:12px 13px }
body.markets-cockpit .ckpt-rail .card.sel{ border-color:var(--ck-blue); box-shadow:inset 3px 0 0 var(--ck-blue), 0 6px 16px -10px rgba(232,115,28,.4) }
body.markets-cockpit .ckpt-rail .card .card-q{ font-size:13.5px; -webkit-line-clamp:2 }
body.markets-cockpit .ckpt-rail .card .fcost, body.markets-cockpit .ckpt-rail .card .card-src{ display:none }
body.markets-cockpit .ckpt-rail .card .focal .big{ font-size:34px }
body.markets-cockpit .ckpt-rail .card .spark svg{ height:28px }
body.markets-cockpit .ckpt-rail .card .card-meta{ font-size:10px }

/* ── REGION B — center (active market) ── */
body.markets-cockpit .ckpt-center{
  grid-column:2; display:flex; flex-direction:column; min-width:0; min-height:0;
  background:transparent; border:none; border-radius:0; gap:0;
}
body.markets-cockpit .ckpt-center-in{
  display:grid; grid-template-rows:auto auto 1fr; min-height:0; min-width:0; gap:0;
  background:var(--ck-card); border:1px solid var(--ck-line); border-radius:14px; overflow:hidden; height:100%;
}
/* B1 — merged header band */
body.markets-cockpit .ck-headband{ padding:2px 4px 8px; border-bottom:1px solid var(--ck-line) }
body.markets-cockpit .ck-headband .m-q{ font-size:clamp(17px,1.9vw,21px); padding:6px 20px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
body.markets-cockpit .ck-focalstrip{ display:flex; align-items:center; gap:18px; padding:8px 20px 0 }
body.markets-cockpit .ck-focalstrip .m-focal{ padding:0; flex:none }
body.markets-cockpit .ck-focalstrip .m-big{ font-size:34px }
body.markets-cockpit .ck-focalstrip .m-pc{ font-size:16px }
body.markets-cockpit .ck-focalstrip .prob-bar{ flex:1; margin:0; min-width:0 }
body.markets-cockpit .ck-headband .vsline{ padding:4px 20px 0; font-size:11px; color:#8B8172 }
/* B2 — price chart: SEAMLESS, floats on the blue aurora — no box, no border, no backdrop edge */
body.markets-cockpit .ck-chart{ padding:0; border:none; border-bottom:none; background:transparent; box-shadow:none }
/* SEAMLESS — the whole center "screen" (chart / calibration / rules / description) floats
   on the black with NO cards, boxes, borders, shadows or rounded frames. Andy: remove all the
   lines for seamless. This kills the leftover #18233E calibration card and every pane chrome. */
body.markets-cockpit .ck-hero, body.markets-cockpit .ck-herobody, body.markets-cockpit .ck-mkthead,
body.markets-cockpit .ck-paneview, body.markets-cockpit .ck-chart,
body.markets-cockpit .calibpanel, body.markets-cockpit .cp-chart, body.markets-cockpit .rulecard,
body.markets-cockpit .cp-read, body.markets-cockpit .cp-fore{
  background:transparent !important; background-image:none !important;
  border:none !important; box-shadow:none !important; border-radius:0 !important;
}
body.markets-cockpit .ck-chart svg{ width:100%; height:188px; display:block }
/* B3 — tabbed pane */
body.markets-cockpit .ck-pane{ display:flex; flex-direction:column; min-height:0; }
body.markets-cockpit .ck-tabs{ display:flex; gap:2px; padding:8px 12px 0; border-bottom:1px solid var(--ck-line); background:var(--ck-blue-soft-2) }
body.markets-cockpit .ck-tab{ font-family:var(--sans); font-weight:600; font-size:12.5px; border:none; background:transparent; color:#8a7256; padding:9px 13px 11px; cursor:pointer; border-bottom:2px solid transparent; border-radius:7px 7px 0 0 }
body.markets-cockpit .ck-tab:hover{ color:var(--ck-blue-deep) }
body.markets-cockpit .ck-tab[aria-selected="true"]{ color:var(--ck-blue-deep); border-bottom-color:var(--ck-blue); background:var(--ck-card) }
body.markets-cockpit .ck-panebody{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 16px 16px }
body.markets-cockpit .ck-paneview[hidden]{ display:none }
body.markets-cockpit .ck-bookhint, body.markets-cockpit .ck-ctxnote{ font-size:12px; color:#8B8172; line-height:1.5; margin-top:8px }
body.markets-cockpit .ck-paneview .m-context{ margin:0 0 8px; color:#3a2a1c }
/* the depth ladder now lives in the pane, on its own dark frame */
body.markets-cockpit .ck-paneview[data-view="book"] .depth{ margin:0 }
body.markets-cockpit .ck-paneview[data-view="rules"] .rulecard{ margin:0 }

/* ── REGION C — right rail (ticket + my book) ── */
body.markets-cockpit .ckpt-side{
  grid-column:3; display:flex; flex-direction:column; min-width:0; gap:14px;
  overflow-y:auto; overscroll-behavior:contain; align-self:stretch;
}
body.markets-cockpit .ckpt-side .ticket{
  position:sticky; top:0; z-index:4; margin:0;
  background:var(--ck-card); border:1px solid var(--ck-line); border-radius:14px;
}
body.markets-cockpit .mybook{ background:var(--ck-card); border:1px solid var(--ck-line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; min-height:0 }
body.markets-cockpit .mybook-tabs{ padding:8px 10px 0 }
body.markets-cockpit .mb-count{ font-family:var(--mono); font-size:11px; color:#8B8172; font-weight:500 }
body.markets-cockpit .ck-tab[aria-selected="true"] .mb-count{ color:var(--ck-blue) }
body.markets-cockpit .mybook-body{ padding:12px 14px 14px; overflow-y:auto; max-height:46vh; overscroll-behavior:contain }
body.markets-cockpit .mybook-view[hidden]{ display:none }
body.markets-cockpit .mb-empty{ font-size:12.5px; color:#8B8172; line-height:1.5; padding:6px 2px }
body.markets-cockpit .mybook .open-orders{ margin:0; border:none; padding:0 }
body.markets-cockpit .mybook .profile{ margin:0 0 12px }
body.markets-cockpit .mybook .ptable{ box-shadow:none }
/* inside the 380px rail, positions use the stacked compact layout (reuse the 680px pattern) */
body.markets-cockpit .mybook .prow.h{ display:none }
body.markets-cockpit .mybook .prow{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; min-width:0; padding:13px 4px; align-items:baseline; border-top:1px solid var(--ck-line) }
body.markets-cockpit .mybook .ptable .prow:first-child{ border-top:none }
body.markets-cockpit .mybook .prow .pm{ grid-column:1 / -1; font-size:14px; font-weight:700; white-space:normal }
body.markets-cockpit .mybook .prow .ps, body.markets-cockpit .mybook .prow .pn, body.markets-cockpit .mybook .prow .pnl{ grid-column:1 / -1; display:flex; justify-content:space-between; font-size:12.5px }
body.markets-cockpit .mybook .prow .ps::before{ content:"Side"; color:#8B8172; font-weight:600 }
body.markets-cockpit .mybook .prow .pn::before{ content:attr(data-label); color:#8B8172; font-weight:600 }
body.markets-cockpit .mybook .prow .pnl::before{ content:"Unrealized"; color:#8B8172; font-weight:600 }

/* ── COOL/BLUE RECOLOR of the molten elements active on this page ── */
/* focal big % goes blue */
body.markets-cockpit .m-big{ background:linear-gradient(178deg,#FCEFC6 4%,#F6DE9B 32%,#EFCE7E 62%,#C9A34E 104%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--ck-blue) }
body.markets-cockpit .m-pc{ color:var(--ck-blue) }
/* board card big % goes blue (override warm --c1/--c2/--c3 gradient on this page) */
body.markets-cockpit .ckpt-rail .card .prob .big{ background:linear-gradient(178deg,#FCEFC6 4%,#F6DE9B 32%,#EFCE7E 62%,#C9A34E 104%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--ck-blue) }
/* card hover ring + star + source dot to blue */
body.markets-cockpit .ckpt-rail .card .card-star.on{ color:var(--ck-sky) }
/* ticket focus rings, cost, preview rail, t-move → blue */
body.markets-cockpit .size input:focus, body.markets-cockpit .limit-in input:focus{ border-color:var(--ck-blue); box-shadow:0 0 0 3px rgba(232,115,28,.18) }
body.markets-cockpit .preview{ border-left:3px solid var(--ck-blue) }
body.markets-cockpit .pv-item .pv.cost{ color:var(--ck-blue-deep) }
body.markets-cockpit .t-move{ color:var(--ck-blue-deep) }
body.markets-cockpit .chip:hover{ border-color:var(--ck-blue); color:var(--ck-blue-deep) }
body.markets-cockpit .catchip:hover{ border-color:var(--ck-blue) }
body.markets-cockpit .toggle.on .sw{ background:var(--ck-blue) }
body.markets-cockpit .sortseg button[aria-pressed="true"]{ color:var(--ck-blue-deep) }
/* base fallback: Buy green, Sell red (the definitive per-id colors are set below) */
body.markets-cockpit .do{ background:linear-gradient(180deg,#3ee08a,#2fd07a 46%,#1FA85F); box-shadow:0 6px 16px rgba(47,208,122,.28), inset 0 1px 0 rgba(255,255,255,.30) }
body.markets-cockpit .do.sell{ background:linear-gradient(180deg,#FF6A5E,#f0584f 46%,#C4453C); box-shadow:0 6px 16px rgba(240,88,79,.28), inset 0 1px 0 rgba(255,255,255,.28) }
/* rulecard eyebrow + res banner closed state → blue */
body.markets-cockpit .rulecard .rh{ color:var(--ck-blue-deep) }
body.markets-cockpit .res-banner.closed{ background:var(--ck-blue-soft); color:var(--ck-blue-deep) }
body.markets-cockpit .res-tools{ background:var(--ck-blue-soft-2); border-color:#4A3C1C }
body.markets-cockpit .res-tools .rl{ color:var(--ck-blue-deep) }
/* profile card (P&L strip) → cool */
body.markets-cockpit .profile{ background:var(--ck-blue-soft-2); border-color:#4A3C1C }
body.markets-cockpit .profile .prank{ color:var(--ck-blue-deep) }

/* ── ORDER BOOK — dark navy frame, blue MID seam (combined depth only) ── */
body.markets-cockpit .depth{
  background:linear-gradient(160deg,var(--ck-dark-1),var(--ck-dark-2) 62%,var(--ck-dark-3));
  border:1px solid var(--ck-dark-border); border-radius:10px; padding:12px 13px 11px; margin:0;
}
body.markets-cockpit .dl-head{ color:var(--ck-dark-mut) }
body.markets-cockpit .dl-head::before{ background:linear-gradient(90deg,var(--ck-sky),var(--ck-blue)) }
body.markets-cockpit .dl-head::after{ background:linear-gradient(90deg,var(--ck-dark-border),transparent) }
body.markets-cockpit .dl-row:hover{ background:rgba(251,166,58,.10) }
body.markets-cockpit .dl-sz{ color:var(--ck-dark-mut) }
body.markets-cockpit .dl-row.best .dl-sz{ color:var(--ck-dark-text) }
/* Yes/No keep green/red for bid/ask */
body.markets-cockpit .dl-row.ask:nth-of-type(odd){ background:transparent }
body.markets-cockpit .dl-row.bid:nth-of-type(even){ background:transparent }
body.markets-cockpit .dl-row:hover{ background:transparent }
/* clean depth bars: NO track box, NO inset border, just a solid clean fill on the black
   (Andy: the top-right was blotchy). */
body.markets-cockpit .dl-bar{ background:transparent !important; box-shadow:none !important; border:none !important }
body.markets-cockpit .dl-row.ask .dl-bar{ background:transparent }
body.markets-cockpit .dl-row.bid .dl-bar{ background:transparent }
/* slim, low-chroma depth fills — no neon tip line, no glow, no box-shadow ring */
body.markets-cockpit .dl-row.ask .dl-fill{ background:rgba(240,88,79,.44) !important; box-shadow:none !important; border-right:none !important; border-radius:2px }
body.markets-cockpit .dl-row.bid .dl-fill{ background:rgba(47,208,122,.42) !important; box-shadow:none !important; border-right:none !important; border-radius:2px }
body.markets-cockpit .dl-row.best .dl-fill{ border-right:none }
body.markets-cockpit .dl-row.ask.best .dl-bar,
body.markets-cockpit .dl-row.bid.best .dl-bar{ box-shadow:none }
body.markets-cockpit .dl-row.ask .dl-px{ color:#f0584f }
body.markets-cockpit .dl-row.bid .dl-px{ color:#2fd07a }
body.markets-cockpit .dl-sz{ color:#A79C8D }
/* MID: plain floating gold marker between the red asks and green bids, no box */
body.markets-cockpit .dl-mid{ background:none; border:none; box-shadow:none }
body.markets-cockpit .dl-mid-lab{ color:var(--gold-lo); opacity:.9 }
body.markets-cockpit .dl-mid-v{ color:var(--gold); text-shadow:0 0 14px rgba(239,206,126,.32) }
body.markets-cockpit .dl-mid-sp{ color:#A79C8D; background:none; border:none }

/* ── CALIBRATION LENS — cool dark-data navy, sky reliability line ── */
body.markets-cockpit .calibpanel{
  background:
    radial-gradient(135% 105% at 12% -8%, rgba(251,166,58,.12) 0%, rgba(251,166,58,0) 44%),
    radial-gradient(120% 92% at 20% 2%, var(--ck-dark-1) 0%, var(--ck-dark-2) 56%, var(--ck-dark-3) 100%) !important;
  border:1px solid var(--ck-dark-border) !important;
  box-shadow:0 24px 60px -28px rgba(7,14,24,.7), inset 0 1px 0 rgba(251,166,58,.07) !important;
}
body.markets-cockpit .cp-eyebrow{ color:var(--ck-sky) !important; text-shadow:0 0 18px rgba(251,166,58,.3) }
body.markets-cockpit .cp-dot{ background:radial-gradient(circle at 36% 30%, #FCEFC6 0%, #EFCE7E 45%, #C9A34E 100%) !important; box-shadow:0 0 13px 3px rgba(239,206,126,.6), 0 0 4px 1px rgba(230,236,242,.9) !important }
body.markets-cockpit .cp-tag{ color:var(--ck-dark-text) }
body.markets-cockpit .cp-chart{
  background:radial-gradient(130% 115% at 50% 0%, var(--ck-dark-1) 0%, var(--ck-dark-2) 70%, var(--ck-dark-3) 100%);
  border:1px solid var(--ck-dark-border);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(251,166,58,.10), inset 0 0 26px rgba(0,0,0,.30);
}
body.markets-cockpit .cp-axis .k-id{ color:#8a97a3 } body.markets-cockpit .cp-axis .k-cv{ color:#8B8172 }
body.markets-cockpit .cp-sec{ color:var(--ck-sky) }
body.markets-cockpit .cp-mut{ color:#8a97a3 !important }
body.markets-cockpit .cp-big{ color:var(--ck-dark-text); text-shadow:0 0 24px rgba(251,166,58,.18) }
body.markets-cockpit .cp-path{ color:#B3A896 }
body.markets-cockpit .cp-path .up{ color:#4FD08A } body.markets-cockpit .cp-path .dn{ color:#FF8780 }
body.markets-cockpit .cpk{ color:#A79C8D } body.markets-cockpit .cpv{ color:var(--ck-dark-text) }
body.markets-cockpit .cp-qual span{ color:#CFC5B4 !important; background:rgba(251,166,58,.08) !important; border:1px solid var(--ck-dark-border) !important }
body.markets-cockpit .cp-qual span.src{ color:#A79C8D !important; background:rgba(251,166,58,.04) !important; border:1px solid #3a2113 !important }
body.markets-cockpit .cp-qual span.warn{ color:#FFC76B !important }
body.markets-cockpit .cp-you{ color:#B3A896 !important }
body.markets-cockpit .cp-you .mut, body.markets-cockpit .cp-you span.mut{ color:#8a97a3 !important; background:none !important; border:none !important }

/* mobile drawer button + scrim, hidden on full cockpit */
body.markets-cockpit .rail-drawer-btn{ display:none; font-family:var(--sans); font-weight:600; font-size:12.5px; padding:7px 13px; border-radius:9px; border:1px solid var(--ck-line); background:var(--ck-blue-soft); color:var(--ck-blue-deep); cursor:pointer; margin-right:4px }
body.markets-cockpit .rail-scrim{ display:none; position:fixed; inset:0; background:rgba(10,25,22,.42); z-index:48 }

/* ============================================================
   RESPONSIVE — markets cockpit
   ============================================================ */
/* (B) 768–1179px — drop the left rail to a slide-over drawer */
@media (max-width:1180px){
  body.markets-cockpit #cockpit{ grid-template-columns:minmax(0,1fr) 360px; height:auto }
  body.markets-cockpit .ckpt-center{ grid-column:1 }
  body.markets-cockpit .ckpt-side{ grid-column:2 }
  body.markets-cockpit .rail-drawer-btn{ display:inline-block }
  body.markets-cockpit .ckpt-rail{
    position:fixed; top:0; left:0; bottom:0; width:330px; max-width:86vw; z-index:49;
    transform:translateX(-104%); transition:transform .26s cubic-bezier(.16,1,.3,1);
    border-radius:0 14px 14px 0; box-shadow:0 20px 60px -10px rgba(10,25,22,.4); height:100vh;
  }
  body.markets-cockpit.rail-open .ckpt-rail{ transform:translateX(0) }
  body.markets-cockpit.rail-open .rail-scrim{ display:block }
  body.markets-cockpit .ckpt-side{ align-self:start; overflow:visible }
  body.markets-cockpit .ckpt-side .ticket{ position:sticky; top:70px }
  body.markets-cockpit .mybook-body{ max-height:none }
}

/* (C) <768px — single column stack: market header, segmented pane, ticket, my book, board */
@media (max-width:767px){
  body.markets-cockpit #cockpit{ grid-template-columns:1fr; gap:12px }
  body.markets-cockpit .ckpt-center{ grid-column:1 }
  body.markets-cockpit .ckpt-side{ grid-column:1; overflow:visible }
  body.markets-cockpit .ckpt-side .ticket{ position:sticky; bottom:0; top:auto; z-index:30; box-shadow:0 -8px 24px rgba(14,32,30,.14); border-radius:14px 14px 0 0 }
  body.markets-cockpit .ck-focalstrip{ flex-wrap:wrap; gap:10px }
  body.markets-cockpit .ck-chart svg{ height:160px }
  body.markets-cockpit .ck-panebody{ max-height:none }
  body.markets-cockpit .mybook-body{ max-height:none }
  /* board drawer becomes full-width slide-over from the left */
  body.markets-cockpit .ckpt-rail{ width:88vw }
}

/* ── kill every remaining molten accent on the markets page (chart line, sparklines,
   board card triple, section headers, order cancel) — green/red Yes/No stay ── */
/* board cards: repoint the per-card molten triple to a cool blue ramp on this page */
body.markets-cockpit .ckpt-rail .card{ --c1:#EFCE7E; --c2:#F6DE9B; --c3:#C9A34E }
body.markets-cockpit .ckpt-rail .card .spark svg path[stroke^="url"]{ stroke:#EFCE7E }
body.markets-cockpit .ckpt-rail .card .card-cat .dot{ background:#EFCE7E }
/* price-history chart (renderCurve paints attrs; CSS presentation overrides win on the navy panel) */
/* ── price-history chart: cockpit owns gridlines + axis text; line/fill are inline-colored ── */
body.markets-cockpit #curve line{ stroke:rgba(180,205,225,.10) }         /* cent gridlines, faint blue */
body.markets-cockpit #curve line[stroke="#C9A34E"]{ stroke:#C9A34E }     /* the gold "open" baseline */
body.markets-cockpit #curve text{ fill:#8ea3b3 }                         /* DM Mono cent labels */
body.markets-cockpit #curve path[fill^="url"]{ /* leave teal/red gradient wedges as painted */ }
/* section headers below the cockpit (Trade activity / explainer / legal): cool the molten rail + kicker */
body.markets-cockpit .shd-rail{ background:linear-gradient(180deg,#F6DE9B 0%,#EFCE7E 50%,#C9A34E 100%); box-shadow:0 2px 8px rgba(192,83,15,.22) }
body.markets-cockpit .shd-mark{ background:linear-gradient(155deg,#2A2208 0%,#CFC5B4 100%); border-color:#4A3C1C }
body.markets-cockpit .shd-kick{ color:#8A7030 }
body.markets-cockpit .shd-title{ color:#2a1206 }
/* the explainer cards' inline #EFCE7E svg strokes + Macrofund link */
body.markets-cockpit #how .ic .emoji svg path[stroke="#EFCE7E"],
body.markets-cockpit #how .ic .emoji svg circle[fill="#EFCE7E"]{ stroke:#EFCE7E; fill:#EFCE7E }
body.markets-cockpit #how .ic a[style*="violet-deep"]{ color:var(--ck-blue-deep) !important }
/* aggregate calibration bars + note */
body.markets-cockpit .calfill{ background:linear-gradient(90deg,#F6DE9B,#EFCE7E) }
/* order cancel hover */
body.markets-cockpit .oo-cancel:hover{ background:var(--ck-blue-soft); color:var(--ck-blue-deep); border-color:#4A3C1C }
/* the activity ledger + how shd-ink gradient strokes are warm; recolor via the shared gradient defs is not page-scoped,
   so tint the visible marks blue where they read as accents */
body.markets-cockpit #activity .shd-mark svg [stroke^="url"],
body.markets-cockpit #how .shd-mark svg [stroke^="url"],
body.markets-cockpit #legal .shd-mark svg [stroke^="url"]{ stroke:#EFCE7E }

/* ============================================================
   MARKETS COCKPIT v2 — Xpresstrade dark trading deck.
   Warm nav + masthead stay light/untouched. Everything below is the
   dark trading floor. Single screen, no page scroll (flex fills viewport).
   Scoped to body.markets-cockpit so no other page is affected.
   ============================================================ */
body.markets-cockpit{ overflow:hidden; height:100vh; display:flex; flex-direction:column;
  background:#070a0e }
/* 0725 device audit #0 (MONEY SAFETY): on short screens the fixed stage clipped the
   contract-size and price readouts below the fold with no scroll. Same remedy the
   leaderboard already proves: stop hard-clipping, let the page scroll. The whole
   no-scroll chain must open (body + #main + .wrap), mirroring the <=1180 mobile
   unlock; width-gated so the mobile block keeps sole ownership below 1181. */
@media (max-height:820px) and (min-width:1181px){
  body.markets-cockpit{ height:auto; min-height:100dvh; overflow-y:auto }
  body.markets-cockpit>#main{ flex:0 0 auto !important; height:auto !important; overflow:visible !important }
  body.markets-cockpit #main>.wrap{ flex:0 0 auto !important; height:auto !important; overflow:visible !important }
  /* html-prefixed so this outranks the page's own !important height lock */
  html body.markets-cockpit #cockpit{ height:auto !important; min-height:660px !important }
}
body.markets-cockpit>a.skiplink{ flex:0 0 auto }
body.markets-cockpit>nav.nav{ flex:0 0 auto }
body.markets-cockpit>.welcome{ flex:0 0 auto }
body.markets-cockpit>#main{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden }
body.markets-cockpit #main>.wrap{ flex:1 1 auto; min-height:0; max-width:none; margin:0; padding:0; display:flex; flex-direction:column }
body.markets-cockpit .tmast{ flex:0 0 auto }
body.markets-cockpit #liveTickerBar, body.markets-cockpit #tickerShow{ display:none !important }

body.markets-cockpit{
  /* bank-blue aurora deck — the black header bar above stays black; everything below
     floats on the blue. NO orange in the cockpit: the amber accent is repointed to
     GOLD FOIL, muted accents to a soft gold, labels to SILVER FOIL. */
  --cbg:#07090c; --cpanel:transparent; --cph:transparent; --cline:rgba(210,222,231,.09); --csoft:rgba(210,222,231,.07);
  --gold-hi:#F6DE9B; --gold:#EFCE7E; --gold-lo:#E7C15F; --gold-deep:#C9A34E;
  --silver-hi:#EDE5D8; --silver:#D6CCBB; --silver-lo:#BFB4A3;
  --amb:#EFCE7E; --ambd:#C9A34E; --teal-bg:rgba(239,206,126,.12); --teal-bd:rgba(239,206,126,.28); --grn:#2fd07a; --rd:#f0584f;
  --foil:#EDE5D8; --foil2:#BFB4A3;
  /* repoint the earlier warm/blue accent tokens (--ck-sky / --ck-blue*) to GOLD so
     every leftover var(--ck-sky) usage in the cockpit reads gold, never orange */
  --ck-sky:#EFCE7E; --ck-blue:#EFCE7E; --ck-blue-deep:#C9A34E; --ck-blue-bright:#F6DE9B;
  /* silver-foil text ramp — premium terminal, values #EDE5D8, labels muted silver */
  --ct:#CFC5B4; --ctb:#EDE5D8; --cm:#A79C8D; --cf:#8B8172; --cg:#6B6254;
  --cmono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
/* gold + silver foil helpers — hero values ride gold, labels ride silver */
body.markets-cockpit .foil-gold{
  background:linear-gradient(178deg,#FCEFC6 0%,var(--gold-hi) 24%,var(--gold) 50%,var(--gold-lo) 72%,var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
body.markets-cockpit .foil-silver{
  background:linear-gradient(178deg,var(--silver-hi) 0%,var(--silver) 55%,var(--silver-lo) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

/* ---- the deck ---- */
/* Trading cockpit: fills the FULL viewport width and the full height from directly
   under the black header to the bottom — no centered box, no dead space up top.
   Three columns — LEFT markets rail + contracts · CENTER header + square chart +
   the two big Buy/Sell buttons + a tiny Side/Market-Limit toggle row · RIGHT order
   book + positions + open orders + the cost/win/risk preview.
   No boxes anywhere — zones are separated by space, not borders. */
#cockpit{ flex:1 1 auto; width:100%; max-width:none; min-height:0; margin:0;
  background:transparent; padding:14px 26px 16px; position:relative;
  display:grid; grid-template-columns:300px minmax(0,1fr) 360px;
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"rail center side";
  column-gap:30px; row-gap:0 }
/* soft aurora glows floating over the blue — the only "texture"; no boxes, no borders */
body.markets-cockpit #cockpit::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 520px at 64% 132%,rgba(255,255,255,.012),transparent 60%) }
#cockpit>*{ min-height:0; min-width:0; position:relative; z-index:1 }
body.markets-cockpit .ckpt-rail{ grid-area:rail }
body.markets-cockpit .ckpt-center{ grid-area:center }
body.markets-cockpit .ckpt-side{ grid-area:side }
/* seamless panels: no border, no fill, no shadow — just space + a hairline where needed */
body.markets-cockpit .ck-pane{ border:none; background:transparent; border-radius:0;
  display:flex; flex-direction:column; min-height:0; box-shadow:none }
body.markets-cockpit .phead{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 2px 9px; border-bottom:none; background:transparent; flex:0 0 auto }
body.markets-cockpit .ptitle{ font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--cf) }
body.markets-cockpit .pmeta{ font-size:10px; letter-spacing:.8px; color:var(--cf); font-family:var(--cmono); text-transform:uppercase }
body.markets-cockpit .ck-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden }

/* ---- LEFT: instruments (board) — seamless, floats on the black with one hairline of light ---- */
body.markets-cockpit #cockpit>.ckpt-rail{ background:transparent; border:none; border-radius:0;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:none;
  padding-right:22px; border-right:none }
body.markets-cockpit .ckpt-rail .rail-sticky{ position:static; flex:0 0 auto; background:transparent; padding:2px 2px 12px; border-bottom:none }
body.markets-cockpit .rail-tophead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
body.markets-cockpit .rail-title{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--foil2) }
body.markets-cockpit .rail-newbtn{ width:26px; height:26px; border-radius:4px; border:1px solid var(--cline); background:#161209; color:var(--amb); display:grid; place-items:center; cursor:pointer }
body.markets-cockpit .ckpt-rail .filters{ display:flex; flex-direction:column; gap:8px }
body.markets-cockpit .ckpt-rail .search-mini{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--csoft); border-radius:0 }
body.markets-cockpit .ckpt-rail .search-mini:focus-within{ border-bottom-color:var(--ambd) }
body.markets-cockpit .ckpt-rail .search-mini input{ color:var(--ct); background:transparent }
body.markets-cockpit .ckpt-rail .sortseg{ display:flex; width:100%; background:transparent; border:none; border-radius:0; overflow:visible; gap:2px }
body.markets-cockpit .ckpt-rail .sortseg button{ flex:1; background:transparent; color:var(--cm); border:none; border-radius:0; padding:5px 0; font-size:11px; cursor:pointer; box-shadow:none }
body.markets-cockpit .ckpt-rail .sortseg button[aria-pressed=true]{ background:transparent; color:var(--foil); font-weight:700; box-shadow:inset 0 -2px 0 var(--amb) }
body.markets-cockpit .ckpt-rail .toggle{ font-size:11px; color:var(--cm) }
body.markets-cockpit .ckpt-rail .catbar{ display:none }
body.markets-cockpit .ckpt-rail .new-form, body.markets-cockpit .ckpt-rail .new-msg{ color:var(--ct) }
body.markets-cockpit .ckpt-rail>.grid{ display:flex !important; flex-direction:column; gap:0; padding:0; grid-template-columns:none !important; flex:1 1 auto; min-height:0; overflow-y:auto }
body.markets-cockpit .ckpt-rail .glance{ display:none }
/* CONTRACTS lives on the left, below the markets list — seamless, separated by space only */
body.markets-cockpit .ckpt-rail .rail-contracts{ flex:0 0 auto; padding:14px 2px 2px; margin-top:10px;
  border:none; background:transparent; box-shadow:none; display:flex; flex-direction:column; gap:9px }
body.markets-cockpit .ckpt-rail .rail-contracts .phead{ padding:0 }
body.markets-cockpit .ckpt-rail .rail-contracts .size-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
body.markets-cockpit .ckpt-rail .rail-contracts .chips{ display:flex; gap:6px; flex-wrap:wrap }
body.markets-cockpit .ckpt-rail .card{ display:block; border:none; border-bottom:none; border-radius:8px; box-shadow:none; padding:9px 11px; background:transparent; cursor:pointer }
body.markets-cockpit .ckpt-rail .card:hover{ background:rgba(255,255,255,.025) }
body.markets-cockpit .ckpt-rail .card.sel{ background:rgba(255,255,255,.05); box-shadow:inset 2px 0 0 var(--amb) }
body.markets-cockpit .ckpt-rail .card-bar, body.markets-cockpit .ckpt-rail .card svg, body.markets-cockpit .ckpt-rail .card-vol{ display:none }
body.markets-cockpit .ckpt-rail .card-in{ padding:0 }
body.markets-cockpit .ckpt-rail .card-cat{ font-size:9px !important; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--cm) !important }
body.markets-cockpit .ckpt-rail .card.sel .card-cat{ color:var(--foil) !important }
body.markets-cockpit .ckpt-rail .card-q{ font-size:12px; line-height:1.28; margin:3px 0 5px; color:#B3A896; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
body.markets-cockpit .ckpt-rail .card.sel .card-q{ color:#e8edf2 }
body.markets-cockpit .ckpt-rail .card-bottom{ margin:0 }
body.markets-cockpit .ckpt-rail .card-prob .big{ font-family:var(--cmono); font-size:17px; font-weight:700; color:var(--ct) }
body.markets-cockpit .ckpt-rail .card.sel .card-prob .big{ color:var(--foil) }
body.markets-cockpit .ckpt-rail .card-yn{ display:none }

/* ============================================================
   MARKETS LIST — dense .card.rr rows + sticky .cat-sec headers.
   BASE rules (no media query) so the renderBoard structure that is
   SHARED by the desktop left rail AND the mobile drawer renders clean
   in BOTH. Mobile-only sizing/tap-targets are layered in the
   @media (max-width:760px) block below. Dark teal tokens only.
   ============================================================ */
/* slim sticky category header (category shown ONCE per group) */
body.markets-cockpit .ckpt-rail .cat-sec{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; gap:7px;
  padding:11px 11px 5px; min-height:0;
  font-family:var(--sans); font-size:9px; font-weight:800;
  letter-spacing:1.3px; text-transform:uppercase; color:var(--cf);
  background:var(--cbg);
  border-top:none; border-bottom:none;
  box-shadow:none;
}
body.markets-cockpit .ckpt-rail .cat-sec:first-child{ border-top:none; padding-top:2px }
body.markets-cockpit .ckpt-rail .cat-sec .cs-dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--amb); box-shadow:0 0 6px rgba(232,115,28,.5);
}
/* dense row (.card.rr) */
body.markets-cockpit .ckpt-rail .card.rr{
  display:flex !important; align-items:center; gap:10px;
  padding:10px 11px; min-height:52px;
  border:none; border-bottom:none;
  border-radius:8px; background:transparent; box-shadow:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* .rr-side stacks YES% number + move + a 24px star: ~60px in a 52px row. When
     vertically centred the number top spilled above the row and the sticky opaque
     .cat-sec header painted over it (a "50" read as "5U"). Fix: release the base
     .card clip AND pull the star out of the stack (absolute, below) so the number
     sits clear of the header. */
  overflow:visible; contain:none; position:relative;
}
body.markets-cockpit .ckpt-rail .card.rr:hover{ background:rgba(255,255,255,.025); transform:none; box-shadow:none }
body.markets-cockpit .ckpt-rail .card.rr:active{ background:rgba(255,255,255,.04) }
body.markets-cockpit .ckpt-rail .card.rr.sel{ background:rgba(255,255,255,.05); box-shadow:inset 2px 0 0 var(--amb) }
body.markets-cockpit .ckpt-rail .card.rr::before,
body.markets-cockpit .ckpt-rail .card.rr::after{ display:none !important }
body.markets-cockpit .ckpt-rail .card.rr .rr-main{ flex:1 1 auto; min-width:0 }
/* question: 3-line clamp so a long question keeps its close date on-card (Andy 0720, deploy override); real ellipsis, NEVER mid-word */
body.markets-cockpit .ckpt-rail .card.rr .card-q{
  margin:0; font-family:var(--display);
  font-size:12.5px; line-height:1.3; font-weight:500; color:#B3A896;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
  overflow-wrap:break-word; word-break:normal; hyphens:none;
  min-height:0;
}
body.markets-cockpit .ckpt-rail .card.rr.sel .card-q{ color:#eaf0f5 }
/* right side: Yes% over movement, right-aligned, with the star */
body.markets-cockpit .ckpt-rail .card.rr .rr-side{
  flex:0 0 auto; display:flex; flex-direction:column;
  align-items:flex-end; gap:1px; min-width:50px; text-align:right;
}
body.markets-cockpit .ckpt-rail .card.rr .rr-px{
  display:inline-flex; align-items:baseline;
  font-family:var(--cmono); font-variant-numeric:tabular-nums; line-height:1.25; color:var(--ct);
  overflow:visible;
}
body.markets-cockpit .ckpt-rail .card.rr .rr-px b{ line-height:1.25; display:inline-block }
body.markets-cockpit .ckpt-rail .card.rr .rr-px b{ font-size:17px; font-weight:700 }
body.markets-cockpit .ckpt-rail .card.rr .rr-px i{ font-size:10px; font-style:normal; color:var(--cm); margin-left:1px }
body.markets-cockpit .ckpt-rail .card.rr.sel .rr-px,
body.markets-cockpit .ckpt-rail .card.rr.sel .rr-px b{ color:var(--amb) }
body.markets-cockpit .ckpt-rail .card.rr .card-move{
  font-family:var(--cmono); font-size:10px; font-weight:600;
  background:none !important; border:none !important; padding:0 !important; box-shadow:none !important;
}
body.markets-cockpit .ckpt-rail .card.rr .card-move.up{ color:var(--grn) !important }
body.markets-cockpit .ckpt-rail .card.rr .card-move.dn{ color:var(--rd) !important }
body.markets-cockpit .ckpt-rail .card.rr .card-move.flat{ color:var(--cf) !important }
body.markets-cockpit .ckpt-rail .card.rr .rr-res{
  font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.5px;
}
body.markets-cockpit .ckpt-rail .card.rr .rr-res.y{ color:var(--grn) }
body.markets-cockpit .ckpt-rail .card.rr .rr-res.n{ color:var(--rd) }
/* star: small control, not a giant card affordance */
body.markets-cockpit .ckpt-rail .card.rr .card-star{
  position:absolute; right:9px; bottom:7px; margin:0;
  width:22px; height:22px; padding:0;
  background:none; border:none; color:#3f4a55; cursor:pointer;
}
body.markets-cockpit .ckpt-rail .card.rr .card-star.on{ color:var(--ck-sky) }
body.markets-cockpit .ckpt-rail .card.rr .card-star svg{ width:14px; height:14px }
/* SAFETY NET: tame any non-.rr card (un-hydrated baked markup + legacy
   .focal/.bar/.card-meta) so even a first-paint flash is dense + clamped */
body.markets-cockpit .ckpt-rail .card .focal,
body.markets-cockpit .ckpt-rail .card .spark,
body.markets-cockpit .ckpt-rail .card .bar,
body.markets-cockpit .ckpt-rail .card .card-yn,
body.markets-cockpit .ckpt-rail .card .card-meta,
body.markets-cockpit .ckpt-rail .card .card-vol,
body.markets-cockpit .ckpt-rail .card .card-bar,
body.markets-cockpit .ckpt-rail .card .card-src{ display:none !important }
body.markets-cockpit .ckpt-rail .card .focal .big,
body.markets-cockpit .ckpt-rail .card .card-prob .big{ font-size:17px !important }

/* ---- CENTER ---- */
body.markets-cockpit .ckpt-center{ display:flex; flex-direction:column; gap:8px; min-height:0; opacity:1; transform:none }
/* SEAMLESS market header: strip any grey panel/border/box so the description
   (category, question, YES/NO prices, move, tabs) floats on the black like the
   chart, with only spacing between it and its neighbours. */
body.markets-cockpit .ck-mkthead{ flex:0 0 auto; padding:11px 14px 4px; background:transparent; border:none; border-radius:0; box-shadow:none }
body.markets-cockpit .ck-mkt-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px }
body.markets-cockpit .rail-drawer-btn{ display:none }
body.markets-cockpit .ck-mkthead .cat-chip{ font-size:9px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--foil2); background:transparent; border:none; padding:0; border-radius:0 }
body.markets-cockpit .ck-mkthead .cat-chip .cat-dot{ display:none }
body.markets-cockpit .ck-mkthead .m-q{ font-family:var(--sans); font-size:18px; font-weight:600; line-height:1.25; color:var(--foil); letter-spacing:-.2px; margin:0 0 9px }
body.markets-cockpit .ck-pxrow{ display:flex; align-items:flex-end; gap:26px }
body.markets-cockpit .pxblock .k{ font-size:9px; letter-spacing:1.4px; color:var(--cf); margin-bottom:2px }
body.markets-cockpit .pxblock .v{ font-family:var(--cmono); font-size:34px; font-weight:700; line-height:1.14; letter-spacing:-0.3px }
body.markets-cockpit .pxblock .v small{ font-size:20px; font-weight:700; margin-left:1px }
body.markets-cockpit .pxblock .v.yes{ color:var(--grn); text-shadow:0 0 7px rgba(47,208,122,.16) }
body.markets-cockpit .pxblock .v.no{ color:var(--rd); text-shadow:0 0 7px rgba(240,88,79,.13) }
body.markets-cockpit .pxblock:has(.v.no) .k{ color:var(--rd) }
body.markets-cockpit .pxblock.delta .v{ font-size:14px; color:var(--cm) }
body.markets-cockpit .pxblock.delta .m-move.up{ color:var(--grn) } body.markets-cockpit .pxblock.delta .m-move.dn{ color:var(--rd) }
body.markets-cockpit .px-sub{ display:block; margin-top:3px; font-family:var(--cmono); font-size:11px; letter-spacing:.2px; opacity:.85 }
body.markets-cockpit .px-sub.yes{ color:var(--ambd) }
body.markets-cockpit .px-sub.no{ color:#c47b76 }
body.markets-cockpit .px-sub:empty{ display:none }
body.markets-cockpit .ck-cap{ font-size:10.5px; color:var(--cf); margin-left:auto; align-self:flex-end; font-family:var(--cmono) }
body.markets-cockpit .ck-mkthead .prob-bar.ck-hidden{ display:none }
/* FIX 2: the Price/Calibration/Rules tabs now live at the FOOT of the description
   block (below the chart). Seamless — no track, no line; small top gap only. */
body.markets-cockpit .ck-mkthead .ck-tabhead{ padding:0; margin-top:8px; justify-content:flex-start }

body.markets-cockpit .ck-hero{ flex:1 1 auto; min-height:0 }
body.markets-cockpit .ck-tabs{ display:flex; gap:3px; border:none; border-bottom:none; background:transparent }
body.markets-cockpit .ck-tab{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.3px; color:var(--cm); background:transparent; border:none; padding:5px 9px; cursor:pointer; border-radius:3px }
body.markets-cockpit .ck-tab:hover{ color:var(--ct) }
body.markets-cockpit .ck-tab[aria-selected=true]{ color:var(--foil); background:var(--teal-bg) }
body.markets-cockpit .ck-herobody{ flex:1 1 auto; min-height:0; position:relative }
body.markets-cockpit .ck-paneview{ position:absolute; inset:0; overflow-y:auto; padding:8px 6px }
body.markets-cockpit .ck-paneview[hidden]{ display:none }
body.markets-cockpit .ck-paneview[data-view=chart]{ padding:6px 4px 2px }
body.markets-cockpit .ck-chart{ height:100%; min-height:0 }
body.markets-cockpit .ck-chart svg#curve{ width:100%; height:100%; display:block }
/* WAS: body.markets-cockpit #curve path{ stroke:var(--amb) !important }  ← remove the !important amber stroke */
body.markets-cockpit #curve path{ stroke:none }   /* fills (area wedges) have no stroke; the line path sets its own teal/red inline */
body.markets-cockpit .ck-paneview[data-view=calib], body.markets-cockpit .ck-paneview[data-view=rules]{ padding:10px 12px }

body.markets-cockpit .ck-lower{ flex:0 0 196px; display:flex; gap:8px; min-height:0 }
body.markets-cockpit .ck-pos{ flex:1.4 } body.markets-cockpit .ck-ord{ flex:1 }
body.markets-cockpit .ck-lower .ck-scroll{ padding:0 }

/* ===== No-scroll positions/orders: clamp resting panes, footer summary, on-demand sheet ===== */
/* Lower panes (positions + orders) scroll internally so a user can see all rows
   without leaving the cockpit, the same way the markets rail scrolls. */
body.markets-cockpit .ck-lower .ck-scroll{ overflow-y:auto; overflow-x:hidden; max-height:100%; overscroll-behavior:contain }

/* Relocated record card must not occupy the cockpit strip (it already renders in the record/calibration pane). */
body.markets-cockpit .ck-profile-host{ display:none !important }

/* Footer strip: summary + "+N more". Sibling of .ck-scroll so it shrinks the clamped body. */
body.markets-cockpit .ck-foot{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 3px 2px; border-top:none; background:none;
  font-family:var(--cmono); font-size:10.5px; color:var(--cm); min-height:0 }
body.markets-cockpit .ck-foot[hidden]{ display:none }
body.markets-cockpit .ckf-sum{ letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto }
body.markets-cockpit .ckf-sum b{ color:var(--ct) }
body.markets-cockpit .ckf-sum b.pos{ color:var(--grn) } body.markets-cockpit .ckf-sum b.neg{ color:var(--rd) }
body.markets-cockpit .ckf-more{ flex:0 0 auto; font-family:var(--cmono); font-size:10.5px; font-weight:700; letter-spacing:.4px;
  color:var(--amb); background:none; border:none; border-radius:0; padding:3px 0; cursor:pointer }
body.markets-cockpit .ckf-more:hover{ background:none; color:var(--ctb) }

/* Overlay sheet: dark-teal modal; internal scroll here is fine (transient, not the resting cockpit). */
body.markets-cockpit .ck-sheet{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(4,7,10,.66); backdrop-filter:blur(2px) }
body.markets-cockpit .ck-sheet[hidden]{ display:none }
body.markets-cockpit .ck-sheet-card{ width:min(560px,92vw); max-height:70vh; display:flex; flex-direction:column;
  background:var(--cpanel); border:1px solid var(--teal-bd); border-radius:6px;
  box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 #161d24 }
body.markets-cockpit .ck-sheet-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--cline); background:linear-gradient(var(--cph),var(--cpanel)) }
body.markets-cockpit .ck-sheet-head .ptitle{ font-size:11px; letter-spacing:1.4px }
body.markets-cockpit .ck-sheet-x{ width:24px; height:24px; border-radius:4px; border:1px solid var(--cline);
  background:#161209; color:var(--cm); cursor:pointer; display:grid; place-items:center; font-size:12px }
body.markets-cockpit .ck-sheet-x:hover{ color:var(--ctb); border-color:var(--teal-bd) }
body.markets-cockpit .ck-sheet-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 10px 12px }
body.markets-cockpit .ck-sheet-body .ptable .prow:first-child{ border-top:none }
body.markets-cockpit .ck-sheet-body .open-orders{ display:block !important; margin:0; background:transparent; border:none; padding:0 }
body.markets-cockpit .ck-sheet-body .oo-row{ border-color:var(--cline) }

/* ---- RIGHT: order book + ticket ---- */
body.markets-cockpit .ckpt-side{ display:flex; flex-direction:column; gap:8px; min-height:0; align-self:stretch; background:transparent; border:none }
body.markets-cockpit .ck-book{ flex:0 0 auto }
body.markets-cockpit .ck-book .depth{ margin:0; border:none; background:transparent; box-shadow:none; padding:6px 4px 8px }
body.markets-cockpit .ck-bookhint{ padding:0 11px 9px; font-size:10.5px; color:var(--cg) }
/* PREVIEW pane — cost/win/risk + meta, on the RIGHT below the book/positions/orders */
body.markets-cockpit .ck-preview{ flex:0 0 auto; display:flex; flex-direction:column; gap:6px }
body.markets-cockpit .ck-preview .preview{ margin:2px 0 0 }
/* ── THE TRADING UNIT'S FOOT: the two big BUY | SELL buttons directly below the
   chart, then a TINY integrated toggle row (Side · Market/Limit · inline limit).
   Nothing else lives in the center — Contracts is on the left, the preview is on
   the right. No boxes; the dials float on the blue, small and self-contained. ── */
body.markets-cockpit .ckpt-ticketbar{ flex:0 0 auto; margin-top:12px; padding-top:0; border-top:none;
  display:flex; flex-direction:column; gap:10px }
body.markets-cockpit .ticket{ flex:0 0 auto; min-height:0; border:none; background:transparent; border-radius:0;
  display:flex; flex-direction:column; gap:10px; box-shadow:none }
body.markets-cockpit .t-caveat{ font-size:9.5px; letter-spacing:.2px; color:var(--cf) }
body.markets-cockpit .res-tools{ margin-top:2px }

/* ============================================================
   IB-STYLE BID / ASK PRICE TILES — two clean square cells you tap to load
   the price. Bid = sell here (red), Ask = buy here (green). Soft tinted fill,
   no hard border lines, silver-foil numeral. Clear, tappable, seamless.
   ============================================================ */
body.markets-cockpit .tk-fxcm{ display:flex; align-items:center; justify-content:center; gap:12px; padding:2px 0 }
body.markets-cockpit .fx-cell{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:clamp(112px,13.5vw,138px); height:100px; border:none; cursor:pointer; border-radius:14px; padding:8px 10px;
  transition:background .14s ease, box-shadow .14s ease, transform .09s ease }
body.markets-cockpit .fx-bid{ background:rgba(240,88,79,.07) }
body.markets-cockpit .fx-ask{ background:rgba(47,208,122,.07) }
body.markets-cockpit .fx-bid:hover{ background:rgba(240,88,79,.15); box-shadow:inset 0 0 0 1px rgba(240,88,79,.3) }
body.markets-cockpit .fx-ask:hover{ background:rgba(47,208,122,.15); box-shadow:inset 0 0 0 1px rgba(47,208,122,.32) }
body.markets-cockpit .fx-cell:active{ transform:translateY(1px) }
body.markets-cockpit .fx-k{ font-family:var(--cmono); font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:var(--foil2); display:inline-flex; gap:5px; align-items:baseline }
body.markets-cockpit .fx-k em{ font-style:normal; font-weight:700; font-size:8.5px; letter-spacing:.6px }
body.markets-cockpit .fx-bid .fx-k em{ color:var(--rd) }
body.markets-cockpit .fx-ask .fx-k em{ color:var(--grn) }
body.markets-cockpit .fx-v{ font-family:var(--cmono); font-size:40px; font-weight:600; line-height:.94; letter-spacing:.5px;
  background:linear-gradient(180deg,#f2f6fa 0%,#CFC5B4 46%,#A89A87 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
body.markets-cockpit .fx-mid{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:0 4px }
body.markets-cockpit .fx-spread{ font-family:var(--cmono); font-size:13px; font-weight:600; color:var(--foil2) }
body.markets-cockpit .fx-mid-k{ font-family:var(--cmono); font-size:8px; letter-spacing:1.4px; text-transform:uppercase; color:#6B6254 }

/* side toggle + always-open price (every order is a limit at this price) */
body.markets-cockpit .tk-controls{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap }
body.markets-cockpit .tk-price{ display:flex; align-items:center; gap:9px }
body.markets-cockpit .tk-price label{ font-family:var(--cmono); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--foil2) }
body.markets-cockpit .price-in{ display:flex; align-items:baseline; gap:2px; border-bottom:1px solid var(--csoft); padding:0 2px }
body.markets-cockpit .price-in:focus-within{ border-bottom-color:var(--foil) }
body.markets-cockpit .price-in input{ width:46px; background:transparent; border:none; text-align:right; font-family:var(--cmono); font-size:22px; font-weight:600; color:#EDE5D8; padding:0 }
body.markets-cockpit .price-in input:focus{ outline:none }
body.markets-cockpit .price-in input::-webkit-outer-spin-button, body.markets-cockpit .price-in input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
body.markets-cockpit .price-pct{ font-family:var(--cmono); font-size:14px; color:var(--foil2) }

/* redundant now that bid/ask are the headline numbers — the crowd odds live on the
   Yes/No pills and in the Calibration lens, so the header stays clean */
body.markets-cockpit .ck-pxrow .pxblock:not(.delta){ display:none }

/* DESKTOP: small chart on top, the ticket fills the leftover so the numbers sit above
   the buttons and the buttons pin to the very bottom of the center column */
@media (min-width:1181px){
  body.markets-cockpit .ck-hero{ flex:0 0 auto !important; height:216px !important; max-height:216px !important; min-height:0 !important }
  body.markets-cockpit .ckpt-ticketbar{ flex:1 1 auto !important; display:flex; flex-direction:column }
  body.markets-cockpit .ticket{ flex:1 1 auto; display:flex; flex-direction:column; gap:14px }
  /* balanced 3-band: chart+desc on top, the FXCM numbers float in the middle, buttons pinned to the bottom */
  body.markets-cockpit .tk-fxcm{ margin-top:auto }
  body.markets-cockpit .tk-actions{ margin-top:auto }
}

/* THE TWO BIG BUTTONS — a two-column grid spanning the full center (chart) width,
   so each button is exactly HALF the chart's width and the pair is centered under
   it. Fixed, modest height: shorter than the chart above. Same height. */
body.markets-cockpit .tk-actions{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; width:100% }
body.markets-cockpit .do{ position:relative; overflow:hidden; margin:0; border:none; border-radius:14px;
  height:82px; min-height:82px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family:var(--sans); cursor:pointer; transition:transform .09s ease, filter .12s ease }
body.markets-cockpit .do .do-word{ font-size:24px; font-weight:800; letter-spacing:.6px }
body.markets-cockpit .do .do-sub{ font-family:var(--cmono); font-size:12px; font-weight:600; letter-spacing:.02em }
body.markets-cockpit .do::after{ content:""; position:absolute; left:0; right:0; top:0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent); pointer-events:none }
body.markets-cockpit .do:active{ transform:translateY(1px) }
/* labels ride GOLD FOIL — the word + the sub-line, on both buttons */
body.markets-cockpit .do .do-word, body.markets-cockpit .do .do-sub{
  background:linear-gradient(178deg,#FCEFC6 0%,#F6DE9B 26%,#EFCE7E 54%,#E7C15F 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#F6DE9B;
  text-shadow:none }
body.markets-cockpit .do .do-sub{ opacity:.94 }
/* ============================================================
   FIX 1 — DEDICATED, ID-SCOPED BUTTON COLORS. Buy is ALWAYS green,
   Sell is ALWAYS red. The color depends ONLY on which button it is
   (#doTrade vs #doSell) and NEVER on side (Yes/No), order type
   (Market/Limit), quantity, or a shared selected/armed class. Each
   state (default, armed, disabled, hover) is pinned so nothing can
   override it. ID selectors + !important guarantee this wins.
   ============================================================ */
/* BUY (#doTrade) = ALWAYS GREEN */
body.markets-cockpit #doTrade{
  background:linear-gradient(180deg,#3ee08a 0%,#2fd07a 46%,#1FA85F 100%) !important;
  box-shadow:0 14px 30px -14px rgba(47,208,122,.5), inset 0 1px 0 rgba(255,255,255,.22) !important; }
body.markets-cockpit #doTrade:hover:not(:disabled){ filter:brightness(1.05) saturate(1.05) }
/* armed BUY — MORE vivid green + a green confirm ring (no gold, never neutral) */
body.markets-cockpit #doTrade.armed{
  background:linear-gradient(180deg,#46ec92 0%,#33d982 46%,#22b064 100%) !important;
  box-shadow:0 0 0 3px rgba(47,208,122,.55), 0 14px 30px -14px rgba(47,208,122,.55), inset 0 1px 0 rgba(255,255,255,.24) !important;
  filter:brightness(1.05) }
/* disabled BUY — a MUTED green (dimmed), still clearly green, never neutral */
body.markets-cockpit #doTrade:disabled{
  background:linear-gradient(180deg,#2a8f5b 0%,#237e4f 46%,#22633C 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important; }

/* SELL (#doSell) = ALWAYS RED */
body.markets-cockpit #doSell{
  background:linear-gradient(180deg,#FF6A5E 0%,#f0584f 46%,#C4453C 100%) !important;
  box-shadow:0 14px 30px -14px rgba(240,88,79,.46), inset 0 1px 0 rgba(255,255,255,.16) !important; }
body.markets-cockpit #doSell:hover:not(:disabled){ filter:brightness(1.05) saturate(1.05) }
/* armed SELL — MORE vivid red + a red confirm ring (no gold, never neutral, never green) */
body.markets-cockpit #doSell.armed{
  background:linear-gradient(180deg,#f97a71 0%,#f4645b 46%,#d64a41 100%) !important;
  box-shadow:0 0 0 3px rgba(240,88,79,.6), 0 14px 30px -14px rgba(240,88,79,.55), inset 0 1px 0 rgba(255,255,255,.18) !important;
  filter:brightness(1.05) }
/* disabled SELL — an UNMISTAKABLY RED muted state (desaturated #f0584f family),
   NEVER a brown/maroon that reads neutral, never green */
body.markets-cockpit #doSell:disabled{
  background:linear-gradient(180deg,#d0665f 0%,#c25a53 46%,#a64943 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important; }

/* labels stay clearly legible on both colored buttons in every state */
body.markets-cockpit .do:disabled{ cursor:default; filter:none }
body.markets-cockpit .do:disabled .do-word, body.markets-cockpit .do:disabled .do-sub{ opacity:.82 }

/* ── TINY DIAL ROW — Side toggle · Market/Limit toggle · inline limit — small,
   integrated, centered under the buttons. These are the button's controls (they
   will later become dials), NOT a big strip. ── */
body.markets-cockpit .tk-dials{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 16px; min-width:0 }
body.markets-cockpit .dial{ display:flex; align-items:center; gap:8px; min-width:0 }

/* Side — seamless Yes/No pills */
body.markets-cockpit .sides{ display:flex; gap:6px; background:transparent; border:none; padding:0 }
body.markets-cockpit .side-btn{ background:transparent; border:1px solid var(--csoft); border-radius:6px;
  padding:6px 12px; color:var(--cm); min-width:72px }
body.markets-cockpit .side-btn .s-name{ font-size:12px }
body.markets-cockpit .side-btn .s-px{ font-family:var(--cmono); font-size:14px; margin-top:1px }
body.markets-cockpit .side-btn .s-name, body.markets-cockpit .side-btn .s-px{ color:inherit }
body.markets-cockpit .side-btn[aria-pressed=false]{ opacity:.55 }
body.markets-cockpit .side-btn[aria-pressed=true][data-v=YES]{ background:rgba(47,208,122,.14); border-color:var(--grn); color:var(--grn); opacity:1 }
body.markets-cockpit .side-btn[aria-pressed=true][data-v=NO]{ background:rgba(240,88,79,.14); border-color:var(--rd); color:var(--rd); opacity:1 }
body.markets-cockpit .side-btn[aria-pressed=true][data-v=YES] .s-name, body.markets-cockpit .side-btn[aria-pressed=true][data-v=YES] .s-px{ color:var(--grn) }
body.markets-cockpit .side-btn[aria-pressed=true][data-v=NO] .s-name, body.markets-cockpit .side-btn[aria-pressed=true][data-v=NO] .s-px{ color:var(--rd) }
/* tiny-dial sizing: compact pills that read as a small integrated toggle */
body.markets-cockpit .tk-dials .sides{ gap:4px }
body.markets-cockpit .tk-dials .side-btn{ display:inline-flex; align-items:baseline; gap:5px; min-width:0; padding:5px 11px; border-radius:7px }
body.markets-cockpit .tk-dials .side-btn .s-name{ font-size:11px }
body.markets-cockpit .tk-dials .side-btn .s-px{ font-size:12px; margin-top:0 }
/* When the ticket is on NO, the book mid is mirrored red so the switch registers */
body.markets-cockpit #cockpit[data-side=NO] .dl-mid{ box-shadow:none }
body.markets-cockpit #cockpit[data-side=NO] .dl-mid-v{ color:var(--rd) }
body.markets-cockpit .t-strip{ font-family:var(--cmono); font-size:10px; letter-spacing:.02em; color:var(--ambd); white-space:nowrap }
body.markets-cockpit #cockpit[data-side=NO] .t-strip{ color:var(--rd) }

/* Contracts — big seamless number + chip row */
body.markets-cockpit .size-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
body.markets-cockpit .size{ display:flex; align-items:center; gap:0 }
body.markets-cockpit .size label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
body.markets-cockpit .size input{ background:transparent; border:none; border-bottom:1px solid var(--csoft);
  font-family:var(--cmono); font-size:23px; font-weight:700; width:74px; text-align:left; padding:2px 0;
  background-image:linear-gradient(178deg,#FCEFC6,var(--gold-hi) 30%,var(--gold) 60%,var(--gold-lo));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold) }
body.markets-cockpit .size input:focus{ border-bottom-color:var(--gold); box-shadow:none; outline:none }
body.markets-cockpit .chips{ display:flex; gap:6px }
body.markets-cockpit .chips .chip{ min-width:38px; background:rgba(210,222,235,.07); border:none; color:var(--silver-lo); border-radius:7px; padding:6px 11px; font-family:var(--cmono); font-size:11.5px; font-weight:600; cursor:pointer }
body.markets-cockpit .chips .chip:hover{ color:#08202e; background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo)) }

/* Order — Market/Limit toggle + ALWAYS-INLINE limit price (dim when Market) — tiny */
body.markets-cockpit .ord-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
body.markets-cockpit .ck-segrow{ display:contents }
body.markets-cockpit .ordtype{ position:relative; display:flex; flex:none;
  background:rgba(210,222,235,.06); border:none; padding:2px; border-radius:7px; overflow:hidden }
body.markets-cockpit .ordtype::before{ content:none }
body.markets-cockpit .ordtype button{ background:transparent; color:var(--silver-lo); border:none; border-radius:5px; padding:5px 12px; font-family:var(--sans); font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap }
body.markets-cockpit .ordtype button[aria-pressed=true]{ color:#08202e; background:linear-gradient(180deg,var(--silver-hi),var(--silver-lo)); font-weight:700 }
/* inline limit price — always in place; dimmed + disabled when Market, lit when Limit.
   NEVER a collapsing/pop-out box. */
body.markets-cockpit .limit-inline{ display:flex; align-items:center; gap:6px; opacity:.4; transition:opacity .18s ease }
body.markets-cockpit .limit-inline[data-armed="1"]{ opacity:1 }
body.markets-cockpit .limit-inline label{ font-family:var(--sans); font-size:8.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--cf) }
body.markets-cockpit .limit-in{ position:relative; display:inline-flex; align-items:center }
body.markets-cockpit .limit-in input{ background:rgba(210,222,235,.06); border:none; border-radius:6px; color:var(--gold);
  font-family:var(--cmono); font-size:13px; font-weight:700; width:50px; text-align:center; padding:5px 16px 5px 7px }
body.markets-cockpit .limit-in input:focus{ outline:none; box-shadow:0 0 0 2px rgba(239,206,126,.35) }
body.markets-cockpit .limit-pct{ position:absolute; right:7px; color:var(--cm); font-size:11px; pointer-events:none }

/* Preview — compact seamless cost/win/risk trio + meta line */
body.markets-cockpit .t-move{ font-size:10px; color:var(--ambd); min-height:0 }
body.markets-cockpit .preview{ display:flex; flex-flow:row nowrap; gap:22px; background:transparent; border:none; border-radius:0; padding:0 }
body.markets-cockpit .preview .pv-item{ display:flex; flex-direction:column; gap:2px; padding:0 }
body.markets-cockpit .preview .pl{ font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:var(--cf); white-space:nowrap }
body.markets-cockpit .preview .pv{ font-family:var(--cmono); font-weight:700; font-size:16px; color:var(--ctb) }
body.markets-cockpit .preview .pv.cost{
  background-image:linear-gradient(178deg,#FCEFC6,var(--gold-hi) 30%,var(--gold) 60%,var(--gold-lo));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold) }
body.markets-cockpit .preview .pv-item:nth-child(2) .pv{ color:var(--grn) }
body.markets-cockpit .preview .pv-item:nth-child(3) .pv{ color:var(--rd) }
body.markets-cockpit .tk-meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 12px; margin-top:5px }
body.markets-cockpit .ck-bal{ font-family:var(--cmono); font-size:10px; color:var(--ambd) }
body.markets-cockpit .ck-bal b{ color:var(--gold) }
body.markets-cockpit .hold{ font-size:10px; color:var(--cf) }
body.markets-cockpit .t-msg{ flex-basis:100%; font-size:10.5px; color:var(--ambd); min-height:0; margin-top:2px }

/* dark calibration panel + dark positions/orders tables */
body.markets-cockpit .calibpanel{ background:transparent !important; border:none !important; box-shadow:none !important; margin:0 }
body.markets-cockpit .cp-eyebrow{ color:var(--amb) !important } body.markets-cockpit .cp-sec{ color:var(--ambd) } body.markets-cockpit .cpk{ color:var(--cm) }
body.markets-cockpit .cp-chart{ background:transparent; border:none; box-shadow:none }
body.markets-cockpit .rulecard{ background:transparent; border:none; padding:0; color:var(--ct) } body.markets-cockpit .rulecard .rh{ color:var(--amb) } body.markets-cockpit #mRule{ color:var(--ct) } body.markets-cockpit .src{ color:var(--cf) }
body.markets-cockpit .profile, body.markets-cockpit .ptable, body.markets-cockpit #ooList{ color:var(--ct) }
body.markets-cockpit .prow, body.markets-cockpit .oo-row{ border-color:var(--csoft) }

@media (min-width:761px) and (max-width:1180px){
  body.markets-cockpit{ overflow:auto; height:auto; display:block }
  body.markets-cockpit>#main{ display:block; height:auto; overflow:visible }
  body.markets-cockpit #main>.wrap{ display:block; height:auto; padding:0 14px }
  #cockpit{ display:grid; grid-template-columns:1fr; height:auto }
  body.markets-cockpit .ck-lower{ flex:0 0 auto; flex-direction:column }
  body.markets-cockpit .ck-herobody{ position:static; height:300px }
  body.markets-cockpit .ck-paneview{ position:static }
}

body.markets-cockpit #activity, body.markets-cockpit #how, body.markets-cockpit #legal{ display:none }

body.markets-cockpit footer{ display:none }
body.markets-cockpit #cockpit{ min-height:0 }
/* the ticket (control strip + buttons) sits at the foot of the center column at its
   natural height; the square chart above it absorbs the leftover space. */
body.markets-cockpit .ticket-body{ flex:0 0 auto; min-height:0 }

/* ---- teal cohesion: black nav, dark masthead, seamless dark book panels ---- */
body.markets-cockpit nav.nav{ background:#07090c; border-bottom:none }
body.markets-cockpit .nav-links a{ color:#A79C8D }
body.markets-cockpit .nav-links a:hover{ color:#e8ecf3 }
body.markets-cockpit .nav-links a.active{ color:#EFCE7E }
body.markets-cockpit .nav-auth .lab, body.markets-cockpit .nav-auth .who, body.markets-cockpit #navHandle{ color:#8B8172 }
body.markets-cockpit .nav-auth .amt{ color:#F1E9DC }
body.markets-cockpit .nav-login, body.markets-cockpit #logoutLink{ color:#A79C8D }
body.markets-cockpit .hamburger span{ background:#A79C8D }
body.markets-cockpit .wallet{ background:transparent; border-color:var(--cline) }
body.markets-cockpit .tmast{ background:transparent; border:none; box-shadow:none }
body.markets-cockpit .tmast-num{ color:#F1E9DC }
body.markets-cockpit .tmast-lab{ color:#8B8172 }
body.markets-cockpit .tmast-rule{ background:var(--cline) }
body.markets-cockpit .tmast-wall{ background:transparent }
body.markets-cockpit .profile{ background:transparent !important; color:var(--ct) }
body.markets-cockpit .pcell{ background:transparent !important; border-color:var(--cline) !important; box-shadow:none !important }
body.markets-cockpit .pcell .pk{ color:#b98a52 }
body.markets-cockpit .pcell .pv{ color:var(--ct) }
body.markets-cockpit .pv.pos, body.markets-cockpit .lpnl.pos, body.markets-cockpit .prow .pos{ color:var(--grn) }
body.markets-cockpit .pv.neg, body.markets-cockpit .lpnl.neg, body.markets-cockpit .prow .neg{ color:var(--rd) }
body.markets-cockpit .prow{ background:transparent !important; border-color:var(--cline) !important; color:var(--ct) }
body.markets-cockpit .prow.h{ color:#b98a52 }
body.markets-cockpit .prow .pm{ color:var(--ct) }
body.markets-cockpit .prow.click:hover{ background:#161209 !important }
body.markets-cockpit .oo-row{ background:transparent !important; border-color:var(--cline) !important; color:var(--ct) }
body.markets-cockpit .oo-sub{ color:var(--cf) }
body.markets-cockpit .oo-side.buy{ background:rgba(47,208,122,.14); color:var(--grn) }
body.markets-cockpit .oo-side.sell{ background:rgba(240,88,79,.14); color:var(--rd) }
body.markets-cockpit .oo-cancel{ background:transparent; border:1px solid var(--cline); color:var(--cm) }
body.markets-cockpit .oo-cancel:hover{ border-color:var(--rd); color:var(--rd) }
body.markets-cockpit .mb-empty, body.markets-cockpit .ck-bookhint{ color:var(--cf) }
/* empty states float as plain text — NO dashed box, no fill, no border */
body.markets-cockpit .empty,
body.markets-cockpit .ck-pos .empty,
body.markets-cockpit .ck-ord .mb-empty,
body.markets-cockpit #ordEmpty,
body.markets-cockpit .mb-empty{ background:transparent !important; color:var(--cf) !important; border:none !important; border-radius:0 !important; padding:13px 3px !important; box-shadow:none !important; font-size:12.5px; line-height:1.55 }
body.markets-cockpit .empty a, body.markets-cockpit .mb-empty a{ color:var(--amb) }

/* ===== teal cohesion: kill warm/global-var leaks visible only logged-in ===== */
body.markets-cockpit .tmast-num{ background:none !important; -webkit-text-fill-color:#F1E9DC !important; color:#F1E9DC !important }
body.markets-cockpit .ptable{ background:transparent !important; border:none !important; box-shadow:none !important }
body.markets-cockpit .ticket{ background:transparent !important }
body.markets-cockpit .open-orders, body.markets-cockpit #ooList, body.markets-cockpit .profile, body.markets-cockpit .preview, body.markets-cockpit .pcell{ background:transparent !important }
body.markets-cockpit .side-btn{ background:transparent !important; border:1px solid var(--csoft) !important; opacity:1 }
body.markets-cockpit .side-btn[data-v=YES]{ color:var(--grn) }
body.markets-cockpit .side-btn[data-v=NO]{ color:var(--ct) }
body.markets-cockpit .side-btn[aria-pressed=true][data-v=YES]{ background:rgba(47,208,122,.15) !important; border-color:var(--grn) !important }
body.markets-cockpit .side-btn[aria-pressed=true][data-v=NO]{ background:rgba(240,88,79,.15) !important; border-color:var(--rd) !important; color:var(--rd) }
body.markets-cockpit .side-btn[aria-pressed=false]{ opacity:.5 }
body.markets-cockpit .ck-segrow .mode{ background:transparent !important; border:1px solid var(--csoft) !important; box-shadow:none !important }
body.markets-cockpit .mode button{ color:var(--cm) }
body.markets-cockpit .mode button[aria-pressed=true]{ background:var(--teal-bg) !important; color:var(--amb) !important }
body.markets-cockpit .mode button[aria-pressed=true][data-v=BUY]{ background:rgba(47,208,122,.16) !important; color:var(--grn) !important }
body.markets-cockpit .mode button[aria-pressed=true][data-v=SELL]{ background:rgba(240,88,79,.16) !important; color:var(--rd) !important }

/* ===== seamless flatten v2 — kill masthead orange frame, rail gold bars + cream pills, inline-orange center chip (match pv-teal mockup) ===== */
body.markets-cockpit .tmast{ background:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important }
body.markets-cockpit .tmast::before, body.markets-cockpit .tmast::after{ display:none !important }
body.markets-cockpit .ckpt-rail .card::before, body.markets-cockpit .ckpt-rail .card::after{ display:none !important }
body.markets-cockpit .ckpt-rail .card-cat{ background:none !important; border:none !important; border-radius:0 !important; padding:0 !important; color:var(--cm) !important }
body.markets-cockpit .ckpt-rail .card.sel .card-cat{ color:var(--foil) !important }
body.markets-cockpit .ckpt-rail .card-cat .dot{ display:none !important }
body.markets-cockpit .ckpt-rail .card-move{ background:transparent !important; border:none !important; padding:0 !important; box-shadow:none !important }
body.markets-cockpit .ckpt-rail .card-move.up{ color:var(--grn) !important }
body.markets-cockpit .ckpt-rail .card-move.dn{ color:var(--rd) !important }
body.markets-cockpit .ckpt-rail .card-move.flat{ color:var(--cf) !important }
body.markets-cockpit #mCat, body.markets-cockpit .ck-mkthead .cat-chip{ background:transparent !important; border:none !important; color:var(--foil2) !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important }
body.markets-cockpit #mCat .cat-dot{ background:var(--amb) !important }
body.markets-cockpit .catchip.on{ background:var(--teal-bg) !important; color:var(--amb) !important; border-color:var(--teal-bd) !important }
body.markets-cockpit .pxblock.delta .m-move{ background:transparent !important; padding:0 !important; border-radius:0 !important }
body.markets-cockpit .pxblock.delta .m-move.flat{ color:var(--cf) !important }

/* ===== refinements: toggle knob, since-open pill, molten masthead nums, suggest input, nav active ===== */
/* 1. Watching/Hide toggle: kill white knob */
body.markets-cockpit .toggle .sw{ background:#262019 !important }
body.markets-cockpit .toggle .sw::after{ background:#8B8172 !important; box-shadow:none !important }
body.markets-cockpit .toggle.on .sw{ background:var(--teal-bg) !important }
body.markets-cockpit .toggle.on .sw::after{ background:var(--amb) !important }
/* 2. since-open badge: no pill, just colored text */
body.markets-cockpit .pxblock.delta .m-move,
body.markets-cockpit .pxblock.delta .m-move.up,
body.markets-cockpit .pxblock.delta .m-move.dn,
body.markets-cockpit .pxblock.delta .m-move.flat{ background:transparent !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important }
/* 3. masthead numbers: gold-foil to complement the logo (no orange in the cockpit) */
body.markets-cockpit .tmast-num{ background:linear-gradient(178deg,#FCEFC6,#F6DE9B 30%,#EFCE7E 60%,#E7C15F) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:#EFCE7E !important }
/* 4. suggest-a-market input: dark + clean sans + teal submit */
body.markets-cockpit .ckpt-rail .new-form input{ background:#0D0B08 !important; border:1px solid var(--cline) !important; color:var(--ct) !important; border-radius:4px !important; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important; font-size:12.5px !important }
body.markets-cockpit .ckpt-rail .new-form input::placeholder{ color:var(--cf) !important }
body.markets-cockpit .ckpt-rail .new-form button{ background:var(--amb) !important; color:#06251f !important; border:none !important; box-shadow:none !important; border-radius:4px !important; font-weight:700 !important }
/* 5. nav active link: clearly visible teal */
body.markets-cockpit nav .nav-links a.active{ color:#EFCE7E !important; -webkit-text-fill-color:#EFCE7E !important; background:transparent !important; opacity:1 !important; font-weight:700 }
/* markets active underline = solid orange, matching every other tab (Andy: Markets tab color was off) */
body.markets-cockpit .nav-links a.active::after{ background:#EFCE7E !important; box-shadow:none !important }

/* ===== RIGHT COLUMN proportions (DESKTOP): order book stays COMPACT at the top,
   Your Positions and Open Orders STACKED below it FILL all remaining height (no
   dead space, no lines between them), each scrolling internally, preview pinned at
   the bottom. ===== */
@media (min-width:1181px){
body.markets-cockpit .ckpt-side{ display:flex !important; flex-direction:column; gap:12px; min-height:0 }
/* order book: compact, natural height (not a fixed 50% that leaves a gap) */
body.markets-cockpit .ck-book{ flex:0 0 auto !important; min-height:0; display:flex; flex-direction:column; overflow:hidden }
body.markets-cockpit .ck-book .depth{ flex:0 0 auto !important; min-height:0; max-height:none !important; overflow-y:auto }
/* positions + orders STACKED (column), FILL the space between book and preview */
body.markets-cockpit .ck-lower{ flex:1 1 auto !important; flex-direction:column !important; gap:12px; min-height:0 }
body.markets-cockpit .ck-pos, body.markets-cockpit .ck-ord{ flex:1 1 0 !important; min-height:0; display:flex; flex-direction:column }
/* each pane's scroll body absorbs the growth so rows fill, not gap */
body.markets-cockpit .ck-pos .ck-scroll, body.markets-cockpit .ck-ord .ck-scroll{ flex:1 1 auto !important; min-height:0 }
/* the two big action buttons live at the very bottom of the center column */
body.markets-cockpit .ticket .do{ position:static }
/* THE SCREEN — the price chart fills the center and reads as a SQUARE: the center
   column is 520px wide, so the hero grows to absorb all leftover height. */
body.markets-cockpit .ck-hero{ flex:1 1 auto; min-height:0; max-height:none }
body.markets-cockpit .ck-herobody{ min-height:0 }
}

/* ============================================================
   SITE-WIDE DARK CONVERSION — per-component overrides
   Kills the hardcoded warm hexes the :root flip cannot reach.
   Scoped :not(.markets-cockpit) so the markets cockpit is untouched.
   ============================================================ */

/* ---- 3.0 SHARED CHROME (nav, footer, buttons) ---- */
body.warm:not(.markets-cockpit) nav.nav{ background:rgba(11,14,18,.96); border-bottom:none }
body.warm:not(.markets-cockpit) .nav{ background:rgba(11,14,18,.96) }
body.warm:not(.markets-cockpit) .nav-links a{ color:#B3A896 }
body.warm:not(.markets-cockpit) .nav-links a:hover, body.warm:not(.markets-cockpit) .nav-links a.active{ color:#EFCE7E; background:#2A2208 }
body.warm:not(.markets-cockpit) .nav-links a::after{ background:#EFCE7E; box-shadow:none }
body.warm:not(.markets-cockpit) .nav-login{ color:#B3A896 }
body.warm:not(.markets-cockpit) .nav-login:hover{ color:#EFCE7E; background:#2A2208 }
body.warm:not(.markets-cockpit) #logoutLink{ color:#B3A896 }
body.warm:not(.markets-cockpit) .who, body.warm:not(.markets-cockpit) #navHandle{ color:#8B8172 }
body.warm:not(.markets-cockpit) .logo{ box-shadow:none; border-color:#262019 }
body.warm:not(.markets-cockpit) .hamburger{ border-color:#262019 }
body.warm:not(.markets-cockpit) .hamburger span{ background:#B3A896 }
body.warm:not(.markets-cockpit) .nav .nav-links{ background:#0E0C09; border-color:#262019 }
body.warm:not(.markets-cockpit) .skiplink{ background:#EFCE7E; color:#07090c }
body.warm:not(.markets-cockpit) .foot-col h2{ color:#8B8172 }
body.warm:not(.markets-cockpit) .foot-col a{ color:#B3A896 }
body.warm:not(.markets-cockpit) .foot-col a:hover{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .foot-brand p{ color:#8B8172 }
body.warm:not(.markets-cockpit) .disc{ color:#8B8172 }
body.warm:not(.markets-cockpit) .nav-cta, body.warm:not(.markets-cockpit) .btn-primary{ box-shadow:0 1.5px 0 #6E5A24 }
body.warm:not(.markets-cockpit) .btn-ghost{ background:transparent; color:#CFC5B4; border:1px solid #262019; box-shadow:none }
body.warm:not(.markets-cockpit) .btn-ghost:hover{ border-color:#EFCE7E; color:#EFCE7E; background:#161209 }

/* ---- 3.1 FORM PRIMITIVES (index, join, login) ---- */
body.warm:not(.markets-cockpit) .form-card{ background:#0E0C09; border:1px solid #262019; border-radius:6px; box-shadow:none }
body.warm:not(.markets-cockpit) .field input, body.warm:not(.markets-cockpit) .field select{ background:#0D0B08; border:1px solid #262019; color:#F1E9DC }
body.warm:not(.markets-cockpit) .field input::placeholder{ color:#6B6254 }
body.warm:not(.markets-cockpit) .field input:focus, body.warm:not(.markets-cockpit) .field select:focus{ outline:2px solid #EFCE7E; border-color:#EFCE7E }
body.warm:not(.markets-cockpit) .field label, body.warm:not(.markets-cockpit) .field .hint{ color:#8B8172 }
body.warm:not(.markets-cockpit) .checkline{ color:#B3A896 }
body.warm:not(.markets-cockpit) .checkline input[type=checkbox]{ accent-color:#EFCE7E }
body.warm:not(.markets-cockpit) .form-ok{ background:#1C1705; color:#2FD07A; border:1px solid #4A3C1C }
body.warm:not(.markets-cockpit) .fcard{ background:#0E0C09; border:1px solid #262019; box-shadow:none; border-radius:6px }
body.warm:not(.markets-cockpit) .fcard .fi{ background:#2A2208; border:1px solid #4A3C1C }

/* ---- 3.2 MASTHEAD .tmast (leaderboard, how-it-works, about) ---- */
body.warm:not(.markets-cockpit) .tmast{ background:transparent; border:none; border-radius:0; box-shadow:none }
body.warm:not(.markets-cockpit) .tmast::before, body.warm:not(.markets-cockpit) .tmast::after{ display:none }
body.warm:not(.markets-cockpit) .tmast-globe, body.warm:not(.markets-cockpit) .tmast-wall, body.warm:not(.markets-cockpit) .tmast-brand{ display:none }
body.warm:not(.markets-cockpit) .tmast-stats{ width:100%; justify-content:flex-start; gap:26px; padding:0; border-top:1px solid #262019 }
body.warm:not(.markets-cockpit) .tmast-num{ background:linear-gradient(180deg,#FCEFC6,#F6DE9B 55%,#EFCE7E); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#F6DE9B }
body.warm:not(.markets-cockpit) .tmast-num::after{ display:none }
body.warm:not(.markets-cockpit) .tmast-lab{ color:#8B8172 }
body.warm:not(.markets-cockpit) .tmast-rule{ background:#262019 }
body.warm:not(.markets-cockpit) .tmast-status{ color:#8B8172 }
body.warm:not(.markets-cockpit) .tmast-word span{ color:#EFCE7E }

/* ---- 3.3 .shd SECTION HEADERS (how-it-works, legal) ---- */
body.warm:not(.markets-cockpit) .shd-rail{ background:linear-gradient(180deg,#F6DE9B 0%,#EFCE7E 50%,#C9A34E 100%); box-shadow:0 2px 8px rgba(192,83,15,.22) }
body.warm:not(.markets-cockpit) .shd-mark{ background:linear-gradient(155deg,#2A2208 0%,#0E0C09 100%); border-color:#4A3C1C; box-shadow:none }
body.warm:not(.markets-cockpit) .shd-kick{ color:#8A7030 }
body.warm:not(.markets-cockpit) .shd-title, body.warm:not(.markets-cockpit) .prose .shd-title{ color:#F1E9DC }
body.warm:not(.markets-cockpit) .shd-mark svg [fill="#FCEAC9"]{ fill:#2A2208 }
body.warm:not(.markets-cockpit) .shd-mark svg [stroke^="url"]{ stroke:#EFCE7E }
body.warm:not(.markets-cockpit) .shd-mark svg [fill^="url"]{ fill:#EFCE7E }

/* ---- 3.4 .page-note callout ---- */
body.warm:not(.markets-cockpit) .page-note{ background:#0E0C09; border:1px solid #262019; color:#CFC5B4; box-shadow:none; border-radius:6px }
body.warm:not(.markets-cockpit) .page-note b{ color:#F1E9DC }

/* ---- 3.5 INDEX (landing) ---- */
body.landing .hero .kick{ color:#EFCE7E }
body.landing .qrow:hover{ background:#0d1116 }
body.landing .qp{ color:#EFCE7E }
body.landing .qcat{ background:#EFCE7E !important; color:#fff !important; border:1px solid #EFCE7E }
body.landing .snav{ background:rgba(11,14,18,.975); border-bottom:none }
body.landing .snav-links a{ color:#B3A896 }
body.landing .snav-links a:hover{ color:#EFCE7E }
body.landing .dotnav a{ border-color:#6B6254 }
body.landing .dotnav a.on, body.landing .dotnav a:hover{ background:#EFCE7E; border-color:#EFCE7E }
body.landing .dotnav a::after{ background:#0E0C09; border:1px solid #262019; color:#CFC5B4 }
body.landing .lf-links a{ color:#B3A896 }
body.landing .lf-links a:hover{ color:#EFCE7E }
body.landing .podium .pr{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12) }

/* ---- 3.6 LEADERBOARD ---- */
body.warm:not(.markets-cockpit) .lboard, body.warm:not(.markets-cockpit) .lboard-full{ background:#0E0C09; border:1px solid #262019; box-shadow:none; border-radius:6px }
body.warm:not(.markets-cockpit) .lrow{ border-top:1px solid #1A1610 }
body.warm:not(.markets-cockpit) .lrow.me, body.warm:not(.markets-cockpit) .lboard .lrow.me{ background:#2A2208 !important; box-shadow:inset 3px 0 0 #EFCE7E }
/* GEM FOILS RESTORED — the original gold/silver/bronze/amber/red rank medals (styles.css 248-257) pop on black; only neutralise the >10 slate chip number for dark. */
body.warm:not(.markets-cockpit) .lrow:not(.top) .lrank{ color:#B3A896 }
/* top-10 NAMES get their own gem tint so each trader colour pops on black — never white */
body.warm:not(.markets-cockpit) .lhandle{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .lboard .lrow.r1 .lhandle{ color:#F6DE9B; font-weight:700 }
body.warm:not(.markets-cockpit) .lbhf__bar{ background:#0E0C09; border:1px solid #262019; border-radius:6px; box-shadow:none }
body.warm:not(.markets-cockpit) .lbhf__bar::before{ background:#EFCE7E }
body.warm:not(.markets-cockpit) .lbhf__bar::after{ display:none }
body.warm:not(.markets-cockpit) .lbhf__emblem::after{ background:#262019 }
body.warm:not(.markets-cockpit) .lbhf__title{ -webkit-text-fill-color:initial; background:none; color:#F1E9DC; filter:none }
body.warm:not(.markets-cockpit) .lbhf__sub{ color:#8B8172 }
body.warm:not(.markets-cockpit) .lbhf__meta{ border-right:1px solid #262019 }
body.warm:not(.markets-cockpit) .lbhf__count{ color:#F1E9DC }
body.warm:not(.markets-cockpit) .lbhf__countlbl{ color:#8B8172 }
body.warm:not(.markets-cockpit) .lpnl.pos{ color:#2FD07A }
body.warm:not(.markets-cockpit) .lpnl.neg{ color:#f0584f }
body.warm:not(.markets-cockpit) .lres{ color:#8B8172 }
body.warm:not(.markets-cockpit) .lb-empty{ color:#8B8172 }

/* ---- 3.7 HOW-IT-WORKS .hfs-root self-contained system ---- */
body.warm:not(.markets-cockpit) .hfs-root{ --hfs-bg:#07090c; --hfs-bg2:#0E0C09; --hfs-bg3:#0D0B08; --hfs-hair:#262019; --hfs-cream:#F1E9DC; --hfs-ink:#CFC5B4; --hfs-gold:#EFCE7E; --hfs-amber:#F6DE9B; --hfs-orange:#EFCE7E; --hfs-rust:#f0584f; background:#07090c; background-image:none }
body.warm:not(.markets-cockpit) .hfs-kicker{ background:rgba(232,115,28,.06); border:1px solid #262019; color:#EFCE7E }
body.warm:not(.markets-cockpit) .hfs-kicker::before{ background:#EFCE7E; box-shadow:0 0 6px rgba(232,115,28,.8) }
body.warm:not(.markets-cockpit) .hfs-card{ background:#0E0C09 }
body.warm:not(.markets-cockpit) .hfs-card.good{ background:#0E0C09; background-image:radial-gradient(circle at 50% 0,rgba(47,208,122,.10),transparent 70%) }
body.warm:not(.markets-cockpit) .hfs-card.good .hfs-num{ color:#9DEFC6 }
body.warm:not(.markets-cockpit) .hfs-card.good::after{ background:#2FD07A }
body.warm:not(.markets-cockpit) .hfs-card.cost{ background:#0E0C09; background-image:radial-gradient(circle at 50% 0,rgba(240,88,79,.10),transparent 70%) }
body.warm:not(.markets-cockpit) .hfs-card.cost .hfs-tag{ color:#f0584f }
body.warm:not(.markets-cockpit) .hfs-card.cost .hfs-num{ color:#f0a59f }
body.warm:not(.markets-cockpit) .hfs-card.cost::after{ background:#f0584f }
body.warm:not(.markets-cockpit) .hfs-chartwrap{ background:#0E0C09; border:1px solid #262019; box-shadow:none }
body.warm:not(.markets-cockpit) .hfs-chartwrap .hfs-charttitle{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .hfs-chartwrap .hfs-chartmeta{ color:#8B8172 }
body.warm:not(.markets-cockpit) .hfs-legend{ color:#B3A896 }

/* ---- 3.8 ABOUT era labels ---- */
body.warm:not(.markets-cockpit) .e-cold{ color:#6B6254 } body.warm:not(.markets-cockpit) .e-hot{ color:#EFCE7E }

/* ---- 3.9 FAQ ---- */
body.warm:not(.markets-cockpit) .faq details{ background:#0E0C09; border:1px solid #262019; box-shadow:none; border-radius:6px }
body.warm:not(.markets-cockpit) .faq summary::after{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .faq .fa a{ color:#EFCE7E }

/* ---- 3.11 JOIN ---- */
body.warm:not(.markets-cockpit) .phero .kicker{ background:#2A2208; color:#EFCE7E; border:1px solid #4A3C1C }

/* ---- 3.12 LEGAL ---- */
body.warm:not(.markets-cockpit) .toc{ background:#0E0C09; border:1px solid #262019; box-shadow:none }
body.warm:not(.markets-cockpit) .toc a{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .prose p, body.warm:not(.markets-cockpit) .prose li{ color:#CFC5B4 }
body.warm:not(.markets-cockpit) .prose .updated{ color:#8B8172 }

/* ============ TRADITIONAL TIMELINE — replaces the curvy "arrogant" ridge ============ */
body.landing #lineage .scene-c{ max-width:1140px }
body.landing .tline{ width:100%; margin:0 auto }
body.landing .tline-stops{ display:flex; list-style:none; margin:0; padding:0; position:relative }
body.landing .tline-stops::before{ content:""; position:absolute; left:7%; right:7%; top:50%; height:2px; transform:translateY(-50%); background:linear-gradient(90deg,#39434f 0%,#9a4a16 30%,#EFCE7E 100%) }
body.landing .tline-stop{ flex:1 1 0; position:relative; height:236px }
body.landing .tline-node{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:#EFCE7E; border:3px solid #07090c; box-shadow:0 0 0 1px #EFCE7E, 0 0 9px rgba(232,115,28,.45); z-index:2 }
body.landing .tline-yr{ position:absolute; left:0; right:0; text-align:center; top:calc(50% - 64px); font-family:var(--mono); font-size:13px; color:#EFCE7E }
body.landing .tline-name{ position:absolute; left:0; right:0; text-align:center; top:calc(50% + 22px); font-family:var(--display); font-weight:600; font-size:16px; color:#CFC5B4; line-height:1.25; padding:0 6px }
body.landing .tline-sub{ position:absolute; left:0; right:0; text-align:center; top:calc(50% + 72px); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8B8172; line-height:1.35; padding:0 8px }
body.landing .tline-now .tline-node{ width:18px; height:18px; background:radial-gradient(circle at 38% 30%, #FFE08A, #EFCE7E 58%, #A8823B); box-shadow:0 0 0 1px #EFCE7E, 0 0 16px rgba(232,115,28,.65) }
body.landing .tline-now .tline-name{ color:#fff; font-weight:700 }
@media (max-width:760px){
  body.landing .tline-stops{ flex-direction:column; align-items:stretch }
  body.landing .tline-stops::before{ left:6px; right:auto; top:10px; bottom:10px; width:2px; height:auto; transform:none; background:linear-gradient(180deg,#39434f,#EFCE7E) }
  body.landing .tline-stop{ flex:none; height:auto; padding:12px 0 12px 28px; text-align:left }
  body.landing .tline-node{ position:absolute; left:6px; top:20px; transform:translate(-50%,0) }
  body.landing .tline-yr{ position:static; text-align:left }
  body.landing .tline-name{ position:static; text-align:left; margin-top:8px; padding:0 }
  body.landing .tline-sub{ position:static; text-align:left; margin-top:3px; padding:0 }
}

/* ===== 3.14 COLOR-POP DISPLAY HEADINGS — no pure white on black (landing bake-off winner) ===== */
/* About page: every header, accent, tab, and timeline mark is mango. No teal on this page. */
body.landing{ --violet:#EFCE7E; --violet-deep:#EFCE7E; --royal:#EFCE7E; --violet-bright:#F7A11E; --grad:#EFCE7E }
body.landing .big{ color:#EFCE7E }
body.landing .core{ color:#EFCE7E }
.who .words span{ color:#EFCE7E }
.who .words span:nth-child(2){ color:#F7A11E }
body.warm:not(.markets-cockpit) .phero h1, body.warm:not(.markets-cockpit) h1.head, body.warm:not(.markets-cockpit) .trade-h1{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .phero h1 .pop, body.warm:not(.markets-cockpit) h1.head .pop{ color:#F6DE9B; background:none; -webkit-text-fill-color:#F6DE9B }
body.warm:not(.markets-cockpit) .shd-title, body.warm:not(.markets-cockpit) .prose .shd-title{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .lbhf__title{ color:#EFCE7E; background:none; -webkit-text-fill-color:#EFCE7E; filter:none }

/* ===== order book: roomy depth ladder on top, scrolls internally; kill the AMM-revealing hint ===== */
/* DESKTOP ONLY: the flex/depth/ticket pre-sizing must not fight the mobile single-screen layout */
@media (min-width:1181px){
/* RIGHT column: order book ~half the height on top, positions + orders stacked below.
   The ladder scrolls inside its own frame so the book is never clipped. */
body.markets-cockpit .ck-book{ flex:0 0 auto !important; min-height:0; display:flex; flex-direction:column; overflow:hidden }
body.markets-cockpit .ck-book .depth{ flex:0 0 auto !important; max-height:240px !important; overflow-y:auto !important; overflow-x:hidden !important }
body.markets-cockpit .ticket{ flex:0 0 auto !important }
}
body.markets-cockpit #ckBookHint, body.markets-cockpit .ck-bookhint{ display:none !important }
/* market-card sparkline box: hide it on the cockpit (it rendered as a meaningless blank box) */
body.markets-cockpit .card .spark{ display:none !important }

/* ===== LEADERBOARD: single-page, no footer — keep the ORIGINAL natural spacing.
   0721 device fix: the old height:100vh+overflow:hidden lock clipped ranks 6-10 on
   every landscape phone and behind the iOS toolbar with no scroll rescue. Tall
   screens still never scroll (content < viewport); short ones now can. ===== */
body.lboard-page{ min-height:100dvh; overflow-x:clip; overflow-y:auto }
body.lboard-page footer{ display:none }

/* minimal fixed copyright — out of flow, never changes page length or causes scroll */
.copyr{ position:fixed; bottom:3px; left:0; right:0; text-align:center; font-family:var(--sans); font-size:9px; letter-spacing:.1em; color:#6B6254; opacity:.55; pointer-events:none; z-index:5 }
/* ============================================================
   MOBILE COCKPIT (<=760px) — COMPACT SINGLE-SCREEN, no tabs, no scroll.
   One height-budgeted column: header -> mini chart -> 3-level book ->
   inline ticket (Buy pinned bottom). Positions/Open orders + full depth
   live in an on-demand [data-mtab="more"] slide-up sheet. Dark teal only.
   Relies on the existing body-level flex chain (body.markets-cockpit).
   ============================================================ */
@media (max-width:1180px){

  /* ---- keep the no-scroll flex chain (DO NOT revert body to block/auto) ----
     Raised 760->1179 so ALL iPad sizes (portrait 768-1024 + landscape 1080-1179)
     use this full, proven single-column flex layout; only real desktop (>=1180)
     gets the 3-column deck. This retires the buggy 2-col drawer band entirely. */
  html{ overflow-x:hidden }
  body.markets-cockpit{
    overflow:hidden; height:100svh; max-width:100vw;
    display:flex; flex-direction:column;     /* re-assert; some earlier mobile block set display:block */
  }
  body.markets-cockpit>#main{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden }
  body.markets-cockpit #main>.wrap{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0 }
  body.markets-cockpit:not(.signed-in) .tmast{ display:block } body.markets-cockpit.signed-in .tmast{ display:none } body.markets-cockpit .tmast-stats{ display:none }

  /* #cockpit owns the viewport below the nav via the flex chain (no hardcoded calc) */
  body.markets-cockpit #cockpit{
    flex:1 1 auto; min-height:0;
    display:flex !important; flex-direction:column; grid-template-columns:none !important;
    width:100%; max-width:100vw; gap:8px; margin:0;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
    overflow:hidden; box-sizing:border-box;
  }
  body.markets-cockpit #cockpit>*{ min-width:0; max-width:100%; box-sizing:border-box }

  /* lift book + ticket out of the side aside into the column flow */
  body.markets-cockpit .ckpt-side{ display:contents }
  body.markets-cockpit .res-tools{ display:none !important }   /* curator tool off mobile */
  body.markets-cockpit .mtabbar,
  body.markets-cockpit .mtradebar{ display:none !important }   /* no tab bar, no dock */

  /* ============ 1) MARKET HEADER (auto height) — SEAMLESS, floats on black ============ */
  body.markets-cockpit .ck-mkthead{
    flex:0 0 auto; padding:9px 12px 10px;
    border:none; background:transparent; border-radius:0; box-shadow:none;
  }
  body.markets-cockpit .ck-mkt-top{ flex-wrap:wrap; gap:7px }
  body.markets-cockpit .ck-mkthead .m-q{
    font-size:14.5px; line-height:1.28; margin:6px 0 0;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; white-space:normal; word-break:break-word; color:var(--ct);
  }
  body.markets-cockpit .rail-drawer-btn{ background:rgba(210,222,235,.06); color:var(--gold); border-color:var(--cline) }
  body.markets-cockpit .ck-pxrow{ display:flex; flex-wrap:wrap; gap:16px; row-gap:6px; margin-top:7px }
  body.markets-cockpit .ck-cap, body.markets-cockpit #vsLine{ display:none !important }
  body.markets-cockpit .prob-bar{ display:none }

  /* ============ 2) MINI CHART (short, fixed) ============ */
  body.markets-cockpit .ck-hero{
    flex:0 0 auto; display:flex; flex-direction:column; min-height:0;
    border:1px solid var(--cline); background:var(--cpanel); border-radius:10px; overflow:hidden;
  }
  body.markets-cockpit .ck-hero .phead{ padding:5px 10px }
  body.markets-cockpit .ck-tabs{ padding:4px 8px 0; gap:2px }
  body.markets-cockpit .ck-tab{ padding:6px 10px 7px; font-size:11.5px }
  body.markets-cockpit .ck-herobody{ position:static; height:auto; flex:0 0 auto }
  body.markets-cockpit .ck-paneview{ position:static }                 /* base is absolute/inset:0 */
  body.markets-cockpit .ck-paneview[data-view="chart"]{ padding:6px 6px 8px; display:block }
  body.markets-cockpit .ck-chart{ height:auto; padding:0; background:transparent; border:none }
  body.markets-cockpit .ck-chart svg#curve{ height:104px !important; width:100% !important; display:block }
  /* Calibration / Rules: same fixed slot, may scroll within the hero only */
  body.markets-cockpit .ck-paneview[data-view="calib"],
  body.markets-cockpit .ck-paneview[data-view="rules"]{
    padding:10px 12px; max-height:150px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }

  /* ============ 3) COMPACT 3-LEVEL BOOK (best ask / mid / best bid) ============ */
  body.markets-cockpit .ck-book{
    flex:0 0 auto; display:flex; flex-direction:column; min-height:0;
    border:1px solid var(--cline); background:var(--cpanel); border-radius:10px; overflow:hidden;
  }
  body.markets-cockpit .ck-book .phead{ padding:5px 11px; display:flex; align-items:center; justify-content:space-between }
  body.markets-cockpit .ck-book .bk-more{
    font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.3px;
    color:var(--amb); background:var(--teal-bg); border:1px solid var(--teal-bd); border-radius:6px; cursor:pointer; padding:5px 11px;
  }
  body.markets-cockpit #ckBookHint, body.markets-cockpit .ck-bookhint{ display:none !important }
  body.markets-cockpit .ck-book .depth{
    display:block !important; padding:5px 10px 7px; margin:0;
    max-height:none; overflow:hidden;   /* clipped to 3 rows by the selectors below */
  }
  /* hide every ask except the best (adjacent to mid), every bid except the best */
  body.markets-cockpit .ck-book .depth .dl-row.ask{ display:none }
  body.markets-cockpit .ck-book .depth .dl-row.ask.best{ display:grid }
  body.markets-cockpit .ck-book .depth .dl-row.bid{ display:none }
  body.markets-cockpit .ck-book .depth .dl-row.bid.best{ display:grid }
  body.markets-cockpit .ck-book .depth .dl-row{
    height:20px; grid-template-columns:34px 1fr 44px; column-gap:10px; padding:0 4px;
  }
  body.markets-cockpit .ck-book .depth .dl-bar{ height:11px }
  body.markets-cockpit .ck-book .depth .dl-px{ font-size:12px }
  body.markets-cockpit .ck-book .depth .dl-sz{ font-size:11px }
  body.markets-cockpit .ck-book .depth .dl-mid{ margin:4px 0; padding:4px 10px }
  body.markets-cockpit .ck-book .depth .dl-head{ display:none }

  /* ============ 4) INLINE TICKET — fills slack, Buy pinned to bottom ============ */
  body.markets-cockpit .ticket{
    flex:1 1 auto; display:flex; flex-direction:column; min-height:0;
    position:static; box-shadow:none;
    border:1px solid var(--teal-bd); background:var(--cpanel) !important; border-radius:10px;
  }
  /* dock cells stack vertically on phones (the desktop horizontal band would overflow) */
  body.markets-cockpit .ticket .tk-setup,
  body.markets-cockpit .ticket .tk-review{ flex-direction:column; gap:0 }
  body.markets-cockpit .ticket .tk-cell{ border-left:none; padding:8px 11px; gap:7px }
  body.markets-cockpit .ticket .tk-cell + .tk-cell{ border-top:1px solid var(--csoft) }
  body.markets-cockpit .ticket .tk-lab{ display:none }
  body.markets-cockpit .ticket .size input{ font-size:18px; width:auto; flex:1 }
  body.markets-cockpit .ticket .phead{ padding:5px 11px }
  /* the sticky ticket is the only thing on screen once the ladder scrolls off,
     so surface the active side's touch ticks here (matches the mirrored book). */
  body.markets-cockpit .t-strip{ display:inline-block }
  body.markets-cockpit .ticket-body{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    display:flex; flex-direction:column; gap:7px; padding:8px 11px 10px;
  }
  body.markets-cockpit .tk-controls .sides{ gap:7px }
  body.markets-cockpit .tk-controls .side-btn{ min-height:46px; padding:7px 12px }
  body.markets-cockpit .tk-controls .side-btn .s-px{ font-size:18px }
  body.markets-cockpit .ticket .ck-segrow{ display:flex; gap:7px }
  body.markets-cockpit .ticket .ck-segrow .mode{ flex:1 }
  body.markets-cockpit .ticket .ck-segrow .mode button{ min-height:38px; font-size:12px }
  body.markets-cockpit .ticket .limit-row{ display:flex; align-items:center; gap:10px }
  body.markets-cockpit .ticket .size{ display:flex; align-items:center; justify-content:space-between; gap:10px }
  body.markets-cockpit .ticket .size input,
  body.markets-cockpit #limitTick{ min-height:44px; font-size:17px; width:108px }
  body.markets-cockpit .ticket .chips{ display:flex; gap:6px }
  body.markets-cockpit .ticket .chips .chip{ flex:1; min-height:38px; font-size:12px }
  /* preview = one tight row so it never eats the Buy button */
  body.markets-cockpit .ticket .preview{
    display:flex !important; flex-direction:row; gap:10px; padding:6px 10px !important;
    border-left:3px solid var(--ck-blue); align-items:stretch; margin:0;
  }
  body.markets-cockpit .ticket .preview .pv-item{ flex:1; display:flex; flex-direction:column; gap:1px; margin:0 !important; min-width:0 }
  body.markets-cockpit .ticket .preview .pv-item .pl{ font-size:8.5px; line-height:1.15 }
  body.markets-cockpit .ticket .preview .pv-item .pv{ font-size:12.5px; line-height:1.2; white-space:nowrap }
  body.markets-cockpit .ticket .t-move{ display:none !important }
  body.markets-cockpit .ticket .hold{ display:none !important }
  body.markets-cockpit .ticket .t-msg{ min-height:0; margin:0; font-size:11px }
  body.markets-cockpit .ticket .do{
    margin-top:auto; position:static; min-height:50px; font-size:16px; padding:13px 0;
  }

  /* ============ POSITIONS / ORDERS off the single screen ============ */
  body.markets-cockpit .ck-lower{ display:none }

  /* ============ "MORE" SLIDE-UP SHEET (positions + open orders) ============ */
  body.markets-cockpit .more-scrim{ display:none; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.55) }
  body.markets-cockpit[data-mtab="more"] .more-scrim{ display:block }
  body.markets-cockpit[data-mtab="more"] .ck-lower{
    display:flex; flex-direction:column; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:56;
    max-height:82svh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:14px 12px calc(16px + env(safe-area-inset-bottom,0px));
    background:var(--cpanel); border-top:1px solid var(--cline); border-radius:14px 14px 0 0;
    box-shadow:0 -16px 40px -8px rgba(0,0,0,.6);
  }
  body.markets-cockpit[data-mtab="more"] .ck-pos,
  body.markets-cockpit[data-mtab="more"] .ck-ord{
    flex:0 0 auto; border:1px solid var(--cline); background:var(--csoft); border-radius:10px;
  }
  body.markets-cockpit[data-mtab="more"] .ck-lower .ck-scroll{ overflow:visible; padding:10px 12px 12px }
  body.markets-cockpit[data-mtab="more"] .prow.h{ display:none }
  body.markets-cockpit[data-mtab="more"] .prow{
    display:grid; grid-template-columns:1fr auto; gap:5px 12px;
    align-items:baseline; padding:12px 2px; border-top:1px solid var(--csoft); min-width:0;
  }
  body.markets-cockpit[data-mtab="more"] .ptable .prow:first-child{ border-top:none }
  body.markets-cockpit[data-mtab="more"] .prow .pm{ grid-column:1 / -1; font-size:14px; font-weight:700; line-height:1.3; white-space:normal; color:var(--ct) }
  body.markets-cockpit[data-mtab="more"] .prow .ps,
  body.markets-cockpit[data-mtab="more"] .prow .pn,
  body.markets-cockpit[data-mtab="more"] .prow .pnl{ grid-column:1 / -1; display:flex; justify-content:space-between; font-size:13px }
  body.markets-cockpit[data-mtab="more"] .prow .ps::before{ content:"Side"; color:var(--cm); font-weight:600 }
  body.markets-cockpit[data-mtab="more"] .prow .pn::before{ content:"Contracts"; color:var(--cm); font-weight:600 }
  body.markets-cockpit[data-mtab="more"] .prow .pnl::before{ content:"Profit / loss"; color:var(--cm); font-weight:600 }
  body.markets-cockpit .more-close{
    align-self:center; width:40px; height:4px; border-radius:3px; border:none;
    background:var(--cg); margin:0 auto 4px; flex:0 0 auto;
  }

  /* ============ board rail = left slide-over drawer ============ */
  body.markets-cockpit .rail-drawer-btn{ display:inline-block }
  body.markets-cockpit .ck-mkt-top{ flex-wrap:wrap; gap:8px }
  /* #cockpit>* forces position:relative (id specificity), which on tablet widths
     kept the rail IN FLOW and ate a ~410px slot. Match the id specificity here so
     the drawer is taken OUT of flow across the whole <=1024 range, not just phones.
     The 380px cap needs !important: the nuclear #cockpit *{max-width:100%!important}
     rules below otherwise beat it and the drawer opens 90vw wide on tablets. */
  body.markets-cockpit #cockpit>.ckpt-rail{
    position:fixed; top:0; left:0; bottom:0; width:90vw; max-width:380px !important; z-index:60; height:100svh;
    transform:translateX(-104%); transition:transform .26s cubic-bezier(.16,1,.3,1);
    border-radius:0 14px 14px 0; box-shadow:0 20px 60px -10px rgba(0,0,0,.55);
  }
  /* opener must carry the same id specificity as the closed rule above, or it never wins */
  body.markets-cockpit.rail-open #cockpit>.ckpt-rail{ transform:translateX(0) }
  body.markets-cockpit .rail-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:59 }
  body.markets-cockpit.rail-open .rail-scrim{ display:block }

  /* ============================================================
     MARKETS LIST — mobile sizing + tap targets for the dense
     .card.rr rows / sticky .cat-sec headers in the drawer. The
     full structure styling is BASE (above); this layers in the
     larger phone tap-target sizing only. Dark teal tokens only.
     ============================================================ */
  body.markets-cockpit .ckpt-rail .cat-sec{
    padding:6px 12px; min-height:26px; font-size:9.5px; letter-spacing:1.4px;
  }
  body.markets-cockpit .ckpt-rail .card.rr{ gap:12px; padding:11px 12px; min-height:60px }
  body.markets-cockpit .ckpt-rail .card.rr .card-q{ font-size:13px }
  body.markets-cockpit .ckpt-rail .card.rr .rr-side{ gap:2px; min-width:54px }
  body.markets-cockpit .ckpt-rail .card.rr .rr-px b{ font-size:18px }
  body.markets-cockpit .ckpt-rail .card.rr .rr-px i{ font-size:11px }
  body.markets-cockpit .ckpt-rail .card.rr .card-move{ font-size:10.5px }
  body.markets-cockpit .ckpt-rail .card.rr .card-star{ width:28px; height:28px }
  body.markets-cockpit .ckpt-rail .card.rr .card-star svg{ width:15px; height:15px }
  /* header / search / filter / toggle compaction in the drawer */
  body.markets-cockpit .ckpt-rail .rail-sticky{ padding:8px 9px }
  body.markets-cockpit .ckpt-rail .rail-tophead{ margin-bottom:7px }
  body.markets-cockpit .ckpt-rail .search-mini input{ padding:8px 10px; font-size:12px }
  body.markets-cockpit .ckpt-rail .sortseg button{ padding:9px 0; min-height:38px; font-size:11.5px }
  body.markets-cockpit .ckpt-rail .toggle{ min-height:34px; display:inline-flex; align-items:center }
}

/* nuclear width cap is fine to keep, but it must not crush the ticket flex child */
@media (max-width:1180px){
  body.markets-cockpit #cockpit *{ max-width:100% !important; box-sizing:border-box }
  body.markets-cockpit svg#curve{ width:100% !important }
}

@media (max-width:1180px) and (pointer:coarse){
  body.markets-cockpit .ticket .do,
  body.markets-cockpit .side-btn,
  body.markets-cockpit .rail-drawer-btn,
  body.markets-cockpit .ck-book .bk-more{ min-height:44px }
}

/* ---- HERO GLOBE-O: visible MOLTEN orb on phones (never white/invisible) ----
   #hlGlobeFill lives inside .hl-orbit which is display:none <=560px, so the
   gradient defs get pruned and the globe loses its fill. Pin a solid molten
   fallback so it reads on every browser/size, independent of the gradient. */
.hl-globe{ overflow:visible }
.hl-globe circle[fill^="url"]{ fill:#F6DE9B }      /* molten gold disc, gradient-independent */
.hl-globe circle[fill="none"]{ fill:none }          /* keep the rim ring transparent */
@media (max-width:560px){
  .hl-row2 .hl-globe{ width:.66em; height:.66em; filter:drop-shadow(0 0 6px rgba(232,115,28,.5)) }
}

/* ---- 3-item header rebalance (Markets / Leaderboard / How it works) ---- */
@media (min-width:1281px){
  .nav-links{ gap:4px }
  .nav-links a{ padding:8px 16px; font-size:14px; white-space:nowrap }
  /* keep logout/handle on one line in the (now guaranteed-to-fit) inline nav */
  .nav-auth #logoutLink, .nav-auth .nav-login, .wallet .who{ white-space:nowrap }
}
/* the 1281-1420 squeeze: the five longer names keep one line by giving back
   tracking room — padding only, same type */
@media (min-width:1281px) and (max-width:1420px){
  .nav-links{ gap:2px }
  .nav-links a{ padding:8px 10px }
}
@media (max-width:1280px){
  /* tighter, tappable hamburger sheet (mechanism is the #navToggle checkbox) */
  .nav .nav-links{ gap:4px; padding:8px; border-radius:0 0 12px 12px }
  .nav .nav-links a{ font-size:15px; min-height:48px; border-radius:10px }
  /* the cockpit page nav is dark-teal; keep its dropdown on-brand */
  body.markets-cockpit .nav .nav-links{ background:#0D0B08; border-top:1px solid var(--cline) }
  body.markets-cockpit .nav .nav-links a{ color:#B3A896 }
  body.markets-cockpit .nav .nav-links a.active{ background:transparent; color:#EFCE7E }
}

/* ---- mobile cockpit: force everything to fit the phone/tablet width (no horizontal clip) ---- */
@media (max-width:1180px){
  body.markets-cockpit #cockpit, body.markets-cockpit #cockpit>*,
  body.markets-cockpit .mtabbar, body.markets-cockpit .ckpt-center,
  body.markets-cockpit .ck-mkthead, body.markets-cockpit .ck-hero,
  body.markets-cockpit .ck-lower, body.markets-cockpit .ck-book,
  body.markets-cockpit .ticket{ max-width:100% !important; min-width:0 !important; box-sizing:border-box }
  body.markets-cockpit .ck-pxrow{ flex-wrap:wrap !important; row-gap:8px }
  body.markets-cockpit .ck-cap, body.markets-cockpit #vsLine{ display:none !important }
  body.markets-cockpit .ck-mkthead, body.markets-cockpit .ck-hero, body.markets-cockpit .ckpt-center{ overflow:hidden }
  body.markets-cockpit .ck-mkthead .m-q{ white-space:normal; word-break:break-word }
  body.markets-cockpit .ck-chart svg#curve, body.markets-cockpit .depth, body.markets-cockpit .ticket-body{ max-width:100% }
}

/* ---- mobile cockpit: hard width cap (nuclear) so nothing exceeds the phone/tablet width ---- */
@media (max-width:1180px){
  html{ overflow-x:hidden }
  body.markets-cockpit{ width:100%; max-width:100vw; overflow-x:hidden }
  body.markets-cockpit #cockpit{ grid-template-columns:none !important; width:100% !important; max-width:100vw !important }
  body.markets-cockpit #cockpit *{ max-width:100% !important; box-sizing:border-box }
  body.markets-cockpit svg#curve{ width:100% !important }
}

/* iPad (761-1179): the phone stack is content-width + align-items:start, so it hugs
   the left and wastes the right. Center it at a comfortable column width and let the
   panes fill that width — a clean tablet layout across portrait and landscape. */
@media (min-width:761px) and (max-width:1180px){
  body.markets-cockpit #cockpit{
    align-items:stretch;
    width:100% !important; max-width:820px !important;
    margin-left:auto !important; margin-right:auto !important;
    padding-left:18px; padding-right:18px;
  }
  body.markets-cockpit #cockpit .ticket{ margin-left:0; margin-right:0 }
}


/* ===== leaderboard footnote: subtle caption, not a box ===== */
body.lboard-page .page-note{ background:none !important; border:none !important; box-shadow:none !important; text-align:center; color:#6B6254; font-size:11px; padding:8px 0; margin:2px 0 0 }
/* trim the cockpit masthead so the columns get more height at 768 */
body.markets-cockpit .tmast{ padding-top:10px !important; padding-bottom:10px !important }

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   Markets cockpit final no-scroll fit.
   Desktop only (min-width:1181px); mobile stack (display:contents) untouched.
   Right column = seamless flex stack: a COMPACT order book on top (capped,
   ~3 asks + mid + 3 bids, scrolls if deeper) then positions + open orders
   taking the MAJORITY of the height, roomy and internally scrollable.
   The bottom ticket dock is the grid's second row, always fully visible.
   ============================================================ */
@media (min-width:1181px){
  /* Right column = seamless flex stack: a COMPACT, secondary order book on top,
     then positions + open orders taking the MAJORITY of the height, roomy and
     internally scrollable. No grid, no clipping, no boxes. */
  body.markets-cockpit .ckpt-side{
    display:flex !important; flex-direction:column;
    gap:20px !important; min-height:0; overflow:hidden !important; align-self:stretch;
  }
  /* ORDER BOOK on top — roomy, ~40% of the column; the ladder fills it and scrolls internally */
  body.markets-cockpit .ck-book{ flex:0 0 auto !important; min-height:0 !important; overflow:hidden !important; display:flex; flex-direction:column }
  body.markets-cockpit .ck-book .phead{ padding:0 2px 8px !important }
  body.markets-cockpit #ckBookHint{ display:none !important }
  /* the depth ladder fills the book pane and scrolls quietly if it runs deep */
  body.markets-cockpit .ck-book .depth{ flex:0 1 auto !important; min-height:0 !important; max-height:230px !important; overflow-y:auto; overflow-x:hidden; margin:0; padding:0 2px }
  body.markets-cockpit .ck-book .depth::-webkit-scrollbar{ width:0 }
  body.markets-cockpit .ck-book .depth .dl-head{ display:none }
  body.markets-cockpit .ck-book .dl-row{ height:19px; grid-template-columns:30px 1fr 40px; column-gap:8px; padding:0 4px }
  body.markets-cockpit .ck-book .dl-bar{ height:8px }
  body.markets-cockpit .ck-book .dl-row.best .dl-bar{ height:9px }
  body.markets-cockpit .ck-book .dl-px{ font-size:11px }
  body.markets-cockpit .ck-book .dl-sz{ font-size:10.5px }
  body.markets-cockpit .ck-book .dl-mid{ margin:3px 0; padding:5px 2px }
  body.markets-cockpit .ck-book .dl-mid-v{ font-size:13px }
  body.markets-cockpit .ck-book .dl-mid-lab{ font-size:8.5px }
  body.markets-cockpit .ck-book .dl-mid-sp{ padding:0; font-size:9.5px }
  /* positions + orders take the middle of the column, roomy and scrollable */
  body.markets-cockpit .ck-lower{ flex:1 1 auto !important; min-height:0; gap:18px }
  body.markets-cockpit .ck-pos, body.markets-cockpit .ck-ord{ min-height:0 }
  /* the cost/win/risk PREVIEW sits at the bottom of the right column, natural height, separated by space only */
  body.markets-cockpit .ck-preview{ flex:0 0 auto !important; min-height:0; border:none; background:transparent; box-shadow:none; padding-top:2px }
  /* LEGACY right-rail ticket (ticket now lives in the bottom dock, not .ckpt-side);
     these are scoped to .ckpt-side .ticket so they stay dormant and never leak
     onto the horizontal dock. The dock is styled in the base cockpit block. */
  body.markets-cockpit .ckpt-side .ticket{ flex:none !important; min-height:0; overflow:visible !important; position:static !important }
  body.markets-cockpit .ckpt-side .ticket-body{ overflow-y:auto !important; gap:5px !important; padding:8px 11px 8px !important; display:flex; flex-direction:column }
  body.markets-cockpit .ckpt-side .tk-controls .sides{ gap:6px !important; padding:3px }
  body.markets-cockpit .ckpt-side .tk-controls .side-btn{ padding:5px 11px }
  body.markets-cockpit .ckpt-side .tk-controls .side-btn .s-name{ font-size:11px }
  body.markets-cockpit .ckpt-side .tk-controls .side-btn .s-px{ font-size:15px; margin-top:0 }
  body.markets-cockpit .ckpt-side .ticket .ck-segrow{ gap:5px }
  body.markets-cockpit .ckpt-side .ticket .ck-segrow .mode button{ padding:4px 0; font-size:11px }
  body.markets-cockpit .ckpt-side .ticket .limit-collapse[data-armed="1"]{ margin-bottom:10px }
  body.markets-cockpit .ckpt-side .ticket .limit-row{ margin:0; gap:8px; display:flex; align-items:center; justify-content:space-between; }
  body.markets-cockpit .ckpt-side .ticket .limit-row label{ font-size:11px }
  body.markets-cockpit .ckpt-side .ticket .limit-in input{ padding:6px 22px 6px 9px; font-size:14px; width:84px }
  body.markets-cockpit .ckpt-side .ticket .size{ display:flex; align-items:center; justify-content:space-between; gap:8px }
  body.markets-cockpit .ckpt-side .ticket .size label{ font-size:9.5px }
  body.markets-cockpit .ckpt-side .ticket .size input{ font-size:17px; padding:7px 10px; width:96px }
  body.markets-cockpit .ckpt-side .ticket .chips{ gap:5px }
  body.markets-cockpit .ckpt-side .ticket .chips .chip{ padding:5px 0; font-size:11px }
  body.markets-cockpit .ckpt-side .ticket .preview{ display:flex !important; flex-direction:row; gap:9px; padding:6px 10px !important; align-items:stretch }
  body.markets-cockpit .ckpt-side .ticket .preview .pv-item{ display:flex !important; flex-direction:column; flex:1; gap:2px; margin:0 !important; min-width:0 }
  body.markets-cockpit .ckpt-side .ticket .t-msg{ min-height:0; margin:0; font-size:11px }
  body.markets-cockpit .ckpt-side .ticket .do{ margin-top:2px; padding:11px 0; font-size:13.5px; min-height:44px; position:static !important }
  @media (max-height:799px){
    body.markets-cockpit .ck-book .dl-row{ height:14px }
    body.markets-cockpit .ck-book .dl-mid{ margin:3px 0; padding:3px 9px }
  }
}

/* ===== Calibration tab no-scroll: the scroll was .ck-paneview overflow-y:auto; fit the pane ===== */
@media (min-width:1181px){
  body.markets-cockpit .ck-paneview[data-view=calib]{ overflow:hidden !important; padding:8px 12px !important }
  body.markets-cockpit .calibpanel{ height:100%; display:flex; flex-direction:column; overflow:hidden !important; margin:0 }
  body.markets-cockpit .calibpanel .cp-body{ flex:1 1 auto; min-height:0; overflow:hidden; grid-template-columns:168px 1fr !important; gap:14px !important; padding:10px 14px !important; align-items:start }
  body.markets-cockpit .calibpanel .cp-read{ min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:6px }
  body.markets-cockpit .calibpanel .cp-fore{ margin-bottom:2px }
  body.markets-cockpit .calibpanel .cp-qual{ gap:5px }
  body.markets-cockpit .calibpanel .cp-you{ gap:5px }
}

/* ===== Order book stays COMPACT: natural-height rungs, no stretch-to-fill ===== */
@media (min-width:1181px){
  body.markets-cockpit .ck-book .depth{ display:flex !important; flex-direction:column; justify-content:flex-start }
  body.markets-cockpit .ck-book .depth .dl-row{ flex:0 0 auto; min-height:19px }
  body.markets-cockpit .ck-book .depth .dl-mid{ flex:0 0 auto; align-self:stretch; display:flex; align-items:center }
  body.markets-cockpit .ck-book .depth .dl-bar{ height:8px }
  body.markets-cockpit .ck-book .depth .dl-row.best .dl-bar{ height:9px }
}

/* ===== YOUR POSITIONS rows — stacked position card (cockpit .ck-pos only) =====
   Row 1: full-width market NAME (wraps to a useful first part) + pinned P/L.
   Row 2: muted Side · Size · Value strip. No hover, no scroll, all 4 metrics. */
body.markets-cockpit .ck-pos .prow.h{ display:none; }   /* meta is self-labelled */
body.markets-cockpit .ck-pos .ptable{ display:flex; flex-direction:column; }

body.markets-cockpit .ck-pos .ptable .prow{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"name pnl" "meta meta";
  column-gap:12px; row-gap:5px; align-items:start; min-width:0;
  padding:13px 3px; border-top:none;
}
body.markets-cockpit .ck-pos .ptable .prow:first-child{ border-top:none; }

/* LINE 1 — market NAME owns the full panel width, wraps to 2 useful lines */
body.markets-cockpit .ck-pos .ptable .prow .pm{
  grid-area:name; min-width:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; white-space:normal;
  font-family:var(--sans); font-weight:600; font-size:12.5px;
  line-height:1.3; letter-spacing:.1px; color:var(--ct);
}

/* LINE 1 right — Unrealized P/L, pinned, color-coded, the hero number */
body.markets-cockpit .ck-pos .ptable .prow .pnl{
  grid-area:pnl; align-self:start;
  font-family:var(--cmono); font-weight:700; font-size:13px;
  text-align:right; white-space:nowrap; letter-spacing:.2px;
}
body.markets-cockpit .ck-pos .ptable .prow .pnl.pos{ color:var(--grn); }
body.markets-cockpit .ck-pos .ptable .prow .pnl.neg{ color:var(--rd); }

/* LINE 2 — muted Side · Size · Value strip, all visible, no hover */
body.markets-cockpit .ck-pos .ptable .prow .ps-meta{
  grid-area:meta; min-width:0;
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--cmono); font-size:10.5px; letter-spacing:.3px; color:var(--cm);
}
body.markets-cockpit .ck-pos .ptable .prow .ps-meta .mi{
  display:inline-flex; align-items:baseline; gap:5px; min-width:0;
}
body.markets-cockpit .ck-pos .ptable .prow .ps-meta .mk{
  color:var(--cf); text-transform:uppercase; letter-spacing:.6px; font-size:9px; font-weight:700;
}
body.markets-cockpit .ck-pos .ptable .prow .ps-meta .mv{ color:var(--ct); font-weight:500; white-space:nowrap; }
body.markets-cockpit .ck-pos .ptable .prow .ps-meta .mv.y{ color:var(--grn); }
body.markets-cockpit .ck-pos .ptable .prow .ps-meta .mv.n{ color:var(--rd); }

/* price-history chart fade-in so a flat market reads intentional, not empty */
body.markets-cockpit[data-mtab="chart"] #curve{ animation:cv-in .5s cubic-bezier(.16,1,.3,1) both }
@keyframes cv-in{ from{ opacity:0 } to{ opacity:1 } }

/* ============================================================
   UNIFIED RAISED-CELL SEGMENTED CONTROLS  (cockpit, dark teal)
   Ticket SIDE/TYPE (.ck-segrow .mode / .ordtype) · Price/Calibration/Rules
   (.ck-tab) · rail New/Active/Movers (.sortseg). ONE recipe.
   Appended at the END of styles.css to win over the flat !important
   .mode block and the underline-tab rule.
   Tokens reused from cockpit palette; selected = green/red/teal.
   The 38px eyebrow rail already exists on .ck-segrow .mode — NOT re-padded.
   ============================================================ */
body.markets-cockpit{
  --seg-cell:#1A1610;        /* raised unselected cell (= --csoft)        */
  --seg-cell-hov:#19222b;    /* hover lift                                */
  --seg-edge:#2a333d;        /* unselected cell hairline (pops vs track)  */
  --seg-edge-hov:#37424e;    /* hover edge                                */
  --seg-ink:var(--ct);       /* BRIGHT unselected label (#CFC5B4)         */
  --seg-ink-hov:var(--ctb);  /* #F1E9DC                                   */
}

/* ---------- 1) TICKET  ORDER TYPE  (Market / Limit .ordtype) ---------- */
/* Buy/Sell is no longer a segment — it is the two big action buttons. The only
   segmented control left in the dock is Market/Limit. Silver-foil track, gold on
   the active pill. NO orange. */
body.markets-cockpit .ordtype{
  background:rgba(210,222,235,.06) !important;
  border:none !important;
  box-shadow:none !important;
  padding:3px !important;
  border-radius:8px !important;
  gap:0;
}
body.markets-cockpit .ordtype button{
  color:var(--silver-lo) !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:6px;
  font-weight:600;
  transition:background .16s, color .16s;
}
body.markets-cockpit .ordtype button:hover[aria-pressed=false]{
  color:var(--silver-hi) !important;
}
/* SELECTED — active Market / Limit pill is BRAND ORANGE (#EFCE7E), not gold */
body.markets-cockpit .ordtype button[aria-pressed=true]{
  background:#EFCE7E !important;
  color:#0D0B08 !important; font-weight:700;
  box-shadow:none !important;
}

/* ---------- 2) CENTER TABS  Price / Calibration / Rules  (.ck-tab) ---------- */
/* seamless: plain floating labels, gold underline on the active one — NO track, no box */
body.markets-cockpit .ck-tabs{
  display:flex; gap:22px; align-items:stretch;
  padding:0 4px; margin:6px 4px 0;
  background:none; border:none;
  border-radius:0; box-shadow:none;
}
body.markets-cockpit .ck-tab{
  flex:0 0 auto; padding:5px 0 8px;
  color:var(--foil2); background:none;
  border:none; border-bottom:none;
  border-radius:0;
  box-shadow:none;
  font-weight:500; position:relative;
  transition:color .16s;
}
body.markets-cockpit .ck-tab:hover[aria-selected="false"]{
  background:none; color:var(--foil);
  box-shadow:none;
}
body.markets-cockpit .ck-tab[aria-selected="true"]{
  background:none; color:var(--foil); font-weight:600;
  box-shadow:none; text-shadow:none;
}
body.markets-cockpit .ck-tab[aria-selected="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:#EFCE7E;   /* active tab underline is BRAND ORANGE, not gold */
}
body.markets-cockpit .ck-tab .mb-count{ color:var(--cm) }
body.markets-cockpit .ck-tab[aria-selected="true"] .mb-count{ color:var(--amb) }

/* ---------- 3) RAIL FILTER  New / Active / Movers  (.sortseg) ---------- */
/* seamless: no track, no keycaps — just labels with an underline on the active one */
body.markets-cockpit .ckpt-rail .sortseg{
  display:flex; width:100%; gap:2px; padding:0;
  background:transparent; border:none;
  border-radius:0; overflow:visible; box-shadow:none;
}
body.markets-cockpit .ckpt-rail .sortseg button{
  flex:1; padding:5px 0; border:none; cursor:pointer; font-size:11px; font-weight:600;
  color:var(--seg-ink); background:transparent;
  border-radius:0; box-shadow:none;
  transition:background .16s, color .16s, box-shadow .16s;
}
body.markets-cockpit .ckpt-rail .sortseg button:hover[aria-pressed="false"]{
  background:transparent; color:var(--seg-ink-hov); box-shadow:none;
}
body.markets-cockpit .ckpt-rail .sortseg button[aria-pressed="true"]{
  background:transparent; color:var(--amb); font-weight:700;
  box-shadow:inset 0 -2px 0 var(--amb);
}

/* ---------- 4) MOBILE (<768px) — keep tap targets, same track ---------- */
@media (max-width:768px){
  body.markets-cockpit .ck-tabs{ margin:0; padding:3px; gap:3px }
  body.markets-cockpit .ck-tab{ font-size:11.5px; padding:7px 8px }
  body.markets-cockpit .ck-segrow .mode button{ min-height:38px !important; font-size:12px }
  body.markets-cockpit .ckpt-rail .sortseg button{ min-height:44px }
}

/* ── Net-worth balance component (shared by nav #balance and ticket #ticketBal) ── */
.nw{ display:inline-flex; flex-direction:column; align-items:flex-end; gap:1px;
     line-height:1.04; font-family:var(--mono); position:relative; }
.nw-btn{ all:unset; cursor:pointer; display:inline-flex; flex-direction:column;
         align-items:flex-end; gap:1px; }
.nw-net{ display:inline-flex; align-items:center; gap:4px;
         font-weight:500; font-size:17px; color:var(--ink);
         font-variant-numeric:tabular-nums lining-nums; }
.nw-net .mango{ width:1em; height:1em; vertical-align:-.12em; }
.nw-free{ font-size:10px; color:var(--royal); letter-spacing:.01em;
          font-variant-numeric:tabular-nums lining-nums; }

/* popover breakdown */
.nw-pop{ display:none; position:absolute; top:calc(100% + 8px); right:0; left:auto;
         z-index:60; min-width:188px; max-width:min(260px,calc(100vw - 16px));
         padding:10px 12px; border-radius:10px; text-align:left;
         background:#0E0C09; border:1px solid #262019;
         box-shadow:0 12px 30px -10px rgba(0,0,0,.6); }
.nw.open .nw-pop{ display:block; }
@media (hover:hover){ .nw:hover .nw-pop{ display:block; } }
.nw-row{ display:grid; grid-template-columns:1fr auto; align-items:baseline;
         gap:10px; padding:4px 0; }
.nw-row .k{ font-size:11px; color:var(--ink-3); letter-spacing:.02em; }
.nw-row .v{ font-size:13px; color:var(--ink);
            font-variant-numeric:tabular-nums lining-nums; }
.nw-row.tot{ margin-top:5px; padding-top:7px; border-top:1px solid #262019; }
.nw-row.tot .k{ color:var(--ink-2); font-weight:600;
                text-transform:uppercase; letter-spacing:.08em; font-size:9.5px; }
.nw-row.tot .v{ color:var(--royal); font-weight:600; font-size:14px; }
.nw-row .v .mango{ width:1em; height:1em; vertical-align:-.12em; }

/* ── Cockpit ticket header: theme-correct teal, sized to the phead ── */
body.markets-cockpit .ck-bal .nw{ font-family:var(--cmono); }
body.markets-cockpit .ck-bal .nw-net{ font-size:15px; color:var(--amb); }
body.markets-cockpit .ck-bal .nw-free{ color:var(--ambd); font-size:9.5px; }
body.markets-cockpit .ck-bal .nw-pop{ background:var(--cpanel); border-color:var(--cline); }
body.markets-cockpit .ck-bal .nw-row .k{ color:var(--cf); }
body.markets-cockpit .ck-bal .nw-row .v{ color:var(--ct); }
body.markets-cockpit .ck-bal .nw-row.tot .k{ color:var(--ambd); }
body.markets-cockpit .ck-bal .nw-row.tot .v{ color:var(--amb); }

/* the literal "BAL " text node in the ticket phead is now redundant */
body.markets-cockpit .ck-bal{ font-size:0; }        /* kills the "BAL " text node */
body.markets-cockpit .ck-bal .nw{ font-size:initial; }

/* ── Mobile compaction ── */
@media (max-width:560px){
  .nw-net{ font-size:15px; }
  body.markets-cockpit .ck-bal .nw-net{ font-size:14px; }
  .nw-free{ font-size:9.5px; }
  .nw-btn{ min-height:40px; justify-content:center; }   /* ≥40px tap target */
  .nw-pop{ right:8px; }
}

/* ============================================================
   MOBILE MOLTEN REBRAND — carry the brand onto phones (2026-07-02)
   ============================================================ */
.mdock{ display:none }
@media (max-width:760px){
  /* signature hero: make Trade for Mangos pop on a phone */
  body.markets-cockpit .tmast{ padding:24px 16px 16px; border-radius:14px }
  body.markets-cockpit .tmast-kick{ font-size:9.5px; letter-spacing:.15em; margin-bottom:9px }
  body.markets-cockpit .tmast-title{ font-size:clamp(38px,11.5vw,52px) }
  body.markets-cockpit .tmast-lede{ font-size:14px; margin-top:11px }
  body.markets-cockpit .tmast-stats{ margin-top:14px; padding-top:13px }
  body.markets-cockpit .tmast-stat{ padding:0 15px }
  body.markets-cockpit .tmast-num{ font-size:19px }
  body.markets-cockpit.signed-in .tmast{ padding:12px 14px }

  /* branded market cards: pill yes/no */
  body.markets-cockpit .card-yn{ margin-top:10px; gap:6px }
  body.markets-cockpit .card-yn .y{ background:rgba(47,208,122,.12); padding:4px 9px; border-radius:7px }
  body.markets-cockpit .card-yn .n{ background:rgba(240,88,79,.10); padding:4px 9px; border-radius:7px }

  /* signed-out mobile dock: cold-start CTA into the game */
  .mdock{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    align-items:center; justify-content:center;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    text-decoration:none; font-family:var(--sans); font-weight:800; font-size:15px;
    color:#241B07; background:linear-gradient(180deg,#FCEFC6,#F6DE9B 44%,#C9A34E); box-shadow:0 -10px 26px -10px rgba(0,0,0,.8) }
  body.signed-in .mdock{ display:none }
  body.markets-cockpit:not(.signed-in) #main{ padding-bottom:66px }
}

/* auth pages: molten hairline on the card + hard-centered (login / join / welcome) */
body.warm:not(.markets-cockpit) .form-card{ position:relative; margin-left:auto; margin-right:auto; overflow:hidden }
body.warm:not(.markets-cockpit) .form-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#F6DE9B,#F6DE9B 34%,#EFCE7E 66%,#A8823B) }

/* ---- Compact the signed-out board hero so the board leads and no vertical space is wasted ---- */
body.markets-cockpit:not(.signed-in) .tmast{ padding:15px 20px 13px }
body.markets-cockpit:not(.signed-in) .tmast-kick{ font-size:10px; letter-spacing:.16em; margin-bottom:6px }
body.markets-cockpit:not(.signed-in) .tmast-title{ font-size:30px; line-height:1.02 }
body.markets-cockpit:not(.signed-in) .tmast-lede{ font-size:13.5px; margin-top:7px }
@media (max-width:620px){
  body.markets-cockpit:not(.signed-in) .tmast-title{ font-size:24px }
  body.markets-cockpit:not(.signed-in) .tmast-lede{ font-size:12.5px }
}

/* ---- Compact horizontal footer (kills the tall, sparse sitemap block) ---- */
footer{ margin-top:34px; padding:22px 0 26px }
.foot-rich{ gap:22px; padding:4px 0 14px; align-items:start }
.foot-col h2{ margin:0 0 8px }
.foot-col a{ margin-bottom:6px; font-size:13px; line-height:1.2 }
.foot-brand .brand-name{ font-size:16px } .foot-brand p{ margin-top:8px; font-size:12.5px; max-width:32ch }
.disc{ margin-top:10px }

/* On the board homepage (the hero) the Markets tab is redundant — you are already on it */
/* Markets tab stays visible on every page so the nav never reflows */

/* ============================================================
   OPEN ORDERS — precise aligned table (cockpit .ck-ord + sheet).
   app.js emits: .oo-row > [.oo-main > .oo-side badge + <b>N side</b> + "@ T%"
   + .oo-sub(question · escrow)] + button.oo-cancel. Style the rows into a
   quiet monospace ledger: fixed side column, aligned price, hairline seams,
   a subtle cancel affordance. No boxes. Structure untouched (no app.js edit).
   ============================================================ */
body.markets-cockpit .ck-ord .open-orders,
body.markets-cockpit .ck-ord #ooList{ margin:0 !important; padding:0 !important; border:none !important; background:transparent !important; display:block !important }
body.markets-cockpit #ooList{ grid-template-columns:none !important; column-gap:0 !important }
/* row: main text (grows) + cancel (auto), split by a hairline. app.js nests
   .oo-side + <b>N side</b> + "@ T%" + .oo-sub INSIDE .oo-main, so grid the
   INNER .oo-main (its real children) and keep the row a simple 2-part flex. */
body.markets-cockpit #ooList .oo-row{
  display:flex !important; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 3px !important; margin:0;
  border:none !important; border-radius:0;
  background:transparent !important; color:var(--ct);
}
body.markets-cockpit #ooList .oo-row:first-child{ border-top:none !important }
/* main = 2-line aligned block: [badge] [N side @ T%] on row 1, question+escrow on row 2 */
body.markets-cockpit #ooList .oo-main{
  flex:1 1 auto; min-width:0;
  display:grid; grid-template-columns:44px minmax(0,1fr); align-items:baseline;
  column-gap:10px; row-gap:2px;
  font-family:var(--cmono); font-variant-numeric:tabular-nums;
  font-size:12px; color:var(--ct); line-height:1.35;
}
/* side badge: fixed narrow column, quiet tint */
body.markets-cockpit #ooList .oo-side{
  grid-column:1; grid-row:1; align-self:center;
  font-family:var(--cmono); font-size:9px; font-weight:700; letter-spacing:.06em;
  text-align:center; padding:3px 0; border-radius:3px;
}
body.markets-cockpit #ooList .oo-side.buy{ background:rgba(47,208,122,.14); color:var(--grn) }
body.markets-cockpit #ooList .oo-side.sell{ background:rgba(240,88,79,.14); color:var(--rd) }
/* the "<b>N side</b> @ T%" text is a bare inline run in column 2, row 1 */
body.markets-cockpit #ooList .oo-main b{ color:var(--ctb); font-weight:700 }
/* second line: question · escrow, quiet sans, clamped, spanning full width */
body.markets-cockpit #ooList .oo-sub{
  grid-column:1 / 3; grid-row:2; margin:0;
  font-family:var(--sans); font-size:10.5px; color:var(--cf); font-variant-numeric:normal;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* cancel: quiet ghost control, reddens on hover */
body.markets-cockpit #ooList .oo-cancel{
  flex:0 0 auto; align-self:center;
  font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  padding:5px 9px; border:1px solid var(--csoft); border-radius:4px;
  background:transparent; color:var(--cm); cursor:pointer; white-space:nowrap;
}
body.markets-cockpit #ooList .oo-cancel:hover{ border-color:var(--rd); color:var(--rd); background:rgba(240,88,79,.08) }

/* Andy: only ONE position element in the right rail — hide the redundant order-preview panel (positions table + open orders remain, bigger). */
body.markets-cockpit .ck-preview{ display:none !important }

/* ── Andy 07-06c: SITEWIDE WARM-PLATINUM SILVER (matches the hero tagline foil, hue 33)
   — the cool blue-silver text tokens re-tinted so every page shares one silver family;
   nav links included. Bank blue exception untouched. ── */
body.warm .nav-links a{ color:#CFC5B4 }
body.warm .nav-links a:hover{ color:#F1E9DC }
body.warm .nav-login{ color:#CFC5B4 }
body.warm .wallet .lab, body.warm .who{ color:#A79C8D }
body.markets-cockpit{
  --ct:#CFC5B4; --ctb:#F1E9DC; --cm:#A79C8D; --cf:#8B8172; --cg:#6B6254;
  --foil:#EDE5D8; --foil2:#BFB4A3;
  --silver-hi:#F7F2EA; --silver:#D6CCBB; --silver-lo:#A89A87;
}

/* ── Andy 07-06f: FAQ + LEGAL last oranges -> gold family (orange is ONLY the logo + mango) ── */
body.warm:not(.markets-cockpit) .faq summary::after{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .faq .fa a{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .faq .fa a:hover{ color:#F6DE9B }
body.warm:not(.markets-cockpit) .toc a{ color:#EFCE7E }
body.warm:not(.markets-cockpit) .shd-title, body.warm:not(.markets-cockpit) .prose .shd-title{ color:#EFCE7E }
body.warm .legal .lh{ color:#C9A34E }
body.warm .legal a{ color:#EFCE7E }
body.warm .faq details[open] summary{ border-bottom:1px solid #262019 !important }
body.warm .faq details[open]{ border-color:#3A2F1B }
/* 07-06g: FAQ open-state divider — kill every possible orange edge source */
body.warm .faq details summary, body.warm .faq details[open] summary{ border-color:#262019 !important; box-shadow:none !important }
body.warm .faq .fa{ border:none !important; box-shadow:none !important }
body.warm .faq details, body.warm .faq details[open]{ box-shadow:none !important }
body.warm:not(.markets-cockpit){ --line-2:#262019 }

/* ── Andy 07-06h: primary CTAs -> GOLD (orange lives ONLY on the logo + mango) ── */
body.warm .nav-cta, body.warm .nav-cta:hover, body.warm .snav .nav-cta, body.warm .snav .nav-cta:hover{
  background:linear-gradient(180deg,#FCEFC6,#F6DE9B 44%,#C9A34E) !important; color:#241B07 !important }
body.warm .btn-primary{ background:linear-gradient(180deg,#FCEFC6,#F6DE9B 44%,#C9A34E) !important; color:#241B07 !important; box-shadow:0 1.5px 0 #6E5A24 !important }
body.warm .btn-primary:hover{ filter:brightness(1.05); background:linear-gradient(180deg,#FCEFC6,#F6DE9B 44%,#C9A34E) !important; color:#241B07 !important }

/* ── Andy 07-06i: section-header rails/icons + eyebrows -> GOLD sitewide (legal/faq/how footers) ── */
body.warm:not(.markets-cockpit) .shd-rail{ background:linear-gradient(180deg,#F6DE9B 0%,#EFCE7E 50%,#C9A34E 100%) !important; box-shadow:0 2px 8px rgba(201,163,78,.25) !important }
body.warm:not(.markets-cockpit) .shd-kick{ color:#C9A34E !important }
body.warm:not(.markets-cockpit) .shd-mark{ border-color:#3A2F1B !important; background:linear-gradient(155deg,#1A1610 0%,#0E0C09 100%) !important }
body.warm:not(.markets-cockpit) .shd-mark svg [stroke^="url"]{ stroke:#EFCE7E !important }
body.warm:not(.markets-cockpit) .shd-mark svg [fill^="url"]{ fill:#EFCE7E !important }

/* ── Andy 07-06j: page H1s + form-card top bar -> GOLD (login/join/setup/success) ── */
body.warm:not(.markets-cockpit) .phero h1, body.warm:not(.markets-cockpit) h1.head, body.warm:not(.markets-cockpit) .trade-h1{
  background:linear-gradient(178deg,#FCEFC6 0%,#F6DE9B 30%,#EFCE7E 62%,#C9A34E 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#EFCE7E !important }
body.warm:not(.markets-cockpit) .phero h1 .pop, body.warm:not(.markets-cockpit) h1.head .pop{ color:#F6DE9B !important; -webkit-text-fill-color:#F6DE9B !important; background:none !important }
body.warm:not(.markets-cockpit) .form-card::before{ background:linear-gradient(90deg,#FCEFC6,#F6DE9B 34%,#EFCE7E 66%,#C9A34E) !important }

/* ── Andy 07-06k: THE TOKEN KILL — every remaining orange accent -> gold, in one stroke.
   The FAQ "touch line" was the global :focus-visible outline (var(--violet) = orange).
   Nav active/hover/underline, balance number, wallet dot — all rode the same tokens. ── */
body.warm{
  --royal:#EFCE7E; --violet:#EFCE7E; --violet-deep:#EFCE7E; --violet-bright:#F6DE9B;
  --grad:linear-gradient(180deg,#FCEFC6,#F6DE9B 44%,#C9A34E);
  --violet-soft:#2A2208; --violet-soft-2:#1C1705; --orange:#EFCE7E;
}
body.warm .nav-links a.active{ color:#EFCE7E !important }
body.warm .nav-links a.active::after{ background:#EFCE7E !important; box-shadow:none !important }
body.warm.markets-cockpit nav .nav-links a.active{ color:#EFCE7E !important }
body.warm .wallet .dot{ background:#EFCE7E !important }
body.warm .wallet .amt{ color:#F6DE9B !important }
body.warm .snav-links a:hover{ color:#EFCE7E !important }
:focus-visible{ outline-color:#EFCE7E !important }

/* ── Andy 07-06k2: markets right column must NOT shift when toggling Yes/No —
   pin the price label + input widths so the row geometry is constant ── */
body.markets-cockpit .ckpt-side .ck-order-controls #limitLab{ display:inline-block; min-width:64px }
body.markets-cockpit .ckpt-side .ck-order-controls .tk-price{ min-width:150px; justify-content:flex-end }
body.markets-cockpit .ckpt-side .ck-order-controls .side-btn{ min-height:52px }
body.markets-cockpit .ckpt-side .ck-order-controls .side-btn .s-px{ font-variant-numeric:tabular-nums }

/* ============================================================
   CHROME v1 — ONE UNIFORM SITE CHROME (Andy UX pass 2026-07-06)
   The header, footer, links, and buttons are the constants of the
   site: identical warm-black chrome on every page. The bank keeps
   its blue SCENE and the cockpit keeps its locked skin — but the
   chrome they sit inside is the same everywhere. Appended last so
   it wins the cascade; !important only where an older layer or a
   page-local block would otherwise fork the chrome.
   Contrast (WCAG on #0B0906): #CFC5B4 10.7:1, #F1E9DC 13:1,
   #EFCE7E 11.7:1 — all AAA. Hover = neutral warm fill + platinum
   lift (transient signal); active = gold text + underline, no fill
   (location signal). Two different signals, never confused.
   ============================================================ */

/* -- 1. Header: one warm black, seamless, on every page -- */
body.warm nav.nav, body.warm .nav{
  background:#0B0906 !important;
  border-bottom:none !important;
  box-shadow:none !important;
}
/* inline nav (>=1281, the hamburger gate's twin): the link cluster floats on
   the black — no panel behind it */
@media (min-width:1281px){
  body.warm .nav .nav-links{ background:transparent !important; border:none !important }
}
/* hamburger band (<=1280): the dropdown sheet stays solid so it reads over
   page content — this gate must always equal the hamburger gate or the band
   between them renders floating panel-less links (found live 0717) */
@media (max-width:1280px){
  body.warm .nav .nav-links{ background:#0E0C09 !important; border:none !important;
    border-bottom:1px solid #262019 !important }
}

/* -- 2. Header text: one platinum family; gold marks only the active page -- */
body.warm .nav-links a{ color:#CFC5B4 }
body.warm .nav-links a:hover{ color:#F1E9DC; background:#1A1610 }
body.warm .nav-links a.active, body.warm .nav-links a.active:hover{
  color:#EFCE7E !important; background:transparent !important }
body.warm .nav-login, body.warm #logoutLink{ color:#CFC5B4 }
body.warm .nav-login:hover, body.warm #logoutLink:hover{ color:#F1E9DC; background:#1A1610 }
body.warm .who, body.warm #navHandle{ color:#A79C8D }

/* -- 3. Wallet chip: same quiet warm capsule everywhere -- */
body.warm .wallet{ background:#0E0C09; border:1px solid #262019; box-shadow:none }
body.warm .wallet .lab{ color:#8B8172 }

/* -- 4. Buttons: press feedback on every button-shaped control -- */
body.warm .nav-cta:active, body.warm .btn-primary:active, body.warm .btn-ghost:active{
  transform:translateY(1px); filter:brightness(.97) }

/* -- 5. The missing color schemes: selection + scrollbars (Windows) -- */
::selection{ background:#3A2F1B; color:#F1E9DC }
html{ scrollbar-color:#3A2F1B #0B0906 }
::-webkit-scrollbar{ width:12px; height:12px; background:#0B0906 }
::-webkit-scrollbar-thumb{ background:#262019; border-radius:6px; border:2px solid #0B0906 }
::-webkit-scrollbar-thumb:hover{ background:#3A2F1B }
::-webkit-scrollbar-corner{ background:#0B0906 }

/* -- 6. The fixed copyright never overlaps a game screen (arcade has its
   own footer below the fold; everywhere else it stays) -- */
/* the fixed copyright overlay is only for the two no-scroll pages (leaderboard +
   markets cockpit) that have no in-flow footer; on scrolling pages it floats over
   the bottom content and is redundant with the footer credit, so hide it there. */
body:not(.lboard-page):not(.markets-cockpit) .copyr{ display:none }

/* -- 6b. The page GROUND is the warm law black, not the cool legacy token.
   faq/legal (and any page that never overrides --bg) sat on cool #07090c while
   the nav above them was warm — the "off shades" Andy caught. Pages with their
   own later background blocks (landing, markets, bank, arcade) still win. -- */
body.warm{ --bg:#0B0906; --bg-soft:#12100B; background-color:#0B0906 }
body.warm .toc a:hover{ color:#F6DE9B }

/* -- 6c. Trade-flight feedback: the pressed key PULSES while the order is on the
   wire (sending never reads as a dead key), and the balance readout ticks green
   or red when money actually moves — the number itself confirms the fill. -- */
body.warm .tk-quad .do.pending{ animation:doPending .7s ease-in-out infinite alternate }
@keyframes doPending{ from{ filter:brightness(.92) } to{ filter:brightness(1.14) } }
@keyframes nwTickUp{ 0%{ color:#2fd07a } 100%{ color:inherit } }
@keyframes nwTickDn{ 0%{ color:#f0584f } 100%{ color:inherit } }
body.warm .nw.nw-up .nw-net{ animation:nwTickUp 1.1s ease-out 1 }
body.warm .nw.nw-dn .nw-net{ animation:nwTickDn 1.1s ease-out 1 }

/* -- 7. Mobile menu: a full-width HORIZONTAL row of link pills (Andy 07-06:
   "the links should be horizontal if possible"). The old sheet shrink-wrapped
   into a tall narrow floating column (the desktop grid's justify-self:center
   survives on the absolutely positioned sheet and collapses its width); pin
   the width explicitly so the sheet always spans the header edge to edge.
   Visibility stays owned by the existing .nav-toggle:checked rule. -- */
@media (max-width:1280px){
  body.warm .nav .nav-links{
    position:absolute !important; left:0 !important; right:0 !important; top:100% !important;
    width:100% !important; box-sizing:border-box !important;
    justify-self:auto !important; align-self:auto !important;
    flex-direction:row !important; flex-wrap:wrap !important;
    justify-content:center !important; align-items:center !important;
    gap:7px !important; padding:11px 12px !important; margin:0 !important;
    background:#0E0C09 !important; border:none !important;
    border-bottom:1px solid #262019 !important; border-radius:0 0 14px 14px !important;
    box-shadow:0 22px 34px -20px rgba(0,0,0,.85) !important;
  }
  body.warm .nav .nav-links a{
    flex:0 0 auto !important; display:inline-flex !important; align-items:center !important;
    min-height:44px !important; padding:8px 14px !important; font-size:13.5px !important;
    border-radius:999px !important; border:1px solid #262019 !important; background:#12100B !important;
  }
  body.warm .nav .nav-links a.active{ border-color:#6E5A24 !important; background:#1C1705 !important }
}

/* -- 8. Nav daily Claim key (Andy backlog: claim available while logged in shows
   Claim + Balance + Log out together). Painted by nav.js only when the server
   says today's claim is open; standard gold CTA metal, engraved dark glyph. -- */
body.warm .nav-claim{
  display:inline-flex; align-items:center; min-height:30px; padding:5px 13px !important;
  border-radius:999px !important; font-weight:800; font-size:13px; letter-spacing:.2px;
  color:#2A1F04 !important; text-decoration:none !important;
  background:linear-gradient(165deg,#F7A11E,#EFCE7E 55%,#A8823B) !important;
  box-shadow:0 1.5px 0 #6E5A24, 0 5px 13px rgba(70,18,6,.2);
}
body.warm .nav-claim:hover{ transform:translateY(-1px); color:#2A1F04 !important }

/* ═══ LOGO CANDY (Andy's pick, 2026-07-07 bakeoff: "I chose number 1 candy") —
   pourable candy letters in a deep-orange shell with a hard cream gloss band,
   a glossy sticker leaf sprouting off the T, .com demoted to a small flat
   orange suffix where the wireframe globe still plays the o. Painted by nav.js
   paintWordmark; these rules dress the .te-candy spans. The old .te-word paint
   (~line 1086) is neutralized by the .te-candy override, NOT removed; the hero
   .hl-molten is untouched and PROTECTED. Layering: the element itself is the
   candy SHELL (fat stroke + pour extrude); ::after repaints the glyphs with the
   glazed gradient on top. ═══ */
.brand-name .te-word.te-candy{ background:none; -webkit-background-clip:border-box; background-clip:border-box; -webkit-text-fill-color:currentColor; color:inherit; text-shadow:none }
.te-candy .te-cbody{ position:relative; display:inline-block;
  color:#E8740F; -webkit-text-fill-color:#E8740F; -webkit-text-stroke:.052em #E8740F;
  text-shadow:0 .035em 0 #D45B0C, 0 .07em 0 #C24E0B, 0 .10em 0 #AD3F08, 0 .13em .02em rgba(130,38,5,.5), 0 .18em .22em rgba(120,40,8,.28) }
.te-candy .te-cbody::after{ content:attr(data-t); position:absolute; left:0; top:0; -webkit-text-stroke:0; text-shadow:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.28) 12%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg,#FFE293 0%,#FFD466 30%,#FFC64A 53%,#F28608 54%,#E86F08 78%,#DA5A07 91%,#F18A28 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent }
.te-candy .te-leaf{ position:absolute; width:.8em; height:.8em; left:.12em; top:-.27em; z-index:2;
  filter:drop-shadow(0 .05em .05em rgba(20,60,10,.45)) }
.te-candy .te-csuf{ font-size:.54em; letter-spacing:.02em; margin-left:.10em;
  background:none; -webkit-text-fill-color:#EF8A18; color:#EF8A18; text-shadow:none }
.te-candy .te-csuf .te-globe{ width:.66em; height:.66em; vertical-align:-.04em; margin:0 .01em; filter:none }

/* ══════════════════════════════════════════════════════════════════════════
   FILL MICRO-INTERACTION — positions pane (Andy 07-08, approved)
   Damped-spring row entrance + single brass hairline sweep + lingering brass
   "resting rule" + per-digit odometer roll on P/L, Size, Value. Transform/opacity
   ONLY (60fps, zero layout jank). No colored background pop — green/red live
   ONLY in the semantic .pnl.pos/.neg sign + the Side Yes/No label.
   Brass tokens used: var(--gold-deep) #C9A34E, var(--gold) #EFCE7E, var(--gold-hi)
   #F6DE9B — all defined under body.markets-cockpit (styles.css ~L2208).
   NOTE: flash-up / flash-dn (styles.css ~L577-579) are for #barPctY ONLY and must
   NEVER be applied to a .prow — they are left untouched by this block.
   Every selector scoped to body.markets-cockpit .ck-pos so nothing else is touched.
   ══════════════════════════════════════════════════════════════════════════ */
/* odometer primitives — SHARED by the positions pane AND the open-orders pane (#ooList),
   so the resting-count roll reuses the exact same primitives (no duplication). */
body.markets-cockpit .ck-pos .odo,
body.markets-cockpit #ooList .odo{ display:inline-flex; align-items:baseline }
body.markets-cockpit .ck-pos .odo-fixed,
body.markets-cockpit #ooList .odo-fixed{ display:inline-block }
body.markets-cockpit .ck-pos .odo-col,
body.markets-cockpit #ooList .odo-col{ position:relative; display:inline-block; width:1ch; height:1.25em; overflow:hidden; vertical-align:baseline }
body.markets-cockpit .ck-pos .odo-strip,
body.markets-cockpit #ooList .odo-strip{ position:absolute; left:0; top:0; display:block; will-change:transform; transition:transform .62s cubic-bezier(.22,1,.28,1) }
body.markets-cockpit .ck-pos .odo-strip>span,
body.markets-cockpit #ooList .odo-strip>span{ display:block; height:1.25em; line-height:1.25em; text-align:center }
/* fill layers */
body.markets-cockpit .ck-pos .ptable .prow{ position:relative }
body.markets-cockpit .ck-pos .ptable .prow::before,
body.markets-cockpit .ck-pos .ptable .prow::after{ content:''; position:absolute; pointer-events:none; opacity:0 }
body.markets-cockpit .ck-pos .ptable .prow::before{ left:-14%; top:0; bottom:0; width:36%; mix-blend-mode:screen; transform:translate3d(-40%,0,0); background:linear-gradient(100deg,transparent 0%,rgba(233,197,110,0) 38%,rgba(246,222,155,.55) 49%,rgba(246,222,155,.9) 50%,rgba(233,197,110,0) 62%,transparent 100%) }
body.markets-cockpit .ck-pos .ptable .prow::after{ left:0; top:12%; bottom:12%; width:2px; border-radius:2px; background:linear-gradient(180deg,var(--gold-deep),var(--gold)); box-shadow:0 0 6px -1px rgba(239,206,126,.5); transform:scaleY(.6) }
/* keyframes */
@keyframes prow-settle{ 0%{ opacity:0; transform:translate3d(0,-11px,0) scale(.992) } 55%{ opacity:1; transform:translate3d(0,1.5px,0) scale(1.004) } 78%{ transform:translate3d(0,-.6px,0) scale(.999) } 100%{ opacity:1; transform:translate3d(0,0,0) scale(1) } }
@keyframes prow-sweep{ 0%{ opacity:0; transform:translate3d(-40%,0,0) } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ opacity:0; transform:translate3d(340%,0,0) } }
@keyframes prow-memory{ 0%{ opacity:0; transform:scaleY(.55) } 16%{ opacity:.9; transform:scaleY(1) } 46%{ opacity:.72; transform:scaleY(1) } 100%{ opacity:0; transform:scaleY(1) } }
@keyframes pnl-tick{ 0%{ transform:translate3d(0,0,0) } 32%{ transform:translate3d(0,-2px,0) } 100%{ transform:translate3d(0,0,0) } }
/* triggers */
body.markets-cockpit .ck-pos .ptable .prow.enter{ animation:prow-settle .58s cubic-bezier(.34,1.16,.5,1) both; will-change:transform,opacity }
body.markets-cockpit .ck-pos .ptable .prow.filled::before{ animation:prow-sweep .82s cubic-bezier(.4,0,.2,1) .04s both }
body.markets-cockpit .ck-pos .ptable .prow.filled::after{ animation:prow-memory 2.1s cubic-bezier(.33,0,.2,1) both }
body.markets-cockpit .ck-pos .ptable .prow.filled .pnl{ animation:pnl-tick .5s cubic-bezier(.22,1,.28,1) both; will-change:transform }
/* reduced motion — full fallback: no roll, no entrance, no sweep; the memory rule
   simply fades so a filled row still gets a quiet acknowledgement */
@media (prefers-reduced-motion:reduce){
  body.markets-cockpit .ck-pos .odo-strip,
  body.markets-cockpit #ooList .odo-strip{ transition:none!important }
  body.markets-cockpit .ck-pos .ptable .prow.enter{ animation:none!important }
  body.markets-cockpit .ck-pos .ptable .prow.filled .pnl{ animation:none!important }
  body.markets-cockpit .ck-pos .ptable .prow.filled::before{ animation:none!important; opacity:0!important }
  @keyframes prow-memory-rm{ 0%{ opacity:.75 } 100%{ opacity:0 } }
  body.markets-cockpit .ck-pos .ptable .prow.filled::after{ animation:prow-memory-rm 1.1s linear both; transform:scaleY(1) }
  /* open-orders pane: no roll, no spring, no sweep. A real fill still lights the brass
     resting rule as a quiet static acknowledgement. Exits under RM are an INSTANT hard-
     remove in JS (no .oo-exit class is ever added), so there is deliberately no oo-exit RM
     keyframe here. */
  body.markets-cockpit #ooList .oo-row.enter{ animation:none!important }
  body.markets-cockpit #ooList .oo-row.filled .oo-line b{ animation:none!important }
  body.markets-cockpit #ooList .oo-row.filled::before{ animation:none!important; opacity:0!important }
  body.markets-cockpit #ooList .oo-row.filled::after{ animation:prow-memory-rm 1.1s linear both; transform:scaleY(1) }
}

/* ══════════════════════════════════════════════════════════════════════════
   OPEN ORDERS — fill treatment (Andy 07-08). Mirrors the positions pane so the two
   read as ONE engineered surface. REUSES the shared odometer primitives (widened above)
   and the shared keyframes prow-settle / prow-sweep / prow-memory (defined once at ~L3975).
   A NEW resting order springs in (NO slash — placing is not a fill), a PARTIAL fill slashes
   once + rolls the resting-count odometer, and a completed/cancelled order gracefully EXITS.
   The ONLY genuinely new keyframes are oo-tick + oo-exit. All scoped under #ooList.
   ══════════════════════════════════════════════════════════════════════════ */
/* PAIRED GRID RULE (load-bearing, ships WITH the .oo-line template change): the resting
   count now lives in span.oo-line so the odometer has a host. Pin it to col2/row1 or it
   auto-places into col1 and collides with the BID/OFFER badge on the 44px/1fr grid. */
body.markets-cockpit #ooList .oo-line{ grid-column:2; grid-row:1; min-width:0; white-space:nowrap }
/* fill layers — brass hairline sweep (::before, screen) + brass resting rule (::after),
   same recipe as the positions ::before/::after. The row is already position:relative in
   the OPEN ORDERS block above, but re-assert it here so the anchor ships with the layers. */
body.markets-cockpit #ooList .oo-row{ position:relative }
body.markets-cockpit #ooList .oo-row::before,
body.markets-cockpit #ooList .oo-row::after{ content:''; position:absolute; pointer-events:none; opacity:0 }
body.markets-cockpit #ooList .oo-row::before{ left:-14%; top:0; bottom:0; width:36%; mix-blend-mode:screen; transform:translate3d(-40%,0,0); background:linear-gradient(100deg,transparent 0%,rgba(233,197,110,0) 38%,rgba(246,222,155,.55) 49%,rgba(246,222,155,.9) 50%,rgba(233,197,110,0) 62%,transparent 100%) }
body.markets-cockpit #ooList .oo-row::after{ left:0; top:12%; bottom:12%; width:2px; border-radius:2px; background:linear-gradient(180deg,var(--gold-deep),var(--gold)); box-shadow:0 0 6px -1px rgba(239,206,126,.5); transform:scaleY(.6) }
/* NEW keyframes (genuinely new to orders) */
@keyframes oo-tick{ 0%{ transform:translate3d(0,0,0) } 32%{ transform:translate3d(0,-2px,0) } 100%{ transform:translate3d(0,0,0) } }
@keyframes oo-exit{ 0%{ opacity:1; transform:translate3d(0,0,0) } 30%{ opacity:.5; transform:translate3d(6px,0,0) } 100%{ opacity:0; transform:translate3d(12px,0,0) } }
/* triggers — mirror .ck-pos .prow.enter/.filled onto .oo-row */
body.markets-cockpit #ooList .oo-row.enter{ animation:prow-settle .58s cubic-bezier(.34,1.16,.5,1) both; will-change:transform,opacity }
body.markets-cockpit #ooList .oo-row.filled::before{ animation:prow-sweep .82s cubic-bezier(.4,0,.2,1) .04s both }
body.markets-cockpit #ooList .oo-row.filled::after{ animation:prow-memory 2.1s cubic-bezier(.33,0,.2,1) both }
body.markets-cockpit #ooList .oo-row.filled .oo-line b{ display:inline-block; animation:oo-tick .5s cubic-bezier(.22,1,.28,1) both; will-change:transform }
/* graceful EXIT — the row fades + nudges right while its vertical space collapses in
   lockstep (max-height/padding/margin transition) so neighbours ease up. The fill variant
   lights the brass rule during the collapse (celebratory); a cancel stays quiet. */
body.markets-cockpit #ooList .oo-row.oo-exit{ overflow:hidden; animation:oo-exit .26s cubic-bezier(.4,0,.2,1) both; will-change:transform,opacity; pointer-events:none; transition:max-height .26s cubic-bezier(.4,0,.2,1),padding-top .26s cubic-bezier(.4,0,.2,1),padding-bottom .26s cubic-bezier(.4,0,.2,1),margin .26s cubic-bezier(.4,0,.2,1) }
body.markets-cockpit #ooList .oo-row.oo-exit.oo-exit-fill::after{ animation:prow-memory .9s cubic-bezier(.33,0,.2,1) both }

/* ══ SHARED FOOTER — MOBILE 2-UP (Andy 0709: how-it-works footer links "not
   formatted correctly ... look at legal and faq to see links match"). The footer
   markup is identical across how-it-works/legal/faq/all pages, so this one rule
   fixes them consistently. Overrides the single-column collapse at line ~503.
   Desktop grid + the <=880 2-up are untouched. ══ */
@media (max-width:560px){
  .foot-rich{ grid-template-columns:1fr 1fr !important; gap:14px 20px; align-items:start; }
  .foot-rich .foot-brand{ grid-column:1 / -1; margin-bottom:2px; }
  .foot-col h2{ margin:0 0 8px; }
  .foot-col a{ margin-bottom:7px; line-height:1.25; }
}

/* ── NAV, CHAMPAGNE QUIET (Andy 0716: the ivory key "totally distracts against
   logo it was better before just the wrong color") ─────────────────────────────
   The strip keeps its shipped black geometry on every page; only the metal warms.
   Links leave the terminal grey for champagne, the active page reads lamp-lit,
   Log in follows the links, and the Claim pill is already cut from the champagne
   block. Appended last so it wins the old grey/brass by document order. */
/* Andy 0717: "the shade of gold we used for the slider should be the exact same
   on top nav" — one metal everywhere: the slider's lamp gold #F6DE9B, idle links
   at .60 over black (the track's own olive), the brass #EFCE7E rules below are
   overruled by weight. */
.nav-links a{ color:rgba(246,222,155,.60) !important }
.nav-links a:hover{ color:#F6DE9B !important; background:rgba(246,222,155,.07) !important }
.nav-links a.active, .nav .nav-links a.active,
body.markets-cockpit .nav-links a.active,
body.markets-cockpit nav .nav-links a.active,
body.warm .nav-links a.active{
  color:#F6DE9B !important; -webkit-text-fill-color:#F6DE9B !important;
  background:transparent !important }
.nav-links a.active::after{ background:#F6DE9B !important; box-shadow:none !important }
.nav-login{ color:rgba(246,222,155,.60) !important }
.nav-login:hover{ color:#F6DE9B !important }

/* ── ONE NAV HEIGHT, EVERY STATE (Andy 0717: "these need to be in the exact same
   place when logged out they are not now") ─────────────────────────────────────
   The signed-in balance pill ran two lines and made the strip 80px where the
   guest strip ran 69 — so the ENTIRE page below shifted 11px between states.
   The strip now holds the pill's height for everyone; content stays centred. */
@media (min-width:1181px){ .nav-in{ min-height:80px; align-items:center } }

/* ── ONE CLAIM, ONE METAL (Andy 0717: "the claim button in the game is much
   nicer the the one when you are logged out it should match the better one")
   — the logged-out Claim key wears the logged-in .nav-claim's gold CTA metal:
   engraved dark glyph on poured gold, pill-cut, hover lift. The last royal
   purple on the nav dies here (warm molten, never purple). ── */
.nav-cta, .snav .nav-cta{
  color:#2A1F04 !important; text-decoration:none !important;
  background:linear-gradient(165deg,#F7A11E,#EFCE7E 55%,#A8823B) !important;
  border-radius:999px !important; padding:8px 15px !important;
  font-weight:800; letter-spacing:.2px;
  box-shadow:0 1.5px 0 #6E5A24, 0 5px 13px rgba(70,18,6,.2) !important;
}
.nav-cta:hover, .snav .nav-cta:hover{
  transform:translateY(-1px);
  background:linear-gradient(165deg,#F7A11E,#EFCE7E 55%,#A8823B) !important;
  color:#2A1F04 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   NAV TRUTH AT EVERY WIDTH (v197, Andy 0719 — the Tab S9 shame. His words:
   "this is my business. its my life.")
   Two defects, both fatal to trust:
   1. The tablet reading-law sheets re-showed the guest keys with higher
      specificity (.nav .nav-auth .nav-login{display:inline-flex}) — a
      signed-in visitor at 822-1280 saw Log in AND Claim Mangos AND Log out
      at once. The truth rules below outrank every page sheet by specificity
      AND importance: one login state, always, at every width.
   2. Signed-in at 1281-1600 (tablet landscape): the auth cluster (medallion
      + handle + BALANCE + net worth + Claim + Log out) shoved the links into
      the wordmark. The cluster now compresses in steps as the window
      narrows; the links tighten one notch. Nothing overlaps by arithmetic:
      worst case 1281 = brand 341 + links ~560 + auth ~330 + gaps < 1281.
   ═════════════════════════════════════════════════════════════════════════ */
html body.signed-in .nav .nav-auth .nav-login,
html body.signed-in .nav .nav-auth .nav-cta{ display:none !important; }
html body:not(.signed-in) .nav .nav-auth #logoutLink,
html body:not(.signed-in) .nav .nav-auth .wallet,
html body:not(.signed-in) .nav .nav-auth #navClaim{ display:none !important; }

@media (min-width:1281px) and (max-width:1600px){
  body.signed-in .nav .nav-links{ gap:18px; }
  body.signed-in .nav .nav-links a{ font-size:13.5px; }
}
@media (min-width:1281px) and (max-width:1560px){
  /* the BALANCE word and the net-worth whisper yield first — the figures stay */
  body.signed-in .nav .wallet .lab{ display:none !important; }
  body.signed-in .nav .wallet .nw-free{ display:none !important; }
  body.signed-in .nav .wallet .dot{ display:none !important; }
}
@media (min-width:1281px) and (max-width:1470px){
  body.signed-in .nav .wallet .who{ max-width:110px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; }
}
@media (min-width:1281px) and (max-width:1370px){
  /* the medallion carries the identity alone; the handle waits inside */
  body.signed-in .nav .wallet .who{ display:none !important; }
}
/* 0721 device fix: below 1281 the handle had NO clamp, so a longer @handle pushed
   the balance / Log out / hamburger off the right edge (overflow-x:clip hid them).
   Mirror the desktop ellipsis down the whole stack. */
@media (max-width:1280px){
  .nav .wallet{ min-width:0 }
  .nav .wallet .who{ max-width:110px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; display:inline-block; vertical-align:middle }
}
@media (max-width:560px){ .nav .wallet .who{ max-width:84px } }
@media (max-width:400px){ .nav .wallet .who{ max-width:60px } }
@media (min-width:1181px){ :root{ --te-nav-h:80px } }
/* 0721 device fix (owner-flagged Tab S9 1280): the hamburger engages <=1280 but the
   cockpit keeps desktop layout >=1181, and the ticket panel (z-98/99, root stacking
   context) painted OVER the z-40 nav so the open menu's lower links were untappable.
   The z-1300 raise existed only <=1180 — extend it across the overlap band. */
@media (min-width:1181px) and (max-width:1280px){
  body.markets-cockpit .nav{ z-index:1300 }
  body.markets-cockpit .nav-toggle:checked ~ .nav-links{ z-index:1301 }
}
/* 0721 cosmetic: smallest folds (280-360) clipped the wordmark against the rigid
   auth cluster; one font step keeps the full mark visible */
@media (max-width:360px){ .brand-name .te-word{ font-size:.72em } }