/* ============================================================
   ATLAS — Market Intelligence
   Shared stylesheet · All 12 pages
   Fonts: Inter (UI) · DM Mono (all data / numbers)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:   #050c16;
  --s1:   #0b1525;
  --s2:   #101c2e;
  --s3:   #162238;
  --s4:   #1c2a42;
  --bd:   rgba(255,255,255,.07);
  --bd2:  rgba(255,255,255,.13);
  --bd3:  rgba(255,255,255,.22);
  --hi:   #eaf2ff;
  --t:    #d2dce9;
  --di:   #82a0bc;
  --mu:   #4e6580;
  --bl:   #3b7cf8;
  --bl-h: #5a90fa;
  --bl2:  rgba(59,124,248,.12);
  --bl3:  rgba(59,124,248,.06);
  --bl-bd:rgba(59,124,248,.30);
  --gn:   #16a34a;
  --gn-t: #4ade80;
  --gn2:  rgba(74,222,128,.10);
  --gn-bd:rgba(74,222,128,.22);
  --rd:   #dc2626;
  --rd-t: #f87171;
  --rd2:  rgba(248,113,113,.10);
  --rd-bd:rgba(248,113,113,.20);
  --am:   #b45309;
  --am-t: #fbbf24;
  --am2:  rgba(251,191,36,.10);
  --am-bd:rgba(251,191,36,.20);
  --pu-t: #a78bfa;
  --pu2:  rgba(167,139,250,.10);
  --sh1:  0 1px 3px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4);
  --sh2:  0 2px 8px rgba(0,0,0,.6),0 12px 36px rgba(0,0,0,.5);
  --sh3:  0 4px 16px rgba(0,0,0,.7),0 24px 60px rgba(0,0,0,.6);
  --nav:  56px;
  --tape: 27px;
  --r:    10px;
  --r2:   12px;
  --wrap: 1280px;
  --mono: 'DM Mono',monospace;
  --sans: 'Inter',-apple-system,sans-serif;
}

html{scroll-behavior:smooth;font-size:13.5px}
body{
  font-family:var(--sans);background:var(--bg);color:var(--t);
  line-height:1.6;min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(59,124,248,.22);color:#e8f0ff}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:var(--sans)}
img{display:block;max-width:100%}
p{margin:0 0 8px}
p:last-child{margin-bottom:0}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}

/* ── TOP NAV ──────────────────────────────────────────────── */
/* Goal: fit 14 navlinks + brand + search + live indicator + Log In/Sign Up
   comfortably on a ≥1280px display, gracefully shrinking down to ~1024px.   */
.topnav{
  position:fixed;top:0;left:0;right:0;height:var(--nav);
  background:rgba(5,12,22,.96);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.065);
  display:flex;align-items:center;z-index:1000;padding:0 14px;gap:0;
  overflow:visible;
}

.nav-brand{
  display:flex;align-items:center;gap:8px;
  padding-right:12px;border-right:1px solid rgba(255,255,255,.065);
  flex-shrink:0;
}

.nav-mark{
  width:26px;height:26px;border-radius:7px;
  background:linear-gradient(135deg,#3b7cf8,#1d4ed8);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;letter-spacing:-.02em;
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(59,124,248,.5),0 2px 10px rgba(59,124,248,.35),inset 0 1px 0 rgba(255,255,255,.2);
}

.nav-brand-name{font-size:14px;font-weight:700;letter-spacing:-.03em;color:var(--hi)}

/* Navlinks shrink first when space gets tight. min-width:0 lets the flex
   container actually contract instead of pushing right-side elements off. */
.nav-links{
  display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0;
  padding:0 4px;height:var(--nav);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.nav-links::-webkit-scrollbar{display:none}

.navlink{
  position:relative;background:transparent;border:none;
  color:var(--mu);font-family:var(--sans);font-size:11.5px;font-weight:500;
  padding:0 8px;height:100%;display:flex;align-items:center;
  cursor:pointer;transition:color .15s;letter-spacing:.005em;white-space:nowrap;
  text-decoration:none;flex-shrink:0;
}
.navlink::after{
  content:'';position:absolute;bottom:0;left:8px;right:8px;
  height:2px;border-radius:2px 2px 0 0;background:var(--bl);
  opacity:0;transition:opacity .15s;
}
.navlink:hover{color:var(--di)}
.navlink:hover::after{opacity:.4}
.navlink.active{color:var(--hi)}
.navlink.active::after{opacity:1}

.nav-search{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:5px 9px;margin:0 6px;
  cursor:text;transition:border-color .15s,background .15s,width .2s;flex-shrink:0;
  overflow:visible;
}
.nav-search:focus-within{border-color:rgba(59,124,248,.4);background:rgba(59,124,248,.04)}
.nav-search input{
  background:transparent;border:none;outline:none;
  color:var(--t);font-family:var(--sans);font-size:12px;width:130px;
  transition:width .2s;
}
.nav-search:focus-within input{width:200px}
.nav-search input::placeholder{color:var(--mu)}
.nav-search-icon{color:var(--mu);flex-shrink:0;opacity:.7;font-size:11px}

.nav-live{
  display:flex;align-items:center;gap:5px;
  padding:0 10px;
  border-left:1px solid rgba(255,255,255,.065);
  border-right:1px solid rgba(255,255,255,.065);
  font-size:10px;font-family:var(--mono);color:var(--gn-t);
  letter-spacing:.05em;font-weight:500;white-space:nowrap;flex-shrink:0;
  height:100%;transition:color .3s;
}
.nav-live-dot{
  width:5px;height:5px;border-radius:50%;background:var(--gn-t);
  animation:livepulse 2.2s ease-in-out infinite;flex-shrink:0;
}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.3}}

.nav-right{display:flex;align-items:center;gap:6px;margin-left:6px;flex-shrink:0}

/* ── Alert Bell ─────────────────────────────────────────────── */
.nav-alert-bell{
  position:relative;background:transparent;border:1px solid rgba(255,255,255,.1);
  border-radius:7px;color:var(--di);font-size:14px;line-height:1;
  padding:5px 9px;cursor:pointer;transition:all .15s;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
}
.nav-alert-bell:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:var(--t)}
.nav-alert-badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
  background:#f59e0b;color:#000;font-family:var(--mono);font-size:9px;
  font-weight:700;border-radius:8px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 3px;line-height:1;border:1.5px solid var(--s1);
  pointer-events:none;
}
/* #17 — proper notification badge: on-brand orange pill with a white ring + soft
   pop, instead of the flat blue. Higher specificity + !important so it beats
   atlas-aurora.css's ".nav-alert-badge{background:var(--bl)!important}". */
.nav-alert-bell .nav-alert-badge{
  background:#ff6b3d!important;
  color:#fff!important;
  border:2px solid #fff!important;
  box-shadow:0 1px 5px rgba(255,107,61,.5)!important;
  min-width:17px;height:17px;
  font-size:9.5px;font-weight:800;
  top:-6px;right:-6px;padding:0 4px;
}

.nav-btn{
  background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:7px;
  color:var(--di);font-family:var(--sans);font-size:11.5px;font-weight:500;
  padding:5px 12px;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.nav-btn:hover{border-color:rgba(255,255,255,.22);color:var(--t);background:rgba(255,255,255,.04)}
.nav-btn.primary{
  background:var(--bl);border-color:transparent;color:#fff;
  box-shadow:0 1px 8px rgba(59,124,248,.4),0 0 0 1px rgba(59,124,248,.6);
  font-weight:600;
}
.nav-btn.primary:hover{background:#2563eb;box-shadow:0 2px 14px rgba(59,124,248,.55)}

/* ── Nav scroll-edge fade hints ────────────────────────────── */
/* If the navlinks DO overflow on a narrower screen, fade the edges so the
   user can see there's more to scroll to.                                    */
.nav-links{
  mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

/* ── TICKER TAPE ──────────────────────────────────────────── */
.ticker-tape{
  position:fixed;top:var(--nav);left:0;right:0;height:var(--tape);
  background:rgba(5,11,20,.99);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;z-index:999;display:flex;align-items:center;
}
.ticker-inner{
  display:flex;align-items:center;gap:0;
  white-space:nowrap;
  animation:tickscroll 70s linear infinite;
}
.ticker-inner:hover{animation-play-state:paused}
@keyframes tickscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.tick-item{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 18px;border-right:1px solid rgba(255,255,255,.055);
  height:var(--tape);font-size:10.5px;font-family:var(--mono);
}
.tick-sym{color:var(--di);letter-spacing:.05em;font-weight:500;text-transform:uppercase}
.tick-price{color:var(--hi);font-weight:500;font-variant-numeric:tabular-nums}
.tick-chg{font-weight:400}
.tick-chg.p{color:var(--gn-t)}
.tick-chg.n{color:var(--rd-t)}

/* ── MAIN / WRAP ──────────────────────────────────────────── */
.main{padding-top:calc(var(--nav) + var(--tape));min-height:100vh}
.wrap{max-width:var(--wrap);margin:0 auto;padding:36px 28px 80px}

/* ── PAGE HEADER ──────────────────────────────────────────── */
.ph{
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.065);
  margin-bottom:32px;
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
}
.ph::after{
  content:'';position:absolute;bottom:-1px;left:0;width:80px;height:2px;
  background:linear-gradient(90deg,var(--bl),transparent);border-radius:2px;
}
.ph-left{flex:1}
.ph-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--bl);font-weight:600;font-family:var(--mono);margin-bottom:9px;
}
.ph-title{
  font-size:28px;font-weight:800;letter-spacing:-.04em;
  color:var(--hi);line-height:1.1;margin-bottom:6px;
}
.ph-sub{font-size:13px;color:var(--mu);line-height:1.6}
.ph-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── SECTION LABELS ───────────────────────────────────────── */
.sec-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--mu);font-weight:600;font-family:var(--mono);margin-bottom:6px;
}
.sec-title{font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--hi);margin-bottom:4px}
.sec-sub{font-size:13px;color:var(--mu);margin-bottom:24px;line-height:1.6}

/* ── CARDS ────────────────────────────────────────────────── */
.card{
  background:var(--s1);border:1px solid rgba(255,255,255,.072);
  border-radius:var(--r2);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,var(--sh2);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.card:hover{
  transform:translateY(-2px);border-color:rgba(255,255,255,.11);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 16px 48px rgba(0,0,0,.5);
}
/* Cards that contain tables shouldn't lift — table row hover is enough feedback */
.card:has(.tbl):hover{transform:none;border-color:rgba(255,255,255,.10)}
.card-head{
  padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.065);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 100%);
}
.card-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--mu);font-weight:600;font-family:var(--mono);
}
.card-body{padding:20px}

/* ── GRIDS ────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}

/* ── TOGGLE GROUP ─────────────────────────────────────────── */
.toggle-group{
  display:flex;gap:2px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;padding:3px;
}
.tbtn{
  background:transparent;border:none;color:var(--mu);
  font-family:var(--mono);font-size:11px;padding:5px 12px;
  border-radius:6px;cursor:pointer;transition:color .13s,background .13s;
  white-space:nowrap;letter-spacing:.02em;
}
.tbtn:hover{color:var(--di)}
.tbtn.active{
  background:var(--s3);color:var(--t);
  box-shadow:0 1px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;border:none;
  border-radius:9px;font-family:var(--sans);font-size:13px;
  font-weight:600;padding:9px 18px;cursor:pointer;transition:all .15s;
}
.btn-primary{
  background:var(--bl);color:#fff;
  box-shadow:0 2px 12px rgba(59,124,248,.35),0 0 0 1px rgba(59,124,248,.5);
}
.btn-primary:hover{background:#2563eb;box-shadow:0 4px 18px rgba(59,124,248,.5)}
.btn-ghost{
  background:rgba(255,255,255,.04);color:var(--di);
  border:1px solid rgba(255,255,255,.10);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.2);color:var(--t);background:rgba(255,255,255,.07)}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:7px}

/* ── BADGES ───────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-family:var(--mono);font-weight:500;
  padding:3px 9px;border-radius:20px;letter-spacing:.03em;white-space:nowrap;
}
.badge-green{background:var(--gn2);color:var(--gn-t);border:1px solid var(--gn-bd)}
.badge-red  {background:var(--rd2);color:var(--rd-t);border:1px solid var(--rd-bd)}
.badge-blue {background:var(--bl2);color:var(--bl-h);border:1px solid var(--bl-bd)}
.badge-amber{background:var(--am2);color:var(--am-t);border:1px solid var(--am-bd)}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block}

/* ── STAT TILES ───────────────────────────────────────────── */
.stat-tile{
  background:var(--s1);border:1px solid rgba(255,255,255,.072);
  border-radius:var(--r);padding:18px 20px;
  box-shadow:var(--sh1);
}
.stat-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--mu);font-weight:600;font-family:var(--mono);margin-bottom:10px;
}
.stat-value{
  font-family:var(--mono);font-size:28px;font-weight:700;
  letter-spacing:-.04em;color:var(--hi);line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat-value.pos{color:var(--gn-t)}
.stat-value.neg{color:var(--rd-t)}
.stat-sub{font-size:12px;color:var(--mu);margin-top:6px;font-family:var(--mono)}

/* ── MARKET / INDEX TILES ─────────────────────────────────── */
.idx-tile{
  background:var(--s1);border:1px solid rgba(255,255,255,.072);
  border-radius:var(--r);padding:14px;cursor:pointer;
  position:relative;overflow:hidden;box-shadow:var(--sh1);
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.idx-tile::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  border-radius:0 2px 2px 0;opacity:0;transition:opacity .2s;
}
.idx-tile.pos::before{background:var(--gn-t);opacity:.7}
.idx-tile.neg::before{background:var(--rd-t);opacity:.7}
.idx-tile:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.idx-tile.selected{border-color:rgba(59,124,248,.4);background:rgba(59,124,248,.07)}

.idx-sym{font-family:var(--mono);font-size:10.5px;color:var(--mu);font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px}
.idx-val{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:-.03em;color:var(--hi);line-height:1;font-variant-numeric:tabular-nums}
.idx-chg{font-family:var(--mono);font-size:11px;margin-top:5px;font-weight:500}
.idx-chg.pos{color:var(--gn-t)}
.idx-chg.neg{color:var(--rd-t)}

/* ── COMM / GENERIC PRICE TILES ───────────────────────────── */
.price-tile{
  background:var(--s1);border:1px solid rgba(255,255,255,.072);
  border-radius:var(--r);padding:18px;cursor:pointer;
  box-shadow:var(--sh1);
  transition:border-color .14s,background .14s,transform .14s;
}
.price-tile:hover{border-color:rgba(59,124,248,.35);background:rgba(59,124,248,.04);transform:translateY(-1px)}
.price-tile.selected{border-color:rgba(59,124,248,.4);background:rgba(59,124,248,.06)}
.pt-name{font-size:11px;color:var(--mu);font-weight:500;margin-bottom:6px}
.pt-val{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--hi);font-variant-numeric:tabular-nums}
.pt-chg{font-family:var(--mono);font-size:11.5px;margin-top:4px;font-weight:500}
.pt-chg.pos{color:var(--gn-t)}
.pt-chg.neg{color:var(--rd-t)}

/* ── TABLES ───────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mu);
  font-weight:600;font-family:var(--mono);padding:11px 16px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  white-space:nowrap;
}
.tbl th:not(:first-child){text-align:right}
.tbl td{padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;color:var(--di);vertical-align:middle}
.tbl td:not(:first-child){text-align:right;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,.02)}

.pos{color:var(--gn-t)}.neg{color:var(--rd-t)}.neu{color:var(--mu)}

/* ── ARTICLE CARDS ────────────────────────────────────────── */
.article-card{
  background:var(--s1);border:1px solid rgba(255,255,255,.072);
  border-radius:var(--r);padding:18px;cursor:pointer;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.article-card:hover{
  transform:translateY(-3px);border-color:rgba(59,124,248,.3);
  box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(59,124,248,.15);
}
.art-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:9px;font-family:var(--mono);display:block}
.art-tag.tech{color:var(--bl)}.art-tag.macro{color:var(--am-t)}.art-tag.mkts{color:var(--gn-t)}.art-tag.earn{color:var(--pu-t)}
.art-title{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--hi);line-height:1.45;margin-bottom:8px}
.art-excerpt{font-size:12px;color:var(--mu);line-height:1.6;margin-bottom:10px}
.art-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mu);font-family:var(--mono)}
.art-source{color:var(--bl-h);font-weight:600}

/* ── HEATMAP ──────────────────────────────────────────────── */
.hm-sector{margin-bottom:20px}
.hm-sec-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mu);
  font-weight:600;font-family:var(--mono);margin-bottom:8px;
  display:flex;align-items:center;gap:10px;
}
.hm-sec-label::after{content:'';flex:1;height:1px;background:var(--bd)}
.hm-row{display:flex;flex-wrap:wrap;gap:4px}
.hm-tile{
  border-radius:6px;padding:10px 10px 8px;
  cursor:pointer;min-width:76px;
  transition:filter .12s,transform .12s;
}
.hm-tile:hover{filter:brightness(1.18);transform:scale(1.04)}
.hm-sym{font-family:var(--mono);font-size:13px;font-weight:500;color:rgba(255,255,255,.9);display:block}
.hm-name{font-size:9px;color:rgba(255,255,255,.80);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:74px}
.hm-pct{font-family:var(--mono);font-size:14px;font-weight:500;display:block;margin-top:7px;color:rgba(255,255,255,.95)}

/* ── CHART ────────────────────────────────────────────────── */
.chart-wrap{position:relative}
.chart-canvas-wrap{position:relative}

/* ── INPUTS ───────────────────────────────────────────────── */
input,textarea,select{
  background:var(--s2);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;color:var(--t);
  font-family:var(--sans);font-size:13px;padding:8px 12px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
input:focus,textarea:focus,select:focus{
  border-color:rgba(59,124,248,.5);box-shadow:0 0 0 3px rgba(59,124,248,.08);
}
input::placeholder,textarea::placeholder{color:var(--mu)}

/* ── PORTFOLIO SPECIFIC ───────────────────────────────────── */
.port-tabs{
  display:flex;gap:2px;background:var(--bg);
  border:1px solid var(--bd);border-radius:8px;padding:3px;
}
.port-tab{
  background:transparent;border:none;color:var(--mu);
  font-family:var(--sans);font-size:12px;font-weight:500;
  padding:6px 16px;border-radius:6px;cursor:pointer;transition:all .14s;
}
.port-tab:hover{color:var(--di)}
.port-tab.active{background:var(--s2);color:var(--t);box-shadow:0 1px 3px rgba(0,0,0,.4)}

.pb-legend{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pb-leg{display:flex;align-items:center;gap:8px}
.pb-leg-line{width:22px;height:2.5px;border-radius:2px;flex-shrink:0}
.pb-leg-name{font-size:12px;font-family:var(--mono);color:var(--mu)}
.pb-leg-ret{font-family:var(--mono);font-size:13px;font-weight:500}

.perf-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bd)}
.perf-cell{padding:20px;border-right:1px solid var(--bd);position:relative}
.perf-cell:last-child{border-right:none}
.perf-cell::before{content:'';position:absolute;top:0;left:20px;right:20px;height:2px;border-radius:0 0 2px 2px}
.perf-cell.pc-port::before{background:var(--bl)}
.perf-cell.pc-sp::before{background:var(--gn-t)}
.perf-cell.pc-nq::before{background:var(--am-t)}
.perf-label{font-size:10px;text-transform:uppercase;letter-spacing:.10em;color:var(--mu);font-family:var(--mono);margin-bottom:3px}
.perf-name{font-size:12px;color:var(--di);margin-bottom:10px}
.perf-ret{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.perf-alpha{display:inline-block;font-size:10px;font-family:var(--mono);padding:2px 8px;border-radius:4px;margin-top:7px;background:var(--gn2);color:var(--gn-t);border:1px solid rgba(34,197,94,.2)}

/* ── DIVIDER ──────────────────────────────────────────────── */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--bd) 20%,var(--bd) 80%,transparent);margin:36px 0}

/* ── LOADING ──────────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.08);border-top-color:var(--bl);border-radius:50%;animation:spin .7s linear infinite}

/* ── SKELETON SHIMMER ─────────────────────────────────────── */
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
.skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%);
  background-size:1200px 100%;
  animation:shimmer 1.6s ease-in-out infinite;
  border-radius:4px;display:inline-block;color:transparent!important;
  pointer-events:none;user-select:none;
}
.skeleton-block{height:14px;border-radius:4px;margin:4px 0}

/* ── FADE IN ──────────────────────────────────────────────── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .28s ease both}

/* ── PRICE FLASH ──────────────────────────────────────────── */
@keyframes priceUp{0%,100%{}50%{color:var(--gn-t);text-shadow:0 0 12px rgba(74,222,128,.5)}}
@keyframes priceDown{0%,100%{}50%{color:var(--rd-t);text-shadow:0 0 12px rgba(248,113,113,.5)}}
.flash-up{animation:priceUp .9s ease}
.flash-down{animation:priceDown .9s ease}

/* ── STAT VALUE TRANSITION ────────────────────────────────── */
.stat-value{transition:color .3s}

/* ── UTILITIES ────────────────────────────────────────────── */
.hidden{display:none!important}
.mono{font-family:var(--mono)}
.muted{color:var(--mu)}
.hi{color:var(--hi)}
.empty{color:var(--mu);font-size:12px;font-style:italic;padding:12px 0}

/* ── ACCESSIBILITY: FOCUS RING ────────────────────────────── */
:focus{outline:none}
:focus-visible{outline:2px solid rgba(59,124,248,.6);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible{border-radius:6px}

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--bd);padding:20px 28px;
  font-size:11px;color:var(--mu);font-family:var(--mono);
  max-width:var(--wrap);margin:0 auto;
}

/* ── LIVE DATA HELPERS (atlas-data.js) ───────────────────── */
.driver-chip{
  display:inline-flex;align-items:center;padding:4px 10px;
  background:rgba(59,124,248,.08);border:1px solid rgba(59,124,248,.2);
  border-radius:20px;font-size:11px;color:var(--bl-h);font-family:var(--mono);
  white-space:nowrap;
}
.search-dropdown::-webkit-scrollbar{width:4px}
.search-dropdown::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.earn-card{transition:transform .15s,box-shadow .15s}
.earn-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.4)}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:1100px){.g4,.g5,.g6{grid-template-columns:repeat(3,1fr)}}

/* Nav: progressive trim of "right side" widgets as space tightens.
   Tabs themselves are NEVER hidden — they scroll horizontally with edge fade. */
@media(max-width:1400px){
  .nav-search input{width:110px}
  .nav-search:focus-within input{width:160px}
}
@media(max-width:1240px){
  /* Drop the "Atlas" wordmark, keep just the A logo */
  .nav-brand-name{display:none}
  .nav-brand{padding-right:8px}
}
@media(max-width:1140px){
  /* Hide the NYSE status indicator — info still in the ticker tape below */
  .nav-live{display:none}
}
@media(max-width:1040px){
  /* Trim search field down so all tabs stay reachable */
  .nav-search{margin:0 4px}
  .nav-search input{width:80px}
  .nav-search:focus-within input{width:140px}
}
@media(max-width:940px){
  /* Hide "Log In" button (Sign Up stays); search is still tappable */
  .nav-right .nav-btn:not(.primary){display:none}
}

@media(max-width:900px){
  .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr 1fr}
  .perf-grid{grid-template-columns:1fr}
}
@media(max-width:780px){
  /* Very narrow screens: collapse search to icon-only and hide all CTAs */
  .nav-search input{width:0;padding:0}
  .nav-search:focus-within input{width:130px;padding:0}
  .nav-right{display:none}
}
@media(max-width:640px){
  .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}
  .wrap{padding:24px 16px 60px}
}

/* ── Toast notifications ─────────────────────────────────────── */
#atlasToastStack{
  position:fixed;bottom:28px;right:28px;
  display:flex;flex-direction:column-reverse;gap:10px;
  z-index:99999;pointer-events:none;
}
.atlas-toast{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:10px;
  background:#0c1825;border:1px solid rgba(255,255,255,.11);
  box-shadow:0 8px 36px rgba(0,0,0,.6);
  font-family:'Inter',-apple-system,sans-serif;
  font-size:13.5px;font-weight:500;color:#c8d8ef;
  pointer-events:auto;cursor:pointer;
  transform:translateX(0);opacity:1;
  transition:opacity .3s ease,transform .3s ease;
  white-space:nowrap;max-width:340px;
}
.atlas-toast.at-ok  {border-left:3px solid #4ade80;color:#d4fce8}
.atlas-toast.at-err {border-left:3px solid #f87171;color:#fee2e2}
.atlas-toast.at-info{border-left:3px solid #60a5fa;color:#dbeafe}
.atlas-toast.at-warn{border-left:3px solid #fbbf24;color:#fef3c7}
.atlas-toast.at-out {opacity:0;transform:translateX(16px)}

/* ══════════════════════════════════════════════════════════════
   MOBILE NAVIGATION  ≤768px
   Hamburger · slide-in drawer · bottom tab bar
   ══════════════════════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop) ─────────────────────── */
.nav-ham{
  display:none;align-items:center;justify-content:center;
  width:36px;height:36px;background:transparent;
  border:1px solid rgba(255,255,255,.12);border-radius:8px;
  color:var(--di);cursor:pointer;flex-shrink:0;margin-left:auto;
  transition:background .15s,border-color .15s;
}
.nav-ham:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--t)}
.nav-ham svg{width:18px;height:18px;display:block}

/* ── Mobile breakpoint ─────────────────────────────────────────── */
@media(max-width:768px){
  .nav-links{display:none!important}
  .nav-right{display:none!important}
  .nav-live{display:none!important}
  .nav-search{margin:0 4px 0 auto}
  .nav-ham{display:flex}
  /* Clearance so content clears the bottom tab bar + iPhone home bar */
  .main{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .wrap{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* ── Drawer overlay ─────────────────────────────────────────────── */
#_mobOverlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:1050;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
body.mob-open #_mobOverlay{opacity:1;pointer-events:auto}

/* ── Slide-in drawer ─────────────────────────────────────────────  */
#_mobDrawer{
  position:fixed;top:0;left:0;bottom:0;
  width:min(300px,85vw);
  background:var(--s1);border-right:1px solid rgba(255,255,255,.08);
  z-index:1060;display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
  box-shadow:8px 0 40px rgba(0,0,0,.5);
}
body.mob-open #_mobDrawer{transform:translateX(0)}

/* Drawer header */
._mob-dh{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
._mob-dh-logo{
  width:28px;height:28px;border-radius:8px;
  background:var(--bl);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);
}
._mob-dh-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--hi);flex:1}
._mob-dh-close{
  background:transparent;border:none;color:var(--mu);
  font-size:20px;line-height:1;cursor:pointer;
  padding:6px;border-radius:6px;transition:color .13s,background .13s;
}
._mob-dh-close:hover{color:var(--t);background:rgba(255,255,255,.06)}

/* Drawer nav links */
._mob-nav{flex:1;padding:8px 0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;}
._mob-navlink{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;color:var(--di);
  font-size:14px;font-weight:500;text-decoration:none;
  transition:color .13s,background .13s;
  border-left:3px solid transparent;
}
._mob-navlink:hover{color:var(--hi);background:rgba(255,255,255,.04)}
._mob-navlink.active{
  color:var(--hi);border-left-color:var(--bl);
  background:rgba(59,124,248,.07);font-weight:600;
}
._mob-navlink svg{width:16px;height:16px;flex-shrink:0;opacity:.7}
._mob-navlink.active svg{opacity:1}
._mob-nav-sep{height:1px;background:rgba(255,255,255,.06);margin:6px 0}
._mob-nav-section{
  padding:10px 20px 4px;
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mu);font-weight:700;font-family:var(--mono);
  flex-shrink:0;
}

/* Drawer auth section */
._mob-auth{padding:14px 16px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0}
._mob-auth-user{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);margin-bottom:10px;
}
._mob-auth-av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}
._mob-auth-name{font-size:13px;font-weight:600;color:var(--hi)}
._mob-auth-email{font-size:11px;color:var(--mu);font-family:var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
._mob-auth-btns{display:flex;flex-direction:column;gap:8px}
._mob-abtn{
  display:block;width:100%;text-align:center;
  padding:11px 16px;border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;
  border:none;font-family:var(--sans);transition:all .15s;
}
._mob-abtn.primary{
  background:var(--bl);color:#fff;
  box-shadow:0 2px 12px rgba(59,124,248,.35),0 0 0 1px rgba(59,124,248,.5);
}
._mob-abtn.primary:hover{background:#2563eb}
._mob-abtn.ghost{
  background:rgba(255,255,255,.04);color:var(--di);
  border:1px solid rgba(255,255,255,.10);
}
._mob-abtn.ghost:hover{color:var(--t);background:rgba(255,255,255,.08)}
._mob-abtn.danger{
  background:rgba(248,113,113,.08);color:var(--rd-t);
  border:1px solid rgba(248,113,113,.2);
}
._mob-abtn.danger:hover{background:rgba(248,113,113,.15)}

/* ── Drawer legal footer ─────────────────────────────────────────── */
._mob-legal{
  padding:14px 20px 10px;
  border-top:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex-shrink:0;
}
._mob-legal-link{font-size:11px;color:rgba(148,163,184,.55);text-decoration:none;transition:color .15s}
._mob-legal-link:hover{color:var(--mu)}
._mob-legal-sep{font-size:11px;color:rgba(148,163,184,.25)}

/* ── Bottom tab bar ─────────────────────────────────────────────── */
#_mobTabBar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:60px;
  background:rgba(5,12,22,.97);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.08);
  z-index:1040;
  grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media(max-width:768px){#_mobTabBar{display:grid}}

.mob-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 2px;
  color:var(--mu);font-size:10px;font-weight:500;
  text-decoration:none;background:transparent;border:none;
  cursor:pointer;font-family:var(--sans);transition:color .15s;
  min-height:44px;position:relative;-webkit-tap-highlight-color:transparent;
}
.mob-tab:hover{color:var(--di)}
.mob-tab.active{color:var(--bl)}
.mob-tab.active::after{
  content:'';position:absolute;top:0;left:22%;right:22%;
  height:2px;border-radius:0 0 3px 3px;background:var(--bl);
}
.mob-tab svg{width:20px;height:20px;flex-shrink:0}
.mob-tab-label{line-height:1}

/* ══════════════════════════════════════════════════════════════
   MOBILE PAGE / COMPONENT FIXES
   ══════════════════════════════════════════════════════════════ */

/* ── Page header: stack vertically on small screens ───────────── */
@media(max-width:640px){
  .ph{flex-direction:column;align-items:flex-start;gap:12px}
  .ph-right{width:100%}
  .ph-title{font-size:22px}
  .ph-sub{font-size:12px}
}

/* ── Table horizontal scroll ──────────────────────────────────── */
@media(max-width:768px){
  /* Let the card-body handle clipping so scrollbars work */
  .card:has(.tbl){overflow:visible}
  .card-body:has(.tbl),.card-body:has(.tbl-scroll){
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  /* Explicit scroll-container helper class (for injected tables) */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td{padding:8px 10px;font-size:11.5px}
}

/* ── Stat tiles ───────────────────────────────────────────────── */
@media(max-width:640px){
  .stat-value{font-size:22px}
  .stat-tile{padding:14px 16px}
}

/* ── Touch targets: 44 × 44 px minimum ───────────────────────── */
@media(max-width:768px){
  .btn{min-height:44px}
  .nav-btn{min-height:44px;padding:10px 14px}
  .tbtn{padding:8px 14px}
  .feed-tab{padding:12px 16px}
  .port-tab{padding:10px 16px}
  .hp-tab{padding:8px 16px}
  input,select,textarea{min-height:44px;padding:10px 12px}
}

/* ── Auth modal: slide up as bottom sheet on phones ───────────── */
@media(max-width:480px){
  .auth-overlay{align-items:flex-end!important}
  .auth-box{
    width:100%!important;max-width:100%!important;
    border-radius:22px 22px 0 0!important;
    max-height:92vh!important;overflow-y:auto!important;
  }
}

/* ── Toast stack: float above tab bar on mobile ───────────────── */
@media(max-width:768px){
  #atlasToastStack{bottom:76px;right:12px;left:12px}
  .atlas-toast{max-width:100%;white-space:normal}
}

/* ── Offline banner: sit above tab bar on mobile ─────────────── */
@media(max-width:768px){
  #_atlasOfflineBanner{bottom:60px!important}
}

/* ── Onboarding overlay: clear tab bar ───────────────────────── */
@media(max-width:768px){
  #_atlasOB{padding-bottom:60px}
}