/* ============================================================
   MetricWallet Design System v1  ·  css/mw.css
   Single source of truth for the MetricWallet visual language.
   Every page links this file, then keeps ONLY its page-specific
   rules in a small inline <style> block placed AFTER this link
   (so page rules win on equal specificity).

   COMPONENT INVENTORY (selectors defined here):
     Tokens            :root --mw-*
     Base              *, html/body, ::selection, :focus-visible
     Background        #bg  (fixed radial glow treatment)
     Brand lockup      #brand / .brand  (+ .mark .word .tag)
     Nav               #menu, #bMenu, .gbars, #navdrop
     Hint bar          #hint
     Buttons           .chip, select, #menu button
     Gold CTA           #cTrade
     Cards             .card (+ .tick .sec .co .pct .px), .stat (+ .k .v)
     Modal             #veil, #card (+ .ico h3 .cat .big .sub),
                       #cChartWrap, #cChart, .cpret, .cpills, .pill,
                       #cFin, #cTrade, #cDisc
     Type              h1, .sub, .note, .loading, .eyebrow
     Market colors     .up, .dn, .neu   (flat colors only;
                       glow variants stay page-scoped)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* surfaces */
  --mw-bg:#05070a;
  --mw-surface:#0a0c10;
  --mw-surface-2:#14171d;
  --mw-surface-3:#171b22;
  --mw-card:linear-gradient(160deg,#171b22,#0a0c10);
  --mw-card-2:linear-gradient(160deg,#14171d,#0a0c10);
  /* gold */
  --mw-gold:#d4af37;
  --mw-gold-hi:#f7e7b0;
  --mw-gold-lo:#9c7a24;
  --mw-gold-grad:linear-gradient(135deg,#f7e7b0,#d4af37 55%,#9c7a24);
  --mw-gold-soft:#ffd97e;
  --mw-gold-glow:0 2px 10px #d4af3766;
  /* text */
  --mw-text:#fff;
  --mw-text-dim:#e8e4d8;
  --mw-mut:#ffffff80;
  --mw-mut-2:#ffffff60;
  /* hairlines */
  --mw-line:#ffffff14;
  --mw-line-2:#ffffff22;
  --mw-line-3:#ffffff2e;
  /* market direction */
  --mw-up:#3dffa0;
  --mw-dn:#ff5d6c;
  --mw-neu:#ffd97e;
  /* sectors */
  --mw-ai:#fe2327;
  --mw-energy:#0fdddb;
  --mw-health:#5cc9e4;
  --mw-security:#e6d200;
  --mw-grid:#e8d9c0;
  --mw-fintech:#c6d400;
  /* type */
  --mw-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* shape */
  --mw-r-sm:8px;
  --mw-r-md:14px;
  --mw-r-lg:24px;
  --mw-r-pill:999px;
  /* motion */
  --mw-t-fast:.15s;
  --mw-t-med:.25s;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%}
body{font-family:var(--mw-font);color:var(--mw-text);background:var(--mw-bg)}
::selection{background:#d4af3755}
:focus-visible{outline:2px solid var(--mw-gold);outline-offset:2px}

/* ---------- 3. Background ---------- */
#bg{position:fixed;inset:0;z-index:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.07),transparent 25%),
  radial-gradient(circle at 50% 55%,rgba(215,173,85,.10),transparent 50%),#05070a}

/* ---------- 4. Brand lockup ---------- */
#brand,.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
#brand{gap:14px;position:fixed;z-index:10;top:22px;left:20px;cursor:pointer}
.brand{gap:12px}
#brand .mark,.brand .mark{flex:none;filter:drop-shadow(var(--mw-gold-glow))}
#brand .mark{width:54px;height:54px}
.brand .mark{width:38px;height:38px}
#brand .word,.brand .word{display:flex;flex-direction:column;gap:6px}
#brand .word b,.brand .word b{display:block;letter-spacing:.1em;font-weight:300;color:#fff;line-height:1}
#brand .word b{font-size:28px;text-shadow:0 2px 14px #000c}
.brand .word b{font-size:24px}
#brand .tag{display:block;font-style:normal;font-size:10px;letter-spacing:.32em;color:#d4af37b3;white-space:nowrap}
#brand .word b em,.brand .word b em{font-style:normal;font-weight:800;background:var(--mw-gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 5. Nav (hamburger + dropdown) ---------- */
#menu{position:fixed;z-index:10;right:18px;top:18px;display:flex;gap:8px}
#menu button{padding:9px 14px;border:1px solid var(--mw-line-2);border-radius:var(--mw-r-pill);
  background:#05070acc;color:#fff;font-size:10px;letter-spacing:.14em;cursor:pointer;
  backdrop-filter:blur(6px);font-family:inherit}
#menu button:active{transform:scale(.94)}
#bMenu{padding:12px 20px}
.gbars{display:flex;flex-direction:column;gap:6px;align-items:center}
.gbars i{display:block;width:36px;height:9px;border:2px solid var(--mw-gold);border-radius:2px;
  background:#d4af3712;box-shadow:0 0 10px #d4af3755,inset 0 0 8px #d4af3733}
#navdrop{position:fixed;z-index:11;top:64px;right:18px;display:none;flex-direction:column;min-width:172px;
  background:#0b0e13f2;border:1px solid #d4af3755;border-radius:var(--mw-r-md);overflow:hidden;
  backdrop-filter:blur(8px)}
#navdrop.open{display:flex}
#navdrop a,#navdrop button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:13px 18px;color:var(--mw-text-dim);text-decoration:none;font-size:11px;letter-spacing:.18em;
  font-family:inherit}
#navdrop a+a,#navdrop button{border-top:1px solid var(--mw-line)}
#navdrop a:active,#navdrop button:active{background:#d4af3722}
#navdrop a.on{color:var(--mw-gold)}

/* ---------- 6. Hint bar ---------- */
#hint{position:fixed;z-index:10;bottom:20px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:.12em;color:#ffffff66;white-space:nowrap}

/* ---------- 7. Buttons, chips, selects ---------- */
.chip{padding:8px 14px;border-radius:var(--mw-r-pill);border:1px solid var(--mw-line-2);
  background:#ffffff08;color:#fff;font-size:10px;font-weight:800;letter-spacing:.12em;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;font-family:inherit}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--c,#fff)}
.chip.on{background:#ffffff1c;border-color:#d4af3788;color:#ffd97e}
select{background:var(--mw-surface-2);color:#fff;border:1px solid var(--mw-line-2);
  border-radius:var(--mw-r-pill);padding:8px 12px;font-size:10px;font-weight:800;letter-spacing:.1em;
  font-family:inherit}
#cTrade{display:inline-block;margin-top:12px;padding:11px 20px;font-size:10px;font-weight:800;
  letter-spacing:.2em;color:#0a0a0a;text-decoration:none;background:var(--mw-gold-grad);
  border-radius:var(--mw-r-sm);box-shadow:0 2px 12px #d4af3755}
#cTrade:hover{filter:brightness(1.08)}

/* ---------- 8. Cards ---------- */
.card{border:1px solid var(--mw-line);border-radius:var(--mw-r-md);padding:13px 13px 11px;
  position:relative;overflow:hidden;background:var(--mw-card-2)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,#fff);opacity:.85}
.card .top{display:flex;align-items:baseline;gap:8px}
.card .tick{font-size:15px;font-weight:900;letter-spacing:.05em}
.card .sec{margin-left:auto;font-size:8px;letter-spacing:.18em;color:var(--mw-mut-2)}
.card .co{font-size:10px;color:var(--mw-mut);margin:3px 0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .pct{font-size:24px;font-weight:950;letter-spacing:.01em}
.card .px{font-size:10px;color:#ffffff70;margin-top:5px}
.card .px b{color:#fff;font-weight:800}
.stat{border:1px solid var(--mw-line);border-radius:var(--mw-r-md);padding:12px 14px;background:var(--mw-card-2)}
.stat .k{font-size:9px;letter-spacing:.22em;color:#ffffff70;margin-bottom:6px}
.stat .v{font-size:22px;font-weight:900}

/* ---------- 9. Modal ---------- */
#veil{position:fixed;inset:0;z-index:20;background:#05070acc;backdrop-filter:blur(8px);
  display:none;place-items:center;opacity:0;transition:var(--mw-t-med)}
#veil.show{display:grid;opacity:1}
#card{width:min(88vw,380px);border-radius:var(--mw-r-lg);padding:28px 26px;text-align:center;color:#fff;
  background:var(--mw-card);border:1px solid var(--mw-line-2);
  box-shadow:0 0 50px -12px var(--glow,#3dffa0),0 30px 60px #000c;
  transform:translateY(14px) scale(.96);transition:var(--mw-t-med)}
#veil.show #card{transform:none}
#card .ico{font-size:54px;filter:drop-shadow(0 4px 14px #000a)}
#card h3{font-size:22px;font-weight:900;letter-spacing:.06em;margin:10px 0 2px}
#card .cat{font-size:9px;letter-spacing:.3em;color:var(--mw-mut)}
#card .big{font-size:44px;font-weight:950;margin:14px 0 2px}
#card .sub{font-size:11px;color:var(--mw-mut);letter-spacing:.08em;line-height:1.7}
#card .up{color:#ffd97e;text-shadow:0 0 12px #d4af3788}
#card .dn{color:var(--mw-dn);text-shadow:0 0 12px #ff5d6c88}
#cChartWrap{margin:16px 0 4px}
#cChart{width:100%;height:150px;display:block}
.cstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;margin:12px 0 2px;text-align:left}
.cstats .st{border:1px solid var(--mw-line);border-radius:10px;padding:8px 10px;background:#ffffff05}
.cstats .st b{display:block;font-size:12px;font-weight:900;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cstats .st span{font-size:8px;letter-spacing:.16em;color:var(--mw-mut-2)}
.cpret{display:flex;justify-content:space-between;align-items:baseline;margin:4px 2px}
.cpret .pv{font-size:15px;font-weight:900}
.cpret .pl{font-size:8px;letter-spacing:.18em;color:var(--mw-mut-2)}
.cpills{display:flex;gap:5px;margin:8px 0 2px}
.cpills .pill{flex:1;min-width:0;font-family:inherit;font-size:9px;font-weight:800;letter-spacing:.06em;
  padding:9px 0;min-height:38px;border-radius:10px;border:1px solid var(--mw-line-2);
  background:#ffffff08;color:#ffffff70;cursor:pointer}
.cpills .pill.on{color:#0a0a0a;border-color:transparent;background:var(--mw-gold-grad)}
.cnochart{font-size:9px;color:#ffffff40;letter-spacing:.14em;padding:20px 0;text-align:center}
/* chart type toggle (dashboard cards + cube detail card share this) */
.typetoggle{display:flex;gap:4px;margin:0 0 4px}
.tbtn{flex:1;min-width:0;font-family:inherit;font-size:9px;font-weight:800;letter-spacing:.14em;
  padding:8px 0;min-height:34px;border-radius:9px;border:1px solid var(--mw-line-2);
  background:#ffffff08;color:#ffffff70;cursor:pointer}
.tbtn.on{color:#ffd97e;border-color:#d4af3788;background:#d4af3714}
#card button{margin-top:18px;font-family:inherit;font-size:10px;font-weight:800;letter-spacing:.2em;cursor:pointer;
  padding:12px 30px;border-radius:var(--mw-r-pill);border:1px solid var(--mw-line-3);background:#ffffff10;
  color:#fff;transition:.2s}
#card button:hover{background:#ffffff1e}
#cFin{display:block;margin-top:14px;font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--mw-gold-soft);
  text-decoration:none;opacity:.85}
#cFin:hover{opacity:1;text-decoration:underline}
#cDisc{margin-top:10px;font-size:8px;letter-spacing:.12em;color:#ffffff77;line-height:1.7}

/* ---------- 10. Type ---------- */
h1{font-size:15px;letter-spacing:.28em;font-weight:800;margin:14px 0 4px}
.sub{font-size:11px;color:var(--mw-mut);letter-spacing:.06em;line-height:1.7;margin-bottom:18px}
.note{margin-top:22px;font-size:10px;color:#ffffff50;letter-spacing:.05em;line-height:1.8;text-align:center}
.eyebrow{font-size:9px;letter-spacing:.3em;color:var(--mw-mut);font-weight:800}
.loading{text-align:center;color:var(--mw-mut-2);font-size:11px;letter-spacing:.2em;padding:40px 0}

/* ---------- 11. Market direction (flat; glow stays page-scoped) ---------- */
.up{color:var(--mw-up)}
.dn{color:var(--mw-dn)}
.neu{color:var(--mw-neu)}

/* ---------- 12. Page container ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 60px}

/* ---------- 13. Responsive ---------- */
@media(max-width:600px){
  #brand{top:14px;left:14px}
  #brand .word b{font-size:20px}
  #brand .mark{width:34px;height:34px}
  #brand .tag{font-size:8px;letter-spacing:.26em}
  #menu{top:12px;right:12px}
  #menu button{padding:8px 12px;font-size:9px}
  #hint{bottom:12px;font-size:7px}
}