/* SlabRow global shell — logo, ticker, glass nav (v66) */
:root{
  --sr-bg:#0b0f19;
  --sr-panel:rgba(18,24,38,.75);
  --sr-line:rgba(0,136,255,.22);
  --sr-blue:#0088ff;
  --sr-cyan:#22d3ee;
  --sr-text:#f1f5f9;
  --sr-mute:#8b9cb3;
}
html,body{background:var(--sr-bg)!important; color:var(--sr-text)}
body{margin:0}

/* Market ticker — every page */
.sr-ticker{
  position:relative; z-index:100;
  background:#070b12; border-bottom:1px solid rgba(0,136,255,.15);
  overflow:hidden; height:32px; display:flex; align-items:center;
}
.sr-ticker-track{
  display:flex; gap:36px; white-space:nowrap;
  animation:srTicker 40s linear infinite;
  padding-left:100%;
}
.sr-ticker:hover .sr-ticker-track{animation-play-state:paused}
.sr-ticker span{font-size:11px; font-weight:650; color:var(--sr-mute); letter-spacing:.02em}
.sr-ticker .up{color:#22c55e}
.sr-ticker .down{color:#ef4444}
@keyframes srTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Sticky glass navbar */
.sr-nav{
  position:sticky; top:0; z-index:90;
  display:flex; align-items:center; gap:14px;
  min-height:64px; padding:10px 22px;
  background:rgba(11,15,25,.88);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,136,255,.18);
  box-sizing:border-box;
}
.sr-nav .sr-logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; flex:0 0 auto; min-width:0;
}
/* Official SR badge */
.sr-badge{
  width:40px; height:40px; border-radius:11px; flex:0 0 auto;
  display:grid; place-items:center;
  font-family:Inter,system-ui,sans-serif;
  font-weight:900; font-size:15px; letter-spacing:.5px; color:#fff;
  background:linear-gradient(145deg,#00a3ff 0%, #0088ff 45%, #0055cc 100%);
  border:1px solid rgba(0,180,255,.55);
  box-shadow:0 0 0 1px rgba(0,136,255,.35), 0 0 22px rgba(0,136,255,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.sr-word{
  display:flex; flex-direction:column; line-height:1.05;
  font-family:Inter,system-ui,sans-serif;
}
.sr-word b{
  font-size:13px; font-weight:800; letter-spacing:.18em; color:#fff;
  font-style:normal;
}
.sr-word i{
  font-size:10px; font-weight:700; letter-spacing:.24em; color:#0088ff;
  font-style:normal; margin-top:2px;
}
.sr-links{display:flex; align-items:center; gap:4px 14px; margin-left:6px}
.sr-links a, .sr-links .sr-drop-btn{
  font-size:13px; font-weight:650; color:var(--sr-mute);
  text-decoration:none; padding:8px 2px; border:0; background:none;
  border-bottom:2px solid transparent; cursor:pointer; font-family:inherit;
}
.sr-links a:hover, .sr-links a.on, .sr-drop-btn:hover{color:#fff}
.sr-links a.on, .sr-drop-btn.on{color:#fff; border-bottom-color:#0088ff}
.sr-drop{position:relative}
.sr-drop-panel{
  position:absolute; top:calc(100% + 8px); left:0; min-width:190px;
  background:#0e1524; border:1px solid rgba(0,136,255,.25); border-radius:12px;
  padding:6px; box-shadow:0 16px 40px #000a; z-index:95;
}
.sr-drop-panel[hidden]{display:none!important}
.sr-drop-panel a{
  display:block; padding:10px 12px; border-radius:8px; color:var(--sr-mute);
  font-size:13px; font-weight:600; text-decoration:none; border:0!important;
}
.sr-drop-panel a:hover{background:#152033; color:#fff}
.sr-search{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:var(--sr-panel); border:1px solid rgba(0,136,255,.2);
  border-radius:999px; padding:8px 14px; width:min(280px,28vw); color:var(--sr-mute);
}
.sr-search input{
  flex:1; border:0; background:transparent; color:#fff; font-size:13px;
  outline:none; min-width:0; height:20px; padding:0;
}
.sr-cta{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:999px; font-size:13px; font-weight:700;
  text-decoration:none; color:#fff;
  background:linear-gradient(135deg,#00a3ff,#0088ff);
  border:1px solid rgba(0,180,255,.4);
  box-shadow:0 6px 18px rgba(0,136,255,.3);
}
.sr-burger{
  display:none; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(0,136,255,.25); background:var(--sr-panel);
  color:#fff; font-size:18px; cursor:pointer;
}

/* Hide legacy headers when shell is active */
body.sr-shell .top,
body.sr-shell .dash-top{display:none!important}

/* Mobile */
@media(max-width:900px){
  .sr-links, .sr-search{display:none}
  .sr-burger{display:grid; place-items:center; margin-left:auto}
  .sr-nav{padding:10px 14px; gap:10px}
  .sr-badge{width:36px; height:36px; font-size:14px}
  .sr-word b{font-size:11px; letter-spacing:.14em}
  .sr-word i{font-size:9px}
}
@media(max-width:420px){
  .sr-cta span{display:none}
  .sr-badge{width:34px; height:34px}
}



/* Glass content blocks (global) */
.glass-card,
.dash-collection-bar,
.mover-tile,
.trend-card,
.inspect-copy .stat-row > div,
.inspect-copy .chartbox,
.inspect-copy .spread,
.inspect-copy .sources,
.inspect-copy .shops{
  background:rgba(18,24,38,.75)!important;
  border:1px solid rgba(0,136,255,.18)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Official slab logo image in nav */
.sr-badge-img{
  width:40px; height:49px; object-fit:contain; flex:0 0 auto;
  filter:drop-shadow(0 0 10px rgba(0,136,255,.45));
  display:block;
}
@media(max-width:900px){
  .sr-badge-img{width:36px; height:44px}
}
/* Don't hide home content under shell */
body.sr-shell .home-wrap{padding-top:4px}
/* Classic pages: hide duplicate legacy tops when shell present */
body.sr-shell > header.top,
body.sr-shell > header.dash-top{display:none!important}
/* Home should not use dash-body full override */
body.home-page{background:#0b0f19}
.home-wrap .hero-center{padding-top:28px}
.home-wrap .hero-features{display:flex; flex-direction:row; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:22px}
.home-wrap .hero-features .dash-pill{max-width:220px}
.stat-pills{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:18px 0 8px}
.stat-pills .pill{
  background:rgba(18,24,38,.75); border:1px solid rgba(0,136,255,.2);
  border-radius:999px; padding:8px 14px; font-size:12px; color:#8b9cb3;
}
.stat-pills .pill b{color:#f1f5f9; margin-right:4px}
.sitefoot{
  max-width:1100px; margin:40px auto 100px; padding:24px 20px;
  border-top:1px solid #1a2940;
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
}
.foot-brand{display:flex; gap:12px; align-items:center}
.foot-brand b{display:block; color:#fff}
.foot-brand small{color:#8b9cb3; font-size:11px}
.foot-links{display:flex; flex-wrap:wrap; gap:14px}
.foot-links a{color:#8b9cb3; text-decoration:none; font-size:13px}
.foot-links a:hover{color:#fff}
.unified-search{
  display:flex; align-items:center; gap:8px; max-width:560px; margin:0 auto;
  background:rgba(18,24,38,.85); border:1px solid rgba(0,136,255,.25);
  border-radius:14px; padding:8px 10px 8px 14px;
}
.unified-search input{
  flex:1; border:0; background:transparent; color:#fff; font-size:15px;
  outline:none; min-width:0; height:36px;
}
.unified-search .icon-btn{
  width:40px; height:40px; border-radius:10px; border:1px solid #1e293b;
  background:#0f172a; color:#94a3b8; cursor:pointer;
}
.unified-search .go{
  height:40px; padding:0 18px; border-radius:10px; border:0; cursor:pointer;
  background:linear-gradient(135deg,#00a3ff,#0088ff); color:#fff; font-weight:750;
}

/* Full-bleed faded brand watermark behind content */
body.sr-shell::before{
  content:"SR";
  position:fixed;
  left:50%; top:42%;
  transform:translate(-50%,-50%);
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:min(42vw,380px);
  letter-spacing:0.08em;
  color:rgba(0,136,255,0.045);
  pointer-events:none;
  z-index:0;
  line-height:1;
  white-space:nowrap;
}
body.sr-shell::after{
  content:"SLABROW  CARDS";
  position:fixed;
  left:0; right:0; bottom:12%;
  text-align:center;
  font-family:Inter,system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(18px,4.5vw,42px);
  letter-spacing:0.55em;
  color:rgba(148,163,184,0.06);
  pointer-events:none;
  z-index:0;
  white-space:nowrap;
}
#srShellRoot, .page, .dash-main, .home-wrap, main, .dock, .drawer, .sr-nav, .sr-ticker{
  position:relative; z-index:1;
}

html.hide-ticker .sr-ticker{display:none!important}
html.reduced-motion .trend-belt,
html.reduced-motion .sr-ticker-track{animation:none!important}
html.reduced-motion .sr-case-glitter{animation:none!important;opacity:.35}

html[data-accent="cyan"]{ --sr-blue:#22d3ee; --sr-cyan:#22d3ee; }
html[data-accent="blue"]{ --sr-blue:#0088ff; --sr-cyan:#38bdf8; }
html[data-accent="violet"]{ --sr-blue:#8b5cf6; --sr-cyan:#a78bfa; }

html[data-density="compact"] .tile{max-width:220px}
html[data-density="dense"] .tile{max-width:180px}
html[data-density="comfy"] .tile{max-width:280px}

/* Settings cards */
.settings-page{max-width:720px; margin:0 auto; padding:24px 16px 120px}
.settings-page .set-card{padding:18px; margin-bottom:16px; border-radius:16px}
.settings-page .set-label{display:block; margin:14px 0 8px; font-size:12px; font-weight:700; color:#8b9cb3; letter-spacing:.06em; text-transform:uppercase}
.settings-page .chk{display:flex; align-items:center; gap:10px; margin:10px 0; font-size:14px; color:#e2e8f0}
.settings-page .theme-btn.on{border-color:#0088ff; color:#fff; box-shadow:0 0 0 1px #0088ff55}
.lang-opt{display:flex; align-items:center; gap:8px; padding:8px 0; color:#e2e8f0}
.lang-five{margin:8px 0}
.lang-pager{display:flex; align-items:center; gap:12px; margin:10px 0}

/* Page load safety — never blank forever */
.page, .dash-main, .home-wrap{min-height:40vh}
.sr-links-full{ display:flex !important; align-items:center; }
@media(max-width:900px){
  .sr-links-full{ display:none !important; }
}

/* Stable chrome heights — reduces jump between pages */
.sr-ticker{ height:32px; min-height:32px; flex-shrink:0; }
.sr-nav{ min-height:64px; height:auto; }
#srShellRoot{ min-height:96px; }
.sr-ticker-track{
  animation-name:srTicker;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}

/* v78 mobile polish — header simplify, hero compress, search, trending */
@media(max-width:900px){
  .sr-nav{
    justify-content:space-between;
    padding:10px 14px;
    min-height:56px;
  }
  .sr-nav .sr-search,
  .sr-nav .sr-cta,
  .sr-nav .sr-links{ display:none !important; }
  .sr-nav .sr-logo{ flex:1; min-width:0; }
  .sr-word b{ font-size:12px; letter-spacing:.14em; }
  .sr-burger{
    margin-left:auto;
    width:44px; height:44px;
    border-radius:12px;
    border:1px solid rgba(0,136,255,.25);
    background:#0c1220;
    color:#e2e8f0;
    font-size:18px;
  }
  .home-wrap .hero-center{
    padding-top:12px !important;
    padding-bottom:8px !important;
  }
  .hero-title{
    font-size:clamp(28px,9vw,40px) !important;
    line-height:1.05 !important;
    margin:6px 0 8px !important;
    letter-spacing:.02em;
  }
  .hero-lede, .home-wrap .lede{
    font-size:13px !important;
    margin:0 auto 12px !important;
    max-width:32rem;
  }
  .kicker{ margin-bottom:4px !important; font-size:10px !important; }
  .unified-search, .search-bar{
    max-width:100% !important;
    width:100%;
    gap:8px;
    padding:6px 6px 6px 14px !important;
  }
  .unified-search input, .search-bar input{
    font-size:16px !important; /* no iOS zoom */
    min-width:0;
    flex:1;
  }
  .stat-pills{
    margin:10px 0 8px !important;
    gap:6px !important;
  }
  .stat-pills .pill{ font-size:11px; padding:6px 10px; }
  .hero-features, .dash-pills.hero-features{
    margin-top:10px !important;
    gap:8px !important;
  }
  .dash-pill{ padding:10px 12px !important; }
  /* Trending: show cards, horizontal scroll if paused */
  .trend-belt-wrap{
    min-height:200px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .trend-belt{
    display:flex !important;
    gap:12px;
    width:max-content;
    min-height:190px;
  }
  .trend-belt.paused{ animation:none !important; }
  .trend-card, .trend-slide{
    width:140px !important;
    flex:0 0 140px !important;
  }
  .trend-card .tc-img, .trend-slide .tc-img{
    height:120px;
  }
  .dash-section-head{ margin-bottom:10px; }
}

/* Mobile menu — heavy open/close, no full-page scroll trap */
.sr-mobile-panel{
  position:fixed; top:0; right:0; bottom:0;
  width:min(300px, 86vw);
  max-height:100dvh;
  background:rgba(8,12,20,.98);
  border-left:1px solid rgba(0,136,255,.28);
  z-index:120;
  transform:translateX(110%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  padding:calc(16px + env(safe-area-inset-top,0px)) 12px 20px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:-12px 0 40px #000a;
}
.sr-mobile-panel.open{ transform:translateX(0); }
.sr-mobile-panel a{
  display:block; padding:14px 14px; margin:2px 0;
  border-radius:12px; color:#e2e8f0; text-decoration:none;
  font-weight:700; font-size:15px;
}
.sr-mobile-panel a:active, .sr-mobile-panel a:hover{ background:#152033; }
.sr-mobile-backdrop{
  position:fixed; inset:0; z-index:110;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  display:none;
}
.sr-mobile-backdrop.open{ display:block; }
body.sr-menu-open{ overflow:hidden; touch-action:none; height:100%; }

/* menu page mobile — no overlay */
@media(max-width:900px){
  .sr-mobile-panel, .sr-mobile-backdrop{ display:none !important; }
  body.sr-menu-open{ overflow:auto; touch-action:auto; height:auto; }
}