/* EXAM REELS — JEE Maths mockup. Dark only. Brand: BRAND-SYSTEM-v1 §1–§5. */
:root{
  --ink:#0B0B0D; --s1:#131316; --s2:#1A1B1F; --s3:#232428; --line:#2A2B31;
  --text:#F4F4F6; --muted:#B6B6BE; --dim:#85858E;
  --accent:#C379F5; --accent-dim:#2A1740; --ok:#3FD98B; --ok-dim:#0F2A1E;
  --bad:#FF5C6B; --bad-dim:#2C1418;
  --r:14px; --rs:10px; --pad:16px; --tap:44px;
  --scale:1;
  color-scheme:dark;
}
html{background:var(--ink);-webkit-text-size-adjust:100%;}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:calc(16px * var(--scale));line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.display,.btn,.wordmark{font-family:'Archivo',"Helvetica Neue",Arial,sans-serif;}
button,input{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit;}
a{color:var(--accent);text-decoration:none;}
::selection{background:var(--accent);color:#000;}

/* ---------- frame ---------- */
#app{
  max-width:560px;margin:0 auto;min-height:100dvh;
  padding:calc(env(safe-area-inset-top) + 14px) var(--pad) calc(env(safe-area-inset-bottom) + 28px);
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
}
body.has-tabs #app{padding-bottom:calc(env(safe-area-inset-bottom) + 92px);}

/* ---------- wordmark & header ---------- */
.wordmark{font-weight:800;letter-spacing:.06em;font-size:calc(15px*var(--scale));text-transform:uppercase;}
.wordmark i{font-style:normal;color:var(--accent);}
.topbar{display:flex;align-items:center;gap:12px;min-height:var(--tap);margin-bottom:6px;}
.topbar .wordmark{flex:1;text-align:center;}
.topbar .spacer{width:var(--tap);}
.iconbtn{
  width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:50%;
  color:var(--text);flex:none;
}
.iconbtn:active{background:var(--s2);}
.iconbtn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

h1{font-size:calc(34px*var(--scale));line-height:1.06;letter-spacing:-.02em;margin:10px 0 4px;font-weight:800;}
h1.small{font-size:calc(26px*var(--scale));}
h2{font-size:calc(21px*var(--scale));margin:22px 0 10px;font-weight:800;letter-spacing:-.01em;}
h3{font-size:calc(18px*var(--scale));margin:0 0 6px;font-weight:800;}
.sub{color:var(--muted);font-size:calc(15px*var(--scale));margin:0 0 12px;}
.eyebrow{font-size:calc(12px*var(--scale));letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:22px 0 8px;font-weight:700;}
.accent{color:var(--accent);}

/* ---------- cards ---------- */
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);margin-bottom:12px;}
.card.flat{background:var(--s2);border-color:transparent;}
.card.accent-edge{border-color:var(--accent);}
.card.tap{display:block;width:100%;}
.card.tap:active{background:var(--s2);}
.muted{color:var(--muted);}
.dim{color:var(--dim);}
.small{font-size:calc(14px*var(--scale));}
.tiny{font-size:calc(13px*var(--scale));}
.center{text-align:center;}

/* ---------- buttons ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:54px;border-radius:var(--r);font-weight:800;
  font-size:calc(17px*var(--scale));padding:12px 18px;margin-bottom:10px;text-align:center;
}
.btn.primary{background:var(--accent);color:#0B0B0D;}
.btn.primary:active{background:#AE63E0;}
.btn.secondary{background:transparent;border:1px solid var(--line);color:var(--text);}
.btn.secondary:active{background:var(--s2);}
.btn.ghost{background:var(--s2);color:var(--text);}
.btn.quiet{min-height:var(--tap);background:none;color:var(--muted);font-weight:600;font-family:'Manrope',sans-serif;}
.btn.quiet:active{color:var(--text);}
.btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;}
.btnrow{display:flex;gap:10px;}
.btnrow .btn{margin-bottom:10px;}

/* ---------- chips ---------- */
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.chiprow.scroll{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
.chiprow.scroll::-webkit-scrollbar{display:none;}
.chiprow.scroll .chip{flex:none;padding:8px 14px;}
.chip{
  min-height:var(--tap);display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--s1);color:var(--muted);
  font-size:calc(15px*var(--scale));font-weight:600;
}
.chip.on{background:var(--accent);color:#0B0B0D;border-color:var(--accent);font-weight:800;}
.chip.mini{min-height:auto;padding:4px 10px;font-size:calc(13px*var(--scale));border-radius:8px;background:var(--s3);border-color:transparent;}
.chip.free{color:var(--text);}
.chip.count{background:var(--s2);}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--accent-dim);
  border:1px solid #3C2158;color:#D9AEF8;font-size:calc(14px*var(--scale));font-weight:700;}
.tag{display:inline-block;padding:5px 11px;border-radius:8px;background:var(--s3);color:var(--muted);
  font-size:calc(13px*var(--scale));font-weight:600;}

/* ---------- bar chart ---------- */
.chart{display:flex;align-items:flex-end;gap:6px;height:170px;margin:18px 0 0;}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px;
  background:none;border-radius:8px 8px 0 0;}
.bar .n{font-size:calc(15px*var(--scale));font-weight:800;}
.bar .fill{width:100%;max-width:56px;background:var(--accent);border-radius:4px 4px 0 0;min-height:5px;
  transition:height .5s cubic-bezier(.2,.8,.2,1);}
.bar.tap:active .fill{background:#AE63E0;}
.axis{display:flex;gap:6px;border-top:1px solid var(--line);padding-top:8px;margin-top:0;}
.axis span{flex:1;text-align:center;color:var(--muted);font-size:calc(13px*var(--scale));}
.axislabel{color:var(--dim);font-size:calc(13px*var(--scale));margin-top:10px;}

/* ---------- rows ---------- */
.row{
  display:flex;align-items:center;gap:12px;width:100%;min-height:56px;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--rs);
  padding:13px 14px;margin-bottom:8px;text-align:left;
}
.row:active{background:var(--s2);}
.row .grow{flex:1;min-width:0;}
.row .name{font-weight:700;}
.row .meta{display:block;color:var(--muted);font-size:calc(14px*var(--scale));margin-top:2px;}
.row.flow .name,.row.flow .meta{display:inline;margin:0;}
.row.flow .meta{font-size:calc(15px*var(--scale));}
.row.locked .name,.row.locked .meta{color:var(--dim);}
.row.done{border-color:#1E4A36;}
.chev{color:var(--dim);flex:none;}
.rail{height:6px;border-radius:3px;background:var(--s3);overflow:hidden;margin-top:9px;}
.rail i{display:block;height:100%;background:var(--accent);border-radius:3px;}

/* ---------- video card ---------- */
.video{display:flex;align-items:center;gap:14px;width:100%;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r);padding:12px;margin-bottom:12px;text-align:left;}
.poster{width:76px;height:104px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,#241338,#131316 70%);border:1px solid #33204A;}
.poster.wide{width:100%;height:auto;aspect-ratio:9/14;max-height:46vh;margin:0 auto;}
.poster svg{width:34px;height:34px;fill:var(--text);opacity:.92;}
.video .t{font-weight:700;}

/* ---------- bands ---------- */
.band{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r);padding:14px;margin-bottom:12px;}
.band.bad{background:var(--bad-dim);border:1px solid #43222A;}
.band.good{background:#0F2A1E;border:1px solid #1E4A36;}
.band .ico{width:28px;height:28px;flex:none;display:grid;place-items:center;font-weight:900;border-radius:50%;}
.band.bad .ico{color:var(--bad);}
.band.good .ico{background:var(--ok);color:#06210F;}
.band .h{font-weight:800;font-family:'Archivo',sans-serif;}
.band.bad .h{color:var(--bad);}
.band.good .h{color:var(--ok);}
.answer{display:flex;align-items:center;gap:14px;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;margin-bottom:12px;}
.answer .tick{width:34px;height:34px;border-radius:50%;background:var(--ok);color:#06210F;display:grid;place-items:center;flex:none;font-weight:900;}

/* ---------- options ---------- */
.opt{display:flex;align-items:center;gap:14px;width:100%;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 14px;margin-bottom:10px;text-align:left;min-height:60px;}
.opt:active{background:var(--s2);}
.opt .k{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  flex:none;font-weight:700;color:var(--muted);font-size:calc(15px*var(--scale));}
.opt .txt{flex:1;min-width:0;}
.opt.quiz{align-items:center;}
.opt.quiz .k{background:var(--s3);border-color:transparent;}
.opt.chosen{border-color:var(--bad);}
.opt.right{border-color:var(--ok);}
.stemcard{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px;}
.qtext{font-weight:800;font-size:calc(19px*var(--scale));line-height:1.35;margin:0 0 14px;font-family:'Archivo',sans-serif;}

/* ---------- sheets / overlay ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:40;opacity:0;animation:fade .18s forwards;}
@keyframes fade{to{opacity:1}}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--s2);
  border-radius:20px 20px 0 0;border-top:1px solid var(--line);
  padding:12px var(--pad) calc(env(safe-area-inset-bottom) + 22px);
  max-width:560px;margin:0 auto;transform:translateY(100%);animation:up .24s cubic-bezier(.2,.8,.2,1) forwards;
  max-height:88dvh;overflow:auto;
}
@keyframes up{to{transform:translateY(0)}}
.grabber{width:44px;height:4px;border-radius:2px;background:#3A3B42;margin:0 auto 16px;}
.sheet h3{text-align:center;}
.sheet .dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--accent);margin:0 auto 14px;
  display:grid;place-items:center;}
.sheet .dot i{width:10px;height:10px;border-radius:50%;background:var(--accent);display:block;}
.lockglyph{display:block;margin:0 auto 12px;width:30px;height:30px;}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);transform:translateX(-50%);
  background:var(--s3);color:var(--text);padding:12px 18px;border-radius:999px;z-index:60;
  font-size:calc(15px*var(--scale));font-weight:600;box-shadow:0 8px 28px rgba(0,0,0,.5);max-width:90vw;text-align:center;}

/* ---------- tabs ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(11,11,13,.94);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:8px 0 calc(env(safe-area-inset-bottom) + 8px);display:flex;max-width:560px;margin:0 auto;}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:var(--tap);
  color:var(--dim);font-size:calc(12px*var(--scale));font-weight:700;}
.tabs button.on{color:var(--accent);}
.tabs svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- misc ---------- */
.ribbon{display:inline-block;padding:6px 12px;border-radius:8px;background:var(--s3);color:var(--muted);
  font-size:calc(12px*var(--scale));font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
.field{width:100%;min-height:54px;background:var(--s2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:10px;color:var(--text);}
.field::placeholder{color:var(--dim);}
.katex{font-size:1.02em;}
.katex-display{margin:.4em 0;}
.solution p{margin:8px 0;}
.hr{height:1px;background:var(--line);margin:18px 0;}
.stack>*:last-child{margin-bottom:0;}
.fadein{animation:fi .22s ease both;}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nowrapscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}