/* Lola Math: firstprep look (royal blue #1B4191, red #EB473D, pink #FAECEA, Quicksand, self-hosted) */
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/vendor/quicksand/quicksand-latin.woff2) format('woff2'); }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/static/vendor/quicksand/quicksand-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20C0; }
:root { --blue:#1b4191; --blue-dark:#132f6b; --blue-tint:#edf1f8; --blue-tint-2:#dde4f1; --red:#eb473d; --red-dark:#b8322a;
  --pink:#faecea; --pink-tint:#fdf6f5; --teal:#20ad96; --teal-tint:#e4f5f2; --amber:#f2a93b; --charcoal:#2b2a2a;
  --muted:#5a5757; --line:#e3dfdf; --card:#fff; --radius:16px; --shadow:0 6px 24px rgba(27,65,145,.08); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Quicksand', system-ui, sans-serif; color: var(--charcoal); background: var(--pink-tint); line-height: 1.55; font-size: 16px; }
a { color: var(--blue); } a:hover { color: var(--blue-dark); }
h1, h2, h3 { line-height: 1.2; color: var(--blue-dark); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 10px; top: 10px; background: #fff; padding: 8px; z-index: 99; }
.demo-banner { background: #fff4d6; color: #6b4a00; text-align: center; font-weight: 600; font-size: .9rem; padding: 6px 12px; border-bottom: 1px solid #f0d58a; }
header.top { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--charcoal); font-weight: 700; flex: none; }
.brand img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--pink); background: #fff; }
/* "lola" wordmark in firstprep colours (firstprep split: blue "first", red "prep"): blue "lo", red "la"; no star */
.lm-word { display: inline-flex; align-items: baseline; font-weight: 700; font-size: 1.7rem; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.lm-word .f { color: var(--blue); } .lm-word .p { color: var(--red); }
.founder-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem !important; font-weight: 700; color: #ffd9d5 !important; margin: 0 0 6px !important; }
.brand .sep { color: #b9b3b3; font-weight: 400; } .brand .prod { white-space: nowrap; }
header nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
header nav a { text-decoration: none; font-weight: 600; color: var(--charcoal); font-size: .95rem; }
/* landing nav stays on one row (the "Community College" link made it wrap the demo button) */
header.top nav { flex-wrap: nowrap; } header.top nav a { white-space: nowrap; }
@media (max-width: 1260px) { header.top nav { gap: 12px; } header.top nav a { font-size: .9rem; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); color: #fff !important; border: 0;
  border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; font-size: .95rem; }
.btn:hover { background: var(--blue-dark); } .btn:disabled { opacity: .5; cursor: default; }
.btn.red { background: var(--red); } .btn.red:hover { background: var(--red-dark); }
.btn.ghost { background: #fff; color: var(--blue) !important; border: 2px solid var(--blue-tint-2); }
.btn.ghost:hover { border-color: var(--blue); }
.btn.small { padding: 6px 14px; font-size: .85rem; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; border: 1px solid #f1eaea; }
.grid { display: grid; gap: 18px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } header nav .opt { display: none; } .brand .sep, .brand .prod { display: none; } }
.muted { color: var(--muted); } .small { font-size: .88rem; } .center { text-align: center; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--blue-tint); color: var(--blue); }
.pill.red { background: #fde4e2; color: var(--red-dark); } .pill.teal { background: var(--teal-tint); color: #13685a; } .pill.amber { background: #fff1d6; color: #7a5200; }
label { font-weight: 600; font-size: .92rem; display: block; margin: 10px 0 4px; }
input, select, textarea { font: inherit; width: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
textarea { resize: vertical; min-height: 70px; }
.err { color: var(--red-dark); font-weight: 600; min-height: 1.2em; } .ok { color: #13685a; font-weight: 600; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
footer.site { padding: 30px 0 40px; color: var(--muted); font-size: .88rem; border-top: 1px solid var(--line); margin-top: 40px; background: #fff; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; }

/* landing */
.hero { background: linear-gradient(180deg, var(--pink) 0%, #fff 70%); padding: 56px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 30px; align-items: center; }
.hero h1 { font-size: 2.6rem; margin: 0 0 14px; } .hero h1 b { color: var(--red); }
.hero .lead { font-size: 1.15rem; color: #3d3b3b; }
.hero img.mascot { width: 100%; max-width: 360px; justify-self: center; filter: drop-shadow(0 12px 24px rgba(27,65,145,.15)); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero h1 { font-size: 2rem; } .hero img.mascot { max-width: 220px; } }
section.band { padding: 44px 0; } section.band.alt { background: #fff; }
section.band h2 { font-size: 1.9rem; margin: 0 0 8px; }
.course-card { border-top: 5px solid var(--blue); } .course-card.ap { border-top-color: var(--red); } .course-card.soon { opacity: .6; border-top-color: #bbb; } .course-card.cc { border-top-color: #0f766e; }
.course-card h3 { margin: 6px 0; } .course-card ul { padding-left: 18px; margin: 8px 0 0; font-size: .9rem; }
.feat h3 { margin: 4px 0 6px; font-size: 1.1rem; } .feat .ico { font-size: 1.6rem; }
.shot { width: 100%; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.about-fp { background: var(--blue); color: #fff; } .about-fp h2 { color: #fff; } .about-fp a { color: #fff; }

/* app shell */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 66px); }
.side { background: #fff; border-right: 1px solid var(--line); padding: 18px 14px; }
.side h4 { margin: 14px 8px 6px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.side button.nav { display: flex; width: 100%; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 12px; border-radius: 12px;
  font: inherit; font-weight: 600; color: var(--charcoal); cursor: pointer; text-align: left; }
.side button.nav:hover { background: var(--blue-tint); } .side button.nav.on { background: var(--blue); color: #fff; }
.main { padding: 22px 26px 40px; min-width: 0; }
@media (max-width: 800px) { .app { grid-template-columns: 1fr; } .side { display: flex; overflow-x: auto; gap: 6px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side h4, .side .sidehide { display: none; } .side button.nav { white-space: nowrap; width: auto; padding: 8px 12px; } .main { padding: 14px; } }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.topline h1 { margin: 0; font-size: 1.6rem; }
select.classpick { width: auto; min-width: 240px; font-weight: 700; }

/* chat */
.chat { display: flex; flex-direction: column; height: calc(100vh - 170px); min-height: 460px; }
.chat .log { flex: 1; overflow-y: auto; padding: 8px 4px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 78%; padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.msg.lola { align-self: flex-start; border-bottom-left-radius: 6px; display: flex; gap: 10px; }
.msg.lola img.av { width: 38px; height: 38px; border-radius: 50%; flex: none; border: 2px solid var(--pink); }
.msg .katex-display { margin: .4em 0; overflow-x: auto; overflow-y: hidden; }
.qcard { background: var(--blue-tint); border-radius: 14px; padding: 12px 14px; margin-top: 8px; white-space: normal; }
.qcard .choices { display: grid; gap: 6px; margin-top: 8px; }
.qcard .choices button, .choice { text-align: left; background: #fff; border: 2px solid var(--blue-tint-2); border-radius: 12px; padding: 8px 12px; font: inherit; cursor: pointer; }
.choice.sel { border-color: var(--blue); background: #f5f8ff; } .choice.right { border-color: var(--teal); background: var(--teal-tint); } .choice.wrong { border-color: var(--red); background: #fde9e7; }
.vcard { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin-top: 8px; text-decoration: none; color: inherit; }
.vcard img { width: 120px; border-radius: 8px; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; }
.composer textarea { min-height: 48px; max-height: 160px; border-radius: 16px; }
.iconbtn { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 2px solid var(--blue-tint-2); background: #fff; cursor: pointer; font-size: 1.2rem; }
.iconbtn:hover { border-color: var(--blue); } .iconbtn.rec { background: var(--red); color: #fff; border-color: var(--red); }
.mood { display: flex; align-items: center; gap: 10px; } .mood img { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--pink); background: #fff; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .quick button { font-size: .82rem; }

/* exams */
.exam-q { padding: 16px 0; border-bottom: 1px solid var(--line); } .exam-q:last-child { border-bottom: 0; }
.exam-q .num { font-weight: 700; color: var(--blue); margin-right: 6px; }
.figure svg { max-width: 380px; width: 100%; height: auto; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; background: var(--blue-tint); padding: 6px 12px; border-radius: 999px; }
.rubric li { margin: 4px 0; } .rubric .pt-ok::before { content: "✓ "; color: var(--teal); font-weight: 700; } .rubric .pt-no::before { content: "✗ "; color: var(--red); font-weight: 700; }
.score-big { font-size: 3rem; font-weight: 700; color: var(--blue); line-height: 1; }
.bar { height: 10px; background: var(--blue-tint); border-radius: 99px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.estimate { background: #fff8e8; border: 1px solid #f3dfae; border-radius: 12px; padding: 12px 14px; font-size: .9rem; }

/* teacher */
.heat { border-collapse: separate; border-spacing: 3px; font-size: .85rem; }
.heat th { text-transform: none; letter-spacing: 0; font-size: .75rem; color: var(--charcoal); text-align: center; max-width: 110px; }
.heat td { text-align: center; border-radius: 8px; padding: 8px 6px; font-weight: 700; border: 0; min-width: 52px; }
.heat td.name { text-align: left; background: none; font-weight: 600; white-space: nowrap; }
.h0 { background: #f1efef; color: #9a9595; } .h1 { background: #fbd3cf; } .h2 { background: #fde6c4; } .h3 { background: #fff3c2; } .h4 { background: #d6f0e0; } .h5 { background: #a9e0c4; }
.kpi { display: flex; flex-direction: column; } .kpi b { font-size: 1.8rem; color: var(--blue); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; } .tabs button { font-weight: 700; }
.modal-bg { position: fixed; inset: 0; background: rgba(20,30,60,.35); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: #fff; border-radius: 18px; max-width: 720px; width: 100%; max-height: 88vh; overflow: auto; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.toggle { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-weight: 600; } .toggle input { width: auto; transform: scale(1.3); }
.code { font-family: ui-monospace, monospace; font-size: 1.4rem; letter-spacing: .15em; background: var(--blue-tint); padding: 4px 12px; border-radius: 10px; color: var(--blue-dark); }
.credit { font-size: .85rem; color: var(--muted); }
.course-pick{display:grid;gap:6px;margin:4px 0 8px}
.course-pick .cp{display:flex;align-items:center;gap:8px;border:1px solid #e3e7f0;border-radius:10px;padding:8px 10px;margin:0;font-weight:500;cursor:pointer}
.course-pick .cp input{width:auto;margin:0}
.course-pick .cp.off{opacity:.6;cursor:default}
@media (max-width:600px){.quick select{width:100%!important;max-width:100%}.chat .log{max-height:none}}
.hero .tagline{font-weight:700;color:var(--red);font-size:1.12rem;margin:10px 0 4px}
.band.founder{background:var(--blue);color:#fff;padding:44px 0}
.founder-wrap{display:grid;grid-template-columns:190px 1fr;gap:34px;align-items:center}
.founder h2{color:#fff;margin:0 0 10px}
.founder p{font-size:1.08rem;line-height:1.6;margin:0;color:#eef2fb}
.founder-badge{background:#fff;color:var(--blue);border-radius:50%;width:170px;height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--red);text-align:center}
.founder-badge .yrs{font-size:3.2rem;font-weight:700;line-height:1}
.founder-badge .lbl{font-size:.85rem;font-weight:600;margin-top:4px}
@media (max-width:700px){.founder-wrap{grid-template-columns:1fr}.founder-badge{margin:0 auto}}
section.band{scroll-margin-top:70px}
/* landing: worldwide lens (same style as the founder band), Snap/Sketch/Say row, light polish */
.band.founder.lens{background:var(--blue-dark,#142f6b);border-top:1px solid rgba(255,255,255,.12)}
.lens-badge{color:var(--blue)}
.lens-badge .lbl{margin-top:6px}
.founder .chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:16px 0 0}
.founder .chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:4px 14px;font-weight:600;font-size:.92rem}
.std-eg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;background:#fff;color:var(--ink,#222);border-radius:14px;padding:12px 16px;box-shadow:0 0 0 4px rgba(235,71,61,.9)}
.std-eg .std-code{font-family:ui-monospace,monospace;font-weight:700;background:var(--blue);color:#fff;border-radius:8px;padding:3px 10px;letter-spacing:.02em}
.std-eg .std-lbl{font-weight:600;color:var(--blue)}
.std-eg .std-arrow{color:var(--red);font-weight:700;font-size:1.2rem}
.std-eg .std-prob .small{color:var(--muted)}
section.band h2+p.muted{margin-bottom:18px}
.sub-h{font-size:1.15rem;margin:18px 0 12px;color:var(--blue)}
.ways{margin-bottom:10px}
.ways .course-card{border-top-color:var(--red)}
.course-card,.feat{transition:transform .15s ease,box-shadow .15s ease}
.course-card:hover,.feat:hover{transform:translateY(-2px)}
.feat .ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--blue-tint)}
@media (prefers-reduced-motion:reduce){.course-card,.feat{transition:none}.course-card:hover,.feat:hover{transform:none}}
@media (max-width:700px){section.band{padding:34px 0}section.band h2{font-size:1.55rem}.founder p{font-size:1rem}.std-eg{padding:10px 12px}}
@media (max-width:520px){
  header.top nav{gap:10px;flex-wrap:nowrap} header.top nav a{white-space:nowrap} header.top nav .btn{padding:8px 12px;font-size:.9rem}
  .brand .lm-word{font-size:1.35rem} .brand img{width:34px;height:34px}
  .founder-badge{width:124px;height:124px}.founder-badge .yrs{font-size:2.4rem}.lens-badge svg{width:56px;height:56px}
  .std-eg{flex-direction:column;align-items:flex-start}.std-eg .std-arrow{transform:rotate(90deg);line-height:1}
}
/* chat: Snap it / Sketch it / Say it */
.tools-pop{position:relative;flex:none}
.pop{position:absolute;bottom:54px;left:0;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(27,65,145,.18);padding:6px;min-width:200px;z-index:30}
.popitem{display:block;padding:10px 12px;border-radius:10px;font-weight:600;cursor:pointer;margin:0;white-space:nowrap}
.popitem:hover{background:var(--blue-tint)}
.composer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.mute{background:none;border:1px solid var(--blue-tint-2);border-radius:999px;padding:4px 12px;font:inherit;font-size:.82rem;font-weight:600;color:var(--blue);cursor:pointer}
.mute[aria-pressed="true"]{color:var(--muted)}
.iconbtn{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.iconbtn.rec{animation:recpulse 1.2s infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(235,71,61,.45)}50%{box-shadow:0 0 0 8px rgba(235,71,61,0)}}
@media (prefers-reduced-motion:reduce){.iconbtn.rec{animation:none}}
.msg.me img.sent-img{display:block;max-width:min(380px,100%);max-height:320px;border-radius:12px;margin-top:8px;background:#fff}
.modal.sketch{max-width:760px;padding:18px}
.sk-tools{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}
.sk{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--blue-tint-2);background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;margin:0}
.sk.on{border-color:var(--blue);background:var(--blue-tint)}
.sk .dot{width:14px;height:14px;border-radius:50%;display:inline-block}
.sk.grid-t input{width:auto;margin:0}
#skC{display:block;width:100%;height:min(52vh,420px);border:2px solid var(--blue-tint-2);border-radius:14px;touch-action:none;cursor:crosshair;background:#fff}
.sk-send{display:flex;gap:8px;margin-top:10px}
.sk-send input{flex:1}
@media (max-width:600px){.modal-bg.sketch-bg{padding:8px}.modal.sketch{padding:12px;max-height:96vh}#skC{height:52vh}.sk{padding:6px 10px}.sk-send{flex-direction:column}.composer{gap:6px}.composer .iconbtn{width:42px;height:42px}}
@media (max-width:600px){.composer{flex-wrap:wrap}.composer textarea{order:-1;flex:1 1 100%;width:100%}.composer #send{margin-left:auto}}
.video-card{padding:10px;border-top:5px solid var(--blue);max-width:980px;margin:16px auto 10px}
.demo-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#1b4191}
.video-card{position:relative}
.unmute{position:absolute;top:22px;right:22px;z-index:2;background:rgba(27,65,145,.92);color:#fff;border:0;border-radius:999px;padding:9px 16px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:0 0 0 3px var(--red),0 6px 18px rgba(0,0,0,.2)}
.unmute:hover{background:var(--blue-dark)}
.unmute[aria-pressed="true"]{background:rgba(255,255,255,.92);color:var(--blue)}
@media (max-width:600px){.unmute{top:16px;right:16px;padding:7px 12px;font-size:.82rem}}
/* animated Lola placements */
.mood-lola{width:64px;height:64px;flex:none}
.mood-lola img{width:56px;height:56px}
.mood-lola.lola-anim{width:72px;height:auto;margin:-8px 0 -4px -6px}
.quick{align-items:center}
.chat-lola{width:64px;margin-left:auto;flex:none}
.chat-lola img{width:52px;height:52px;border-radius:50%}
.chat-lola.lola-anim{width:74px;margin:-14px 0 -10px auto}
@media (max-width:600px){.chat-lola.lola-anim{width:62px}}
.hero .lola-hero{width:100%;max-width:360px;justify-self:center}
.hero .lola-hero.lola-anim svg{filter:drop-shadow(0 12px 24px rgba(27,65,145,.15))}
.lola-cta{width:120px;margin:0 auto}
.lola-cta.lola-anim{width:140px}
@media (max-width:900px){.hero .lola-hero{max-width:220px}}
/* teacher Activity */
.act-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;margin-bottom:12px}
.act-filters label{font-size:.8rem;margin:0 0 4px}
.act-btns{display:flex;gap:6px;white-space:nowrap}
.act-tabs{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.act-q{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin:0 0 10px;border-left:5px solid var(--teal,#20ad96)}
.act-q.no{border-left-color:var(--red)}
.act-meta{font-size:.85rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.act-stem{margin:8px 0 6px}
.act-ans{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;align-items:center}
.act-att{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.act-att img{max-width:220px;max-height:160px;border-radius:10px;border:2px solid var(--blue-tint-2);background:#fff}
.act-chat .msg{max-width:88%;margin:6px 0}
.act-chat{display:flex;flex-direction:column}
@media (max-width:900px){.act-filters{grid-template-columns:1fr 1fr}}

/* ---- per-question work tools: Say it / Snap it / Sketch it (Practice + Exams) */
.wt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.wt .btn.small { padding: 5px 10px; }
.wt-snap-w { position: relative; display: inline-flex; }
.wt-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 4px; background: #fff;
  border: 1px solid var(--line, #dfe5f0); border-radius: 10px; padding: 6px; box-shadow: 0 8px 22px rgba(20, 35, 70, .14); white-space: nowrap; }
.wt-menu[hidden] { display: none; }
.wt-say.rec, .mic-mini.rec { background: #eb473d; color: #fff; border-color: #eb473d; animation: wtpulse 1.2s ease-in-out infinite; }
@keyframes wtpulse { 50% { box-shadow: 0 0 0 6px rgba(235, 71, 61, .18); } }
@media (prefers-reduced-motion: reduce) { .wt-say.rec, .mic-mini.rec { animation: none; } }
.wt-thumbs { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.wt-thumbs:empty { display: none; }
.wt-th { position: relative; display: inline-flex; flex-direction: column; gap: 4px; max-width: 260px; }
.wt-th img { width: 150px; height: 100px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line, #dfe5f0); background: #fff; }
.wt-thumbs.rep .wt-th img { width: 200px; height: 150px; object-fit: contain; }
.wt-th > button[data-rm] { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #1b2a4a; color: #fff;
  font-size: 15px; line-height: 24px; cursor: pointer; }
.p-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.p-hint { display: flex; gap: 10px; align-items: flex-start; background: #fff8e6; border: 1px solid #f3dca0; border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.p-hint .av { width: 38px; height: 38px; border-radius: 50%; }
.exam-tools-note { background: #f3f6fc; border-radius: 8px; padding: 6px 10px; }
.wt-thumbs.rep .wt-th { max-width: 100%; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.fbx { flex: 1 1 320px; max-width: 640px; }
.fbx:not(:empty) { background: #fff8e6; border: 1px solid #f3dca0; border-radius: 10px; padding: 8px 10px; }

/* ---- "Watch Lola solve it" walkthrough player */
.wk { position: relative; margin-top: 12px; border-radius: 18px; padding: 14px 16px 12px; background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 60%);
  border: 1px solid #dbe4f6; box-shadow: 0 10px 28px rgba(27, 65, 145, .10); outline: none; }
.wk-head { display: flex; align-items: center; gap: 12px; }
.wk-lola { width: 64px; height: 64px; flex: 0 0 64px; }
.wk-lola img, .wk-lola svg { width: 100%; height: 100%; }
.wk-title b { color: var(--blue, #1B4191); font-size: 1.05rem; }
.wk-chips { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.wk-x { border: 0; background: #eef2fb; color: #1b2a4a; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #e8eefb; color: #1B4191;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em; }
.chip.try { background: #f1e8ff; color: #5b2ca0; }
.pill.violet { background: #f1e8ff; color: #5b2ca0; }
.wk-q { margin: 10px 0 8px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px dashed #c9d5ee; font-size: .98rem; }
.wk-board { min-height: 92px; max-height: 260px; overflow-y: auto; padding: 6px 12px; border-radius: 14px; background: #fffef8;
  border: 1px solid #efe6c8; background-image: repeating-linear-gradient(180deg, transparent 0 33px, #f3ead0 33px 34px); }
.wk-line { opacity: .45; transition: opacity .35s ease, transform .35s ease; }
.wk-line .katex-display { margin: .35em 0; }
.wk-line.now { opacity: 1; animation: wkIn .45s ease both; }
.wk-line.now .katex-display { background: rgba(255, 228, 140, .45); border-radius: 10px; padding: 2px 8px; box-shadow: inset 3px 0 0 #EB473D; }
.wk-final .wk-line.now .katex-display { background: rgba(32, 160, 120, .14); box-shadow: inset 3px 0 0 #13a37a; }
@keyframes wkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wk-cap { margin-top: 10px; min-height: 2.6em; padding: 10px 14px; border-radius: 14px; background: #1B4191; color: #fff; font-size: 1rem; line-height: 1.45; }
.wk-cap .katex { color: #fff; }
.wk-bar { height: 6px; border-radius: 99px; background: #e6ecf8; margin: 10px 0 6px; overflow: hidden; }
.wk-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1B4191, #EB473D); transition: width .4s ease; }
.wk-ctl { display: flex; align-items: center; gap: 6px; }
.wk-ctl button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d5def0; background: #fff; display: inline-grid; place-items: center; cursor: pointer; color: #1B4191; }
.wk-ctl button svg { width: 20px; height: 20px; fill: currentColor; }
.wk-ctl button:hover { border-color: #1B4191; }
.wk-ctl button:focus-visible { outline: 3px solid #f6b73c; outline-offset: 2px; }
.wk-ctl .wk-play { width: 48px; height: 48px; background: #1B4191; color: #fff; border-color: #1B4191; }
.wk-sp { flex: 1; }
.wk-needtap .wk-mute { animation: wtpulse 1.2s ease-in-out infinite; }
.wk-end { margin-top: 10px; }
.wk-try { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(90deg, #fff4e6, #ffe9e7); border: 1px solid #f7c9c3; }
.wk-try b { color: #b02a20; font-size: 1.08rem; }
.wk-modal .modal { max-width: 760px; width: calc(100% - 24px); }
.wk-still .wk-line, .wk-still .wk-line.now, .wk-still .wk-bar i { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .wk-line, .wk-line.now, .wk-bar i { animation: none !important; transition: none !important; } }
@media (max-width: 560px) { .wk { padding: 12px; } .wk-lola { width: 48px; height: 48px; flex-basis: 48px; } .wk-chips { display: none; } .wk-try { flex-direction: column; align-items: stretch; } }
.wrong-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fdf0ee; }
.wrong-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tryit-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px;
  background: linear-gradient(90deg, #f6f0ff, #eef3ff); border: 1px solid #ded2f6; }
.tryit-banner b { color: #5b2ca0; }
.tryq { margin-top: 6px; } .tryq-top { display: flex; gap: 6px; } .tryq-say b { color: #b02a20; }
.walk-btn { margin-top: 8px; }
.tryit-badge { display: block; font-size: .68rem; font-weight: 700; color: #5b2ca0; }

.btn[hidden] { display: none !important; }

/* =====================================================================================================
   App redesign (student + teacher shells): custom line-icon set, pill nav with icon tiles, Lola card,
   dashboard Home, character chat. Scoped to body.app-body so the public front page is untouched.
   ===================================================================================================== */
.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; }
.app-body { background: radial-gradient(1200px 500px at 100% -10%, #fdeceb 0%, rgba(253,236,235,0) 60%), radial-gradient(900px 500px at -10% 110%, #e9effb 0%, rgba(233,239,251,0) 60%), #f7f8fc; background-attachment: fixed; color: #1f2433; }
.app-body .card { border-radius: 20px; border: 1px solid #eceff6; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(27,65,145,.07); }
.app-body .btn { transition: background .15s, transform .12s, box-shadow .15s, border-color .15s; }
.app-body .btn:not(:disabled):active { transform: scale(.97); }
.app-body .btn .ic { width: 1.1em; height: 1.1em; }
.app-body .btn.light { background: #fff; color: var(--blue) !important; box-shadow: 0 6px 16px rgba(10,25,60,.18); }
.app-body .btn.light:hover { background: #fdf0ee; }
.app-body .btn.ghost { border-width: 1.5px; }
.app-body :focus-visible { outline: 3px solid #f6b73c; outline-offset: 2px; }
.app-body .chip.amber { background: #fff1d6; color: #7a5200; }
.app-body .chip .ic { width: 1em; height: 1em; }

/* shell */
.app-body .app { grid-template-columns: 256px 1fr; min-height: calc(100vh - 66px); }
.app-body .side { background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-right: 1px solid #eceff6; padding: 16px 12px 24px;
  position: sticky; top: 66px; height: calc(100vh - 66px); overflow-y: auto; }
.app-body .side h4 { margin: 16px 12px 6px; font-size: .7rem; letter-spacing: .09em; color: #8a90a2; }
.app-body .side button.nav { gap: 12px; padding: 7px 10px; margin: 2px 0; border-radius: 14px; color: #394056; font-weight: 600; font-size: .95rem;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.app-body .side button.nav > .ic { width: 34px; height: 34px; padding: 7.5px; border-radius: 11px; background: #f1f4fb; color: var(--blue); transition: background .15s, color .15s; }
.app-body .side button.nav:hover { background: #f4f6fc; transform: translateX(2px); }
.app-body .side button.nav:hover > .ic { background: #e2e9f8; }
.app-body .side button.nav.on { background: linear-gradient(135deg, #1b4191 0%, #2b5fc9 100%); color: #fff; box-shadow: 0 8px 18px rgba(27,65,145,.25); transform: none; }
.app-body .side button.nav.on > .ic { background: rgba(255,255,255,.16); color: #fff; }
.app-body .side #logoutBtn > .ic { color: #8a90a2; }
.me-card { margin: 0 2px 8px; padding: 12px 12px 14px; border-radius: 20px; background: linear-gradient(140deg, #eef3ff 0%, #fdf1ef 100%); border: 1px solid #e6eaf5; }
.me-top { display: flex; align-items: center; gap: 8px; }
.me-card .mood-lola { width: 64px; height: 64px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(27,65,145,.12); display: grid; place-items: center; overflow: hidden; }
.me-card .mood-lola img { width: 56px; height: 56px; border: 0; }
.me-card .mood-lola.lola-anim { width: 64px; height: 64px; margin: 0; }
.me-card .mood-lola.lola-anim svg { width: 70px; height: 70px; margin-top: 8px; }
.me-txt b { font-size: 1.05rem; color: #13204a; } .me-txt .small { color: #5b6275; }
.me-stats { margin-top: 10px; }
.me-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #5b6275; }
.streak { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border-radius: 999px; background: #fff; color: #b0440f; font-size: .82rem; font-weight: 700; box-shadow: 0 2px 6px rgba(176,68,15,.12); }
.streak .ic { color: #f0731c; width: 1.1em; height: 1.1em; } .streak.cold { color: #6b7285; } .streak.cold .ic { color: #a5acbd; }
.me-prog { margin-top: 10px; } .me-prog .small { display: flex; justify-content: space-between; color: #4a5168; margin-bottom: 4px; }
.me-prog .bar { height: 8px; background: rgba(27,65,145,.12); }
.app-body .bar > i { background: linear-gradient(90deg, #1b4191, #2b5fc9); }
.t-card .t-av { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #1b4191, #2b5fc9); color: #fff; display: grid; place-items: center; }
.t-card .t-av .ic { width: 26px; height: 26px; }
.app-body .main { padding: 22px 28px 48px; }
.app-body .topline h1 { font-size: 1.55rem; }
.tl-title { display: flex; align-items: center; gap: 12px; }
.tl-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1b4191, #2b5fc9); box-shadow: 0 8px 18px rgba(27,65,145,.22); }
.tl-ico .ic { width: 22px; height: 22px; }
.app-body select.classpick, .pill-select { width: auto; border-radius: 999px; border: 1.5px solid #dfe5f2; background-color: #fff; padding: 8px 14px; font-weight: 700; font-size: .9rem;
  box-shadow: 0 2px 8px rgba(27,65,145,.06); color: #1f2a4d; cursor: pointer; }
.pill-select { font-weight: 600; font-size: .86rem; padding: 7px 12px; max-width: 46%; }
.tabbar, .sheet-head, .sheet-bg { display: none; }

/* home dashboard */
.dash { display: grid; gap: 18px; }
.hero-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 190px; align-items: end; gap: 10px; padding: 26px 28px; border-radius: 26px; color: #fff;
  background: radial-gradient(420px 220px at 88% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%), linear-gradient(135deg, #17398a 0%, #1b4191 40%, #2f62cc 100%);
  box-shadow: 0 20px 44px rgba(27,65,145,.28); }
.hero-card::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; left: -90px; bottom: -150px; background: radial-gradient(circle, rgba(235,71,61,.45), rgba(235,71,61,0) 70%); }
.hero-card::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; right: 210px; top: 26px; background: #eb473d; box-shadow: -120px 60px 0 -3px rgba(255,255,255,.35), 40px 120px 0 -4px rgba(255,255,255,.25); }
.hero-txt { position: relative; z-index: 1; min-width: 0; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.hero-card h2 { color: #fff; font-size: 1.6rem; margin: 6px 0 18px; max-width: 30ch; }
.next-up { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); max-width: 620px; }
.nu-ic { width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--blue); display: grid; place-items: center; flex: none; box-shadow: 0 6px 14px rgba(10,25,60,.18); }
.nu-ic .ic { width: 24px; height: 24px; }
.nu-txt { flex: 1; min-width: 0; } .nu-txt b { font-size: 1.05rem; display: block; } .nu-txt .small { opacity: .92; }
.nu-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.hero-lola { position: relative; z-index: 1; width: 190px; margin: -10px 0 -34px; }
.hero-lola img { width: 100%; }
.hero-lola.lola-anim svg { width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(5,15,45,.35)); }
.dash-stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 16px; }
.dash-stats .card { padding: 18px; display: flex; gap: 14px; align-items: center; transition: transform .15s, box-shadow .15s; }
.dash-stats .card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 16px 32px rgba(27,65,145,.11); }
.ring { flex: none; width: 112px; height: 112px; }
.ring-v { animation: ringIn 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ringIn { from { stroke-dashoffset: var(--c); } }
.ring-n { font: 700 26px Quicksand, sans-serif; fill: #13204a; } .ring-l { font: 600 11px Quicksand, sans-serif; fill: #6b7285; letter-spacing: .04em; }
.stat { align-items: flex-start !important; }
.stat-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #edf1fb; color: var(--blue); flex: none; }
.stat-ic .ic { width: 22px; height: 22px; } .stat-ic.flame { background: #fff0e3; color: #e8590c; } .stat-ic.red { background: #fdecea; color: #c2352b; }
.stat-k { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6b7285; }
.stat-v { font-size: 1.3rem; font-weight: 700; color: #13204a; line-height: 1.25; margin: 2px 0 2px; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .card-h h3 { margin: 0; font-size: 1.12rem; }
.std-list { list-style: none; padding: 0; margin: 0; }
.std-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #e9ecf4; }
.std-row:last-child { border-bottom: 0; }
.std-name { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #394056; }
.std-meta { display: inline-flex; align-items: center; gap: 8px; } .std-meta b { min-width: 38px; text-align: right; font-size: .92rem; }
.bar.mini { width: 70px; height: 7px; }
.lv-strong { color: #0f7a66; } .lv-build { color: #8a5a00; } .lv-start { color: #b8322a; } .lv-new { color: #6b7285; }
.bar.lv-strong > i { background: linear-gradient(90deg, #20ad96, #13a37a); } .bar.lv-build > i { background: linear-gradient(90deg, #f2a93b, #f08c2e); }
.bar.lv-start > i { background: linear-gradient(90deg, #f16a5f, #eb473d); } .bar.lv-new > i { background: #c9d2e3; }
.unit-list { display: grid; gap: 2px; }
.unit-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; padding: 8px 10px; border-radius: 14px; cursor: pointer; transition: background .15s, transform .15s; }
.unit-row:hover { background: #f4f6fc; transform: translateX(2px); }
.u-num { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #edf1fb; color: var(--blue); font-weight: 700; font-size: .85rem; flex: none; }
.u-main { flex: 1; min-width: 0; display: grid; gap: 5px; } .u-top { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; }
.u-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u-main .bar { height: 8px; }
.assign-list { display: grid; }
.assign { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #eef1f6; } .assign:first-child { border-top: 0; }
.as-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e4f5f2; color: #0f7a66; flex: none; }
.as-ic.exam { background: #fdecea; color: #c2352b; } .as-txt { flex: 1; min-width: 0; }

/* chat with Lola */
.chat2 { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 480px; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #eceff6;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 36px rgba(27,65,145,.09); }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef1f7; background: linear-gradient(90deg, #f1f5ff 0%, #fff4f3 100%); }
.ch-id { display: flex; align-items: center; gap: 10px; min-width: 0; } .ch-id b { color: #13204a; font-size: 1.05rem; }
.ch-av { position: relative; width: 44px; height: 44px; flex: none; }
.ch-av img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(27,65,145,.16); background: #fff; }
.ch-dot { position: absolute; right: -1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #20ad96; border: 2px solid #fff; }
.ch-status { color: #5b6275; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat2 .log { flex: 1; overflow-y: auto; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 14px;
  background: radial-gradient(#e6ebf6 1px, transparent 1.3px) 0 0 / 22px 22px, linear-gradient(180deg, #fbfcff, #fdfbfb); }
.chat2 .msg { max-width: 86%; padding: 0; background: none; box-shadow: none; border-radius: 0; display: flex; gap: 10px; align-items: flex-end; white-space: normal; animation: msgIn .3s ease both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.chat2 .msg .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat2 .msg.lola .bub { position: relative; min-width: 0; background: #fff; border: 1px solid #e2e8f5; border-radius: 20px 20px 20px 6px; padding: 9px 14px 12px; box-shadow: 0 6px 16px rgba(27,65,145,.07); }
.chat2 .msg .who { font-size: .72rem; font-weight: 700; color: #b8322a; letter-spacing: .03em; margin-bottom: 2px; }
.av-slot { width: 42px; height: 42px; flex: none; }
.av-slot img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(27,65,145,.15); background: #fff; }
.av-slot.live { width: 60px; height: 66px; margin: 0 -4px -6px -6px; }
.av-slot.live.lola-anim svg { width: 66px; height: 66px; filter: drop-shadow(0 4px 6px rgba(27,65,145,.18)); }
.chat2 .msg.me { align-self: flex-end; }
.chat2 .msg.me .bub { background: linear-gradient(135deg, #1b4191 0%, #2b5fc9 100%); color: #fff; border-radius: 20px 20px 6px 20px; padding: 10px 15px; box-shadow: 0 8px 18px rgba(27,65,145,.22); }
.chat2 .msg.me .said .ic { opacity: .85; margin-right: 4px; }
.chat2 .msg.waiting .bub { padding-bottom: 10px; }
.chat2 .qcard { background: linear-gradient(180deg, #f4f7ff 0%, #fff 100%); border: 1px solid #dbe4f6; border-radius: 16px; padding: 12px 14px; margin-top: 10px; }
.qc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qc-label { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.qc-stem { margin: 8px 0 2px; font-size: 1.02rem; }
.qc-hint { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #5b6275; font-size: .86rem; } .qc-hint .ic { color: var(--blue); }
.opts { display: grid; gap: 8px; margin-top: 10px; }
.app-body .opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1.5px solid #dfe6f4; border-radius: 14px; padding: 9px 12px;
  font: inherit; color: inherit; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s, background .12s; }
.app-body .opt:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(27,65,145,.12); }
.opt .lt { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #edf1fb; color: var(--blue); font-weight: 700; font-size: .85rem; flex: none; transition: background .12s, color .12s; }
.opt .ot { min-width: 0; }
.app-body .opt.sel { border-color: var(--blue); background: #f3f6ff; } .opt.sel .lt { background: var(--blue); color: #fff; }
.app-body .opt.right { border-color: #20ad96; background: #e6f6f2; } .opt.right .lt { background: #13a37a; color: #fff; }
.app-body .opt.wrong { border-color: #eb473d; background: #fdecea; } .opt.wrong .lt { background: #d63b31; color: #fff; }
.walk-cta { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 16px; padding: 10px 14px;
  background: linear-gradient(90deg, #fff1ef 0%, #f1f5ff 100%); border: 1px solid #f2d2cd; transition: transform .12s, box-shadow .12s; }
.walk-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(235,71,61,.15); }
.wc-play { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #eb473d, #d63b31); color: #fff; flex: none; box-shadow: 0 0 0 5px rgba(235,71,61,.14); }
.wc-play .ic { margin-left: 2px; } .walk-cta b { color: #13204a; display: block; } .walk-cta .small { color: #5b6275; display: block; }
.msg-acts { margin-top: 8px; display: flex; gap: 6px; }
.mini-act { display: inline-flex; align-items: center; gap: 6px; border: 0; background: #f0f3fa; color: var(--blue); font: inherit; font-size: .8rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: background .15s; }
.mini-act:hover { background: #e2e9f8; } .mini-act.speaking { background: var(--blue); color: #fff; } .mini-act:disabled { opacity: .7; }
.composer2 { padding: 10px 14px 12px; border-top: 1px solid #eef1f7; background: #fff; }
.chat2 .quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.qchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e1e7f3; background: #f7f9fe; color: #24345e; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.qchip:hover { border-color: var(--blue); background: #eef3ff; transform: translateY(-1px); } .qchip .ic { color: var(--blue); }
.inputbar { display: flex; align-items: flex-end; gap: 8px; background: #f4f6fb; border: 1.5px solid #e1e7f3; border-radius: 24px; padding: 5px 5px 5px 16px; transition: border-color .15s, box-shadow .15s, background .15s; }
.inputbar:focus-within { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(27,65,145,.12); }
.inputbar textarea { flex: 1; border: 0; background: transparent; padding: 9px 0; min-height: 24px; max-height: 160px; resize: none; line-height: 1.4; border-radius: 0; }
.inputbar textarea:focus { outline: none; box-shadow: none; }
.sendbtn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #eb473d, #cf372d); box-shadow: 0 6px 14px rgba(235,71,61,.32); transition: transform .12s, box-shadow .15s; }
.sendbtn .ic { width: 21px; height: 21px; margin: 1px 2px 0 0; } .sendbtn:hover { transform: scale(1.06); } .sendbtn:active { transform: scale(.94); }
.tools-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tpill { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 5px 14px 5px 5px; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
  transition: transform .12s, box-shadow .15s, background .15s; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.tpill .ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.tpill:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(16,24,40,.09); } .tpill:active { transform: scale(.96); }
.tpill.say { background: #fdeceb; color: #a52a22; } .tpill.say .ic { color: #e0453b; }
.tpill.snap { background: #e9effb; color: #1b4191; } .tpill.snap .ic { color: #1b4191; }
.tpill.sketch { background: #e2f4f0; color: #0d6655; } .tpill.sketch .ic { color: #13917a; }
.tpill.rec { background: #eb473d; color: #fff; animation: recpulse 1.2s infinite; } .tpill.rec .ic { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.chat2 .tools-pop .pop { bottom: 44px; }
.popitem { display: flex; align-items: center; gap: 8px; } .popitem .ic { color: var(--blue); }
.ch-right { display: flex; align-items: center; gap: 8px; min-width: 0; justify-content: flex-end; flex: 1; }
.ch-right .pill-select { max-width: 260px; min-width: 0; }
.chat2 .mute { display: inline-flex; align-items: center; gap: 6px; border-color: #dfe5f2; background: #fff; white-space: nowrap; padding: 6px 12px; }
.chat2 .composer-foot { margin-top: 6px; font-size: .78rem; }
.wt .tpill { padding: 4px 12px 4px 4px; font-size: .82rem; } .wt .tpill .ic { width: 26px; height: 26px; padding: 5.5px; }
.wt-menu .popitem { padding: 8px 10px; font-size: .88rem; }
.sk-title { margin: 0; display: inline-flex; align-items: center; gap: 8px; } .sk-title .ic { color: var(--blue); }
.sk .ic { width: 1em; height: 1em; }

/* practice */
.practice-card { padding: 20px 22px; }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .p-head .btn { white-space: nowrap; flex: none; } .p-head .pill-select { max-width: 70%; }
.p-q { background: linear-gradient(180deg, #f6f8ff 0%, #fff 100%); border: 1px solid #e1e8f6; border-radius: 18px; padding: 16px 18px; }
.p-std { margin-left: 2px; }
.p-stem { font-size: 1.14rem; margin: 10px 0 12px; color: #1a2034; }
.ans-in { font-size: 1.05rem; border-radius: 14px; }
.app-body .p-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.hint-box { display: flex; gap: 10px; align-items: flex-start; } .hint-box .ic { color: #b7791f; margin-top: 3px; }
.result-card { margin-top: 12px; border-radius: 16px; padding: 14px 16px; }
.result-card.ok { background: #e6f6f2; border: 1px solid #bfe6dc; } .result-card.no { background: #fdf0ee; border: 1px solid #f6cdc8; }
.rc-h { display: inline-flex; align-items: center; gap: 8px; } .result-card.ok .rc-h { color: #0d6655; } .result-card.no .rc-h { color: #a52a22; }
.app-body .wrong-bar { border: 1px solid #f6cdc8; border-radius: 14px; }
.app-body .timer { display: inline-flex; align-items: center; gap: 6px; }
.exam-tools-note .ic { color: var(--blue); margin-right: 2px; }
.app-body .estimate .ic { color: #b7791f; }

@media (max-width: 1100px) { .dash-stats { grid-template-columns: 1fr 1fr; } .hero-card { grid-template-columns: 1fr 150px; } .hero-lola { width: 150px; } }
@media (max-width: 900px) { .app-body .app { grid-template-columns: 220px 1fr; } }

/* phone: bottom tab bar + "More" sheet (student); compact top bar (teacher) */
@media (max-width: 800px) {
  .app-body .app { grid-template-columns: 1fr; }
  .app-body .main { padding: 14px 14px 24px; }
  .app-body .topline { margin-bottom: 12px; } .app-body .topline h1 { font-size: 1.3rem; }
  .tl-ico { width: 34px; height: 34px; border-radius: 11px; } .tl-ico .ic { width: 19px; height: 19px; }
  .app-body select.classpick { width: 100%; min-width: 0; }
  .teacher-app .side { position: static; height: auto; display: flex; overflow-x: auto; gap: 6px; padding: 8px; border-right: 0; border-bottom: 1px solid #eceff6; }
  .teacher-app .side button.nav { white-space: nowrap; width: auto; padding: 5px 12px 5px 5px; } .teacher-app .side button.nav > .ic { width: 28px; height: 28px; padding: 6px; }
  .student-app .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .student-app .side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; max-height: 82vh; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; align-content: start;
    padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -16px 40px rgba(10,25,60,.18);
    transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); visibility: hidden; }
  .student-app.sheet-open .side { transform: none; visibility: visible; }
  .student-app .side h4 { display: block; grid-column: 1 / -1; margin: 10px 6px 2px; }
  .student-app .side .sidehide { display: none; }
  .student-app .side button.nav { white-space: normal; width: 100%; font-size: .9rem; padding: 6px 8px; transform: none; }
  .student-app .sheet-head { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; padding: 4px 4px 0; }
  .student-app .sheet-head::before { content: ""; position: absolute; left: 50%; top: 7px; width: 42px; height: 5px; margin-left: -21px; border-radius: 99px; background: #dde2ec; }
  .sheet-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f1f4fb; color: #394056; display: grid; place-items: center; cursor: pointer; }
  .student-app .sheet-bg:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(15,25,55,.35); backdrop-filter: blur(2px); }
  .student-app .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid #e8ebf3; box-shadow: 0 -6px 20px rgba(27,65,145,.08); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; font: inherit; font-size: .72rem; font-weight: 700; color: #6b7285; padding: 2px 0; cursor: pointer; }
  .tab .ic { width: 44px; height: 30px; padding: 5px 12px; border-radius: 999px; transition: background .15s, color .15s; }
  .tab.on { color: var(--blue); } .tab.on .ic { background: #e6edfb; color: var(--blue); }
  .hero-card { grid-template-columns: 1fr; padding: 20px 18px 18px; border-radius: 22px; }
  .hero-card h2 { font-size: 1.22rem; margin: 6px 96px 14px 0; }
  .hero-card::after { right: 30px; top: 18px; }
  .hero-card .hero-lola { position: absolute; right: 2px; top: 4px; width: 100px; margin: 0; }
  .next-up { flex-wrap: wrap; } .next-up .btn { width: 100%; }
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash-stats .ring-card { grid-column: 1 / -1; }
  .dash-stats .card { padding: 14px; gap: 10px; } .dash-stats .stat { flex-direction: column; }
  .stat-v { font-size: 1.12rem; } .ring { width: 96px; height: 96px; }
  .std-row { grid-template-columns: auto 1fr; } .std-meta { grid-column: 1 / -1; }
  .chat2 { border-radius: 20px; min-height: 0; }
  .chat-head { padding: 10px 12px; } .ch-right .pill-select { max-width: 100%; flex: 1; } .ch-status { display: none; }
  .hero-card::after { display: none; }
  .chat2 .mute span { display: none; } .chat2 .mute { padding: 6px 9px; }
  .chat2 .composer-foot { font-size: .72rem; line-height: 1.35; }
  .chat2 .log { padding: 14px 10px 8px; } .chat2 .msg { max-width: 94%; }
  .composer2 { padding: 8px 10px 10px; }
  .chat2 .quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .chat2 .quick::-webkit-scrollbar { display: none; } .qchip { white-space: nowrap; }
  .tpill { font-size: .82rem; padding-right: 12px; }
  .practice-card { padding: 14px; } .p-q { padding: 14px; } .p-head .pill-select { flex: 1; min-width: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chat2 .msg, .ring-v, .tpill.rec { animation: none !important; }
  .app-body .side button.nav, .unit-row, .opt, .tpill, .qchip, .walk-cta, .dash-stats .card, .student-app .side { transition: none !important; transform: none !important; }
}
/* Snap it / Sketch it: staged picture in the chat composer, "read from your photo" note, privacy tip */
.chat-att { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 0 8px; background: var(--blue-tint, #eef3fc); border-radius: 14px; }
.chat-att[hidden] { display: none; }
.chat-att .wt-th img { width: 96px; height: 68px; }
.read-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 8px 12px; border-radius: 12px; background: #e9effb; color: #1b4191; font-size: .92rem; }
.read-note .ic { width: 18px; height: 18px; flex: none; }
.wt-tip { width: 100%; margin-top: 2px; }
/* landing: Meet the real Lola (photo carousel + short copy), between the founder and worldwide-lens bands */
.band.real-lola{background:var(--pink);padding:52px 0}
.real-lola-wrap{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:48px;align-items:center}
.rl-carousel{background:#fff;border-radius:28px;padding:14px;box-shadow:var(--shadow);outline:none}
.rl-frame{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--blue-tint)}
.rl-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease;visibility:hidden}
.rl-slide.is-on{opacity:1;visibility:visible;z-index:1}
.rl-slide.is-leaving{visibility:visible;opacity:1;transition:none}
.rl-slide picture,.rl-slide img{display:block;width:100%;height:100%}
.rl-slide img{object-fit:cover}
.rl-controls{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 0 2px}
.rl-dots{display:flex;gap:4px}
.rl-dot{width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.rl-dot::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--blue-tint-2);transition:background .2s,transform .2s}
.rl-dot:hover::before{background:#b9c6e2}
.rl-dot[aria-current="true"]::before{background:var(--red);transform:scale(1.25)}
.rl-play{width:32px;height:32px;border-radius:50%;border:2px solid var(--blue-tint-2);background:#fff;color:var(--blue);cursor:pointer;font:700 .72rem/1 'Quicksand',system-ui,sans-serif;display:grid;place-items:center;padding:0}
.rl-play:hover{border-color:var(--blue)}
.rl-play .rl-ic-play,.rl-play[aria-pressed="true"] .rl-ic-pause{display:none}
.rl-play[aria-pressed="true"] .rl-ic-play{display:inline}
.rl-dot:focus-visible,.rl-play:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.rl-carousel:focus-visible{box-shadow:var(--shadow),0 0 0 3px var(--blue)}
.rl-copy h2{font-size:2.1rem;margin:12px 0 12px}
.rl-copy>p{font-size:1.12rem;line-height:1.65;margin:0 0 18px;max-width:34em}
.rl-note{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow);max-width:34em}
.rl-note img{flex:none;width:56px;height:56px;border-radius:50%;background:var(--pink-tint);box-shadow:0 0 0 3px var(--red)}
.rl-note p{margin:0;color:var(--muted)}
@media (max-width:820px){.real-lola-wrap{grid-template-columns:1fr;gap:26px}.rl-carousel{max-width:440px;width:100%;margin:0 auto}.rl-copy{text-align:center}.rl-copy>p,.rl-note{margin-left:auto;margin-right:auto}.rl-note{text-align:left}}
@media (max-width:420px){.band.real-lola{padding:36px 0}.rl-copy h2{font-size:1.75rem}.rl-copy>p{font-size:1.04rem}}
@media (prefers-reduced-motion:reduce){.rl-slide,.rl-dot::before{transition:none}}