/* ═══════════════════════════════════════════════════════════════
   ABEBIT — App Shell v2. Premium dark, desktop + mobile.
   Class names preserved so shell.js keeps working.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --s-bg:#08090C; --s-surf:#0F1116; --s-surf-2:#151821; --s-elev:#1B1F29;
  --s-line:rgba(255,255,255,.07); --s-line-2:rgba(255,255,255,.12);
  --s-t0:#F2F4F7; --s-t1:#A9B1BD; --s-t2:#6B7280;
  --s-gold:#F0B90B; --s-gold-hi:#FCD535;
  --s-bull:#12D18E; --s-bear:#F7485F;
  --s-side:236px;
  --s-e:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--s-bg);overflow:hidden}
body{font-family:var(--font-body,system-ui);font-size:14px;color:var(--s-t0);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
.material-icons-round{font-size:18px!important;vertical-align:middle;line-height:1;flex-shrink:0}

.shell{display:flex;height:100dvh;width:100vw;overflow:hidden}

/* ══════════ SIDEBAR ══════════ */
.shell-side{
  width:var(--s-side);flex-shrink:0;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--s-surf-2),var(--s-surf));
  border-right:1px solid var(--s-line);
  height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;z-index:40;position:relative;
}
.shell-side::-webkit-scrollbar{display:none}
/* soft inner highlight on the right edge */
.shell-side::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(240,185,11,.18) 30%,transparent 70%);pointer-events:none}

.shell-brand{
  display:flex;align-items:center;gap:11px;padding:0 18px;height:64px;flex-shrink:0;
  font-family:var(--font-display,'Space Grotesk',sans-serif);font-weight:700;font-size:17px;
  color:var(--s-t0);letter-spacing:.01em;border-bottom:1px solid var(--s-line);
  position:sticky;top:0;z-index:2;
  background:linear-gradient(180deg,var(--s-surf-2),rgba(21,24,33,.92));backdrop-filter:blur(8px);
}
.shell-brand svg{flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(240,185,11,.28))}
.shell-brand span{background:linear-gradient(100deg,#fff,var(--s-t1));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.shell-nav{flex:1;padding:14px 12px 8px;display:flex;flex-direction:column;gap:2px}
.shell-ng{
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--s-t2);
  padding:16px 10px 6px;font-family:var(--font-mono,monospace);font-weight:600;
}
.shell-ng:first-child{padding-top:2px}

.shell-link{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;
  color:var(--s-t1);white-space:nowrap;
  transition:color .16s var(--s-e),background .16s var(--s-e);
}
.shell-link .material-icons-round{font-size:19px!important;color:var(--s-t2);transition:color .16s}
.shell-link:hover{color:var(--s-t0);background:rgba(255,255,255,.045)}
.shell-link:hover .material-icons-round{color:var(--s-t1)}
/* active: gold gradient wash + left accent bar */
.shell-link.active{
  color:var(--s-gold-hi);font-weight:600;
  background:linear-gradient(90deg,rgba(240,185,11,.14),rgba(240,185,11,.03));
}
.shell-link.active .material-icons-round{color:var(--s-gold)}
.shell-link.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--s-gold-hi),var(--s-gold));
  box-shadow:0 0 10px rgba(240,185,11,.6);
}

.shell-pill-elite,.shell-pill-lock{
  margin-left:auto;font-family:var(--font-mono,monospace);font-size:8.5px;font-weight:700;
  padding:3px 7px;border-radius:6px;letter-spacing:.06em;flex-shrink:0;
}
.shell-pill-elite{background:rgba(240,185,11,.14);color:var(--s-gold);border:1px solid rgba(240,185,11,.26)}
.shell-pill-lock{background:rgba(255,255,255,.05);color:var(--s-t2);border:1px solid var(--s-line-2)}

/* ── sidebar footer ── */
.shell-foot{
  padding:12px;border-top:1px solid var(--s-line);flex-shrink:0;
  display:flex;flex-direction:column;gap:4px;
  /* opaque — nav scrolls *behind* this, so it must fully occlude */
  background:var(--s-surf);
  position:sticky;bottom:0;z-index:2;
}
/* fade the nav out just above the footer instead of a hard cut */
.shell-foot::before{
  content:'';position:absolute;left:0;right:0;bottom:100%;height:22px;
  background:linear-gradient(180deg,transparent,var(--s-surf));pointer-events:none;
}
.shell-link-signout{
  margin-top:0;border:none;border-radius:10px;padding:9px 12px;color:var(--s-t2);font-size:13px;
}
.shell-link-signout:hover{color:var(--s-bear);background:rgba(247,72,95,.08)}
.shell-link-signout .material-icons-round{color:inherit}
.shell-foot-link{
  display:flex;align-items:center;gap:11px;font-size:13px;color:var(--s-t2);
  padding:9px 12px;border-radius:10px;transition:color .16s,background .16s;
}
.shell-foot-link:hover{color:var(--s-t0);background:rgba(255,255,255,.045)}

.shell-user{
  display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px;
  border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--s-line);
}
.shell-avatar{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(145deg,var(--s-gold-hi),var(--s-gold));color:#1A1400;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display,sans-serif);font-weight:700;font-size:12.5px;
  box-shadow:0 4px 12px -2px rgba(240,185,11,.45);
}
.shell-user-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.shell-uname{font-size:12.5px;font-weight:600;color:var(--s-t0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-plan{
  font-family:var(--font-mono,monospace);font-size:8.5px;font-weight:700;padding:2px 7px;
  border-radius:6px;width:fit-content;text-transform:uppercase;letter-spacing:.06em;
}
.shell-plan-free{background:rgba(255,255,255,.06);color:var(--s-t2)}
.shell-plan-pro{background:rgba(18,209,142,.15);color:var(--s-bull)}
.shell-plan-elite{background:rgba(240,185,11,.16);color:var(--s-gold)}
.shell-upgrade{
  margin-left:auto;flex-shrink:0;font-size:13px;font-weight:700;
  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--s-gold-hi),var(--s-gold));color:#1A1400;
  box-shadow:0 4px 12px -3px rgba(240,185,11,.5);transition:transform .16s var(--s-e);
}
.shell-upgrade:hover{transform:translateY(-1px)}

/* guest (anonymous) footer — shown instead of .shell-user on public pages */
.shell-guest{display:flex;gap:8px;margin-top:6px}
.shell-guest-btn{
  flex:1;display:flex;align-items:center;justify-content:center;
  height:36px;border-radius:10px;font-size:12.5px;font-weight:600;
  color:var(--s-t1);border:1px solid var(--s-line);text-decoration:none;
  transition:background .16s,color .16s,border-color .16s;
}
.shell-guest-btn:hover{color:var(--s-t0);background:rgba(255,255,255,.045)}
.shell-guest-primary{
  border:none;color:#1A1400;
  background:linear-gradient(180deg,var(--s-gold-hi),var(--s-gold));
  box-shadow:0 4px 12px -3px rgba(240,185,11,.5);
}
.shell-guest-primary:hover{background:linear-gradient(180deg,var(--s-gold-hi),var(--s-gold));filter:brightness(1.05)}

/* ══════════ MAIN ══════════ */
.shell-main{flex:1;min-width:0;display:flex;flex-direction:column;height:100dvh;overflow:hidden}

/* ── topbar (glass) ── */
.shell-topbar{
  display:flex;align-items:center;gap:14px;height:64px;padding:0 22px;flex-shrink:0;z-index:30;
  background:rgba(8,9,12,.72);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--s-line);
}
.shell-burger{
  display:none;align-items:center;justify-content:center;color:var(--s-t0);
  width:42px;height:42px;border-radius:11px;margin-left:-8px;
  transition:background .16s;
}
.shell-burger:hover{background:rgba(255,255,255,.06)}
.shell-burger .material-icons-round{font-size:23px!important}
.shell-topbar-center{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.shell-page-title{
  font-family:var(--font-display,sans-serif);font-weight:700;font-size:19px;color:var(--s-t0);
  letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shell-topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* clocks */
.shell-clocks{display:flex;align-items:center;gap:2px;padding:4px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid var(--s-line)}
.shell-clock{display:flex;flex-direction:column;align-items:center;padding:3px 10px;border-radius:8px;min-width:54px}
.shell-clock-local{background:rgba(240,185,11,.1)}
.shell-ck-l{font-family:var(--font-mono,monospace);font-size:8.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--s-t2);font-weight:600}
.shell-ck-t{font-family:var(--font-mono,monospace);font-size:12.5px;font-weight:600;color:var(--s-t0);margin-top:1px}
.shell-clock-local .shell-ck-t{color:var(--s-gold)}
.shell-ck-s{font-size:8px;height:9px;line-height:9px}
.shell-mkt-open{color:var(--s-bull)}
.shell-mkt-closed{color:var(--s-t2)}

/* refresh ring */
.shell-refresh-wrap{position:relative;width:30px;height:30px;flex-shrink:0}
.shell-refresh-svg{width:100%;height:100%;transform:rotate(-90deg)}
.shell-refresh-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px!important;color:var(--s-t2)}

/* avatar button */
.shell-avatar-btn{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(145deg,var(--s-gold-hi),var(--s-gold));color:#1A1400;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display,sans-serif);font-weight:700;font-size:12.5px;
  box-shadow:0 4px 14px -3px rgba(240,185,11,.5);transition:transform .16s var(--s-e);
}
.shell-avatar-btn:hover{transform:translateY(-1px)}

/* guest (anonymous) topbar buttons — shown instead of bell + avatar */
.shell-guest-topbar-btn{
  display:flex;align-items:center;height:34px;padding:0 14px;border-radius:10px;
  font-size:12.5px;font-weight:600;color:var(--s-t1);border:1px solid var(--s-line);
  text-decoration:none;white-space:nowrap;transition:background .16s,color .16s;
}
.shell-guest-topbar-btn:hover{color:var(--s-t0);background:rgba(255,255,255,.045)}
.shell-guest-topbar-btn.shell-guest-primary{
  border:none;color:#1A1400;
  background:linear-gradient(180deg,var(--s-gold-hi),var(--s-gold));
  box-shadow:0 4px 12px -3px rgba(240,185,11,.5);
}

/* ── content ── */
.shell-content{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}
.shell-content::-webkit-scrollbar{width:8px}
.shell-content::-webkit-scrollbar-track{background:transparent}
.shell-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:4px;
  border:2px solid transparent;background-clip:content-box}
.shell-content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);background-clip:content-box}
#shell-inner{min-height:100%}

/* ── mobile overlay ── */
.shell-overlay{display:none;position:fixed;inset:0;background:rgba(3,4,6,.66);
  backdrop-filter:blur(3px);z-index:39}
.shell-overlay.show{display:block}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1000px){
  /* off-canvas drawer — transform only (no left-offset hack) */
  .shell-side{
    position:fixed;left:0;top:0;bottom:0;width:min(84vw,var(--s-side));
    transform:translateX(-100%);
    transition:transform .3s var(--s-e);
    box-shadow:none;
  }
  .shell-side.open{transform:translateX(0);box-shadow:24px 0 60px -12px rgba(0,0,0,.7)}
  .shell-overlay{display:block;opacity:0;pointer-events:none;transition:opacity .3s var(--s-e)}
  .shell-overlay.show{opacity:1;pointer-events:auto}
  .shell-burger{display:flex}
  .shell-clocks{display:none}
  /* bigger touch targets in the drawer */
  .shell-link,.shell-foot-link{padding:12px;font-size:14.5px}
  .shell-link .material-icons-round{font-size:21px!important}
}
@media(max-width:640px){
  .shell-topbar{height:58px;padding:0 14px;gap:10px}
  .shell-page-title{font-size:17px}
  .shell-refresh-wrap{display:none}
  .shell-avatar-btn{width:34px;height:34px}
  .shell-guest-topbar-btn{height:32px;padding:0 10px;font-size:12px}
}
@media(max-width:380px){
  .shell-topbar{padding:0 10px}
  .shell-page-title{font-size:16px}
}

/* safe-area (notch / gesture bar) */
@supports(padding:max(0px)){
  .shell-side{padding-bottom:env(safe-area-inset-bottom)}
  .shell-topbar{padding-left:max(14px,env(safe-area-inset-left))}
}

@media(prefers-reduced-motion:reduce){
  .shell-side,.shell-overlay,.shell-link,.shell-avatar-btn,.shell-upgrade{transition:none}
  .shell-avatar-btn:hover,.shell-upgrade:hover{transform:none}
}