/* Touma — Warm Paper: light, editorial, calm. Warm-cream canvas · one ink-teal accent ·
   flat soft cards · typography-led · NO glass, NO gradients-as-decoration, NO ambient motion.
   Motion happens only on the student's action. The PDF viewer stays dark so the highlight
   spotlight still pops. Every selector the app.js contract relies on is preserved. */
:root{
  /* warm paper surface stack */
  --paper:#faf6ef; --paper2:#f4eee3; --card:#fffdf9; --card2:#f7f1e6;
  --ink:#2a2622; --ink-soft:#5b5347; --muted:#766d5f; --muted2:#9a9080;
  --line:#e7ddcc; --line2:#dccdb4;
  /* one confident accent — deep ink-teal (warm-leaning, not neon) */
  --accent:#0f7a6e; --accent-deep:#0b5d54; --accent-soft:#e2f0ec; --accent-tint:rgba(15,122,110,.10);
  /* supporting semantic colors, all muted/earthy to match paper */
  --green:#3f8f5f; --green-soft:#e6f1e6; --amber:#c2841f; --amber-soft:#f6ecd6;
  --rose:#be4d52; --rose-soft:#f6e4e1; --gold:#b8862c;
  /* dark page frame (for the viewer only) */
  --page-bg:#14110d;
  /* back-compat aliases referenced directly from app.js (browse boxes, review button) */
  --teal:#2dd4bf; --teal-soft:rgba(45,212,191,.18);
  --radius:18px; --radius-sm:13px; --radius-xs:10px;
  --shadow-card:0 1px 2px rgba(60,48,30,.04), 0 6px 18px -10px rgba(60,48,30,.14);
  --shadow-pop:0 12px 30px -12px rgba(60,48,30,.22);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --ease-out:cubic-bezier(.22,.9,.3,1);
  --font:"Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
  --font-display:"Tajawal","Cairo",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent-soft);color:var(--accent-deep)}
html,body{height:100%;margin:0}
body{
  font-family:var(--font);color:var(--ink);font-size:15px;letter-spacing:.1px;
  background:var(--paper);overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ambient{display:none}  /* warm paper: no ambient background */

#app{height:100vh;height:100dvh;overflow:hidden;position:relative}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.screen.active{opacity:1;transform:none;pointer-events:auto}
.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.scrollable::-webkit-scrollbar{width:8px}
.scrollable::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.wrap{width:100%;max-width:860px;margin:0 auto;padding:22px}
.muted{color:var(--muted)} .small{font-size:12px}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}

/* ---------- buttons ---------- */
.btn{background:var(--accent);color:#fff;font-weight:800;border-radius:var(--radius-sm);
  padding:14px 22px;font-size:15px;letter-spacing:.2px;
  transition:transform .15s var(--ease-spring),background .2s,box-shadow .2s;
  box-shadow:0 1px 2px rgba(11,93,84,.2)}
.btn:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(11,93,84,.4)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.btn.ghost{background:transparent;color:var(--accent-deep);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:hover{background:var(--card2);box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn.block{width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.row{display:flex;gap:10px;align-items:center}

/* ---------- Orb (warm, restrained; only animates while speaking/recording) ---------- */
.orb{width:80px;height:80px;border-radius:50%;flex:none;position:relative;cursor:pointer;
  background:var(--accent);box-shadow:0 4px 14px -4px rgba(15,122,110,.5);
  transition:transform .18s var(--ease-spring),background .2s}
.orb::after{content:"🎙️";position:absolute;inset:0;display:grid;place-items:center;font-size:24px;opacity:.95}
.orb:hover{transform:scale(1.04);background:var(--accent-deep)} .orb:active{transform:scale(.93)}
.orb.sm{width:52px;height:52px}.orb.sm::after{font-size:17px}
.orb.rec{background:var(--rose);animation:rec 1.2s infinite}.orb.rec::after{content:"⏺"}
.orb.speaking{animation:speak 1.1s ease-in-out infinite}.orb.speaking::after{content:"🔊"}
@keyframes breathe{0%,100%{}50%{}}
@keyframes speak{0%,100%{box-shadow:0 4px 14px -4px rgba(15,122,110,.45)}50%{box-shadow:0 6px 22px 0 rgba(15,122,110,.7)}}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(190,77,82,.45)}70%{box-shadow:0 0 0 18px rgba(190,77,82,0)}100%{box-shadow:0 0 0 0 rgba(190,77,82,0)}}

/* ---------- HERO 1: login ---------- */
#login .wrap{max-width:410px;margin:auto;text-align:center}
#login .orb{margin:7vh auto 0;width:84px;height:84px}
.brand{font-family:var(--font-display);font-size:46px;font-weight:800;letter-spacing:.5px;margin:22px 0 4px;color:var(--accent-deep)}
.brand-sub{color:var(--muted);margin-bottom:32px;font-size:15px}
.field{text-align:start;margin:16px 0}
.field label{display:block;font-size:13px;color:var(--ink-soft);margin:0 6px 7px;font-weight:700}
.field .in{display:flex;align-items:center;background:var(--card);border:1.5px solid var(--line2);
  border-radius:var(--radius-sm);padding:0 14px;transition:border-color .2s,box-shadow .2s}
.field .in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.field input{flex:1;background:none;border:0;outline:none;color:var(--ink);font-family:inherit;font-size:16px;padding:15px 4px}
.field input::placeholder{color:var(--muted2)}
#login .btn{margin-top:6px;padding:16px}
.login-hint{color:var(--muted);font-size:12.5px;margin-top:20px}
.shake{animation:shake .42s}
@keyframes shake{0%,100%{transform:none}18%,54%{transform:translateX(-8px)}36%,72%{transform:translateX(8px)}}

/* ---------- Home ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 6px}
.hello{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--ink)}
.iconbtn{width:44px;height:44px;border-radius:13px;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;font-size:18px;transition:transform .15s var(--ease-spring),background .2s,border-color .2s}
.iconbtn:hover{background:var(--card2);border-color:var(--line2)}.iconbtn:active{transform:scale(.93)}
.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;
  border-radius:var(--radius);margin:10px 0;border:1px solid var(--line);background:var(--card);
  box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.banner::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--accent)}
.banner.resume{background:var(--accent-soft);border-color:#cfe6df}
.banner.review{background:var(--amber-soft);border-color:#ecdcb8}
.banner.review::before{background:var(--amber)}
.banner .t{font-weight:800;font-size:15px;color:var(--ink)} .banner .s{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.sectionlabel{font-size:13px;color:var(--muted);margin:24px 6px 12px;font-weight:800;letter-spacing:.3px;
  display:flex;align-items:center;gap:10px}
.sectionlabel::after{content:"";flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:620px){.grid{grid-template-columns:repeat(3,1fr)}}
.topic{padding:18px;border-radius:var(--radius);position:relative;overflow:hidden;text-align:start;
  background:var(--card);border:1px solid var(--line);min-height:134px;box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease-spring),box-shadow .2s,border-color .2s}
.topic:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow-pop)}
.topic:active{transform:translateY(-1px) scale(.99)}
.topic .name{font-weight:800;font-size:16.5px;margin-top:12px;color:var(--ink)}
.topic .status{font-size:12px;color:var(--muted);margin-top:3px}
.ring{--p:0;width:46px;height:46px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center}
.ring::after{content:attr(data-p);width:37px;height:37px;border-radius:50%;background:var(--card);
  display:grid;place-items:center;font-size:11.5px;font-weight:800;color:var(--accent-deep)}
.ring.green{background:conic-gradient(var(--green) calc(var(--p)*1%),var(--line) 0)}.ring.green::after{color:var(--green)}
.ring.amber{background:conic-gradient(var(--amber) calc(var(--p)*1%),var(--line) 0)}.ring.amber::after{color:var(--amber)}

/* ---------- Topic hub ---------- */
.hdr{display:flex;align-items:center;gap:14px;padding:20px 22px}
.back{font-size:20px;width:42px;height:42px;border-radius:13px;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;transition:transform .15s var(--ease-spring),background .2s}
.back:hover{background:var(--card2)}.back:active{transform:scale(.93)}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:8px 0 4px}
.mode{padding:20px 12px;border-radius:var(--radius);text-align:center;background:var(--card);
  border:1px solid var(--line);position:relative;box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease-spring),box-shadow .2s,border-color .2s}
.mode:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow-pop)}
.mode:active{transform:scale(.97)}
.mode.primary{background:var(--accent-soft);border-color:#cfe6df}
.mode .ic{font-size:28px} .mode .mt{font-weight:800;margin-top:10px;font-size:15px;color:var(--ink)}
.mode .ms{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}
.soon{position:absolute;top:9px;inset-inline-start:9px;font-size:9px;background:var(--amber);color:#fff;
  padding:2px 8px;border-radius:99px;font-weight:800}
.seclist{margin-top:10px}
.secrow{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--card);margin:9px 0;box-shadow:var(--shadow-card);
  transition:transform .15s var(--ease-spring),background .2s,border-color .2s}
.secrow:hover{background:var(--card2);border-color:var(--line2)}.secrow:active{transform:scale(.99)}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--line2)}
.dot.green{background:var(--green)}.dot.amber{background:var(--amber)}.dot.teal{background:var(--accent)}
.secrow .nm{flex:1;font-size:14px;font-weight:600;color:var(--ink)}
.bar{width:74px;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .5s var(--ease-out)}
.bar.green i{background:var(--green)} .bar.amber i{background:var(--amber)}

/* ---------- HERO 2: lesson intro ---------- */
#intro .wrap{max-width:560px;margin:auto;text-align:center}
.intro-title{font-family:var(--font-display);font-size:30px;font-weight:800;margin-top:8px;color:var(--ink)}
.intro-rule{width:60px;height:4px;background:var(--accent);border-radius:9px;margin:12px auto 20px}
.thumb{position:relative;width:100%;max-width:360px;margin:0 auto 20px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line2);background:var(--page-bg);box-shadow:var(--shadow-pop)}
.thumb img{display:block;width:100%}
.thumb .glow{position:absolute;border:2.5px solid var(--accent);border-radius:9px;z-index:2;
  box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 22px var(--accent);animation:speak 1.7s infinite}
.intro-goals{color:var(--ink-soft);font-size:14.5px;line-height:1.95;margin:0 auto 10px;max-width:460px}
.intro-meta{font-size:12.5px;color:var(--muted);margin-bottom:20px;display:inline-flex;gap:8px;align-items:center;
  background:var(--card2);padding:6px 14px;border-radius:99px;border:1px solid var(--line)}
.intro-tutor{display:flex;align-items:center;gap:13px;justify-content:center;margin:20px 0;color:var(--ink);font-size:14.5px}
.intro-actions{display:flex;flex-direction:column;gap:11px;max-width:360px;margin:0 auto}

/* ---------- Study ---------- */
#study{display:flex;flex-direction:column}
.studybar{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.studybar .nm{flex:1;font-size:14.5px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* #study is a vertical flex column; the PDF stage GROWS to take all spare height (dominant),
   everything else is fixed/minimal so nothing crowds it. */
#study{display:flex;flex-direction:column;height:100vh;height:100dvh}
.studytrack{flex:0 0 auto;height:4px;border-radius:0;margin:0;background:var(--line)}
.stage{flex:1 1 auto;min-height:0;display:flex;padding:10px 12px;background:var(--paper2)}
/* the page viewer = a FIXED viewport that fills the stage; stays DARK so the highlight pops.
   overflow:hidden clips the magnified page; nothing scrolls, nothing overlaps. */
.pageframe{position:relative;flex:1 1 auto;width:100%;min-height:0;border-radius:16px;overflow:hidden;
  border:1px solid var(--line2);background:var(--page-bg);box-shadow:var(--shadow-pop)}
.pagezoom{position:absolute;top:0;inset-inline-start:0;width:100%;will-change:transform;transform-origin:0 0}
.pageframe img{display:block;width:100%}
.overlay{position:absolute;inset:0;pointer-events:none}
.overlay::before{content:"";position:absolute;inset:0;background:rgba(10,8,4,.5);
  opacity:0;transition:opacity .4s var(--ease-out);pointer-events:none;border-radius:inherit}
.overlay.spotlight::before{opacity:1}

.cu{position:absolute;border-radius:10px;opacity:0;
  transition:opacity .28s var(--ease-out),box-shadow .28s,background .28s,transform .28s var(--ease-out)}
.cu.lit{opacity:1;z-index:3;background:rgba(45,212,191,.12);
  box-shadow:inset 0 0 0 2px #2dd4bf,0 0 0 2px rgba(255,255,255,.5),0 0 26px 5px rgba(45,212,191,.5),0 8px 24px rgba(0,0,0,.4);
  animation:cuIn .5s var(--ease-spring),cuBreathe 2.6s ease-in-out .5s infinite}
.cu.lit::before,.cu.lit::after{content:"";position:absolute;width:14px;height:14px;border:2.5px solid #2dd4bf;border-radius:4px}
.cu.lit::before{top:-5px;inset-inline-start:-5px;border-bottom:0;border-inline-end:0}
.cu.lit::after{bottom:-5px;inset-inline-end:-5px;border-top:0;border-inline-start:0}
.cu.dim{opacity:1;z-index:2;background:rgba(150,180,255,.07);box-shadow:inset 0 0 0 1.5px rgba(130,195,235,.5)}
.cu.lit.other{background:rgba(245,180,85,.16);
  box-shadow:inset 0 0 0 2px #f5b455,0 0 0 2px rgba(255,255,255,.45),0 0 26px 5px rgba(245,180,85,.5),0 8px 24px rgba(0,0,0,.4)}
.cu.lit.other::before,.cu.lit.other::after{border-color:#f5b455}
.cu.lit.hintpulse{box-shadow:inset 0 0 0 2px #f5b455,0 0 0 2px rgba(255,255,255,.6),0 0 26px #f5b455}
@keyframes cuIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes cuBreathe{0%,100%{box-shadow:inset 0 0 0 2px #2dd4bf,0 0 0 2px rgba(255,255,255,.5),0 0 20px 3px rgba(45,212,191,.42),0 8px 24px rgba(0,0,0,.4)}
  50%{box-shadow:inset 0 0 0 2px #2dd4bf,0 0 0 2px rgba(255,255,255,.7),0 0 34px 8px rgba(45,212,191,.62),0 8px 24px rgba(0,0,0,.4)}}

/* caption = a COMPACT transcript strip under the PDF. Short + fixed so it can never crowd or
   cover the page; scrolls internally if the answer is long. PDF stays the hero. */
.caption{flex:0 0 auto;padding:10px 14px;height:120px;overflow-y:auto;
  border-top:1px solid var(--line);font-size:15px;line-height:1.85;background:var(--card)}
.w{border-radius:6px;padding:1px 3px;transition:color .1s,background .1s}
.w.spoken{color:var(--accent-deep)}
.w.active{background:var(--accent);color:#fff;font-weight:800}
.w.cited{cursor:pointer;text-decoration:underline dotted var(--accent);text-underline-offset:3px}
.bubble{padding:13px 16px;border-radius:16px;font-size:15px;line-height:2;margin:10px 0;border:1px solid var(--line);
  animation:bubbleIn .3s var(--ease-out);max-width:96%;color:var(--ink)}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bubble.me{background:var(--card2);align-self:flex-start;border-bottom-right-radius:5px}
.bubble.ai{background:var(--accent-soft);border-color:#cfe6df;border-bottom-left-radius:5px}
.bubble.good{background:var(--green-soft);border-color:#cfe6cf}
.bubble.contrast{background:var(--amber-soft);border-color:#ecdcb8}
.stepbar{padding:12px 16px;border-top:1px solid var(--line);background:var(--paper)}
.track{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:7px 0}
.track i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .45s var(--ease-out)}
.ctrls{display:flex;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);background:var(--paper)}
.cbtn{flex:1;padding:11px;border-radius:13px;background:var(--card);border:1px solid var(--line2);font-weight:800;
  font-size:13.5px;color:var(--ink);transition:transform .15s var(--ease-spring),background .2s,border-color .2s}
.cbtn:hover{background:var(--card2);border-color:var(--accent)}.cbtn:active{transform:scale(.97)}
.cbtn.primary{background:var(--accent);color:#fff;border-color:transparent}
.cbtn.primary:hover{background:var(--accent-deep)}
.cbtn:disabled{opacity:.4;transform:none}
.ask{display:flex;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);background:var(--paper)}
.ask textarea{flex:1;background:var(--card);border:1.5px solid var(--line2);border-radius:14px;
  color:var(--ink);font-family:inherit;resize:none;height:42px;padding:10px 12px;font-size:14.5px;transition:border-color .2s,box-shadow .2s}
.ask textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.ask textarea::placeholder{color:var(--muted2)}
.status{font-size:12.5px;color:var(--muted);min-height:18px;padding:6px 16px;display:flex;align-items:center;gap:6px}
.statusdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:speak 1s infinite}

/* ---------- Quiz ---------- */
.qcard{padding:20px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);margin-top:14px;box-shadow:var(--shadow-card)}
.qprog{display:flex;gap:7px;justify-content:center;margin:12px 0}
.qprog i{width:9px;height:9px;border-radius:50%;background:var(--line2);transition:.3s}
.qprog i.on{background:var(--accent)} .qprog i.cur{background:var(--accent);transform:scale(1.25)}
.qq{font-size:19px;font-weight:800;text-align:center;margin:16px 0 20px;line-height:1.8;color:var(--ink)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.opt{padding:15px;border-radius:14px;border:1.5px solid var(--line2);background:var(--card);text-align:center;font-size:14px;
  font-weight:700;color:var(--ink);transition:transform .15s var(--ease-spring),background .2s,border-color .2s}
.opt:hover{background:var(--card2);border-color:var(--accent)}
.opt.correct{border-color:var(--green);background:var(--green-soft)}
.opt.wrong{border-color:var(--rose);background:var(--rose-soft)}
.feedback{margin-top:18px;padding:16px;border-radius:14px;background:var(--green-soft);border:1px solid #cfe6cf;
  font-size:14px;line-height:1.95;color:var(--ink)}

/* ---------- misc ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);border:1px solid rgba(0,0,0,.1);color:#fdfbf6;padding:13px 20px;border-radius:14px;
  font-size:13.5px;font-weight:600;opacity:0;transition:.3s var(--ease-spring);pointer-events:none;max-width:90vw;
  text-align:center;z-index:50;box-shadow:var(--shadow-pop)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.coach{margin:12px 0;padding:16px 18px;border-radius:var(--radius);background:var(--accent-soft);
  border:1px solid #cfe6df;font-size:13.5px;line-height:2;color:var(--ink)}
.center{display:grid;place-items:center;height:100%;text-align:center;color:var(--muted);padding:24px}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);
  animation:sp .9s linear infinite;margin:0 auto 14px}
@keyframes sp{to{transform:rotate(360deg)}}
.seg{display:flex;gap:6px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:5px}
.seg button{flex:1;padding:11px;border-radius:11px;font-size:13px;font-weight:800;color:var(--muted);transition:.2s}
.seg button.on{background:var(--accent);color:#fff}
.list-row{display:flex;align-items:center;justify-content:space-between;padding:15px 6px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:padding .2s,background .2s;border-radius:12px}
.list-row:hover{background:var(--card);padding-inline:14px}

/* ---------- Lesson entry: cards (gentle rise-in, NO perpetual float) ---------- */
.plan-q{font-family:var(--font-display);font-size:23px;font-weight:800;text-align:center;margin:14px 0 22px;color:var(--ink)}
@keyframes fcIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fcFloat{0%,100%{}50%{}}  /* no-op: float removed for a calmer feel */
.fc{opacity:0;animation:fcIn .42s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*70ms);margin:13px 0}
.fc-inner{will-change:auto}
.planmode{width:100%;display:flex;align-items:center;gap:15px;text-align:start;padding:20px;
  border-radius:var(--radius);background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .18s var(--ease-spring),box-shadow .2s,border-color .2s}
.planmode:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:var(--shadow-pop)}
.planmode:active{transform:scale(.99)}
.planmode.hero{background:var(--accent-soft);border-color:#cfe6df}
.pm-ic{font-size:30px;flex:none}
.pm-txt{flex:1}
.pm-t{font-weight:800;font-size:17.5px;color:var(--ink)}
.pm-s{font-size:13px;color:var(--ink-soft);margin-top:4px}
.pm-hint{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.6}
.pm-go{flex:none;color:var(--accent-deep);font-weight:800;font-size:14px}
.seccards{margin:2px 0 8px}
.seccard{width:100%;display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--line);text-align:start;box-shadow:var(--shadow-card);
  transition:transform .15s var(--ease-spring),background .2s}
.seccard:hover{background:var(--card2)}.seccard:active{transform:scale(.99)}
.sc-nm{flex:1;font-size:14px;font-weight:600;color:var(--ink)}
.secmark{display:flex;align-items:center;gap:9px;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
#secjump{flex:1;background:var(--card);border:1px solid var(--line2);color:var(--ink);
  border-radius:11px;padding:9px;font-family:inherit;font-size:13px;max-width:100%}
.browseable{cursor:pointer}

/* ---------- check + hint loop ---------- */
.checkbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-top:1px solid var(--line);background:var(--amber-soft);animation:bubbleIn .3s var(--ease-out)}