/* App shell: top bar, side/bottom nav, page width, headings. */
/* shell */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bar);color:var(--bar-ink);border-bottom:1px solid var(--bar-line)}
.top .seg{background:#14141E;border-color:var(--bar-line)}
.top .seg button{color:var(--bar-muted)}
.top .seg button[aria-pressed="true"]{background:var(--red);color:#fff}
.top .bell{color:var(--bar-ink)}
.top .as{color:var(--bar-muted)}
.top .as b{color:var(--bar-ink)}
.top .as select{background:#14141E;border-color:var(--bar-line);color:var(--bar-ink)}
.top-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;font:700 23px/1 var(--cond);letter-spacing:.01em;white-space:nowrap;color:var(--logo)}
.brand .sep{width:1px;height:22px;background:var(--bar-muted);opacity:.6}
.brand svg{width:28px;height:30px}
.brand small{font:500 15px/1 var(--cond);color:var(--bar-ink);letter-spacing:.14em}
@media (max-width:420px){.brand small,.brand .sep{display:none}.brand{font-size:21px;gap:7px}.brand svg{width:24px;height:26px}.seg button{padding:6px 9px}.top-in{gap:4px;padding:10px 12px}.thm,.bell{padding:5px}}
.spacer{flex:1}
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:6px 14px;border-radius:999px;font:600 15px/1 var(--cond);cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.as{max-width:1100px;margin:0 auto;padding:0 16px 10px;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.as select{border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:4px 8px;font-size:14px}

.layout{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:0}
main{padding:16px 16px 96px;min-width:0}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.nav button{flex:1;border:0;background:none;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font:600 13px/1.1 var(--cond);color:var(--muted);cursor:pointer;position:relative}
.nav button svg{width:22px;height:22px}
.nav button[aria-current="page"]{color:var(--red)}
@media (max-width:899px){.nav{background:var(--bar);border-top-color:var(--bar-line)}.nav button{color:var(--bar-muted)}.nav button[aria-current="page"]{color:#FF3B3B}}
.badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:var(--red-ink);font:700 12px/18px var(--sans)}
@media (min-width:900px){
  .layout{grid-template-columns:200px 1fr;gap:24px;padding:0 16px}
  main{padding:20px 0 48px}
  .nav{position:sticky;top:120px;align-self:start;flex-direction:column;border:0;background:none;padding:20px 0;gap:2px}
  .nav button{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;border-radius:10px;font-size:17px}
  .nav button[aria-current="page"]{background:var(--tape);color:var(--tape-ink)}
  .nav button[aria-current="page"] svg{color:var(--red)}
  :root[data-theme="dark"] .nav button[aria-current="page"] svg{color:#fff}
  .badge{position:static;margin-left:auto}
}

/* type */
h1{font:700 34px/1.05 var(--cond);margin:0 0 6px;letter-spacing:.01em;text-transform:uppercase}
main>h1::after,.head h1::after{content:"";display:block;width:44px;height:5px;background:var(--red);margin-top:8px}
h2{font:600 20px/1.15 var(--cond);margin:24px 0 10px;letter-spacing:.04em;text-transform:uppercase}
.eb{display:flex;gap:10px;align-items:center;font:500 12px/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:2px 0 10px}
.eb::before{content:"";width:18px;height:2px;background:var(--red)}
.btn.primary{text-transform:uppercase;letter-spacing:.05em}