/* Chalk Talk "clean" theme: calmer, more professional surfaces, one accent, refined type.
   Loaded after style.css; only overrides look, never layout logic. */
:root {
  --bg: #F8F7FA; --surface: #FFFFFF; --surface2: #F2F0F7; --ink: #111214; --ink2: #5D5F66; --line: #E8E5EF;
  --accent: #2F6BFF; --on-accent: #FFFFFF; --brand: #FDDB25; --on-brand: #111214;
  --r-sm: 10px; --r-md: 12px; --r-lg: 18px;
  --head: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --body: 'Geist', 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow: 0 1px 2px rgba(17, 18, 20, .04), 0 12px 32px -18px rgba(17, 18, 20, .16);
}
:root[data-mode="night"] {
  --bg: #0D0E10; --surface: #16171A; --surface2: #1D1F23; --ink: #F4F4F2; --ink2: #A3A5AC; --line: #2A2C31;
  --accent: #7B93FF; --on-accent: #0D0E10;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 36px -18px rgba(0,0,0,.7);
}
body { font-feature-settings: "ss01", "cv11"; letter-spacing: -.005em; }
/* --display stays the Chalk Talk brand face (logo, chalkboard title cards); --head is the new UI heading face */
h1, h2, h3, .h { font-family: var(--head); font-weight: 700; letter-spacing: -.025em; }
.h { font: 700 clamp(26px, 3.6vw, 34px)/1.08 var(--head); }
.prob h3 { font: 700 21px/1.2 var(--head); letter-spacing: -.02em; }
.timer span, .exam-result h3, .tool-head h2, .big-num, .xp-row b, .result, .modal-body h2, .sheet-head h2, .m-hi, .grade .score { font-family: var(--head); font-weight: 700; letter-spacing: -.02em; }
.tcard .ti { font-family: var(--head); font-weight: 800; }

/* anything we scroll to lands below the sticky top bar, not under it */
#boardWrap, #drop, #gradeCard, #planCard, .prob, .panel, main [id] { scroll-margin-top: 84px; }

/* top bar: quieter */
.topbar { background: var(--bg); border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line); }
.course { font-weight: 600; }
.credits { background: var(--ink); color: var(--surface); font-weight: 600; }
.streak, .acct, .ib.round { border-color: var(--line); }

/* buttons: black primary pills, hairline secondaries */
.btn { border-radius: 999px; border: 1px solid var(--line); font-weight: 600; min-height: 44px; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.accent { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn.accent:hover:not(:disabled) { filter: none; background: color-mix(in srgb, var(--ink) 85%, var(--accent)); }
.btn.ghost { background: var(--surface); }
.btn.small { min-height: 34px; }
.chip { border-width: 1px; font-weight: 500; }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* side panel + cards: lighter edges, more air */
.side { background: var(--bg); border-right-color: var(--line); }
.label, .kicker, .plab { letter-spacing: .08em; font-weight: 700; }
.kicker, .plab { color: var(--accent); }
.drop { border: 1.5px dashed color-mix(in srgb, var(--ink) 18%, var(--line)); background: var(--surface); border-radius: var(--r-lg); }
.panel, .card, .tcard, .prob, .keypanel, .stepsbox, .toolbar { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.tcard { border-width: 1px; transition: transform .15s, box-shadow .15s; }
.tcard:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(17,18,20,.05), 0 18px 40px -20px rgba(17,18,20,.25); }
.tcard .ti { border-radius: 12px; }
.seg { background: var(--surface2); border-radius: 999px; padding: 4px; }
.seg button { border-radius: 999px; }
.seg button[aria-pressed="true"], .seg button[aria-current="page"], .seg button[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(17,18,20,.08), 0 2px 8px -4px rgba(17,18,20,.2); }

/* practice problems */
.prob .body { padding: 20px; gap: 14px; }
.pgiven { background: var(--surface2); border-radius: 14px; }
.pchip { border-color: var(--line); background: var(--surface); font-weight: 600; }
.qv { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pask { border-left-width: 2px; }
.myans { border: 1px solid var(--line); background: var(--bg); border-radius: 14px; }
.ma-row input, .ma-text { border-width: 1px; border-radius: 12px; background: var(--surface); }
.hint-text { border-left-width: 2px; }

/* tutor chat */
.msg { border-radius: 18px; padding: 12px 16px; }
.msg.user { background: var(--ink); color: var(--surface); }
.msg.assistant { background: var(--surface); box-shadow: var(--shadow); }
.chatbar textarea, .chatbar input { border-radius: 14px; }
.check { border-radius: 14px; }
.choice { border-radius: 12px; }

/* lesson player stays a chalkboard: just round it a touch more */
.stage, #boardWrap { border-radius: 20px; }

/* ============ v3: match the homepage ============ */
:root { --bg: #F8F7FA; --surface2: #F2F0F7; --line: #E8E5EF; --ink2: #5B5D64; --ok: #12805C; --head: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif; --night: #0C0E10; }
body { background: var(--bg); }

/* top bar: the homepage's dark night strip, with the tabs in the middle */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--night); }
.topbar { background: var(--night); color: #fff; box-shadow: none; border-bottom: 1px solid rgba(255,255,255,.06); gap: 14px; min-height: 64px;
  background-image: radial-gradient(500px 120px at 85% 0%, rgba(253,219,37,.10), transparent 70%), radial-gradient(500px 140px at 10% 100%, rgba(58,91,255,.14), transparent 70%); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.topbar .logo { font-size: 12.5px; padding: 5px 7px 7px; border-radius: 7px; }
.wm { font: 700 18px var(--head); letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.topbar .course { font-weight: 600; font-size: 13.5px; color: #D5D7DB; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 6px 12px; max-width: 260px; }
.topbar .course:empty { display: none; }
.topbar .rail { margin: 0 auto; background: rgba(255,255,255,.06); border-radius: 999px; padding: 4px; gap: 2px; }
.topbar .rail button { height: 36px; padding: 0 14px; border-radius: 999px; color: #A9ACB3; font-weight: 600; font-size: 14px; }
.topbar .rail button:hover { color: #fff; }
.topbar .rail button[aria-current="page"] { background: #fff; color: #111214; box-shadow: none; }
.topbar .rail svg { width: 17px; height: 17px; }
.topbar .grow { display: none; }
.topbar .streak, .topbar .acct, .topbar .ib.round { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.topbar .credits { background: var(--brand); color: #111214; font-weight: 700; }
.side { top: 64px; height: calc(100vh - 64px); }
@media (max-width: 1180px) { .wm { display: none; } .topbar .course { max-width: 160px; } }
@media (max-width: 860px) {
  .topbar { min-height: 0; }
  .topbar .grow { display: block; }
  .wm { display: inline; font-size: 17px; }
}

/* headings and pages: same type as the homepage */
.h, .pane-head .h { font: 800 clamp(30px, 3.4vw, 42px)/1.04 var(--head); letter-spacing: -.04em; }
.tool-head h2 { font: 800 clamp(28px, 3.2vw, 40px)/1.05 var(--head); letter-spacing: -.04em; }
.pane-head .sub, .tool-head .sub { font-size: 16px; color: var(--ink2); }
.kicker { font-size: 12.5px; letter-spacing: .1em; color: var(--accent); }
.main { padding-top: 26px; }
.label { color: #8B8D93; }

/* main actions: the homepage's glowing yellow button */
.btn.accent { background: var(--brand); color: #111214; border-color: var(--brand); font-weight: 700; box-shadow: 0 10px 28px -14px rgba(224,178,0,.9); }
.btn.accent:hover:not(:disabled) { background: #FFE34D; filter: none; }
.btn.accent:disabled { box-shadow: none; }

/* the lesson player: a dark window with a soft glow, like the homepage demo */
.stage { background: #15181B; border: 1px solid rgba(255,255,255,.06); border-radius: 24px; padding: 12px; color: #E7E8EA;
  box-shadow: 0 30px 80px -36px rgba(0,0,0,.55), 0 0 110px -40px rgba(253,219,37,.35); }
.screen { border-radius: 16px; box-shadow: none; }
.controls { margin-top: 10px; padding: 2px 4px; }
.controls .ib { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #fff; }
.controls .ib.big { background: var(--brand); border-color: var(--brand); color: #111214; }
.controls .bar { background: rgba(255,255,255,.12); height: 4px; }
.controls .bar i { background: var(--brand); }
.controls .status { color: #A9ACB3; }
.controls .speed { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: 12px; }
.controls .speed option { color: #111; }
.tabs-row { padding: 0 4px 2px; }
.chapters button { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #D5D7DB; font-weight: 500; }
.chapters button.on { background: #fff; color: #111214; border-color: #fff; }
.stage .link.back { color: #FFE36E; }
.next-up { gap: 12px; margin-top: 20px; }
.nu { border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 1px 2px rgba(17,18,20,.04); transition: transform .15s, box-shadow .15s; }
.nu:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: var(--shadow); }
.nu b { font: 700 16px var(--head); letter-spacing: -.02em; }

/* tool tiles: pastel icons and a green "Ready now", like the homepage grid */
.tcard { border: 1px solid var(--line); border-radius: 18px; padding: 20px; gap: 8px; min-height: 150px; }
.tcard .ti { border-radius: 11px; margin-bottom: 4px; }
.tcard b { font: 600 16.5px var(--body); letter-spacing: -.01em; }
.tcard small { font-size: 14px; }
.tcard .st { position: static; order: 9; margin-top: auto; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: #8B8D93; }
.tcard .st.live { color: var(--ok); }
.tcard:hover { border-color: var(--line); }

/* progress */
.callout { background: var(--night); color: #fff; font-weight: 600; border-radius: 14px; padding: 14px 16px; position: relative; padding-left: 52px;
  background-image: radial-gradient(240px 80px at 90% 0%, rgba(253,219,37,.16), transparent 70%); }
.callout::before { content: ""; position: absolute; left: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l8.5-5.5z' fill='%23111214'/%3E%3C/svg%3E") center/14px no-repeat; }
.big-num { font: 800 64px/1 var(--head); letter-spacing: -.05em; }
.xp-row b { font: 800 34px var(--head); letter-spacing: -.04em; }

/* phones: the greeting becomes a mini homepage hero */
@media (max-width: 860px) {
  .m-hero { position: relative; overflow: hidden; gap: 14px; padding: 20px 16px 16px; border-radius: 22px; color: #fff; margin-bottom: 16px;
    background: radial-gradient(260px 160px at 90% 0%, rgba(253,219,37,.2), transparent 70%), radial-gradient(260px 180px at 0% 100%, rgba(58,91,255,.28), transparent 70%), var(--night); }
  .m-hi { font: 800 28px/1.05 var(--head); letter-spacing: -.04em; color: #fff; }
  .m-course { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 16px; }
  .m-course-text small { color: #B9BCC2; }
  .stage { padding: 8px; border-radius: 20px; }
  .tcard { min-height: 0; padding: 16px; }
}

/* 2 AM mode keeps everything dark */
:root[data-mode="night"] .stage { background: #101215; }
:root[data-mode="night"] { --bg: #0D0E10; }
@media (max-width: 440px) {
  .wm { display: none; }
  .controls { gap: 6px; }
  .controls .ask { padding: 0 12px; font-size: 0; gap: 0; }
  .controls .ask svg { width: 20px; height: 20px; }
  .controls .speed { padding: 0 4px; }
}
.next-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nu-live { background: var(--night); color: #fff; border-color: var(--night); background-image: radial-gradient(200px 90px at 100% 0%, rgba(253,219,37,.22), transparent 70%); }
.nu-live small { color: #B9BCC2; }
.nu-live b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF8DBF; margin-right: 8px; vertical-align: 2px; box-shadow: 0 0 0 4px rgba(255,141,191,.18); }
@media (max-width: 860px) { .next-up { grid-template-columns: 1fr 1fr; } .nu-live { grid-column: 1 / -1; } }

/* ============ Home: pick what to study ============ */
body[data-tab="home"] [data-pane="home"] { display: block; }
#homeBody { display: grid; gap: 28px; max-width: 1100px; }
.hhero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding: 30px 30px 26px; border-radius: 26px; color: #fff;
  background: radial-gradient(520px 260px at 92% 0%, rgba(253,219,37,.22), transparent 65%), radial-gradient(520px 300px at 0% 110%, rgba(58,91,255,.32), transparent 62%), radial-gradient(400px 200px at 55% 120%, rgba(46,204,140,.16), transparent 70%), var(--night);
  box-shadow: 0 30px 70px -40px rgba(12,14,16,.8); }
.hhero::before { content: "F = ma     ΣM = 0     ∫ x² dx     PV = nRT"; position: absolute; right: -10px; top: 14px; font: 400 24px 'Gochi Hand', cursive; color: #fff; opacity: .06; white-space: nowrap; pointer-events: none; }
.hh-copy { display: grid; gap: 14px; min-width: 0; position: relative; }
.hh-hi { margin: 0; color: #B9BCC2; font-size: 15px; font-weight: 500; }
.hh-q { margin: -6px 0 0; font: 800 clamp(30px, 3.6vw, 46px)/1.02 var(--head); letter-spacing: -.045em; color: #fff; }
.hh-ask { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #fff; max-width: 560px; box-shadow: 0 14px 40px -18px rgba(0,0,0,.7); }
.hh-ask svg { width: 20px; height: 20px; color: #8B8D93; flex: none; }
.hh-ask input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; color: var(--ink); padding: 8px 0; outline: none; }
.hh-ask .btn { min-height: 42px; height: 42px; padding: 0 20px; }
.hh-course { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #E7E8EA; font-size: 14px; font-weight: 500; max-width: 100%; }
.hh-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF8DBF; box-shadow: 0 0 0 4px rgba(255,141,191,.18); flex: none; }
.hh-chg { background: #fff; color: #111214; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
.hh-stats { position: relative; display: grid; grid-template-columns: auto auto; gap: 10px 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.hh-ring { grid-row: span 2; width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); display: grid; place-items: center; }
.hh-ring b { width: 64px; height: 64px; border-radius: 50%; background: #15181B; display: flex; align-items: baseline; justify-content: center; padding-top: 20px; font: 800 22px var(--head); letter-spacing: -.03em; }
.hh-ring small { font-size: 12px; color: #A9ACB3; }
.hh-st { display: grid; } .hh-st b { font-size: 14.5px; } .hh-st small { color: #A9ACB3; font-size: 12.5px; }

.hbig { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hb { position: relative; overflow: hidden; text-align: left; display: grid; align-content: end; gap: 4px; min-height: 210px; padding: 18px; border-radius: 22px; border: 0; color: #fff; transition: transform .18s, box-shadow .18s; box-shadow: 0 18px 40px -26px rgba(12,14,16,.7); }
.hb:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(12,14,16,.75); }
.hb b { font: 700 20px/1.1 var(--head); letter-spacing: -.03em; position: relative; }
.hb small { font-size: 13.5px; line-height: 1.4; opacity: .85; position: relative; max-width: 26ch; }
.hb-go { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; font-weight: 700; transition: transform .18s; }
.hb:hover .hb-go { transform: translateX(3px); }
.hb-art { position: absolute; inset: 0; pointer-events: none; }
.hb-board { background: radial-gradient(ellipse at 30% 20%, #26322C, #121815 70%); }
.hb-board .hb-art { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='3'%3E%3Cpath d='M30 70 H170' stroke='%23EEF0EA'/%3E%3Cpath d='M30 74 l-9 16 h18 z M170 82 a7 7 0 1 0 0.1 0' stroke='%23EEF0EA' stroke-width='2'/%3E%3Cpath d='M120 22 V62 M114 54 l6 8 l6 -8' stroke='%23FF9DB8'/%3E%3Cpath d='M30 112 V86 M24 94 l6 -8 l6 8 M170 112 V92 M164 100 l6 -8 l6 8' stroke='%238FD3FF'/%3E%3Cpath d='M190 30 q20 -6 40 0' stroke='%23FFE36E' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 70% 18% / 78% auto no-repeat; opacity: .9; }
.hb-board .hb-art::after { content: ""; position: absolute; left: 18px; top: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l8.5-5.5z' fill='%23111214'/%3E%3C/svg%3E") center/20px no-repeat; box-shadow: 0 8px 24px -6px rgba(253,219,37,.7); }
.hb-live { background: linear-gradient(160deg, #FFB8D6, #FF8DBF); color: var(--ink); }
.hb-live .hb-go, .hb-prac .hb-go { background: rgba(17,18,20,.12); }
.hb-live .hb-art { background: radial-gradient(circle at 78% 30%, rgba(255,255,255,.45), transparent 42%); }
.hb-live .hb-art::before { content: "Your turn"; position: absolute; left: 18px; top: 18px; padding: 6px 10px; border-radius: 10px; background: #fff; color: #B03A72; font: 700 12px var(--body); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); }
.hb-live .hb-art::after { content: "You picked B  ✓"; position: absolute; left: 18px; top: 56px; padding: 6px 12px; border-radius: 10px; background: rgba(17,18,20,.85); color: #fff; font: 600 13px var(--body); }
.hb-prac { background: linear-gradient(160deg, #A8CBFF, #6FA4FF); color: var(--ink); }
.hb-prac .hb-art { background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.5), transparent 45%); }
.hb-prac .hb-art::before { content: "pH = 3.40"; position: absolute; left: 18px; top: 18px; padding: 8px 12px; border-radius: 12px; background: #fff; color: #111214; font: 600 14px var(--body); box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); }
.hb-prac .hb-art::after { content: "✓ Correct"; position: absolute; left: 18px; top: 62px; padding: 5px 10px; border-radius: 10px; background: #E3F4EC; color: #12805C; font: 700 12px var(--body); }
.hb-tutor { background: linear-gradient(160deg, #FFE45C, #FDDB25); color: var(--ink); }
.hb-tutor .hb-go { background: rgba(17,18,20,.12); }
.hb-tutor .hb-art::before { content: "why does the derivative of sin x = cos x?"; position: absolute; right: 16px; top: 56px; max-width: 70%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: #fff; font: 500 12.5px/1.3 var(--body); }
.hb-tutor .hb-art::after { content: "Think of the slope…"; position: absolute; left: 16px; top: 18px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff; color: #111214; font: 500 12.5px var(--body); box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }

.hsec { display: grid; gap: 14px; }
.hsec h3 { margin: 0; font: 700 22px var(--head); letter-spacing: -.03em; }
.hsec-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hrecent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hr { text-align: left; display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); min-width: 0; transition: transform .15s, box-shadow .15s; }
.hr:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hr b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr small { color: var(--ink2); font-size: 12.5px; }
.hr-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hr-k.problems { color: #12805C; }
.hgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.hgrid .tcard { min-height: 0; }
.hpro { background: var(--night) !important; color: #fff; border-color: var(--night) !important; background-image: radial-gradient(220px 100px at 100% 0%, rgba(253,219,37,.25), transparent 70%) !important; }
.hpro small { color: #B9BCC2; }

@media (max-width: 1100px) { .hbig { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hrecent { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .hhero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 18px; gap: 18px; border-radius: 22px; }
  .hh-stats { grid-template-columns: auto 1fr auto; } .hh-ring { grid-row: auto; width: 60px; height: 60px; } .hh-ring b { width: 48px; height: 48px; font-size: 17px; padding-top: 14px; }
  .hb { min-height: 170px; padding: 14px; } .hb b { font-size: 17px; } .hb small { font-size: 12.5px; }
  #homeBody { gap: 22px; }
  .hgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) { .hh-stats { grid-template-columns: auto 1fr; } .hh-fl { grid-column: 1 / -1; } .hgrid .tcard small { display: none; } }

/* ============ help: guide + floating assistant ============ */
#helpBtn { font: 700 16px var(--head); }
.topbar #helpBtn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.hguide { font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.gd-modal { width: min(680px, calc(100vw - 24px)); }
.gd-modal .modal-body { display: grid; gap: 14px; max-height: min(82vh, 760px); overflow-y: auto; }
.gd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gd-head h2 { font: 800 28px/1.05 var(--head); letter-spacing: -.04em; margin: 4px 0 0; }
.gd { display: grid; gap: 8px; }
.gd-i { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 0 16px; }
.gd-i summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 0; font: 700 16px var(--head); letter-spacing: -.02em; }
.gd-i summary::-webkit-details-marker { display: none; }
.gd-i summary::after { content: "+"; margin-left: auto; font: 400 22px var(--body); color: #8B8D93; transition: transform .2s; }
.gd-i[open] summary::after { transform: rotate(45deg); }
.gd-n { width: 26px; height: 26px; border-radius: 50%; background: var(--bg2, #EFEEE8); display: grid; place-items: center; font-size: 13px; flex: none; }
.gd-i[open] .gd-n { background: var(--brand); }
.gd-i ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; color: var(--ink2); font-size: 15px; line-height: 1.5; }
.gd-i ol b { color: var(--ink); }
.gd-i .btn { margin-bottom: 14px; }

.fab { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px; border: 0;
  background: var(--night); color: #fff; font: 700 15px var(--body); box-shadow: 0 16px 40px -14px rgba(12,14,16,.7), 0 0 0 1px rgba(255,255,255,.06) inset; transition: transform .15s; }
.fab:hover { transform: translateY(-2px); }
.fab svg { width: 20px; height: 20px; color: var(--brand); }
.fab.on { background: #fff; color: #111214; box-shadow: 0 10px 30px -12px rgba(12,14,16,.5); }
.chatpan { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 46; width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100vh - 160px));
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(12,14,16,.55); animation: cpIn .22s ease-out; }
.chatpan[hidden] { display: none; }
@keyframes cpIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.cp-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; color: #fff; background: radial-gradient(260px 90px at 100% 0%, rgba(253,219,37,.2), transparent 70%), var(--night); }
.cp-head b { display: block; font: 700 16px var(--head); } .cp-head small { color: #A9ACB3; font-size: 12.5px; }
.cp-av { display: inline-grid; line-height: .86; padding: 4px 6px 6px; border-radius: 7px; background: var(--brand); color: #111214; font: 400 10.5px var(--display); flex: none; }
.cp-av span:last-child { text-decoration: underline; }
.cp-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; }
.cp-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.cp-m { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.cp-m.bot { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.cp-m.me { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.cp-m p { margin: 0 0 6px; } .cp-m p:last-child { margin: 0; }
.cp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-typing { display: flex; gap: 4px; padding: 14px; } .cp-typing i { width: 7px; height: 7px; border-radius: 50%; background: #B9BCC2; animation: cpDot 1s infinite; } .cp-typing i:nth-child(2) { animation-delay: .15s; } .cp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cpDot { 50% { transform: translateY(-4px); opacity: .5; } }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: var(--bg); } .cp-chips:empty { display: none; }
.cp-bar { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface); }
.cp-bar textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--bg); font-size: 15px; }
.cp-bar .btn { width: 44px; min-height: 44px; padding: 0; font-size: 18px; }
@media (max-width: 860px) {
  .fab { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); height: 48px; padding: 0 16px 0 14px; }
  .chatpan { right: 12px; left: 12px; width: auto; bottom: calc(var(--tabbar-h) + 72px + env(safe-area-inset-bottom, 0px)); height: min(70vh, 560px); }
  body.sheet-open .fab, body.sheet-open .chatpan { display: none; }
}
@media print { .fab, .chatpan { display: none !important; } }
.cs-fig { margin: 2px 0 8px; border-radius: 12px; overflow: hidden; } .cs-fig img { display: block; width: 100%; height: auto; }
.cs-ex { margin-top: 8px; padding: 8px 10px; border-radius: 10px; border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); font-size: 14px; } .cs-ex .plab { color: var(--ok); margin-bottom: 3px; }
.cs-key { display: inline-block; margin: 2px 0 8px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 10px; font: 700 16px "Cambria Math", Georgia, serif; }
.cs-steps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; } .cs-steps li::marker { font-weight: 800; color: var(--accent); }
.cs-tab { overflow-x: auto; margin-top: 8px; } .cs-tab table { border-collapse: collapse; width: 100%; font-size: 13.5px; } .cs-tab th, .cs-tab td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; } .cs-tab th { background: var(--surface2); }
.cs-note { margin: 8px 0 0; font-size: 13.5px; color: #C2361F; font-weight: 600; } .cs-note::before { content: "Watch out: "; }
.cs-traps { margin-top: 14px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid #D9480F; background: color-mix(in srgb, #D9480F 6%, transparent); } .cs-traps .plab { color: #D9480F; } .cs-traps ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* ============ Subjects ============ */
#subjBody { display: grid; gap: 22px; max-width: 1100px; }
.sj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sj-card { text-align: left; display: grid; gap: 4px; padding: 0 0 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.sj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sj-band { position: relative; height: 92px; margin-bottom: 8px; background: radial-gradient(160px 80px at 85% 10%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%), var(--night); }
.sj-ini { position: absolute; left: 16px; bottom: -18px; width: 48px; height: 48px; border-radius: 14px; background: var(--c); color: var(--ink); display: grid; place-items: center; font: 800 17px var(--head); border: 3px solid var(--surface); }
.sj-card[style*="FDDB25"] .sj-ini { color: var(--ink); }
.sj-now { position: absolute; right: 12px; top: 12px; font-size: 11.5px; font-weight: 700; color: #111214; background: #FF8DBF; border-radius: 999px; padding: 3px 9px; }
.sj-card b { padding: 14px 16px 0; font: 700 18px/1.2 var(--head); letter-spacing: -.02em; }
.sj-card small { padding: 0 16px; color: var(--ink2); font-size: 13px; }
.sj-add { place-content: center; justify-items: center; text-align: center; padding: 26px 16px; border-style: dashed; border-width: 1.5px; background: transparent; min-height: 200px; }
.sj-add b, .sj-add small { padding: 0; }
.sj-plus { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; font: 700 24px var(--head); margin-bottom: 6px; }
.sj-back { justify-self: start; background: none; border: 0; padding: 0; font-weight: 600; color: var(--accent); cursor: pointer; }
.sj-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 26px; border-radius: 24px; color: #fff;
  background: radial-gradient(420px 200px at 95% 0%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%), radial-gradient(400px 220px at 0% 120%, rgba(58,91,255,.3), transparent 62%), var(--night); }
.sj-hc h2 { font: 800 clamp(30px, 4vw, 44px)/1.02 var(--head); letter-spacing: -.04em; margin: 6px 0 4px; color: #fff; }
.sj-hc p { margin: 0; color: #B9BCC2; }
.sj-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.sj-acts { display: flex; gap: 8px; align-items: center; }
.sj-acts .btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
.sj-ren { display: flex; gap: 6px; } .sj-ren input { border-radius: 999px; padding: 8px 12px; border: 0; min-width: 200px; }
.sj-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; }
.sj-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.topbar .course { cursor: pointer; } .topbar .course:hover { background: rgba(255,255,255,.14); }
@media (max-width: 860px) { .sj-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .sj-band { height: 70px; } .sj-card b { font-size: 15.5px; } .sj-hero { padding: 20px; } }

/* ---------- All files, full screen ---------- */
.sj-hb { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sj-seg { background: var(--surface2); border-radius: 999px; padding: 4px; display: inline-flex; gap: 2px; }
.sj-seg button { border: 0; background: none; font: 600 14px/1 inherit; font-family: inherit; padding: 9px 16px; border-radius: 999px; color: var(--ink2); cursor: pointer; }
.sj-seg button[aria-pressed="true"] { background: var(--night, #0C0E10); color: #fff; }
.fl-tools { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 18px; }
.fl-tools input[type=search] { width: 100%; max-width: 520px; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-size: 15px; color: inherit; }
.fl-tools input[type=search]:focus { outline: none; border-color: var(--night, #0C0E10); }
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.fl-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; min-width: 0; }
.fl-card:hover, .fl-card:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(12,14,16,.35); }
.fl-card:focus-visible { outline: 2px solid var(--night, #0C0E10); outline-offset: 2px; }
.fl-card b { font-size: 14.5px; line-height: 1.3; padding: 4px 4px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fl-card small { padding: 0 4px; color: var(--ink2); font-size: 12.5px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fl-th { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, #fff); }
.fl-th::before { content: ""; position: absolute; inset: 18% 26%; background: #fff; border-radius: 6px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.3); background-image: repeating-linear-gradient(#fff 0 14px, #E9E6DF 14px 15.5px); background-position: 0 22px; }
.fl-big { position: relative; z-index: 1; font: 800 13px/1 var(--head, inherit); letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: 7px 11px; border-radius: 8px; background: #555; }
.fl-th.pdf .fl-big { background: #D93A2B; } .fl-th.img .fl-big { background: #2F7FD6; } .fl-th.vid .fl-big, .fl-th.aud .fl-big { background: #D9578F; }
.fl-th.ppt .fl-big { background: #E0752B; } .fl-th.doc .fl-big { background: #2B5FB8; } .fl-th.txt .fl-big { background: #3A8F5B; }
.fl-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.fl-th.has img { opacity: 1; } .fl-th.has .fl-big { display: none; }
.sj-flist { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-all { display: block; margin-top: 8px; font-size: 13px; }
dialog.fview { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0C0E10; color: #fff; display: none; flex-direction: column; }
dialog.fview[open] { display: flex; }
dialog.fview::backdrop { background: rgba(0,0,0,.6); }
.fv-bar { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid rgba(255,255,255,.1); }
.fv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fv-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.fv-t small { color: rgba(255,255,255,.6); font-size: 12.5px; }
.fv-k { font: 800 11px/1 inherit; letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 7px; background: #555; }
.fv-k.pdf { background: #D93A2B; } .fv-k.img { background: #2F7FD6; } .fv-k.vid, .fv-k.aud { background: #D9578F; } .fv-k.ppt { background: #E0752B; } .fv-k.doc { background: #2B5FB8; } .fv-k.txt { background: #3A8F5B; }
.fv-bar .btn { background: #FFD43B; color: #0C0E10; text-decoration: none; }
.fv-bar .ib { background: rgba(255,255,255,.1); color: #fff; border: 0; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.fv-body { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; }
.fv-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.fv-body img, .fv-body video { max-width: 100%; max-height: 100%; object-fit: contain; }
.fv-txt { align-self: stretch; justify-self: stretch; margin: 0; padding: 24px max(16px, 4vw); white-space: pre-wrap; font: 14px/1.6 ui-monospace, Menlo, monospace; color: #E8E6E1; }
.fv-body .note, .fv-body .empty p { color: rgba(255,255,255,.75); text-align: center; }
@media (max-width: 860px) { .fl-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .sj-hb { width: 100%; } }

body.files-full[data-tab="library"] .shell { grid-template-columns: minmax(0, 1fr); }
body.files-full[data-tab="library"] .side { display: none; }
body.files-full[data-tab="library"] #subjBody { max-width: 1480px; margin-inline: auto; }
body.files-full .fl-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.cs-fit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.cs-fit .label { margin: 0; }
#csPages { margin-top: 6px; }

/* delete controls */
.sj-wrap, .fl-wrap { position: relative; display: grid; min-width: 0; }
.sj-wrap > .sj-card { height: 100%; }
.sj-x, .fl-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(12,14,16,.72); color: #fff; opacity: 0; transition: opacity .15s, background .15s; }
.sj-x svg, .fl-x svg, .sf-x svg, .sj-delbtn svg { width: 17px; height: 17px; }
.sj-wrap:hover .sj-x, .fl-wrap:hover .fl-x, .sj-x:focus-visible, .fl-x:focus-visible { opacity: 1; }
.sj-x:hover, .fl-x:hover { background: #C62F2F; }
@media (hover: none) { .sj-x, .fl-x { opacity: 1; width: 30px; height: 30px; } }
.fl-x { top: 18px; right: 18px; }
.sf-chip { display: inline-flex; align-items: center; gap: 2px; }
.sf-x { border: 0; background: none; color: var(--ink2); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.sf-x:hover { color: #C62F2F; background: rgba(198,47,47,.08); }
.sj-delbtn { display: inline-flex; align-items: center; gap: 6px; }
.sj-delbtn:hover { color: #C62F2F; }
.fv-bar .fv-del { background: rgba(255,255,255,.1); color: #fff; border: 0; }
.fv-bar .fv-del:hover { background: #C62F2F; }
.btn.danger { background: #C62F2F; color: #fff; border-color: #C62F2F; }
.toast-err { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 2000; background: #C62F2F; color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 600; }

/* ---------- Canvas import ---------- */
.cv-connect { display: grid; gap: 14px; max-width: 620px; }
.cv-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; }
.cv-steps li::marker { font-weight: 800; color: #E0503E; }
.cv-connect input { width: 100%; }
.cv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.cv-ok { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.cv-ok::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 0 4px rgba(43,182,115,.18); }
.cv-top .grow { flex: 1; }
.cv-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.cv-c { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; padding: 16px 16px 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; min-width: 0; }
.cv-c::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.cv-c:hover, .cv-c:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(12,14,16,.4); }
.cv-c:focus-visible { outline: 2px solid var(--night, #0C0E10); outline-offset: 2px; }
.cv-c b { font-size: 15px; line-height: 1.3; } .cv-c small { color: var(--ink2); }
.cv-h { margin: 6px 0 14px; font: 800 26px/1.1 var(--head); letter-spacing: -.02em; }
.cv-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cv-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; max-height: 460px; overflow: auto; }
.cv-files label { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.cv-files label:hover { background: var(--surface2); }
.cv-files li.off { opacity: .5; } .cv-files li.off label { cursor: default; }
.cv-files input { width: 18px; height: 18px; flex: none; accent-color: #0C0E10; }
.cv-n { min-width: 0; display: grid; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.cv-n small { font-weight: 400; color: var(--ink2); font-size: 12px; }
.cv-k { flex: none; font: 800 10px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: #fff; padding: 5px 7px; border-radius: 6px; background: #777; }
.cv-k.pdf { background: #D93A2B; } .cv-k.img { background: #2F7FD6; } .cv-k.office { background: #E0752B; } .cv-k.txt { background: #3A8F5B; } .cv-k.media { background: #D9578F; }
.cv-act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cv-due ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.cv-due li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); }
.cv-due li b { font-size: 14px; } .cv-due li a { color: inherit; }
.cv-due small { color: var(--ink2); } .cv-due em { font-style: normal; font-weight: 700; color: #E0503E; }
@media (max-width: 860px) { .cv-grid { grid-template-columns: minmax(0, 1fr); } .cv-courses { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Study plan + Today ---------- */
.tday { margin: 18px 0 4px; padding: 20px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; }
.tday-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #FFF8DB, #EEF2FF); border: 0; }
.tday-empty b { font: 800 19px/1.2 var(--head); } .tday-empty p { margin: 4px 0 0; color: var(--ink2); max-width: 560px; }
.td-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.td-k { font: 800 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #E0503E; }
.td-head h3 { margin: 4px 0 0; font: 800 22px/1.15 var(--head); letter-spacing: -.02em; }
.td-cd { display: flex; gap: 8px; flex-wrap: wrap; }
.cd { display: grid; grid-template-columns: max-content max-content; justify-content: start; align-items: baseline; column-gap: 4px; padding: 8px 12px; border-radius: 14px; background: var(--surface2); min-width: 0; max-width: 220px; }
.cd b { font: 800 22px/1 var(--head); } .cd small { font-size: 12px; font-weight: 700; }
.cd em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd.hot { background: #FFE9E4; } .cd.hot b, .cd.hot small { color: #D2401F; }
.td-bar { height: 6px; border-radius: 99px; background: var(--surface2); overflow: hidden; } .td-bar i { display: block; height: 100%; background: #2BB673; border-radius: 99px; transition: width .4s; }
.td-list { display: grid; gap: 4px; }
.ptask { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 7px 8px; border-radius: 12px; }
.ptask:hover { background: var(--surface2); }
.ptask label { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; flex: 1; font-size: 15px; }
.ptask input { width: 20px; height: 20px; flex: none; accent-color: #2BB673; }
.ptask.done span { text-decoration: line-through; color: var(--ink2); }
.ptask .btn { flex: none; }
.pl-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.pl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-form, .pl-cv { margin-top: 12px; display: grid; gap: 12px; }
.pl-secs { border: 0; padding: 0; margin: 0; } .pl-secs legend { font-weight: 700; margin-bottom: 6px; }
.pl-secs #plSecs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pl-secs .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); }
.pl-cvr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.pl-cvr span { display: grid; min-width: 0; } .pl-cvr small { color: var(--ink2); }
.pl-exams { display: flex; gap: 10px; overflow-x: auto; padding: 14px 2px 6px; }
.pl-ex { all: unset; cursor: pointer; flex: none; display: grid; gap: 2px; padding: 12px 14px 12px 18px; border-radius: 16px; border: 1.5px solid var(--line); position: relative; overflow: hidden; min-width: 180px; max-width: 240px; background: var(--surface); }
.pl-ex::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.pl-ex.on { border-color: var(--night, #0C0E10); box-shadow: 0 10px 24px -16px rgba(0,0,0,.5); }
.pl-ex:focus-visible { outline: 2px solid var(--night, #0C0E10); outline-offset: 2px; }
.pl-ex b { font-size: 15px; } .pl-ex small { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-ex span { font-size: 13px; font-weight: 700; }
.pl-mast { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.mst { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--surface2); }
.mst em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.07); }
.mst.shaky em { background: #FFE1DA; color: #C2361F; } .mst.mid em { background: #FFF1C2; color: #8A6100; } .mst.solid em { background: #D7F5E5; color: #12805C; }
.pday.examday { border-color: #E0503E; } .pday.examday h4 span:first-child { color: #E0503E; }
.pl-foot { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.link.danger { color: #C62F2F; }
@media (max-width: 860px) { .tday { padding: 16px; } .td-head h3 { font-size: 19px; } .cd b { font-size: 18px; } }

/* ---------- Study map ---------- */
.pl-view { margin: 4px 0 12px; }
.smap-top { display: grid; gap: 8px; margin: 6px 0 10px; max-width: 420px; }
.smap { display: grid; gap: 6px; padding: 6px 0 10px; max-width: 640px; }
.sm-sec { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font: 800 17px/1.2 var(--head); letter-spacing: -.01em; }
.sm-sec .mst { font-size: 11px; padding: 3px 8px; }
.sm-stop { display: flex; align-items: center; gap: 14px; margin-left: calc(var(--x) * 56px); position: relative; }
.sm-node { all: unset; cursor: pointer; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 800 22px/1 var(--head); color: var(--ink);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 8px 18px -10px rgba(0,0,0,.45); transition: transform .12s; }
.sm-node:hover { transform: translateY(-2px); } .sm-node:active { transform: translateY(1px); }
.sm-node:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sm-stop.lesson .sm-node { background: #FDDB25; } .sm-stop.practice .sm-node { background: #FF9EC7; }
.sm-stop.exam .sm-node { background: #7FB2FF; } .sm-stop.review .sm-node { background: #111214; color: #FDDB25; }
.sm-stop.done .sm-node { background: #2BB673; color: #fff; }
.sm-stop.cur .sm-node { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 12%, transparent), inset 0 -5px 0 rgba(0,0,0,.14); animation: smpulse 1.8s ease-in-out infinite; }
@keyframes smpulse { 50% { box-shadow: 0 0 0 12px transparent, inset 0 -5px 0 rgba(0,0,0,.14); } }
@media (prefers-reduced-motion: reduce) { .sm-stop.cur .sm-node { animation: none; } }
.sm-lab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sm-lab b { font-size: 15px; }
.sm-go { font: 800 11px var(--body); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #FDDB25; padding: 4px 8px; border-radius: 6px; }
.sm-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.sm-chk input { width: 16px; height: 16px; accent-color: #2BB673; }
.sm-stop.done .sm-lab b { color: var(--ink2); }
@media (max-width: 860px) { .sm-stop { margin-left: calc(var(--x) * 26px); } .sm-node { width: 56px; height: 56px; font-size: 19px; } }

/* ---------- Study map (full screen) ---------- */
body.smx-open { overflow: hidden; }
.smx { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; color: #fff;
  background: radial-gradient(700px 420px at 85% 0%, rgba(253,219,37,.10), transparent 60%), radial-gradient(600px 500px at 0% 100%, rgba(255,158,199,.10), transparent 60%), radial-gradient(ellipse at 50% 30%, #1A2120, #141A18 70%); }
.mx-top { display: flex; align-items: center; gap: 14px; padding: calc(14px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 10px max(18px, env(safe-area-inset-left, 0px)); }
.mx-x { all: unset; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.mx-x svg, .mx-ic svg, .mx-sh-ic svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mx-x svg { width: 20px; height: 20px; }
.mx-x:focus-visible, .mx-node:focus-visible { outline: 3px solid #FDDB25; outline-offset: 4px; }
.mx-tt { flex: 1; min-width: 0; display: grid; } .mx-tt b { font: 800 20px/1.1 var(--head); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-tt span { color: #9AA39F; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-cd { display: grid; justify-items: center; padding: 6px 12px; border-radius: 14px; background: #FDDB25; color: #111214; line-height: 1; }
.mx-cd b { font: 800 22px var(--head); } .mx-cd span { font: 700 10px var(--body); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.mx-prog { display: flex; align-items: center; gap: 10px; padding: 0 max(18px, env(safe-area-inset-right, 0px)) 8px max(18px, env(safe-area-inset-left, 0px)); font: 700 13px var(--body); color: #C9C7D6; }
.mx-bar { flex: 1; height: 10px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.mx-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FDDB25, #FFE97A); box-shadow: 0 0 14px rgba(253,219,37,.6); transition: width .5s; }
.mx-scroll { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 16px 180px; -webkit-overflow-scrolling: touch; }
.mx-line { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.mx-line path { fill: none; stroke: rgba(237,235,228,.35); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 14; }
.mx-unit { max-width: 520px; margin: 0 auto 26px; position: relative; }
.mx-ban { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 16px 18px; border-radius: 20px; background: var(--c); color: #111214;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 14px 30px -18px rgba(0,0,0,.8); margin-bottom: 18px; }
.mx-k { grid-column: 1; font: 800 11px var(--body); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.mx-ban b { grid-column: 1; font: 800 21px/1.15 var(--head); letter-spacing: -.02em; }
.mx-l { grid-column: 2; grid-row: 1 / 3; font: 800 11px var(--body); font-style: normal; letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: rgba(17,18,20,.88); color: #fff; white-space: nowrap; }
.mx-l.shaky { color: #FF9EC7; } .mx-l.solid { color: #7EE0B5; } .mx-l.mid { color: #FDDB25; }
.mx-path { display: grid; gap: 22px; padding: 6px 0 4px; }
.mx-row { display: grid; justify-items: center; gap: 8px; transform: translateX(calc(var(--z) * 64px)); }
.mx-node { all: unset; cursor: pointer; position: relative; width: 78px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #111214;
  background: var(--n, #FDDB25); box-shadow: inset 0 -7px 0 rgba(0,0,0,.2), 0 10px 22px -12px rgba(0,0,0,.9); transition: transform .12s; }
.mx-node:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.mx-node.big { width: 104px; height: 96px; }
.mx-node.lesson { --n: #FDDB25; } .mx-node.practice { --n: #FF9EC7; } .mx-node.explain { --n: #7FB2FF; } .mx-node.exam { --n: #FDDB25; } .mx-node.review { --n: #EDEBE4; }
.mx-node.next, .mx-node.skip { --n: #2A2C3A; color: #8E8CA3; box-shadow: inset 0 -7px 0 rgba(0,0,0,.35), 0 10px 22px -12px rgba(0,0,0,.9); }
.mx-node.done { --n: #FDDB25; } .mx-node.done.practice { --n: #FF9EC7; } .mx-node.done.explain { --n: #7FB2FF; }
.mx-node.cur { box-shadow: 0 0 0 8px rgba(253,219,37,.18), 0 0 0 16px rgba(253,219,37,.07), inset 0 -7px 0 rgba(0,0,0,.2); animation: mxp 2s ease-in-out infinite; }
@keyframes mxp { 50% { box-shadow: 0 0 0 12px rgba(253,219,37,.12), 0 0 0 22px rgba(253,219,37,.03), inset 0 -7px 0 rgba(0,0,0,.2); } }
.mx-ic { display: grid; place-items: center; } .mx-ic svg { width: 32px; height: 32px; } .mx-node.big .mx-ic svg { width: 42px; height: 42px; }
.mx-tip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: #fff; color: #111214; font: 800 13px var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; border-radius: 12px; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); animation: mxb 1.6s ease-in-out infinite; }
.mx-tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; }
@keyframes mxb { 50% { transform: translate(-50%, -4px); } }
.mx-cap { font: 700 13px var(--body); color: #C9C7D6; max-width: 140px; text-align: center; }
.mx-end { text-align: center; color: #9AA39F; font: 400 22px 'Gochi Hand', cursive; margin: 10px 0 0; }
.mx-coach { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(520px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 20px; background: rgba(30,31,43,.94); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -20px #000; }
.mx-coach p { margin: 0; font-size: 15px; color: #DAD8E6; } .mx-coach b { color: #fff; }
.mx-av { flex: none; display: inline-grid; line-height: .86; padding: 5px 6px 7px; border-radius: 9px; background: #FDDB25; color: #111214; font: 400 10px 'Dela Gothic One', 'Arial Black', sans-serif; }
.mx-av span:last-child { text-decoration: underline; text-decoration-color: #2F6BFF; text-decoration-thickness: 2px; }
.mx-sheet { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; background: rgba(5,6,10,.55); }
.mx-sh-in { width: min(560px, 100%); padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: #17181F; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 10px; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.mx-sheet.in .mx-sh-in { transform: none; }
.mx-sh-ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #111214; background: #FDDB25; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.mx-sh-ic.practice { background: #FF9EC7; } .mx-sh-ic.explain { background: #7FB2FF; } .mx-sh-ic.review { background: #EDEBE4; }
.mx-sh-ic svg { width: 30px; height: 30px; }
.mx-sh-k { color: #9AA39F; font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; }
.mx-sh-in h3 { margin: 0; font: 800 28px/1.05 var(--head); letter-spacing: -.03em; color: #fff; }
.mx-sh-in p { margin: 0; color: #C9C7D6; font-size: 16px; line-height: 1.5; }
.mx-sh-meta { display: flex; gap: 8px; margin: 4px 0 8px; } .mx-sh-meta span { padding: 6px 10px; border-radius: 99px; background: rgba(255,255,255,.07); font: 600 13px var(--body); color: #DAD8E6; }
.mx-go { all: unset; cursor: pointer; text-align: center; padding: 17px; border-radius: 16px; background: #FDDB25; color: #111214; font: 800 17px var(--body); box-shadow: inset 0 -5px 0 rgba(0,0,0,.16); }
.mx-go:active { transform: translateY(2px); }
.mx-mark { all: unset; cursor: pointer; text-align: center; padding: 10px; color: #9AA39F; font: 600 14px var(--body); }
.mx-go:focus-visible, .mx-mark:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mx-node.cur, .mx-tip { animation: none; } .mx-sh-in { transition: none; } }
@media (max-width: 520px) { .mx-row { transform: translateX(calc(var(--z) * 46px)); } .mx-node { width: 70px; height: 64px; } .mx-node.big { width: 92px; height: 84px; } }
/* map preview card in the plan */
.mx-card { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 22px; color: #fff;
  background: radial-gradient(400px 200px at 90% 0%, rgba(253,219,37,.16), transparent 60%), #141A18; box-shadow: 0 16px 34px -20px rgba(0,0,0,.7); margin: 4px 0 8px; }
.mx-card:focus-visible { outline: 3px solid #FDDB25; outline-offset: 3px; }
.mx-card-path { flex: none; display: grid; gap: 4px; }
.mx-card-path i { width: 16px; height: 14px; border-radius: 50%; background: #2A2C3A; transform: translateX(calc(var(--z) * 9px)); }
.mx-card-path i.lesson.done, .mx-card-path i.exam.done { background: #FDDB25; } .mx-card-path i.practice.done { background: #FF9EC7; } .mx-card-path i.explain.done { background: #7FB2FF; }
.mx-card-t { flex: 1; min-width: 0; display: grid; gap: 4px; } .mx-card-t b { font: 800 22px/1.1 var(--head); letter-spacing: -.02em; } .mx-card-t small { color: #A8B0AC; font-size: 14px; }
.mx-card-go { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #FDDB25; color: #111214; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.td-acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ================= Dark, like the homepage ================= */
:root[data-mode="night"] {
  --bg: #141A18; --surface: #1A221E; --surface2: #222B27; --ink: #F4F3EF; --ink2: #A8B0AC; --line: #2D3833;
  --accent: #7FB2FF; --on-accent: #141A18; --ok: #5FD39A; --err: #FF8A80; --night: #141A18;
  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.9);
  color-scheme: dark;
}
:root[data-mode="night"] body { background: radial-gradient(900px 500px at 100% -10%, rgba(253,219,37,.06), transparent 60%), radial-gradient(800px 600px at -10% 110%, rgba(255,158,199,.05), transparent 60%), #141A18 fixed; }
.topbar { background: rgba(11,12,20,.86) !important; backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.06) !important; }
.btn { border-color: var(--line); background: var(--surface2); color: var(--ink); }
.btn.accent { background: #FDDB25 !important; border-color: #FDDB25 !important; color: #111214 !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14); }
.btn.accent:hover:not(:disabled) { background: #FFE34D !important; }
.btn.ghost { background: transparent; }
.panel, .card, .tcard, .hr, .sj-card, .fl-card, .pday, .tday, .blk, .prob, .cv-c { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink); }
input, select, textarea { background: var(--surface2) !important; border-color: var(--line) !important; color: var(--ink) !important; }
input::placeholder, textarea::placeholder { color: #6F7974; }
.chip { background: var(--surface2); border-color: var(--line); color: var(--ink); }
.chip.on, .seg button[aria-pressed="true"] { background: #FDDB25 !important; color: #111214 !important; border-color: #FDDB25 !important; }
.seg { background: var(--surface2) !important; }
.seg button { color: var(--ink2); }
.tday-empty { background: linear-gradient(120deg, rgba(253,219,37,.14), rgba(127,178,255,.10)) !important; border: 1px solid var(--line) !important; }
.sub, .note, small { color: var(--ink2); }
.h, h2, h3, h4 { color: var(--ink); }
/* side panel: only on Learn and Practice, as a clean dark column */
@media (min-width: 861px) {
  body:not([data-tab="learn"]):not([data-tab="practice"]) .shell { grid-template-columns: minmax(0, 1fr); }
  body:not([data-tab="learn"]):not([data-tab="practice"]) .side { display: none; }
  .side { background: #0E0F18 !important; border-right: 1px solid var(--line) !important; padding: 22px 18px 40px; gap: 26px; }
  .main { max-width: 1240px; width: 100%; margin: 0 auto; }
}
.side .label { font: 800 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #9AA39F; }
.side .drop { background: var(--surface) !important; border: 1.5px dashed #3D4A44 !important; border-radius: 18px !important; color: var(--ink); }
.side .drop:hover, .side .drop.over { border-color: #FDDB25 !important; background: rgba(253,219,37,.06) !important; }
.side .drop .ico { color: #FDDB25; }
.side .checks li label { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; }
.side .checks .box { background: #FDDB25 !important; border-color: #FDDB25 !important; color: #111214; }
.side .checks small { color: #8E8CA3; }
.lib-side { display: none !important; }
/* dark contrast fixes */
.topbar .rail button[aria-current="page"], .topbar .rail button[aria-current="page"] * { background: #FDDB25 !important; color: #111214 !important; }
.topbar .rail button[aria-current="page"] svg { background: none !important; }
.topbar .credits, .topbar .credits * { color: #111214 !important; }
.hb-live, .hb-prac, .hb-tutor, .hb-live b, .hb-prac b, .hb-tutor b, .hb-live small, .hb-prac small, .hb-tutor small { color: #111214 !important; }
.hb-live .hb-go, .hb-prac .hb-go, .hb-tutor .hb-go { color: #111214 !important; }
.hh-ask { background: var(--surface2) !important; border: 1px solid var(--line); }
.hh-ask input { background: transparent !important; border: 0 !important; color: var(--ink) !important; }
.hh-ask svg { color: #9AA39F; }
.hh-chg { background: #FDDB25 !important; color: #111214 !important; }
.chapters button { background: var(--surface2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.chapters button.on { background: #FDDB25 !important; color: #111214 !important; border-color: #FDDB25 !important; }
.hb-tutor .hb-art::before { background: #111214 !important; color: #fff !important; }
.mx-path { padding-top: 44px; }
.mx-tip { z-index: 3; }
.mx-ban { z-index: 0; }
.tcard .st.live { display: none; }
.tgrid .tcard:nth-child(3n+1) .ti { background: #FDDB25 !important; color: #111214 !important; }
.tgrid .tcard:nth-child(3n+2) .ti { background: #FF9EC7 !important; color: #111214 !important; }
.tgrid .tcard:nth-child(3n) .ti { background: #7FB2FF !important; color: #111214 !important; }
.tcard { border-radius: 22px !important; transition: transform .15s, border-color .15s; }
.tcard:hover { transform: translateY(-3px); border-color: #3D4A44 !important; }
.tcard b { font: 800 19px/1.15 var(--head) !important; letter-spacing: -.02em; }
.pgrid #planCard { order: -1; }
.pgrid { display: flex !important; flex-direction: column; gap: 16px; }
.pgrid > .card:not(.wide) { flex: 1; }
.pg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .pg-two { grid-template-columns: minmax(0, 1fr); } }

/* ===== Textbook type for the learning screens (STIX Two: the face used by science and engineering textbooks) ===== */
:root{--book:'STIX Two Text','STIX Two','Times New Roman',Times,Georgia,serif}
.prob .q,.prob .hint-text,.prob .a,.prob .steps,.prob ul.steps,
.lv-teach,.lv-q,.lv-fb,.lv-turn,.lv-you,
.msg.assistant,.msg.assistant .rich,
.fc,.caption,.exam-result,.pdetail,.sol,.solution{font-family:var(--book);font-feature-settings:"kern","liga","onum" 0,"lnum"}
.prob .q,.prob .a,.lv-teach,.msg.assistant{font-size:17.5px;line-height:1.6;letter-spacing:.003em}
.prob .q i,.prob .q em,.prob .a i,.lv-teach i,.lv-q i,.msg.assistant i,.fc i,.prob var,.lv-teach var{font-family:var(--book);font-style:italic}
.prob h3,.lv-q b,.lv-teach b,.lv-teach strong,.prob .a b,.prob .a strong{font-family:var(--book);font-weight:700;letter-spacing:0}
.prob h3{font-size:20px;line-height:1.3}
.fc{font-size:21px;line-height:1.45}
.caption{font-size:17px;letter-spacing:.005em}
.lv-q{font-weight:500}
/* textbook-style "Example" label on each problem */
.prob h3::before{content:"Example ";font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand,#FDDB25);display:block;margin-bottom:4px}
.prob.exam h3::before{content:"Problem "}
.prob .ptxt,.prob .pask{font-family:var(--book);font-weight:400}
.prob .pchip{font-family:var(--book);font-size:16px}
.prob .pstory{font-family:var(--book)}

/* ===== Today card, rebuilt ===== */
.tday{padding:24px 24px 20px;gap:18px;border-radius:24px;background:linear-gradient(180deg,#1B2320,#171E1B);border:1px solid #2A3430}
.td-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px}
.td-hl h3{margin:0;font:800 26px/1.1 var(--head);letter-spacing:-.025em;color:var(--ink)}
.td-hl p{margin:6px 0 0;color:var(--ink2);font-size:14.5px}
.td-ring{position:relative;width:64px;height:64px;flex:none}
.td-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.td-ring circle{fill:none;stroke:#2A3430;stroke-width:5}
.td-ring circle.v{stroke:#FDDB25;stroke-linecap:round;stroke-dasharray:var(--p) 100;transition:stroke-dasharray .6s cubic-bezier(.2,.9,.3,1)}
.td-ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 18px/1 var(--head);color:var(--ink)}
.td-ring b small{font-size:12px;color:var(--ink2);font-weight:700;margin-left:1px}
.td-ring b{display:flex;align-items:baseline;justify-content:center;padding-top:22px}
.td-cds{display:flex;gap:10px}
.cd2{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:16px;background:#222B27;border:1px solid #2D3833;min-width:0}
.cd2>b{display:grid;place-items:center;min-width:48px;height:48px;padding:0 6px;border-radius:12px;background:#FDDB25;color:#111214;font:800 24px/1 var(--head);letter-spacing:-.03em}
.cd2.hot>b{background:#FF9EC7}
.cd2 span{display:grid;font-weight:700;font-size:14px;line-height:1.25;color:var(--ink);min-width:0}
.cd2 em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.cd2 small{font-weight:500;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.td-list{display:grid;gap:8px}
.ptask{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 10px 10px 12px;border-radius:16px;background:#1E2622;border:1px solid #26302B;transition:background .15s,border-color .15s,opacity .2s}
.ptask:hover{background:#222B27;border-color:#333F39}
.ptask .pt-chk{position:relative;display:grid;cursor:pointer;flex:none}
.ptask .pt-chk input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pt-box{width:26px;height:26px;border-radius:50%;border:2px solid #3D4A44;display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s}
.pt-box svg{width:16px;height:16px;fill:none;stroke:#111214;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s ease .05s}
.pt-chk:hover .pt-box{border-color:#FDDB25}
.pt-chk input:focus-visible+.pt-box{outline:2px solid #FDDB25;outline-offset:2px}
.ptask.done .pt-box{background:#50E3A4;border-color:#50E3A4;transform:scale(1.05)}
.ptask.done .pt-box svg{stroke-dashoffset:0}
.pt-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--tc-bg);color:var(--tc)}
.pt-ic svg{width:21px;height:21px}
.k-learn{--tc:#FDDB25;--tc-bg:rgba(253,219,37,.13)}
.k-practice{--tc:#FF9EC7;--tc-bg:rgba(255,158,199,.13)}
.k-cards{--tc:#7FB2FF;--tc-bg:rgba(127,178,255,.13)}
.k-explain{--tc:#F4F3EF;--tc-bg:rgba(244,243,239,.09)}
.k-exam{--tc:#FF9EC7;--tc-bg:rgba(255,158,199,.13)}
.k-sheet{--tc:#FDDB25;--tc-bg:rgba(253,219,37,.13)}
.k-rest{--tc:#7FB2FF;--tc-bg:rgba(127,178,255,.13)}
.pt-tx{display:grid;gap:2px;min-width:0}
.pt-tx b{font-weight:650;font-size:15.5px;line-height:1.3;color:var(--ink);text-decoration:none}
.pt-tx small{font-size:12.5px;color:var(--ink2)}
.ptask.done{opacity:.55}.ptask.done .pt-tx b{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.pt-go{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 16px;border-radius:999px;background:#2A3430;color:var(--ink);font:700 14px var(--body);transition:background .15s,color .15s,transform .15s}
.pt-go svg{width:16px;height:16px;transition:transform .2s}
.pt-go:hover{background:var(--tc);color:#111214}.pt-go:hover svg{transform:translateX(3px)}
.pt-go:focus-visible{outline:2px solid #FDDB25;outline-offset:2px}
.ptask.done .pt-go{background:transparent;color:var(--ink2)}
.td-acts{padding-top:2px}
@media (max-width:760px){
  .td-head{grid-template-columns:minmax(0,1fr) auto}
  .td-cds{grid-column:1/-1;flex-wrap:wrap}
  .cd2{flex:1 1 200px}
  .ptask{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .pt-ic{display:none}
  .pt-go span{display:none}.pt-go{padding:0;width:38px;justify-content:center}
}
.opt{font-weight:500;color:var(--ink2);text-transform:none;letter-spacing:0}

/* ===== Canvas connect, rebuilt ===== */
.tool-head .kicker:empty{display:none}
.cvx{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px;align-items:start;max-width:1080px}
.cvx-form{padding:28px;border-radius:24px;background:linear-gradient(180deg,#1B2320,#171E1B);border:1px solid #2A3430;display:grid;gap:16px}
.cvx-link{display:flex;align-items:center;gap:12px}
.cvx-node{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#222B27;border:1px solid #333F39;color:#F4F3EF}
.cvx-node svg{width:26px;height:26px}
.cvx-node.ct{background:#FDDB25;border-color:#FDDB25;color:#111214;font:800 11px/1.05 var(--head);align-content:center;gap:0;justify-items:start;padding-left:9px}
.cvx-node.ct span:last-child{border-bottom:2px solid #2F6BFF}
.cvx-dots{display:flex;gap:6px}
.cvx-dots i{width:6px;height:6px;border-radius:50%;background:#3D4A44;animation:cvdot 1.6s infinite}
.cvx-dots i:nth-child(2){animation-delay:.15s}.cvx-dots i:nth-child(3){animation-delay:.3s}.cvx-dots i:nth-child(4){animation-delay:.45s}.cvx-dots i:nth-child(5){animation-delay:.6s}
@keyframes cvdot{0%,60%,100%{background:#3D4A44}30%{background:#FDDB25}}
.cvx-h{margin:4px 0 0;font:800 24px/1.15 var(--head);letter-spacing:-.02em;color:var(--ink)}
.cvx-sub{margin:-8px 0 0;color:var(--ink2);font-size:15px;line-height:1.5}
.cvx-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:0;position:relative}
.cvx-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding-bottom:20px;position:relative}
.cvx-steps li:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:4px;width:2px;background:#2D3833}
.cvx-n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#FDDB25;color:#111214;font:800 14px var(--head)}
.cvx-steps li>div{display:grid;gap:8px;min-width:0;padding-top:5px}
.cvx-steps b{font-weight:700;font-size:15.5px;color:var(--ink)}
.cvx-steps small{font-size:13.5px;color:var(--ink2);line-height:1.5}
.cvx-steps small b{font-size:inherit}
.cvx-dom,.cvx-tok{display:flex;align-items:center;height:50px;border-radius:14px;background:#121816;border:1px solid #333F39;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.cvx-dom:focus-within,.cvx-tok:focus-within{border-color:#FDDB25;box-shadow:0 0 0 3px rgba(253,219,37,.16)}
.cvx-dom input,.cvx-tok input{all:unset;flex:1;min-width:0;height:100%;padding:0 14px;font:500 16px var(--body);color:var(--ink)}
.cvx-dom input::placeholder,.cvx-tok input::placeholder{color:#66706B}
.cvx-suf{padding:0 14px 0 0;color:#8E9893;font:500 15px var(--body);white-space:nowrap}
.cvx-paste{all:unset;cursor:pointer;margin-right:6px;padding:8px 14px;border-radius:10px;background:#2A3430;color:var(--ink);font:700 13px var(--body)}
.cvx-paste:hover{background:#35413B}
.cvx-open{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:8px 12px;border-radius:10px;background:rgba(127,178,255,.12);color:#9EC3FF;font:700 13.5px var(--body);text-decoration:none}
.cvx-open svg{width:15px;height:15px}.cvx-open:hover{background:rgba(127,178,255,.2)}
.cvx-go{height:54px;font-size:16px;border-radius:16px}
.cvx-safe{display:flex;align-items:center;gap:8px;margin:0;color:#8E9893;font-size:13px}
.cvx-safe svg{width:16px;height:16px;flex:none}
.cvx-prev{padding:24px;border-radius:24px;background:#151C19;border:1px dashed #2D3833;display:grid;gap:16px;position:sticky;top:90px}
.cvx-pk{margin:0;font:700 13px var(--body);color:var(--ink2)}
.cvx-card{padding:16px;border-radius:18px;background:#1E2622;border:1px solid #2A3430;display:grid;gap:12px;transform:rotate(-1.2deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.cvx-ch{display:flex;align-items:center;gap:10px}.cvx-ch b{font-size:15px;color:var(--ink)}.cvx-ch small{margin-left:auto;color:var(--ink2);font-size:12px}
.cvx-dot{width:10px;height:10px;border-radius:50%}
.cvx-files{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cvx-files li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#242D29;font-size:13.5px;font-weight:600;color:var(--ink)}
.cvx-files em{margin-left:auto;font-style:normal;font-weight:500;color:var(--ink2);font-size:12px}
.cvx-due{display:flex;justify-content:space-between;padding:8px 10px;border-radius:10px;background:rgba(255,158,199,.1);font-size:13px;color:var(--ink)}
.cvx-due b{color:#FF9EC7}
.cvx-gets{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cvx-gets li{display:flex;gap:10px;align-items:baseline;color:var(--ink);font-size:14px;line-height:1.45}
.cvx-gets i{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(-1px)}
@media (max-width:900px){.cvx{grid-template-columns:minmax(0,1fr)}.cvx-prev{position:static}.cvx-form{padding:20px}}
@media (prefers-reduced-motion:reduce){.cvx-dots i{animation:none}}
/* Canvas connect: sign-in card */
.cvl{display:grid;justify-items:center;gap:18px;padding:12px 0 24px}
.cvl-card{width:min(440px,100%);padding:32px 28px 24px;border-radius:26px;background:linear-gradient(180deg,#1D2521,#171E1B);border:1px solid #2D3833;box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(253,219,37,.04);display:grid;gap:16px}
.cvl-logos{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:2px}
.cvl-h{margin:0;text-align:center;font:800 26px/1.1 var(--head);letter-spacing:-.025em;color:var(--ink)}
.cvl-sub{margin:-8px 0 4px;text-align:center;color:var(--ink2);font-size:15px}
.cvl-f{display:grid;gap:7px}.cvl-f>span{font-size:13px;font-weight:700;color:var(--ink2)}
.cvl .cvx-go{width:100%;margin-top:2px}
.cvl-help{border-top:1px solid #2A3430;padding-top:12px}
.cvl-help summary{cursor:pointer;color:#9EC3FF;font-weight:700;font-size:14px;list-style:none;text-align:center}
.cvl-help summary::-webkit-details-marker{display:none}
.cvl-help ol{margin:12px 0 10px;padding-left:20px;display:grid;gap:6px;color:var(--ink2);font-size:13.5px;line-height:1.5}
.cvl-help ol b{color:var(--ink)}
.cvl .cvx-safe{justify-content:center;text-align:center}
.cvl-gets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.cvl-gets li{font-size:13.5px;color:var(--ink2)}
/* exam dashboard */
.xdash{margin:18px 0 4px}
.xd-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.xd-h h3{margin:0;font:800 22px/1.1 var(--head);letter-spacing:-.02em;color:var(--ink)}
.xd-h span{color:var(--ink2);font-size:14px}.xd-h .link{margin-left:auto}
.xd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.xd{position:relative;padding:20px;border-radius:22px;background:linear-gradient(180deg,#1B2320,#171E1B);border:1px solid #2A3430;display:grid;gap:16px;overflow:hidden}
.xd::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--xc)}
.xd-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.xd-id{display:grid;gap:2px;min-width:0}
.xd-course{font-size:12.5px;font-weight:700;color:var(--xc)}
.xd-id b{font:800 20px/1.2 var(--head);letter-spacing:-.02em;color:var(--ink)}
.xd-id small{color:var(--ink2);font-size:13px}
.xd-cd{display:grid;justify-items:center;min-width:58px;padding:8px 10px;border-radius:14px;background:#222B27;border:1px solid #2D3833}
.xd-cd b{font:800 26px/1 var(--head);color:var(--ink);letter-spacing:-.03em}.xd-cd small{font-size:11px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.xd-mid{display:flex;gap:16px;align-items:center}
.xd-ring,.td-ring{position:relative;flex:none}
.xd-ring{width:76px;height:76px}
.xd-ring svg,.td-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.xd-ring circle{fill:none;stroke:#2A3430;stroke-width:5}
.xd-ring circle.v{stroke:var(--xc);stroke-linecap:round;stroke-dasharray:var(--p) 100}
.xd-ring b,.td-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0!important;font:800 20px/1 var(--head);color:var(--ink)}
.xd-ring b small,.td-ring b small{font-size:12px;color:var(--ink2);font-weight:700;margin:4px 0 0 1px;align-self:center}
.xd-rs{display:grid;gap:6px;min-width:0}
.xd-st{width:max-content;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}
.xd-st.ok{background:rgba(80,227,164,.14);color:#50E3A4}.xd-st.mid{background:rgba(253,219,37,.14);color:#FDDB25}.xd-st.hot{background:rgba(255,158,199,.15);color:#FF9EC7}
.xd-rs p{margin:0;color:var(--ink);font-size:14px;line-height:1.45}
.xd-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-radius:14px;overflow:hidden;background:#2A3430}
.xd-nums div{background:#1D2521;padding:10px 12px;display:grid;gap:2px}
.xd-nums b{font:800 20px/1 var(--head);color:var(--ink)}.xd-nums b small{font-size:12px;color:var(--ink2)}
.xd-nums span{font-size:11.5px;color:var(--ink2)}
.xd-secs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.xd-secs li{display:grid;grid-template-columns:minmax(0,1fr) 90px 40px;gap:10px;align-items:center;font-size:13px}
.xd-sn{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xd-bar{height:6px;border-radius:9px;background:#2A3430;overflow:hidden}.xd-bar i{display:block;height:100%;border-radius:9px;background:#7F8984}
.lv-shaky .xd-bar i{background:#FF9EC7}.lv-mid .xd-bar i{background:#FDDB25}.lv-solid .xd-bar i{background:#50E3A4}
.xd-secs em{font-style:normal;font-weight:700;color:var(--ink2);text-align:right;font-size:12px}
.xd-secs .xd-more{display:block;color:var(--ink2);font-size:12.5px}
.xd-acts{display:flex;gap:8px;flex-wrap:wrap}
.xd-empty{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 22px;border-radius:22px;background:linear-gradient(120deg,rgba(253,219,37,.12),rgba(127,178,255,.08));border:1px solid #2A3430}
.xd-empty b{font:800 19px/1.2 var(--head);color:var(--ink)}.xd-empty p{margin:4px 0 0;color:var(--ink2)}
.cvx-files em{white-space:nowrap}
@media (max-width:560px){.xd-grid{grid-template-columns:minmax(0,1fr)}.xd-secs li{grid-template-columns:minmax(0,1fr) 70px 36px}}
.xd-a,.xd-b{display:grid;gap:16px;align-content:start;min-width:0}
.xd-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
@media (min-width:900px){.xd-grid>.xd:only-child{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
  .xd-grid>.xd:only-child .xd-b{padding-left:32px;border-left:1px solid #2A3430}}
.xd-grid:has(>.xd:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.xd-grid:has(>.xd:nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}}

/* ===== Calm study theme: soft chalkboard base, fun colors kept for accents ===== */
:root[data-mode="night"]{--bg:#141A18;--surface:#1A221E;--surface2:#222B27;--line:#2A3430;--ink:#ECEAE3;--ink2:#A8B0AC;--night:#141A18}
html[data-mode="night"] body{background:#141A18}
/* hero: drop the glow blobs, keep a quiet board texture */
.hhero{background:linear-gradient(180deg,#1C2521,#18201C)!important;border:1px solid #2A3430}
.hhero::before,.hhero::after{opacity:.35!important}
/* home tiles keep their colors, just softer and matte */
.hb-live{background:linear-gradient(160deg,#F6BFD5,#EEA3C2)!important}
.hb-prac{background:linear-gradient(160deg,#BCD4F5,#97B9EA)!important}
.hb-tutor{background:linear-gradient(160deg,#F6E089,#EDCF55)!important}
.hb{box-shadow:none!important}
/* gentler primary yellow everywhere */
.btn.accent{background:#F2D34E!important;border-color:#F2D34E!important;box-shadow:none!important}
.btn.accent:hover{background:#F6DC6E!important}
/* study surfaces: the board and problems get the quietest treatment */
.prob,.lv,.live,.panel{box-shadow:none!important}
.tday,.xd,.cvl-card,.cvx-form{background:#1A221E!important}
.xd::before{opacity:.85}

/* ===== Study scenes: animated background + frosted glass panels ===== */
.scene-cv{position:fixed;inset:0;z-index:-1;pointer-events:none}
html[data-scene]:not([data-scene="none"]){background:#11141A}
html[data-scene]:not([data-scene="none"]) body{background:transparent!important}
html[data-scene]:not([data-scene="none"]) .topbar{background:rgba(14,16,22,.55)!important;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:rgba(255,255,255,.08)!important}
html[data-scene]:not([data-scene="none"]) .side{background:rgba(14,16,22,.42)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-right-color:rgba(255,255,255,.08)!important}
html[data-scene]:not([data-scene="none"]) :is(.hhero,.tday,.xd,.xd-empty,.tday-empty,.panel,.card,.prob,.cvl-card,.tcard,.hr,.cd2,.ptask,.xd-cd,.xd-nums div,.rail,.pl-box,.sj,.tool-head+div .panel){background:rgba(18,20,27,.58)!important;backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);border-color:rgba(255,255,255,.09)!important}
html[data-scene]:not([data-scene="none"]) :is(.ptask,.cd2,.xd-cd,.xd-nums div){background:rgba(255,255,255,.05)!important;backdrop-filter:none}
html[data-scene]:not([data-scene="none"]) .xd-nums{background:rgba(255,255,255,.08)}
html[data-scene]:not([data-scene="none"]) .hb-board{background:rgba(18,24,21,.7)!important;backdrop-filter:blur(16px)}
html[data-scene]:not([data-scene="none"]) :is(.hhero::before,.hhero::after){display:none}
html[data-scene]:not([data-scene="none"]) .prob :is(.pgiven,.pask,.ans,.hint){background-color:rgba(255,255,255,.04)}
.scene-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--ink);font:700 13.5px var(--body);background:rgba(255,255,255,.06)}
.scene-btn svg{width:18px;height:18px}.scene-btn:hover{background:rgba(255,255,255,.12)}
.scene-btn:focus-visible{outline:2px solid #F2D34E;outline-offset:2px}
.scene-pop{position:fixed;top:70px;right:16px;z-index:80;width:min(360px,calc(100vw - 32px));padding:16px;border-radius:20px;background:rgba(16,18,24,.86);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -20px rgba(0,0,0,.7);display:grid;gap:12px;color:var(--ink)}
.sp-h{margin:0;font:800 16px var(--head)}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-grid button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:8px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.sp-grid button[aria-pressed="true"]{border-color:#F2D34E;background:rgba(242,211,78,.08)}
.sp-grid button:hover{background:rgba(255,255,255,.07)}
.sp-sw{height:54px;border-radius:9px;margin-bottom:6px}
.sp-grid b{font-size:13.5px}.sp-grid small{font-size:11.5px;color:var(--ink2)}
.sp-snd{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);cursor:pointer}
.sp-snd input{accent-color:#F2D34E;width:16px;height:16px}
@media (max-width:860px){.scene-btn span{display:none}.scene-btn{width:40px;padding:0;justify-content:center}}
.scene-pop{width:min(520px,calc(100vw - 32px));max-height:min(78vh,640px);overflow:auto;grid-template-rows:auto auto 1fr auto}
.sp-top{display:flex;align-items:center;justify-content:space-between}
.sp-off{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font:700 12.5px var(--body);color:var(--ink2)}
.sp-off[aria-pressed="true"]{border-color:#F2D34E;color:#F2D34E}
.sp-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.sp-tabs button{all:unset;cursor:pointer;white-space:nowrap;padding:7px 12px;border-radius:999px;font:700 13px var(--body);color:var(--ink2);background:rgba(255,255,255,.05)}
.sp-tabs button[aria-selected="true"]{background:#F2D34E;color:#111214}
.sp-tabs button:focus-visible,.sp-off:focus-visible,.sp-grid button:focus-visible{outline:2px solid #F2D34E;outline-offset:2px}
.sp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-grid b{font-size:12.5px;line-height:1.25}
.sp-sw{height:62px}
.sp-snd small{color:var(--ink2);opacity:.8}
@media (max-width:480px){.sp-grid{grid-template-columns:1fr 1fr}}
/* study map sits on the chosen scene */
html[data-scene]:not([data-scene="none"]) .smx{background:rgba(8,10,14,.28)}
html[data-scene]:not([data-scene="none"]) .mx-top,html[data-scene]:not([data-scene="none"]) .mx-prog{background:rgba(12,14,20,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-scene]:not([data-scene="none"]) .mx-prog{padding-top:6px}
html[data-scene]:not([data-scene="none"]) .mx-line path{stroke:rgba(255,255,255,.55)}
html[data-scene]:not([data-scene="none"]) body.smx-open > :not(.smx):not(.scene-cv):not(.scene-pop){visibility:hidden}
/* study music */
.mu-list{display:grid;gap:6px}
.mu-list button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:14.5px}
.mu-list button:hover{background:rgba(255,255,255,.08)}.mu-list button[aria-pressed="true"]{border-color:#F2D34E;background:rgba(242,211,78,.08)}
.mu-list button:focus-visible{outline:2px solid #F2D34E;outline-offset:2px}
.mu-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#FF9EC7,#7FB2FF);color:#111214;font-weight:800}
.mu-form{display:flex;gap:8px}.mu-form input{flex:1;min-width:0;height:42px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:var(--ink);font:500 14px var(--body)}
.mu-form button{all:unset;cursor:pointer;padding:0 16px;border-radius:12px;background:#F2D34E;color:#111214;font:700 14px var(--body)}
.mu-note{margin:0;font-size:12.5px;color:var(--ink2)}
.mu-player{position:fixed;left:16px;bottom:16px;z-index:3500;width:min(360px,calc(100vw - 32px));border-radius:18px;overflow:hidden;background:rgba(16,18,24,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -25px rgba(0,0,0,.8)}
.mu-bar{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;color:var(--ink);font-size:13.5px}
.mu-bar b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-dot{width:8px;height:8px;border-radius:50%;background:#50E3A4;box-shadow:0 0 0 4px rgba(80,227,164,.18)}
.mu-bar button{all:unset;cursor:pointer;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 18px/1 var(--body);color:var(--ink2)}.mu-bar button:hover{background:rgba(255,255,255,.1);color:var(--ink)}
.mu-player iframe{display:block;width:100%;border:0}
.mu-player.min iframe{height:0!important}
.mu-player.min{width:auto;max-width:280px}
@media (max-width:860px){.mu-player{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
@media (max-width:1500px){.scene-btn span{display:none}.scene-btn{width:40px;padding:0;justify-content:center}}
/* subtitles on/off */
.cc-btn{font:800 12px/1 system-ui,-apple-system,sans-serif;letter-spacing:.04em}
.cc-btn.off{opacity:.45;text-decoration:line-through}
.caption.cc-off{display:none!important}
/* lesson slider: tap or drag to any point */
.controls .bar.scrub{position:relative;overflow:visible;height:6px;cursor:pointer;touch-action:none;padding:0;margin:10px 0;background:rgba(255,255,255,.14)}
.bar.scrub::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.bar.scrub i#barFill{position:relative;border-radius:3px;transition:width .25s}
.bar.scrub.dragging i#barFill,.bar.scrub.dragging .scrub-knob{transition:none}
.scrub-knob{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--brand,#FDDB25);box-shadow:0 0 0 3px rgba(0,0,0,.35);transform:scale(.8);transition:left .25s,transform .15s;pointer-events:none}
.bar.scrub:hover .scrub-knob,.bar.scrub.dragging .scrub-knob,.bar.scrub:focus-visible .scrub-knob{transform:scale(1.15)}
.scrub-ticks{position:absolute;inset:0;pointer-events:none}.scrub-ticks i{position:absolute;top:-1px;bottom:-1px;width:3px;margin-left:-1px;background:rgba(0,0,0,.55);border-radius:1px;z-index:1}
.scrub-tip{position:absolute;bottom:18px;transform:translateX(-50%);white-space:nowrap;padding:4px 9px;border-radius:8px;background:#0B0D0F;color:#fff;font:600 12px/1.2 system-ui,-apple-system,sans-serif;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.bar.scrub:focus-visible{outline:2px solid var(--brand,#FDDB25);outline-offset:6px}

/* ---------- Classes: teacher tools, class pages, handouts (classes.js) ---------- */
body[data-tab="classes"] [data-pane="classes"] { display: block; }
#clsBody { display: grid; gap: 22px; }
#clsBody .panel + .panel { margin-top: 0; }
#clsBody > .tool-head, #clsBody > .pane-head, #clsBody > .backlink { margin-bottom: -8px; }
.cl-sec { display: grid; gap: 12px; }
.cl-sec-h, .cl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-sec-h h3 { margin: 0; font: 700 22px var(--head); letter-spacing: -.03em; }
.cl-tools { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.cl-card { text-align: left; display: grid; gap: 4px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-width: 0; cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s; }
.cl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cl-card b { font: 700 17px/1.25 var(--head); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cl-card small { color: var(--ink2); font-size: 13px; }
.cl-card-cta { border-style: dashed; }
.cl-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cl-sub { color: var(--ink2); font-weight: 600; }
.cl-next { margin-top: 6px; justify-self: start; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--brand); color: var(--on-brand); }
.cl-join { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.cl-join-row { display: flex; gap: 8px; }
.cl-join-row input { flex: 1; min-width: 0; }
#clCode { font: 700 20px/1 var(--head); letter-spacing: .18em; text-transform: uppercase; }
.cl-teach { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.cl-teach h3 { margin: 4px 0 0; font: 700 22px var(--head); letter-spacing: -.03em; }
.cl-code, .cl-study { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cl-codebig { font: 800 clamp(34px, 6vw, 48px)/1.05 var(--head); letter-spacing: .14em; margin: 2px 0 4px; }
.cl-code-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cl-ann, .cl-exams, .cl-shared { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cl-ann li { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface2); }
.cl-ann p { margin: 0 0 2px; }
.cl-ann small, .cl-exams small, .cl-shared small { display: block; color: var(--ink2); font-size: 12.5px; }
.cl-exams li, .cl-shared li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); }
.cl-exams li > div, .cl-shared li > div:not(.cl-sh-act) { flex: 1; min-width: 0; }
.cl-secs { margin-top: 2px; }
.cl-shared .hr-k { flex: none; width: 116px; }
.cl-sh-act { display: flex; gap: 10px; align-items: center; }
.cl-ex-ed { display: grid; gap: 12px; margin-top: 4px; }
.cl-ex-row { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--surface2); }
.cl-ex-row .link { justify-self: start; }
.cl-pick { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface2); }
.cl-inline { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--ink); }
.cl-danger { color: var(--err); }
.cl-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-foot .sub { margin: 0; }
.cl-dbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cl-doc { gap: 4px; padding: clamp(18px, 3vw, 32px); }
.cl-doc .cl-blk + .cl-blk { margin-top: 10px; }
.cl-doc h3 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font: 700 19px var(--head); letter-spacing: -.02em; }
.cl-doc p, .cl-doc li { line-height: 1.55; }
.cl-doc ul, .cl-doc ol { margin: 6px 0; padding-left: 22px; display: grid; gap: 4px; }
.cl-tbl { overflow-x: auto; margin: 6px 0; }
.cl-tbl table { border-collapse: collapse; width: 100%; font-size: 14px; }
.cl-tbl th, .cl-tbl td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
.cl-tbl th { background: var(--surface2); font-weight: 700; }
.cl-probs > li { margin-bottom: 8px; }
.cl-pts { color: var(--ink2); font-size: 13px; }
.cl-choices { margin-top: 4px !important; }
.cl-key { margin: 6px 0 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface2); border-left: 3px solid var(--accent); }
.cl-rub { margin-top: 6px; }
.cl-notep { color: var(--ink2); font-size: 14px; }
.cl-lock { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cl-lock.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.cl-lock .cl-code-act { align-items: center; flex-wrap: nowrap; }
.cl-lock select { width: auto; min-height: 34px; padding-block: 4px; }
@media (max-width: 860px) { .cl-lock { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .cl-two, .cl-teach, .cl-code, .cl-study { grid-template-columns: minmax(0, 1fr); }
  .cl-code-act { justify-content: flex-start; }
  .cl-shared li { display: grid; gap: 6px; }
  .cl-shared .hr-k { width: auto; }
  .cl-exams li { flex-wrap: wrap; }
}

/* ---------- Grade exams (grading.js) ---------- */
.gr-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gr-how div { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.gr-how b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font: 800 15px var(--head); }
.gr-tot { font: 700 15px var(--head); }
.gr-q { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--surface2); }
.gr-qh { display: flex; gap: 8px; align-items: center; }
.gr-qn { width: 64px; flex: none; font-weight: 700; }
.gr-qt { flex: 1; min-width: 0; }
.gr-qm { flex: none; font-weight: 700; font-size: 14px; white-space: nowrap; }
.gr-crit { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gr-crit li { display: flex; gap: 8px; align-items: center; }
.gr-ct { flex: 1; min-width: 0; }
.gr-cp, .gr-aw { width: 76px; flex: none; text-align: right; }
.gr-q > .link { justify-self: start; }
.gr-drop { min-height: 0; }
.gr-papers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gr-papers li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); }
.gr-pn { flex: 1; min-width: 0; display: grid; }
.gr-pn small { color: var(--ink2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-st { flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--surface2); color: var(--ink2); }
.gr-st.ok, .gr-st.sent { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.gr-st.warn { background: var(--brand); color: var(--on-brand); }
.gr-st.err { color: var(--err); }
.gr-st.done { color: var(--accent); }
.gr-sc { flex: none; min-width: 72px; text-align: right; font: 700 15px var(--head); }
.gr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gr-stats div { padding: 12px; border-radius: var(--r-md); background: var(--surface2); display: grid; }
.gr-stats b { font: 800 26px/1.1 var(--head); }
.gr-stats small { color: var(--ink2); }
.gr-qbars { display: grid; gap: 8px; }
.gr-qb { display: grid; grid-template-columns: 48px minmax(0, 1fr) 150px; gap: 10px; align-items: center; font-size: 14px; }
.gr-qb i { height: 10px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.gr-qb em { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.gr-qb small { color: var(--ink2); }
.gr-rev { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.gr-scan { position: sticky; top: 84px; display: grid; gap: 10px; max-height: calc(100vh - 110px); overflow: auto; border-radius: var(--r-lg); background: var(--surface2); padding: 10px; }
.gr-scan img { width: 100%; border-radius: 8px; background: #fff; }
.gr-scan iframe { width: 100%; height: calc(100vh - 140px); border: 0; border-radius: 8px; background: #fff; }
.gr-side { display: grid; gap: 12px; }
.gr-big { font-size: clamp(34px, 5vw, 48px) !important; }
.gr-big small { font-size: .5em; color: var(--ink2); }
.gr-flags { padding: 10px 12px; border-radius: var(--r-md); background: var(--brand); color: var(--on-brand); font-size: 14px; }
.gr-flags ul { margin: 4px 0 0; padding-left: 18px; }
.gr-rq { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.gr-rq.low { border-color: var(--brand); }
.gr-lowt { color: var(--warn); font-weight: 600; }
.gr-qtt { font-weight: 500; color: var(--ink2); }
.gr-qs { font: 700 15px var(--head); white-space: nowrap; }
.gr-ctx { flex: 1; min-width: 0; font-size: 14px; }
.gr-of { flex: none; width: 44px; color: var(--ink2); font-size: 14px; }
.gr-mt { width: 100%; border-collapse: collapse; font-size: 14px; }
.gr-mt th, .gr-mt td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.gr-mt select { max-width: 100%; }
.gr-miss td:first-child { color: var(--err); }
.gr-unrev { color: var(--warn); font-weight: 600; }
#grCvBody { display: grid; gap: 10px; }
#cvMatch { display: grid; gap: 10px; overflow-x: auto; }
@media (max-width: 860px) {
  .gr-how, .gr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr-rev { grid-template-columns: minmax(0, 1fr); }
  .gr-scan { position: static; max-height: 60vh; }
  .gr-scan iframe { height: 60vh; }
  .gr-papers li { flex-wrap: wrap; }
  .gr-qb { grid-template-columns: 40px minmax(0, 1fr); }
  .gr-qb small { grid-column: 2; }
}
.gr-qh input.gr-qn { width: 64px; flex: none; }
.gr-qh input.gr-qt, .gr-crit input.gr-ct { width: auto; flex: 1 1 auto; min-width: 0; }
.gr-crit input.gr-cp, .gr-crit input.gr-aw { width: 84px; flex: none; }
.gr-qh .link, .gr-crit .link { flex: none; }

/* ---------- Teacher mode ---------- */
body[data-tab="teach"] [data-pane="teach"], body[data-tab="grade"] [data-pane="classes"] { display: block; }
.t-only { display: none !important; }
body[data-role="teach"] .t-only { display: inline-flex !important; }
body[data-role="teach"] .tabbar .t-only { display: grid !important; }
body[data-role="teach"] .rail [data-tab="home"], body[data-role="teach"] .rail [data-tab="learn"], body[data-role="teach"] .rail [data-tab="practice"], body[data-role="teach"] .rail [data-tab="tools"], body[data-role="teach"] .rail [data-tab="progress"],
body[data-role="teach"] .tabbar [data-tab="home"], body[data-role="teach"] .tabbar [data-tab="learn"], body[data-role="teach"] .tabbar [data-tab="practice"], body[data-role="teach"] .tabbar [data-tab="progress"] { display: none !important; }
body[data-role="teach"] .tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-role="teach"] #courseName { display: none; }
.role-seg { flex: none; }
.role-seg button { height: 32px; padding: 0 12px; font-size: 13px; font-weight: 700; }
#teachBody { display: grid; gap: 24px; }
.th-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.th-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.th-q { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); font: 600 14px var(--body); cursor: pointer; }
.th-q:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }
.th-q span { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.th-stats { display: grid; grid-template-columns: repeat(3, minmax(84px, auto)); gap: 10px; }
.th-stats div { display: grid; justify-items: center; padding: 14px 12px; border-radius: 16px; background: var(--surface2); }
.th-stats b { font: 800 30px/1 var(--head); }
.th-stats small { color: var(--ink2); font-size: 12.5px; margin-top: 4px; }
.th-stats .hot { background: var(--brand); color: var(--on-brand); }
.th-stats .hot small { color: var(--on-brand); }
.th-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.th-col { display: grid; gap: 24px; }
.th-cls { display: grid; gap: 10px; }
.th-name { max-width: 620px; }
.th-switch { margin: 0; }
@media (max-width: 860px) {
  .th-hero, .th-cols { grid-template-columns: minmax(0, 1fr); }
  .th-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .role-seg button { padding: 0 9px; font-size: 12px; }
}
@media (max-width: 480px) { .role-seg { padding: 3px; } .role-seg button { height: 28px; padding: 0 7px; font-size: 11px; } body[data-role="teach"] .topbar .ib.round:not(.acct) { display: none; } }
body[data-role="teach"] #streakChip { display: none; }
@media (max-width: 480px) { body[data-role="teach"] .topbar .scene-btn { display: none; } }