/* App shell shared by every student page: top bar, bottom tabs (phones), page header, cards, sheets.
   Loaded after the page's own stylesheet so the shell looks the same everywhere. */
:root{
  --ink:#0f3d33; --ink-2:#165446; --amber:#f2a33a; --amber-deep:#d9821b; --amber-soft:#fde7c4;
  --paper:#f6f1e7; --card:#fff; --line:#e7dcc8; --text:#1d2a26; --muted:#5b6b66; --on-ink:#fbf6ec;
  --red:#d64545; --red-soft:#fde3e3; --green:#1f9d55; --green-soft:#dcf5e6; --blue:#2563eb; --blue-soft:#dbe7ff;
  --shadow:0 1px 2px rgba(15,61,51,.06),0 6px 18px rgba(15,61,51,.07); --radius:18px;
  --bar-h:58px; --tabs-h:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--paper:#0c1714;--card:#13221e;--line:#22362f;--text:#e9efe9;--muted:#9fb2ab;--amber-soft:#3a2a12;--red-soft:#3a1717;--green-soft:#123222;--blue-soft:#162544;--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3)}
}
body{background:var(--paper);color:var(--text);font-family:"Mukta",system-ui,sans-serif}
body.has-tabs{padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom) + 8px)}

/* ---------- top bar ---------- */
.appbar{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--on-ink);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.appbar .in{max-width:1120px;margin:0 auto;height:var(--bar-h);display:flex;align-items:center;gap:10px;padding:0 12px 0 14px}
.ab-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;flex:1}
.ab-logo{flex:none;width:36px;height:36px;border-radius:11px;background:var(--amber);display:grid;place-items:center}
.ab-title{font-family:"Rozha One","Mukta",serif;font-size:19px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-title small{display:block;font-family:"Mukta",sans-serif;font-size:12px;opacity:.7;font-weight:600}
.ab-back{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:inherit;text-decoration:none;font-size:22px;background:rgba(255,255,255,.08)}
.ab-nav{display:none;gap:4px}
.ab-nav a{color:inherit;text-decoration:none;font-weight:700;font-size:15px;padding:8px 12px;border-radius:12px;opacity:.82}
.ab-nav a.on,.ab-nav a:hover{opacity:1;background:rgba(255,255,255,.1)}
.ab-streak{flex:none;display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:16px;padding:6px 12px;border-radius:999px;background:rgba(242,163,58,.16);color:var(--amber);text-decoration:none;border:1px solid rgba(242,163,58,.35)}
.ab-streak.cold{color:var(--on-ink);opacity:.7;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
.ab-me{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:inherit;text-decoration:none}
.ab-me{position:relative}.ab-me.in::after{content:"";position:absolute;right:2px;bottom:2px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid var(--ink,#0f3d33)}
@media (min-width:900px){.ab-nav{display:flex}}

/* ---------- bottom tabs (phones) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar .in{display:grid;grid-template-columns:repeat(5,1fr);height:var(--tabs-h);max-width:600px;margin:0 auto}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--muted);font-size:12.5px;font-weight:700;position:relative}
.tabbar a svg{width:24px;height:24px}
.tabbar a.on{color:var(--ink)}
.tabbar a.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 4px 4px;background:var(--amber)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tabbar a.on{color:var(--amber)}}
.tabbar .dot{position:absolute;top:8px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--card)}
@media (min-width:900px){.tabbar{display:none}body.has-tabs{padding-bottom:0}}
body.exam-mode .appbar,body.exam-mode .tabbar{display:none}
body.exam-mode{padding-bottom:0}

/* ---------- page header + layout helpers ---------- */
.ph{max-width:1120px;margin:0 auto;padding:18px 16px 6px}
.ph h1{font-family:"Rozha One","Mukta",serif;font-weight:400;font-size:clamp(26px,6vw,36px);line-height:1.15}
.ph p{color:var(--muted);margin-top:4px;font-size:16px}
.page{max-width:760px;margin:0 auto;padding:14px 16px 28px}
.stack{display:grid;gap:12px}
.sec-t{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 2px 10px}
.sec-t h2{font-size:19px;font-weight:800}
.sec-t a{font-weight:700;font-size:14.5px;color:var(--amber-deep);text-decoration:none}
.card2{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.row2{display:flex;align-items:center;gap:12px}
.ic2{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:var(--amber-soft)}
.t2{font-weight:800;font-size:17px;line-height:1.3}
.s2{color:var(--muted);font-size:14.5px;line-height:1.4}
.go2{margin-left:auto;flex:none;font-weight:800;color:var(--amber-deep);font-size:20px}
a.card2{display:block;text-decoration:none;color:inherit;transition:transform .15s,border-color .15s}
a.card2:hover{transform:translateY(-2px);border-color:var(--amber)}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:800;font-size:16px;padding:12px 18px;border-radius:14px;border:0;cursor:pointer;text-decoration:none;line-height:1.2}
.btn2.amber{background:var(--amber);color:#1b1305}
.btn2.ink{background:var(--ink);color:var(--on-ink)}
.btn2.line{background:transparent;color:var(--text);border:1.5px solid var(--line)}
.btn2.wa{background:#1fa855;color:#fff}
.btn2.block{width:100%}
.muted2{color:var(--muted)}

/* ---------- sheet (bottom drawer) + toast ---------- */
.sheet2{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet2 .box{background:var(--card);color:var(--text);width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:24px 24px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:up .25s cubic-bezier(.2,.8,.2,1)}
.sheet2 .grab{width:44px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 12px}
.sheet2 h3{font-size:21px;font-weight:800;margin-bottom:4px}
@media (min-width:700px){.sheet2{align-items:center}.sheet2 .box{border-radius:24px}}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.toast2{position:fixed;left:50%;bottom:calc(var(--tabs-h) + 24px);transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--on-ink);padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:90vw;text-align:center;animation:up .25s}
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chip2{border:1.5px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.chip2[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.sheet2,.sheet2 .box,.toast2{animation:none}}

/* older study pages: compact page heads inside the app */
.hero{padding:20px 0 56px!important}
.hero h1{font-size:clamp(26px,6vw,36px)!important}
.hero p{font-size:16px}
.tabs{top:var(--bar-h)!important}
body.exam-mode .tabs{top:0!important}

/* content protection: nothing to save except through the status-share button */
img,video,canvas{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
.q,.qtext,.qtopic,.opt,.rv,.rv-q,.rv-o,.qcard,.js-review,.js-q,.js-opts,.nocopy{-webkit-user-select:none;user-select:none}