/* ===== Own It! 3 - core stylesheet =====
   Loaded by every SB and WB lesson.
   The theme comes from <body class="sb"> or <body class="wb">. */

:root{
  --vocab:#0288D1; --grammar:#7B1FA2; --reading:#C62828;
  --listening:#00838F; --writing:#EF6C00; --speaking:#AD1457;
  --learn:#455A64; --video:#D84315;
  --ok:#2E7D32; --ok-bg:#E8F5E9; --no:#C62828; --no-bg:#FFEBEE;
  --ink:#243b53; --ink-soft:#627d98; --line:#dbe4ec; --paper:#ffffff; --bg:#f4f7f9;
  --radius:16px; --shadow:0 2px 14px rgba(36,59,83,.08);
}
body.sb{ --primary:#00A651; --primary-dark:#00703C; --primary-light:#E6F7EE;
         --grad:linear-gradient(135deg,#00A651 0%,#7AC943 100%); }
body.wb{ --primary:#5E35B1; --primary-dark:#4527A0; --primary-light:#EDE7F6;
         --grad:linear-gradient(135deg,#5E35B1 0%,#9575CD 100%); }

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-text-size-adjust:100%}
.hidden{display:none!important}

/* ===== LOGIN ===== */
.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{background:var(--paper);border-radius:22px;padding:38px 32px;box-shadow:var(--shadow);max-width:400px;width:100%;text-align:center}
.login-logo{width:74px;height:74px;background:var(--grad);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:26px;color:#fff;font-weight:800;letter-spacing:-1px}
.login-title{font-size:23px;font-weight:800}
.login-subtitle{font-size:14px;color:var(--ink-soft);margin-bottom:24px}
.login-input{width:100%;padding:14px 18px;border:2px solid var(--line);border-radius:12px;font-size:16px;font-family:inherit;outline:none;text-align:center;letter-spacing:1px}
.login-input:focus{border-color:var(--primary)}
.login-input.error{border-color:var(--no);animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.login-btn{width:100%;padding:14px;background:var(--grad);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;margin-top:14px;font-family:inherit}
.login-btn:hover{opacity:.92}
.login-error{color:var(--no);font-size:13px;margin-top:10px;min-height:20px;display:none}

/* ===== HEADER ===== */
.app-header{background:var(--grad);color:#fff;padding:14px 18px;position:sticky;top:0;z-index:120;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.header-inner{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:12px}
.back-btn{background:rgba(255,255,255,.22);border:none;color:#fff;width:38px;height:38px;border-radius:11px;font-size:19px;cursor:pointer;flex-shrink:0}
.back-btn:hover{background:rgba(255,255,255,.34)}
.header-text{flex:1;min-width:0}
.header-title{font-size:16px;font-weight:800;line-height:1.25}
.header-sub{font-size:12px;opacity:.9}
.header-badge{background:rgba(255,255,255,.2);padding:6px 11px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
.student-chip{background:rgba(255,255,255,.2);padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}

/* ===== PROGRESS ===== */
.progress-wrap{background:var(--paper);border-bottom:1px solid var(--line);padding:11px 18px;position:sticky;top:66px;z-index:110}
.progress-inner{max-width:880px;margin:0 auto}
.progress-steps{display:flex;gap:6px}
.step-dot{flex:1;height:6px;border-radius:4px;background:var(--line);cursor:pointer;transition:background .25s}
.step-dot.active{background:var(--primary)}
.step-dot.completed{background:var(--primary);opacity:.5}
.step-labels{display:flex;gap:6px;margin-top:5px}
.step-labels span{flex:1;font-size:9.5px;color:var(--ink-soft);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== LAYOUT ===== */
.wrap{max-width:880px;margin:0 auto;padding:20px 18px 120px}
.section{display:none;animation:fade .3s}
.section.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section-head{padding:11px 18px;border-radius:12px;color:#fff;font-weight:800;font-size:13px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:16px}
.section-head.vocab{background:var(--vocab)} .section-head.grammar{background:var(--grammar)}
.section-head.reading{background:var(--reading)} .section-head.listening{background:var(--listening)}
.section-head.writing{background:var(--writing)} .section-head.speaking{background:var(--speaking)}
.section-head.learn{background:var(--learn)} .section-head.video{background:var(--video)}
.section-head.primary{background:var(--primary)}

.card{background:var(--paper);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.card h3{font-size:17px;margin-bottom:10px;color:var(--primary-dark)}
.card h4{font-size:14.5px;margin:14px 0 8px;color:var(--ink)}
.lead{color:var(--ink-soft);font-size:14.5px}
.task{font-size:14.5px;font-weight:600;margin-bottom:12px;display:flex;gap:9px;align-items:flex-start}
.task .n{background:var(--primary);color:#fff;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.hero{width:100%;border-radius:14px;display:block;margin-bottom:16px}
.pic{width:100%;border-radius:12px;display:block;margin:12px 0}
/* portrait shots: narrower frame, never cropped - see feedback_no_image_crop */
.pic.portrait{max-width:330px;margin:12px auto}
.pic-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.pic-row img{width:100%;border-radius:10px;display:block}
.note{background:var(--primary-light);border-left:4px solid var(--primary);padding:12px 15px;border-radius:0 10px 10px 0;font-size:14px;margin:12px 0}
.note b{color:var(--primary-dark)}
.tip{background:#FFF8E1;border-left:4px solid #FFB300;padding:12px 15px;border-radius:0 10px 10px 0;font-size:14px;margin:12px 0}
.l2l{background:#ECEFF1;border-left:4px solid var(--learn);padding:12px 15px;border-radius:0 10px 10px 0;font-size:14px;margin:12px 0}
.l2l .l2l-t{font-weight:800;color:var(--learn);text-transform:uppercase;font-size:11.5px;letter-spacing:.6px}

/* ===== WORD BANK (sticky) =====
   top = .app-header (66px) + .progress-wrap (50px). The bank MUST live inside the
   same .ex card as the gaps it feeds, otherwise sticky releases with its own card
   and the student loses the words mid-exercise. */
.word-bank{position:sticky;top:116px;z-index:60;background:var(--primary-light);border:2px dashed var(--primary);border-radius:12px;padding:11px 14px;margin:0 0 14px;max-height:32vh;overflow:auto;box-shadow:0 4px 10px rgba(36,59,83,.07)}
.word-bank .wb-t{font-size:11px;font-weight:800;color:var(--primary-dark);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.word-bank span.w{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:4px 12px;margin:3px;font-size:14px;font-weight:600}
.word-bank span.w.used{opacity:.35;text-decoration:line-through}

/* ===== SENTENCES + INLINE GAPS ===== */
.sent{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #f0f4f7;line-height:2.1;font-size:15px}
.sent:last-child{border-bottom:none}
.sent .num{background:var(--line);color:var(--ink);width:23px;height:23px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;margin-top:6px}
.gap{border:none;border-bottom:2px solid var(--primary);background:#f7fbfd;font-family:inherit;font-size:15px;padding:2px 6px;outline:none;text-align:center;min-width:70px;border-radius:5px 5px 0 0}
.gap:focus{background:var(--primary-light)}
.gap.ok{border-bottom-color:var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:700}
.gap.no{border-bottom-color:var(--no);background:var(--no-bg);color:var(--no)}
.gap.shown{border-bottom-color:#FFB300;background:#FFF8E1;color:#8a6100;font-weight:700}
.fb{display:block;font-size:12.5px;margin-top:2px;font-weight:600}
.fb.ok{color:var(--ok)} .fb.no{color:var(--no)}

/* ===== MULTIPLE CHOICE (inline) ===== */
.opt{display:inline-block;padding:2px 10px;border:2px solid var(--line);border-radius:18px;cursor:pointer;font-size:14.5px;font-weight:600;background:var(--paper);transition:.15s;margin:2px 0}
.opt:hover{border-color:var(--primary)}
.opt.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.opt.no{background:var(--no-bg);border-color:var(--no);color:var(--no)}
.opt.dim{opacity:.4;pointer-events:none}
.sep{color:var(--ink-soft);margin:0 4px}

/* ===== BUTTONS ===== */
.btn{background:var(--grad);color:#fff;border:none;border-radius:11px;padding:11px 22px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.btn:hover{opacity:.92}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:none;border:2px solid var(--primary);color:var(--primary)}
.btn.small{padding:7px 14px;font-size:13px;border-radius:9px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.attempts{font-size:12px;color:var(--ink-soft);font-weight:600}

/* ===== SCORE ===== */
.ex-score{display:none;margin-top:12px;padding:11px 15px;border-radius:11px;font-size:14px;font-weight:700}
.ex-score.show{display:block}
.ex-score.good{background:var(--ok-bg);color:var(--ok)}
.ex-score.ok{background:#FFF8E1;color:#8a6100}
.ex-score.bad{background:var(--no-bg);color:var(--no)}

/* ===== TRUE / FALSE ===== */
.tf-row{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #f0f4f7;font-size:15px}
.tf-row:last-child{border-bottom:none}
.tf-text{flex:1}
.tf-btn{border:2px solid var(--line);background:var(--paper);border-radius:9px;padding:5px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.tf-btn:hover{border-color:var(--primary)}
.tf-btn.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.tf-btn.no{background:var(--no-bg);border-color:var(--no);color:var(--no)}

/* ===== MATCHING (image + select) ===== */
.match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:13px}
.match-card{background:var(--paper);border:2px solid var(--line);border-radius:13px;overflow:hidden;transition:.2s}
.match-card.ok{border-color:var(--ok)} .match-card.no{border-color:var(--no);animation:shake .4s}
.match-card img{width:100%;height:115px;object-fit:cover;display:block}
.match-card .mc-b{padding:8px}
.match-card .mc-n{font-size:11px;font-weight:800;color:var(--ink-soft)}
.match-card select{width:100%;padding:7px;border:2px solid var(--line);border-radius:8px;font-family:inherit;font-size:13.5px;background:var(--paper);outline:none}
.match-card select:focus{border-color:var(--primary)}
.match-card select.ok{border-color:var(--ok);background:var(--ok-bg);font-weight:700}
.match-card select.no{border-color:var(--no);background:var(--no-bg)}

/* ===== LETTER BUILD ===== */
.lb-card{background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px;display:flex;gap:13px;align-items:center}
.lb-card.solved{border-color:var(--ok);background:var(--ok-bg)}
.lb-img{width:104px;height:78px;object-fit:cover;border-radius:10px;flex-shrink:0}
.lb-right{flex:1;min-width:0}
.lb-hint{font-size:12px;color:var(--ink-soft);font-weight:600;margin-bottom:5px}
.lb-letters{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.lb-letter{width:31px;height:34px;border:2px solid var(--line);background:var(--paper);border-radius:8px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;text-transform:lowercase}
.lb-letter:hover{border-color:var(--primary)}
.lb-letter.used{opacity:.25;pointer-events:none}
.lb-answer{display:flex;flex-wrap:wrap;gap:4px}
.lb-slot{width:27px;height:32px;border-bottom:3px solid var(--primary);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;cursor:pointer}
.lb-slot.hint-slot{border-bottom-color:var(--ink-soft);color:var(--ink-soft);cursor:default}
.lb-space{width:14px}
.lb-card.wrong{animation:shake .4s}

/* ===== WORD ORDER ===== */
.wo-card{background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:13px;margin-bottom:12px}
.wo-card.solved{border-color:var(--ok);background:var(--ok-bg)}
.wo-card.wrong{animation:shake .4s}
.wo-prompt{font-size:12.5px;color:var(--ink-soft);font-weight:700;margin-bottom:7px}
.wo-line{min-height:40px;border-bottom:2px dashed var(--line);display:flex;flex-wrap:wrap;gap:6px;padding:5px 0;margin-bottom:9px}
.wo-pool{display:flex;flex-wrap:wrap;gap:6px}
.wo-word{background:var(--primary-light);border:1.5px solid var(--primary);color:var(--primary-dark);border-radius:18px;padding:4px 12px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.wo-word.used{opacity:.2;pointer-events:none}
.wo-placed{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:4px 12px;font-size:14px;font-weight:700;cursor:pointer}

/* ===== FLIP CARDS ===== */
.flip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:13px}
.flip-card{perspective:1000px;height:190px;cursor:pointer}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:13px;overflow:hidden;box-shadow:var(--shadow)}
.flip-front img{width:100%;height:100%;object-fit:cover;display:block}
.flip-front .tag{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;padding:4px;text-align:center;letter-spacing:.5px}
.flip-back{transform:rotateY(180deg);background:var(--grad);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;text-align:center}
.flip-word{font-size:17px;font-weight:800;line-height:1.2}
.flip-ipa{font-size:12.5px;opacity:.9;margin:3px 0 5px}
.flip-def{font-size:11.5px;opacity:.95;line-height:1.35}
.flip-speak{margin-top:8px;background:rgba(255,255,255,.24);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:14px;cursor:pointer}

/* ===== PHONETICS ===== */
.ph-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ph-chip{border:2px solid var(--line);background:var(--paper);border-radius:11px;padding:8px 14px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.ph-chip:hover{border-color:var(--primary)}
.ph-chip.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.ph-chip.no{background:var(--no-bg);border-color:var(--no);color:var(--no)}
.ph-chip.dim{opacity:.4;pointer-events:none}
.stress-word{display:inline-flex;align-items:baseline;border:2px solid var(--line);border-radius:11px;padding:5px 8px;margin:4px;background:var(--paper);font-size:16px;font-weight:700}
.syl{padding:1px 4px;border-radius:6px;cursor:pointer}
.syl:hover{background:var(--primary-light)}
.syl.ok{background:var(--ok);color:#fff}
.syl.no{background:var(--no-bg);color:var(--no)}
.syl.locked{pointer-events:none;opacity:.55}
.say-box{display:flex;gap:10px;align-items:center;background:var(--primary-light);border-radius:12px;padding:12px 15px;margin:9px 0;font-size:15px;font-weight:600}
.say-box button{background:var(--primary);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:14px;cursor:pointer;flex-shrink:0}

/* ===== SPEAK & CHECK (speech recognition) ===== */
.sr-card{background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:13px;margin-bottom:12px;display:flex;gap:13px;align-items:flex-start}
.sr-card.ok{border-color:var(--ok);background:var(--ok-bg)}
.sr-img{width:82px;height:82px;object-fit:cover;border-radius:12px;flex-shrink:0}
.sr-body{flex:1;min-width:0}
.sr-ru{font-size:15px;font-weight:700;margin-bottom:7px}
.sr-heard{font-size:12.5px;color:var(--ink-soft);min-height:18px;margin-top:6px}
.sr-answer{display:none;font-size:14px;font-weight:700;color:var(--ok);margin-top:6px}
.sr-answer.show{display:block}
.sr-hint{display:none;font-size:13px;color:#8a6100;background:#FFF8E1;border-radius:8px;padding:6px 10px;margin-top:6px}
.sr-hint.show{display:block}
.mic-btn{background:var(--speaking);border:none;color:#fff;border-radius:10px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.mic-btn.listening{background:var(--no);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ===== MEDIA ===== */
.audio-box{background:var(--listening);color:#fff;border-radius:13px;padding:13px 15px;margin:12px 0}
.audio-box .ab-t{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;opacity:.9;margin-bottom:7px}
.audio-box audio{width:100%}
.video-box{background:#111;border-radius:13px;overflow:hidden;margin:12px 0}
.video-box video{width:100%;display:block}
.video-q{background:var(--video);color:#fff;padding:11px 15px;font-size:14px;font-weight:600}

/* ===== CHAT / DIALOGUE ===== */
.chat{background:#f0f4f8;border-radius:14px;padding:14px}
.msg{display:flex;gap:9px;margin-bottom:11px;align-items:flex-end}
.msg.right{flex-direction:row-reverse}
.msg .av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0}
.bub{max-width:76%;padding:9px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;background:#fff;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.msg.right .bub{background:#DCF3FF;border-bottom-left-radius:16px;border-bottom-right-radius:4px}
.who{font-size:11px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.bub b{background:#FFF3C4;padding:0 3px;border-radius:3px}

/* ===== TABLES (grammar) ===== */
.gtable{width:100%;border-collapse:collapse;margin:12px 0;font-size:14.5px;overflow:hidden;border-radius:12px}
.gtable th{background:var(--grammar);color:#fff;padding:9px 12px;text-align:left;font-size:13px}
.gtable td{padding:9px 12px;border-bottom:1px solid var(--line);background:var(--paper)}
.gtable tr:last-child td{border-bottom:none}
.gtable .sign{width:34px;text-align:center;font-weight:800;color:var(--grammar);background:var(--primary-light)}
.freq-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--primary-light);border-radius:12px;padding:11px 14px;margin:12px 0;font-size:13.5px;font-weight:700}
.freq-line .f{background:var(--paper);border-radius:16px;padding:3px 10px;border:1px solid var(--line)}

/* ===== TEXTAREA ===== */
.ta{width:100%;border:2px solid var(--line);border-radius:12px;padding:11px 13px;font-family:inherit;font-size:14.5px;resize:vertical;outline:none;background:#fbfdfe}
.ta:focus{border-color:var(--primary)}
.ta-label{font-size:13px;font-weight:700;color:var(--ink-soft);margin:10px 0 5px}

/* ===== RESULTS ===== */
.result-hero{background:var(--grad);color:#fff;border-radius:20px;padding:28px 22px;text-align:center;margin-bottom:18px}
.result-pct{font-size:48px;font-weight:800;line-height:1}
.result-msg{font-size:15px;opacity:.95;margin-top:8px}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px}
.result-item{background:var(--paper);border-radius:13px;padding:14px;text-align:center;box-shadow:var(--shadow);border-top:4px solid var(--primary)}
.result-item .r-num{font-size:22px;font-weight:800}
.result-item .r-name{font-size:12px;color:var(--ink-soft);font-weight:700}
.speaking-grid{margin-top:18px}
.speaking-grid:empty{display:none}
.speaking-head{grid-column:1/-1;border-top:2px dashed var(--line,#dcdcdc);padding-top:14px;font-size:14px;font-weight:800;color:var(--ink-soft)}
.speaking-head span{display:block;font-size:12px;font-weight:600;opacity:.75}
.result-item.speaking{border-top-color:var(--speaking,#AD1457)}

/* ===== BOTTOM NAV ===== */
.nav-bar{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:11px 18px;z-index:130;box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.nav-inner{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:12px}
.nav-label{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--ink-soft)}
.score-pill{background:var(--primary-light);color:var(--primary-dark);border-radius:18px;padding:5px 13px;font-size:13px;font-weight:800;white-space:nowrap}

@media(max-width:600px){
  .wrap{padding:16px 13px 120px}
  .card{padding:16px}
  .flip-card{height:172px}
  .progress-wrap{top:62px}
  .word-bank{top:108px}
  .lb-img{width:72px;height:60px}
  .step-labels{display:none}
}

/* ===== CHECKLIST ===== */
.checklist{list-style:none;margin:10px 0}
.checklist li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:14.5px}
.checklist input[type="checkbox"]{width:20px;height:20px;accent-color:var(--primary);flex-shrink:0;margin-top:2px;cursor:pointer}
.plan-box{background:var(--primary-light);border:2px dashed var(--primary);border-radius:14px;padding:16px;margin:12px 0}
.plan-box .pb-t{font-size:12px;font-weight:800;letter-spacing:.8px;color:var(--primary-dark);text-transform:uppercase;margin-bottom:8px}
.para{background:var(--paper);border-left:4px solid var(--reading);border-radius:0 10px 10px 0;padding:11px 15px;margin:10px 0;font-size:14.5px}
.para .pl{font-weight:800;color:var(--reading);margin-right:6px}

/* play-only chip (listen and repeat, no score) */
.say-chip{border:2px solid var(--line);background:var(--paper);border-radius:11px;padding:8px 14px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.say-chip:hover{border-color:var(--primary);background:var(--primary-light)}
.say-chip:active{transform:scale(.97)}


/* ===== COMPACT YES/NO GRID =====
   Long lists of "did you hear it?" items: 2-3 per row with icon buttons instead of
   one full-width row per word. Use .tf-grid around .tf-row + .tf-btn.icon. */
.tf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px;margin:4px 0}
.tf-grid .tf-row{border-bottom:none;border:1.5px solid var(--line);border-radius:11px;padding:7px 9px 7px 12px;gap:7px;background:var(--paper)}
.tf-grid .tf-text{font-weight:600;font-size:14.5px}
.tf-btn.icon{padding:4px 0;width:40px;text-align:center;font-size:16px;line-height:1.3;flex-shrink:0}
.tf-btn.icon.ok{background:var(--ok-bg);border-color:var(--ok)}
.tf-btn.icon.no{background:var(--no-bg);border-color:var(--no)}
.tf-btn.icon:disabled{cursor:default;opacity:1}
.tf-btn.icon:disabled:not(.ok):not(.no){opacity:.3}
@media(max-width:600px){ .tf-grid{grid-template-columns:1fr} }

/* ===== VERB FLIP CARDS (text only: present / past) ===== */
.verb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.verb-card{height:140px}
.verb-face{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px}
.verb-card .flip-front{background:var(--primary-light);border:2px solid var(--primary);color:var(--primary-dark)}
.verb-card .flip-back{background:var(--grad);color:#fff}
.vc-label{font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;opacity:.75}
.vc-word{font-size:23px;font-weight:800;line-height:1.15;margin-top:4px}
.vc-ipa{font-size:12px;opacity:.8;margin-top:3px}
.vc-hint{font-size:10.5px;opacity:.65;margin-top:8px}
.vc-def{font-size:11.5px;opacity:.95;margin-top:5px;line-height:1.35}
.verb-card .flip-speak{margin-top:7px}

/* ===== COLLAPSIBLE REFERENCE TEXT (article / chat / transcript) =====
   Any exercise that says "look at the text / page N" gets one of these so the
   student never has to leave the section to re-read the source. */
.article-toggle{margin:0 0 14px;border-radius:12px;overflow:hidden;border:2px solid var(--line)}
.article-toggle>summary{list-style:none;cursor:pointer;padding:10px 15px;background:var(--primary-light);color:var(--primary-dark);font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:9px}
.article-toggle>summary::-webkit-details-marker{display:none}
.article-toggle>summary::before{content:'\25B6';font-size:11px;transition:transform .2s}
.article-toggle[open]>summary::before{transform:rotate(90deg)}
.article-toggle>summary:hover{filter:brightness(.97)}
.article-toggle-body{padding:14px;background:var(--paper);max-height:58vh;overflow:auto}
.article-toggle-body>*:last-child{margin-bottom:0}
.article-toggle.reading>summary{background:#FDECEA;color:var(--reading)}
.article-toggle.grammar>summary{background:#F3E5F5;color:var(--grammar)}

/* hub: lesson finished with a low score - show the number, hold the tick */
.ldone.low{color:var(--ink-soft)}

/* ===== DRAG & DROP MATCHING / SORTING =====
   Long matching lists and category sorting: a sticky bank of chips that are
   dragged (desktop) or tapped (phone) into a slot or a category box.
   The bank must live inside its own .ex card - sticky lets go at the parent. */
.dnd-bank{position:sticky;top:116px;z-index:60;background:var(--primary-light);border:2px dashed var(--primary);border-radius:12px;padding:10px 13px;margin:0 0 14px;max-height:34vh;overflow:auto;box-shadow:0 4px 10px rgba(36,59,83,.07)}
.dnd-bank-t{font-size:11px;font-weight:800;color:var(--primary-dark);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.dnd-chips{display:flex;flex-wrap:wrap;gap:6px}
.dnd-chip{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:5px 13px;font-size:14.5px;font-weight:700;font-family:inherit;color:var(--ink);cursor:grab;transition:.15s}
.dnd-chip:hover{border-color:var(--primary);background:#fff}
.dnd-chip.sel{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.dnd-chip.used{opacity:.3;text-decoration:line-through;cursor:default;background:var(--paper);border-color:var(--line);color:var(--ink)}
.dnd-rows{display:flex;flex-direction:column;gap:7px}
.dnd-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:7px 10px;border:1.5px solid var(--line);border-radius:11px;background:var(--paper)}
.dnd-q{flex:1;min-width:180px;display:flex;gap:9px;align-items:flex-start;font-size:14.5px}
.dnd-n{flex-shrink:0;width:23px;height:23px;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.dnd-slot{flex-shrink:0;min-width:135px;min-height:36px;border:2px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:4px 11px;font-size:14.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;background:var(--bg)}
.dnd-slot:empty::before{content:'drop here';font-size:12px;font-weight:600;opacity:.6}
.dnd-slot.over{border-color:var(--primary);background:var(--primary-light)}
.dnd-slot.ok{border-style:solid;border-color:var(--ok);background:var(--ok-bg);color:var(--ok);cursor:default}
.dnd-slot.given{border-style:solid;border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark);cursor:default}
.dnd-slot.no{border-color:var(--no);background:var(--no-bg);animation:shake .4s}

.sort-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
.sort-box{border:2px dashed var(--line);border-radius:13px;padding:11px 12px;background:var(--paper);min-height:110px;cursor:pointer;transition:.15s}
.sort-box.over{border-color:var(--primary);background:var(--primary-light)}
.sort-box.no{border-color:var(--no);background:var(--no-bg);animation:shake .4s}
.sort-box .sb-t{font-size:16px;font-weight:800;color:var(--primary-dark);margin-bottom:3px}
.sort-box .sb-note{font-size:11.5px;color:var(--ink-soft);margin-bottom:7px}
.sb-drop{display:flex;flex-wrap:wrap;gap:5px}
.sb-chip{background:var(--ok-bg);border:1.5px solid var(--ok);color:var(--ok);border-radius:16px;padding:3px 11px;font-size:13.5px;font-weight:700;pointer-events:none}

/* ===== WORD SEARCH ===== */
.ws-grid{display:grid;gap:3px;background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:10px;margin:0 0 12px;max-width:470px}
.ws-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;border-radius:7px;background:var(--bg);cursor:pointer;user-select:none;transition:.12s}
.ws-cell:hover{background:var(--primary-light)}
.ws-cell.anchor{background:var(--primary);color:#fff}
.ws-cell.found{background:var(--ok-bg);color:var(--ok);cursor:default}
.ws-cell.found.given{background:var(--primary-light);color:var(--primary-dark)}
.ws-cell.wrong{background:var(--no-bg);color:var(--no)}
.ws-cell.anchor,.ws-cell.found.anchor{background:var(--primary);color:#fff}
.ws-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ws-tag{padding:4px 12px;border-radius:15px;background:var(--bg);border:1.5px solid var(--line);color:var(--ink-soft);font-weight:700;font-size:13px}
.ws-tag.done{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.ws-hint{font-size:12.5px;color:var(--ink-soft)}

/* ===== CROSSWORD (a real grid, not a gap-fill) ===== */
.cw-wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.cw-grid{display:grid;gap:3px;max-width:380px;flex:0 0 auto}
.cw-blank{aspect-ratio:1;min-width:34px}
.cw-cell{position:relative;aspect-ratio:1;min-width:34px}
.cw-cell input{position:absolute;inset:0;width:100%;height:100%;border:2px solid var(--line);border-radius:7px;background:var(--paper);text-align:center;font-size:17px;font-weight:800;font-family:inherit;color:var(--ink);text-transform:uppercase;outline:none;padding:0}
.cw-cell input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.cw-cell input.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.cw-cell input.no{border-color:var(--no);background:var(--no-bg);color:var(--no)}
.cw-n{position:absolute;top:1px;left:3px;font-size:9.5px;font-weight:800;color:var(--primary-dark);z-index:2;pointer-events:none}
.cw-clues{flex:1;min-width:210px}
.cw-clues h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--primary-dark);margin:6px 0 5px}
.cw-clues ul{list-style:none;margin-bottom:10px}
.cw-clues li{font-size:14px;padding:3px 0;color:var(--ink)}
.cw-clues li b{color:var(--primary-dark);margin-right:3px}
.cw-clues li.done{color:var(--ok);text-decoration:line-through;opacity:.7}

/* ===== GRAMMAR THEORY: comparison cards next to the table =====
   Theory is read as a table or a pair of cards, never as one grey paragraph. */
.gb-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px;margin:12px 0}
.gb-card{border:2px solid var(--line);border-radius:13px;padding:12px 14px;background:var(--paper)}
.gb-card .gb-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--grammar);margin-bottom:5px}
.gb-card .gb-ex{font-size:14.5px;margin-top:6px}
.gb-card .gb-ex b{color:var(--grammar)}
.gb-tablewrap{overflow-x:auto;margin:12px 0}
.gb-tablewrap .gtable{min-width:430px;margin:0}
@media(max-width:600px){
  .dnd-bank{top:108px}
  .dnd-slot{min-width:118px}
  .ws-cell{font-size:13px}
  .cw-cell,.cw-blank{min-width:29px}
  .cw-cell input{font-size:14px}
  .gb-tablewrap .gtable{min-width:360px}
}

/* On a phone a theory table scrolls off the edge and the student never finds the
   last column, so every row becomes a small card with the heading in front of
   each value. Needs data-label on every <td>. */
@media(max-width:600px){
  .gb-tablewrap{overflow-x:visible}
  .gb-tablewrap .gtable{min-width:0;display:block;border-radius:0}
  .gb-tablewrap .gtable tbody{display:block}
  .gb-tablewrap .gtable tr:first-child{display:none}
  .gb-tablewrap .gtable tr{display:block;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;margin-bottom:9px}
  .gb-tablewrap .gtable td{display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--line);padding:8px 12px}
  .gb-tablewrap .gtable tr td:last-child{border-bottom:none}
  .gb-tablewrap .gtable td::before{content:attr(data-label);flex:0 0 38%;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--grammar)}
  .gb-tablewrap .gtable td.sign{width:auto;text-align:left;background:var(--paper)}
}

/* ===== REVIEW 27.10.2026 ===== */

/* Tabs jump in both directions, so they must look clickable */
.step-labels span{cursor:pointer;transition:color .15s}
.step-labels span:hover{color:var(--primary-dark)}
.step-dot{cursor:pointer}

/* Discussion / warmer: a question to talk about always gets a notes box, and an
   emoji so the student spots "this one is for talking" without reading first. */
.tip{position:relative;padding-left:44px}
.tip::before{content:'\1F4AC';position:absolute;left:13px;top:10px;font-size:18px;line-height:1}
.talk-badge{display:inline-flex;align-items:center;gap:7px;background:#FFF3E0;color:#E65100;border-radius:16px;padding:4px 13px;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin:10px 0 7px}
.task.talk .n{background:#EF6C00}
.task.talk>span:last-child::before{content:'\1F4AC\00a0';font-size:15px}
textarea.ta.notes{background:#FFFDF5;border-color:#FFE0B2}
textarea.ta.notes:focus{border-color:#FFB300}

/* Phonetics: the sound and the example word are what the eye must find first */
.ph-target{display:inline-block;background:var(--primary-light);color:var(--primary-dark);border-radius:7px;padding:0 7px;font-weight:800;font-style:normal}

/* Drag-and-drop matching: two columns when the text is short */
.dnd-rows.two-col{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.dnd-rows.two-col .dnd-row{margin:0}
@media(max-width:700px){ .dnd-rows.two-col{grid-template-columns:1fr} }

/* Flip card with a Russian caption on the photo side */
.flip-front .tag.ru{font-size:13px;font-weight:700;line-height:1.3;padding:7px 8px;letter-spacing:0;background:rgba(0,0,0,.62)}