:root{--primary:#174ea6;--secondary:#ffcc00;--accent:#e63946;--green:#22a06b;--purple:#7c3aed;--dark:#172033;--light:#f5f8ff;--white:#fff;--shadow:0 8px 25px rgba(0,0,0,.08);--radius:18px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Arial,Helvetica,sans-serif;background:var(--light);color:var(--dark);line-height:1.6}
header{background:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 3px 15px rgba(0,0,0,.08)}.navbar{max-width:1250px;margin:auto;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px}.logo{font-size:1.45rem;font-weight:800;color:var(--primary);white-space:nowrap}.logo span{color:var(--accent)}
.nav-links{display:flex;gap:5px;list-style:none;flex-wrap:wrap;justify-content:center}.nav-links a{display:block;text-decoration:none;color:var(--dark);font-weight:600;padding:9px 10px;border-radius:10px}.nav-links a:hover,.nav-links a.active{background:#eaf1ff;color:var(--primary)}.login-btn{background:var(--primary)!important;color:#fff!important}
.menu-toggle{display:none;border:0;background:#eaf1ff;padding:10px;border-radius:10px;font-size:1.1rem}
.container{width:min(1200px,92%);margin:auto}.section{padding:70px 0}.section-title{text-align:center;margin-bottom:40px}.section-title h1,.section-title h2{font-size:2.2rem;color:var(--primary)}.section-title p{color:#667085;margin-top:8px}
.hero{background:linear-gradient(135deg,rgba(23,78,166,.96),rgba(76,81,191,.92));color:#fff;padding:100px 20px}.hero-content{max-width:1100px;margin:auto;text-align:center}.hero h1{font-size:clamp(2.3rem,6vw,4.5rem);line-height:1.1;margin-bottom:20px}.hero p{font-size:1.3rem;margin-bottom:30px}.hero-buttons,.button-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;border:0;padding:13px 22px;border-radius:12px;font-weight:700;text-decoration:none;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--secondary);color:#222}.btn-light{background:#fff;color:var(--primary)}.btn-green{background:var(--green);color:#fff}.btn-purple{background:var(--purple);color:#fff}.btn-red{background:var(--accent);color:#fff}
.quick-grid,.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.quick-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.quick-card,.card{background:#fff;padding:25px;border-radius:var(--radius);box-shadow:var(--shadow)}.quick-card{text-align:center;font-weight:700;font-size:1.05rem;cursor:pointer;transition:.2s}.quick-card:hover{transform:translateY(-5px)}.card h3{color:var(--primary);margin-bottom:8px}.card .icon{font-size:3rem;margin-bottom:12px}
.lesson-flow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 35px}.flow{padding:10px 18px;border-radius:30px;background:#eaf1ff;color:var(--primary);font-weight:700}
.lesson-number{display:inline-flex;width:40px;height:40px;border-radius:50%;background:#eaf1ff;align-items:center;justify-content:center;color:var(--primary);font-weight:bold;margin-bottom:12px}
.words{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;margin:20px 0}.word{padding:18px 25px;border-radius:14px;font-weight:bold}.red{background:#ffd9dd;color:#b00020}.blue{background:#dce9ff;color:#174ea6}.green{background:#d8f5e8;color:#087443}.yellow{background:#fff4b8;color:#6c5700}
.colour-box,.speak-box,.story{background:#fff;padding:35px;border-radius:var(--radius);box-shadow:var(--shadow);max-width:800px;margin:30px auto;text-align:center}
.game-icon,.badge-icon,.country-flag{font-size:3.5rem;margin-bottom:12px}.difficulty{display:inline-block;padding:5px 10px;border-radius:20px;font-size:.8rem;margin-top:12px;font-weight:bold}.beginner{background:#d8f5e8;color:#087443}.intermediate{background:#fff1c2;color:#765b00}.advanced{background:#ffd9dd;color:#b00020}
.video-thumb{height:150px;background:linear-gradient(135deg,#174ea6,#7c3aed);border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:3rem;margin-bottom:15px}.phrase{font-size:2rem;color:var(--primary);margin:25px 0}.listen-btn{width:70px;height:70px;border:0;border-radius:50%;background:var(--primary);color:#fff;font-size:1.8rem;cursor:pointer}
.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px}.stat{background:#fff;padding:25px;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center}.stat-number{font-size:1.8rem;font-weight:800;color:var(--primary)}.progress-bar{height:14px;background:#e5e7eb;border-radius:20px;overflow:hidden;margin-top:10px}.progress-fill{height:100%;width:87%;background:var(--green)}
.search-box{max-width:650px;margin:0 auto 30px;display:flex;gap:10px}.search-box input,.form-group input,.form-group select{width:100%;padding:13px;border:1px solid #ccd3df;border-radius:10px;outline:none}.search-box input{flex:1}.vocab-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}.vocab{background:#fff;padding:25px;border-radius:var(--radius);box-shadow:var(--shadow)}
.form-container{max-width:520px;margin:auto;background:#fff;padding:35px;border-radius:var(--radius);box-shadow:var(--shadow)}.form-group{margin-bottom:18px}.form-group label{display:block;margin-bottom:6px;font-weight:bold}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}th,td{padding:15px;border-bottom:1px solid #eee;text-align:left}th{background:#eaf1ff;color:var(--primary)}.table-wrapper{overflow-x:auto}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;max-width:800px;margin:auto}.price-card{background:#fff;padding:35px;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center}.price-card.premium{border:3px solid var(--secondary)}.price{font-size:2.2rem;color:var(--primary);font-weight:800;margin:20px 0}.price-card ul{list-style:none;text-align:left;margin:20px 0}.price-card li{margin:10px 0}
footer{background:#111827;color:#fff;padding:50px 20px 25px;margin-top:50px}.footer-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}footer h3{margin-bottom:15px}footer ul{list-style:none}footer li{margin:8px 0;color:#cbd5e1}.copyright{text-align:center;margin-top:35px;padding-top:20px;border-top:1px solid #374151;color:#9ca3af}
.notice{background:#fff7d6;border-left:5px solid var(--secondary);padding:18px;border-radius:10px;margin:25px 0}.click-word{color:var(--primary);font-weight:bold;cursor:pointer}
@media(max-width:900px){.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:70px;left:0;width:100%;background:#fff;padding:15px;box-shadow:var(--shadow)}.nav-links.open{display:flex;flex-direction:column}.nav-links a{width:100%}}
@media(max-width:600px){.hero{padding:70px 15px}.section{padding:50px 0}.hero h1{font-size:2.3rem}.phrase{font-size:1.5rem}.search-box{flex-direction:column}}

/* ============================================================================
   EduPlay app styles — everything below drives the real activities: the stage
   lessons and games play inside, the speaking lab, the progress panels and the
   header chip that shows who is playing.
   ========================================================================== */

.btn-sm{padding:7px 12px;font-size:.9rem;border-radius:9px}
.empty{text-align:center;color:#667085;background:#fff;padding:28px;border-radius:var(--radius);box-shadow:var(--shadow)}
.note{background:#eaf1ff;color:#1c3f7c;padding:12px 15px;border-radius:12px;margin-top:14px;font-size:.95rem}
.note a{color:var(--primary);font-weight:700}
.note-good{background:#d8f5e8;color:#08633c}
.pill{display:inline-block;background:#eaf1ff;color:#1c3f7c;padding:5px 11px;border-radius:20px;font-size:.9rem;font-weight:600;margin:3px 3px 0 0}
.tag{display:inline-block;padding:4px 10px;border-radius:20px;font-size:.78rem;font-weight:700;background:#eaf1ff;color:var(--primary);text-transform:capitalize}
.tag-beginner{background:#d8f5e8;color:#087443}.tag-intermediate{background:#fff1c2;color:#765b00}.tag-advanced{background:#ffd9dd;color:#b00020}
.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-bottom:22px}
.panel h2{color:var(--primary);margin-bottom:10px}
.panel-lead{color:#667085;margin-bottom:18px}
.panel-tight{padding:20px 28px}
.panel-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.bar{height:14px;background:#e9edf5;border-radius:20px;overflow:hidden;margin:12px 0}
.bar span{display:block;height:100%;background:var(--green);border-radius:20px;transition:width .5s}

/* ------------------------------------------------------------- header chip */
.progress-chip{display:flex;align-items:center;gap:8px}
.chip{display:flex;align-items:center;gap:8px;background:#eaf1ff;border-radius:30px;padding:6px 14px;text-decoration:none;color:var(--dark);font-weight:700;font-size:.9rem;white-space:nowrap}
.chip:hover{background:#dbe7ff}
.chip-avatar{font-size:1.2rem}
.chip-xp{color:var(--primary)}
.chip-level{color:#667085;font-weight:600;display:none}
.chip-cloud{box-shadow:inset 0 0 0 2px #bfe3d0}
.chip-switch{border:1px solid #ccd3df;border-radius:20px;padding:5px 8px;font-size:.85rem;background:#fff}
.chip-save{background:var(--secondary);color:#222;border-radius:20px;padding:6px 12px;font-weight:700;text-decoration:none;font-size:.85rem}
@media(min-width:1100px){.chip-level{display:inline}}

/* ------------------------------------------------------------------- topics */
.topic-grid,.game-grid,.media-grid,.country-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.topic-card,.game-card,.media-card,.country-card,.word-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;gap:10px}
.topic-head{display:flex;gap:14px;align-items:center}
.topic-emoji{font-size:2.6rem}
.topic-card h3{color:var(--primary);font-size:1.2rem}
.topic-fr{color:#667085;font-style:italic}
.topic-count{color:#667085;font-size:.9rem}
.topic-words{min-height:60px}
.topic-actions,.media-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.topic-actions .btn,.media-actions .btn{padding:10px 14px;font-size:.92rem}
.game-card{text-align:center;align-items:center}
.game-icon{font-size:3rem;margin:0}
.game-blurb{color:#667085;min-height:48px}
.game-topic{width:100%;padding:10px;border:1px solid #ccd3df;border-radius:10px;background:#f7f9ff}
.media-emoji{font-size:2.8rem}
.media-card h3{color:var(--primary)}
.media-blurb,.media-meta{color:#667085;font-size:.93rem}
.country-card{text-align:center;align-items:center}
.country-line{font-weight:600}
.country-fact{color:#667085;font-size:.92rem}

/* --------------------------------------------------------------- vocabulary */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;max-width:760px;margin:0 auto 12px}
.filter-row input,.filter-row select{flex:1;min-width:180px;padding:13px;border:1px solid #ccd3df;border-radius:10px}
.filter-count{text-align:center;color:#667085;margin-bottom:26px}
.word-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.word-card{flex-direction:row;align-items:center;padding:18px}
.word-emoji{font-size:2.2rem}
.word-text{flex:1}
.word-fr{font-weight:800;color:var(--primary)}
.word-en{color:#333}
.word-topic{color:#98a2b3;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.word-actions{display:flex;flex-direction:column;gap:6px}

/* -------------------------------------------------------------------- stage */
body.stage-open{overflow:hidden}
.stage{position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.stage[hidden]{display:none}
.stage-panel{background:#fff;border-radius:22px;width:min(760px,100%);max-height:92vh;overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.stage-bar{position:sticky;top:0;background:#fff;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px 12px;border-bottom:1px solid #eef1f7;z-index:2}
.stage-title{color:var(--primary);font-size:1.3rem}
.stage-meter{color:#667085;font-size:.9rem}
.stage-close{border:0;background:#f1f4fa;width:38px;height:38px;border-radius:50%;font-size:1rem;cursor:pointer}
.stage-close:hover{background:#e4e9f3}
.stage-body{padding:24px}
.stage-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:0 24px 24px;min-height:56px}
.stage-hint{text-align:center;color:#667085;margin-bottom:16px}

.flashcard{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.flash-emoji{font-size:6rem;line-height:1}
.flash-fr{font-size:2.2rem;font-weight:800;color:var(--primary)}
.flash-en{font-size:1.2rem;color:#667085}

.prompt{text-align:center;margin-bottom:20px}
.prompt-lead{color:#667085;margin-bottom:10px}
.prompt-word{display:inline-block;border:0;background:#eaf1ff;color:var(--primary);font-size:1.7rem;font-weight:800;padding:14px 24px;border-radius:16px;cursor:pointer}
.prompt-word:hover{background:#dbe7ff}
.prompt-plain{background:transparent;cursor:default}
.count-field{font-size:2rem;line-height:1.35;margin-top:16px;word-break:break-word}
.sum-line{font-size:2.1rem;letter-spacing:.06em;margin-top:14px}

.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.option-short{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.option-pictures{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.option{border:2px solid #e4e9f3;background:#fff;border-radius:16px;padding:16px 12px;font-size:1.05rem;font-weight:700;color:var(--dark);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.15s}
.option:hover{border-color:var(--primary);transform:translateY(-2px)}
.option-emoji{font-size:2.6rem}
.option-label{font-size:.98rem}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.swatch{height:110px;border:3px solid #e4e9f3;border-radius:18px;cursor:pointer;transition:.15s}
.swatch:hover{transform:scale(1.04)}

.verdict{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:12px;border-radius:14px;font-weight:700}
.verdict-yes{background:#d8f5e8;color:#08633c}
.verdict-no{background:#ffe6e9;color:#a4001a}
.verdict-got{font-weight:600;opacity:.8}

.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.match-column{display:flex;flex-direction:column;gap:10px}
.match-chip,.match-picture{border:2px solid #e4e9f3;background:#fff;border-radius:14px;padding:14px;font-weight:700;cursor:pointer;font-size:1.05rem}
.match-picture{font-size:2.2rem}
.match-chip.chosen{border-color:var(--primary);background:#eaf1ff}
.match-chip.matched,.match-picture.matched{border-color:#22a06b;background:#d8f5e8;opacity:.65;cursor:default}
.match-picture.wrong{border-color:var(--accent);background:#ffe6e9}

.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.memory-card{aspect-ratio:1;border:2px solid #e4e9f3;background:#eaf1ff;border-radius:14px;font-size:1.5rem;font-weight:700;cursor:pointer;padding:4px;word-break:break-word}
.memory-card.open{background:#fff;border-color:var(--primary)}
.memory-card.done{background:#d8f5e8;border-color:#22a06b;opacity:.6}
@media(max-width:520px){.memory-grid{grid-template-columns:repeat(3,1fr)}.memory-card{font-size:1.1rem}}

.build-slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.build-slot{width:44px;height:52px;border-bottom:4px solid var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:var(--primary)}
.build-slot.filled{background:#eaf1ff;border-radius:8px 8px 0 0}
.build-tray{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.build-letter{width:48px;height:48px;border:2px solid #e4e9f3;background:#fff;border-radius:12px;font-size:1.3rem;font-weight:800;cursor:pointer}
.build-letter:hover{border-color:var(--primary)}
.build-letter.used{opacity:.25;cursor:default}
.build-tools{display:flex;justify-content:center;margin-top:16px}
.build-clue{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.2rem;font-weight:700}
.build-emoji{font-size:2rem}

.catch-field{position:relative;height:280px;overflow:hidden;background:linear-gradient(#f5f8ff,#e6eeff);border-radius:18px;border:2px dashed #ccd9f5}
.catch-chip{position:absolute;top:-46px;border:0;background:var(--primary);color:#fff;font-weight:800;padding:11px 15px;border-radius:12px;cursor:pointer;animation:fall linear forwards}
.catch-chip.caught{background:var(--green);animation-play-state:paused}
.catch-chip.missed{background:#9aa5b8;animation-play-state:paused;opacity:.6}
@keyframes fall{from{transform:translateY(0)}to{transform:translateY(320px)}}
@media(prefers-reduced-motion:reduce){.catch-chip{animation-duration:14s!important}}

.reader,.karaoke{display:flex;flex-direction:column;gap:12px}
.reader-line,.karaoke-line{position:relative;background:#f7f9ff;border-radius:14px;padding:14px 46px 14px 16px}
.reader-fr,.karaoke-fr{border:0;background:transparent;font-size:1.2rem;font-weight:700;color:var(--primary);text-align:left;cursor:pointer;padding:0}
.reader-en,.karaoke-en{color:#667085;margin-top:4px}
.reader-num{position:absolute;top:12px;right:14px;color:#c2cbdb;font-weight:800}
.reader-line.reading .reader-fr,.karaoke-line.singing .karaoke-fr,.reading{color:#08633c}
.reader-line.reading,.karaoke-line.singing{background:#d8f5e8}

.result{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.result-emoji{font-size:4.5rem;line-height:1}
.result h3{color:var(--primary);font-size:1.5rem}
.result-xp{font-size:1.6rem;font-weight:800;color:var(--green)}
.result-note{color:#667085;font-size:.92rem}
.result-note a{color:var(--primary);font-weight:700}

/* ------------------------------------------------------------- speaking lab */
.scenario-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.scenario{border:2px solid #e4e9f3;background:#fff;border-radius:14px;padding:12px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.scenario.active{border-color:var(--primary);background:#eaf1ff;color:var(--primary)}
.scenario-emoji{font-size:1.7rem}
.chat-log{background:#f7f9ff;border-radius:18px;padding:16px;min-height:280px;max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:88%;padding:14px 16px;border-radius:16px;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.bubble-tutor{background:#fff;align-self:flex-start;border-bottom-left-radius:4px}
.bubble-child{background:#eaf1ff;align-self:flex-end;border-bottom-right-radius:4px}
.bubble-who{display:flex;gap:6px;align-items:center;font-size:.8rem;color:#667085;font-weight:700;margin-bottom:6px}
.bubble-fr{border:0;background:transparent;font-size:1.15rem;font-weight:700;color:var(--primary);text-align:left;cursor:pointer;padding:0}
.bubble-said{cursor:default;color:var(--dark)}
.bubble-en{color:#667085;margin-top:4px}
.bubble-score{display:flex;gap:8px;align-items:center;margin-top:8px;font-weight:800;color:var(--green)}
.bubble-stars{letter-spacing:2px}
.bubble-tip{margin-top:6px;background:#fff7d6;border-radius:10px;padding:8px 10px;font-size:.9rem}
.bubble-note{margin-top:6px;color:#98a2b3;font-size:.82rem}
.bubble-help{margin-top:8px;font-size:.9rem}
.bubble-help summary{cursor:pointer;color:var(--purple);font-weight:700}
.bubble-model{border:0;background:#f3edff;color:var(--purple);font-weight:700;border-radius:10px;padding:8px 10px;margin-top:6px;cursor:pointer}
.bubble-thinking{display:flex;gap:6px;align-items:center;padding:18px}
.bubble-thinking .dot{width:9px;height:9px;border-radius:50%;background:#c2cbdb;animation:blink 1.2s infinite}
.bubble-thinking .dot:nth-child(2){animation-delay:.2s}
.bubble-thinking .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.chat-done{background:#d8f5e8;border-radius:16px;padding:16px;text-align:center}
.chat-done-head{font-weight:800;color:#08633c}
.chat-done-note{color:#08633c;font-size:.9rem}
.chat-done-note a{color:#064e2f;font-weight:700}
.chat-live{margin-top:14px;text-align:center;font-weight:700;color:var(--primary);background:#eaf1ff;border-radius:14px;padding:12px 16px;min-height:22px;word-break:break-word}
.mic-row{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:18px}
.mic{border:0;background:var(--accent);color:#fff;font-weight:800;font-size:1.05rem;padding:16px 26px;border-radius:40px;cursor:pointer;box-shadow:0 8px 20px rgba(230,57,70,.3)}
.mic.is-listening{background:var(--green);box-shadow:0 8px 20px rgba(34,160,107,.35);animation:mic-pulse 1.2s ease-in-out infinite}
@keyframes mic-pulse{50%{box-shadow:0 8px 26px rgba(34,160,107,.6)}}
@media (prefers-reduced-motion:reduce){.mic.is-listening{animation:none}}
.mic.is-busy{opacity:.6;cursor:progress}
.mic-level{--level:0;width:16px;height:60px;border-radius:10px;background:#e9edf5;position:relative;overflow:hidden}
.mic-level::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--level) * 100%);background:var(--green);transition:height .08s linear}
.typed-row{display:flex;gap:10px;margin-top:14px}
.typed-input{flex:1;padding:13px;border:1px solid #ccd3df;border-radius:10px}
.chat-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.chat-tally{flex:1;color:#667085;font-weight:600;min-width:180px}

/* ----------------------------------------------------------------- progress */
.level-panel{text-align:left}
.level-head{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.level-emoji{font-size:3rem}
.level-xp{color:#667085;font-weight:600}
.level-next{color:var(--primary);font-weight:700}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:22px}
.stat-emoji{font-size:1.8rem}
.stat strong{display:block;font-size:1.7rem;color:var(--primary)}
.stat-label{color:#667085;font-size:.88rem}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.badge{background:#f7f9ff;border-radius:16px;padding:16px;text-align:center;display:flex;flex-direction:column;gap:6px}
.badge.earned{background:#fff7d6;box-shadow:inset 0 0 0 2px var(--secondary)}
.badge.locked{opacity:.55}
.badge-emoji{font-size:2.2rem}
.badge-name{font-weight:700;font-size:.9rem}
.topic-scores{display:flex;flex-direction:column;gap:14px}
.score-row{display:grid;grid-template-columns:1fr 2fr auto;gap:14px;align-items:center}
.score-name strong{display:block;color:var(--primary)}
.score-name span{color:#667085;font-size:.85rem}
.score-tag{font-weight:700;font-size:.85rem;padding:5px 10px;border-radius:20px;background:#eaf1ff;color:var(--primary)}
.score-excellent .bar span{background:var(--green)}
.score-excellent .score-tag{background:#d8f5e8;color:#087443}
.score-good .bar span{background:var(--secondary)}
.score-good .score-tag{background:#fff1c2;color:#765b00}
.score-practice .bar span{background:var(--accent)}
.score-practice .score-tag{background:#ffd9dd;color:#b00020}
@media(max-width:640px){.score-row{grid-template-columns:1fr}}
.timeline{list-style:none;display:flex;flex-direction:column;gap:10px}
.timeline li{display:flex;gap:12px;align-items:center;background:#f7f9ff;border-radius:12px;padding:12px}
.timeline-icon{font-size:1.4rem}
.timeline-text{flex:1;font-weight:600}
.timeline-meta{color:#667085;font-size:.85rem;white-space:nowrap}

/* ------------------------------------------------------- accounts & reports */
.form label{display:block;font-weight:700;margin:14px 0 6px}
.form input,.form select{width:100%;padding:13px;border:1px solid #ccd3df;border-radius:10px}
.form .btn{margin-top:18px}
.form-inline{border-top:1px solid #eef1f7;margin-top:22px;padding-top:6px}
.form-inline h3{color:var(--primary);margin-top:12px}
.form-message{margin-top:14px;padding:12px;border-radius:10px;font-weight:600}
.form-error{background:#ffe6e9;color:#a4001a}
.form-help{margin-top:14px;color:#667085;font-size:.92rem}
.form-help a,.tips a{color:var(--primary);font-weight:700}
.avatar-picker{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.avatar{width:46px;height:46px;border:2px solid #e4e9f3;background:#fff;border-radius:12px;font-size:1.4rem;cursor:pointer}
.avatar.active{border-color:var(--primary);background:#eaf1ff}
.learner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.learner-card{border:2px solid #e4e9f3;background:#fff;border-radius:16px;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-weight:700}
.learner-card.active{border-color:var(--primary);background:#eaf1ff}
.learner-avatar{font-size:2rem}
.learner-xp{color:#667085;font-size:.85rem;font-weight:600}
.child-panel{border-left:6px solid var(--primary)}
.mini-stats{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.mini-stats li{background:#f7f9ff;border-radius:20px;padding:7px 14px;font-weight:600;font-size:.9rem}
.parent-topics h4{color:var(--primary);margin:14px 0 6px}
.parent-topics ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.parent-topics li{background:#f7f9ff;border-radius:10px;padding:9px 12px;font-size:.92rem}
.tips{list-style:none;display:flex;flex-direction:column;gap:10px}
.tips li{background:#f7f9ff;border-radius:12px;padding:12px 14px}
.table-wrap{overflow-x:auto;border-radius:15px}
.class-table{min-width:900px;font-size:.92rem}
.class-table td,.class-table th{padding:12px}

/* --------------------------------------------------------- toasts & confetti */
.toast-host{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:3000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#172033;color:#fff;padding:12px 18px;border-radius:30px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;gap:8px;max-width:90vw;transition:opacity .35s,transform .35s}
.toast-out{opacity:0;transform:translateY(10px)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:2500;overflow:hidden}
.confetti span{position:absolute;top:-40px;font-size:1.8rem;animation:drop 2.4s ease-in forwards}
@keyframes drop{to{transform:translateY(105vh) rotate(320deg);opacity:.2}}

/* ------------------------------------------------------------------- extras */
.suggest{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;text-align:center;max-width:760px;margin:0 auto 30px}
.suggest h3{color:var(--primary);font-size:1.4rem}
.suggest p{color:#667085;margin:8px 0 16px}
.suggest-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.how-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.how-list li{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.how-list strong{display:block;color:var(--primary);margin-bottom:6px}

/* ------------------------------------------------------- premium & new games */
.pricing{max-width:1100px}
.premium-host{display:contents}
.price-card-active{border:3px solid var(--green)}
.price-period{font-size:1rem;color:#667085}
.price-lead{color:#667085;font-size:.95rem}
.section-premium{padding-top:0}
.premium-band{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border-left:6px solid var(--secondary);padding:24px;margin-bottom:22px}
.premium-band h2{color:var(--primary);font-size:1.4rem}
.premium-lead{color:#667085;margin:6px 0}
.premium-status{font-weight:700;margin-top:8px}
.premium-on{color:#08633c}
.premium-waiting{color:#765b00}
.premium-note{margin-top:10px;color:#667085}
.premium-note a,.premium-links a.btn{font-weight:700}
.premium-note a{color:var(--primary)}
.premium-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.premium-card{border:2px solid #ffe08a}
.card-locked{position:relative;opacity:.94}
.card-locked::after{content:'🔒';position:absolute;top:12px;right:14px;font-size:1.3rem}
.tag-premium{background:#fff1c2;color:#765b00}
.premium-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.premium-form{text-align:left;margin-top:14px}
.premium-form label{display:block;font-weight:700;margin:12px 0 6px}
.premium-form select,.premium-form textarea{width:100%;padding:12px;border:1px solid #ccd3df;border-radius:10px}
.premium-payment{background:#f7f9ff;border-radius:12px;padding:14px;margin-top:14px;text-align:left}
.premium-payment h4{color:var(--primary);margin-bottom:6px}
.form-success{background:#d8f5e8;color:#08633c}
.form-hint{color:#667085;font-size:.88rem;margin-top:10px}
.country-anthem{color:#667085;font-size:.88rem}

.scramble-line{display:flex;gap:8px;flex-wrap:wrap;min-height:64px;background:#f7f9ff;border:2px dashed #ccd3df;border-radius:14px;padding:12px;align-items:center}
.scramble-empty{color:#98a2b3;font-weight:600}
.scramble-bank{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.scramble-chip,.scramble-word{border:2px solid #e4e9f3;background:#fff;border-radius:12px;padding:10px 14px;font-size:1.02rem;font-weight:700;color:var(--dark);cursor:pointer}
.scramble-word{border-color:var(--primary);background:#eaf1ff;color:var(--primary)}
.scramble-chip:hover{border-color:var(--primary)}
.scramble-actions{display:flex;justify-content:center;margin-top:16px}
.option-speed{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.option.matched{border-color:var(--green);background:#d8f5e8}
.option.wrong{border-color:var(--accent);background:#ffe6e9}
.spell{display:flex;flex-direction:column;align-items:center;gap:12px}
.spell-input{width:100%;max-width:340px;padding:14px;border:2px solid #ccd3df;border-radius:12px;font-size:1.3rem;text-align:center;font-weight:700}
.dictation-input{max-width:520px;font-size:1.1rem;text-align:left}
.spell-keys{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.spell-key{border:2px solid #e4e9f3;background:#fff;border-radius:10px;width:40px;height:40px;font-size:1.1rem;font-weight:700;cursor:pointer}
.spell-key:hover{border-color:var(--primary)}
.spell-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mystery{display:flex;flex-direction:column;align-items:center;gap:10px}
.mystery-picture{font-size:3.4rem}
.mystery-word{font-size:1.9rem;font-weight:800;letter-spacing:.16em;color:var(--primary);word-break:break-word;text-align:center}
.mystery-lives{font-size:1.1rem;letter-spacing:.1em}
.mystery-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:6px;width:100%;max-width:420px}
.mystery-key{border:2px solid #e4e9f3;background:#fff;border-radius:10px;padding:10px 0;font-weight:700;cursor:pointer}
.mystery-key:hover:not(:disabled){border-color:var(--primary)}
.mystery-key.matched{border-color:var(--green);background:#d8f5e8;color:#08633c}
.mystery-key.wrong{border-color:#e4e9f3;background:#f1f3f7;color:#98a2b3}
.karaoke-note{background:#fff7d6;border-left:5px solid var(--secondary);border-radius:10px;padding:14px;margin-top:16px;color:#4b5563;font-size:.94rem}

/* ------------------------------------------------------- teacher's dashboard */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0}
.kpi{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px;text-align:center}
.kpi-value{font-size:1.9rem;font-weight:800;color:var(--primary);line-height:1.1}
.kpi-label{color:#667085;font-size:.86rem;font-weight:600;margin-top:4px}
.dash-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-bottom:22px}
.dash-panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.dash-panel h3{color:var(--primary);margin-bottom:10px}
.dash-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.dash-list li{background:#f7f9ff;border-radius:10px;padding:10px 12px;font-size:.92rem;display:flex;gap:10px;align-items:center;justify-content:space-between}
.dash-list .score-tag{white-space:nowrap}
.queue-row{flex-direction:column;align-items:flex-start;gap:6px}
.queue-meta{color:#667085;font-size:.86rem}
.dash-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.dash-controls input,.dash-controls select{padding:11px;border:1px solid #ccd3df;border-radius:10px;min-width:170px}
.class-table th{cursor:pointer;white-space:nowrap}
.class-table tbody tr{cursor:pointer}
.class-table tbody tr:hover{background:#f7f9ff}
.row-premium td:first-child::after{content:' ⭐'}
.dash-drill{border-left:6px solid var(--secondary)}

/* -------------------------------------------------------------- course menu */
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.course-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
.course-card h3{color:var(--primary);font-size:1.2rem}
.course-emoji{font-size:2.6rem;line-height:1}
.course-blurb{color:#667085;flex:1}
.course-card .btn{margin-top:6px}
.course-current{box-shadow:var(--shadow),inset 0 0 0 3px var(--secondary)}
.course-current h3::after{content:' ✓';color:var(--green)}
.course-who{text-align:center;margin-top:26px;color:#667085}
.course-who strong{color:var(--primary)}
.course-banner{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.course-banner .panel-lead{margin-bottom:0}
.course-banner .panel-actions{margin-top:0}
.course-email .form-group{margin-bottom:0}