:root{--blue-deep:#07155f;--blue-mid:#0f2d99;--blue-light:#1f56d8;--panel:rgba(255,255,255,.10);--border:rgba(255,255,255,.14);--text:#ffffff;--muted:rgba(255,255,255,.78);--done:#34d399;--current:#fcd34d;--locked:rgba(255,255,255,.35);--danger:#fecaca;--danger-text:#7f1d1d;--ok:#dcfce7;--ok-text:#14532d}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top, rgba(255,255,255,.12), transparent 25%),linear-gradient(180deg, var(--blue-deep), var(--blue-mid) 55%, #123fb8 100%);min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;backdrop-filter:blur(10px);background:rgba(7,21,95,.72);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:14px}.brand.small h1{font-size:22px}.logo-circle{width:54px;height:54px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.10);border:1px solid var(--border);font-size:26px}.brand h1{margin:0;font-size:28px}.brand p{margin:4px 0 0;color:var(--muted);font-size:14px}
.stats{display:flex;gap:10px;flex-wrap:wrap}.stat{padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid var(--border)}.back-link{color:#fff;text-decoration:none;font-weight:700}
.page{max-width:1280px;margin:0 auto;padding:24px;display:grid;grid-template-columns:280px 1fr;gap:24px}
.side-panel,.map-shell,.unit-header,.lesson-card{background:var(--panel);border:1px solid var(--border);border-radius:28px;backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.side-panel{padding:20px;height:fit-content}.panel-block + .panel-block{margin-top:18px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:#bfe2ff}.side-panel h2,.destination h3,.unit-header h2,.lesson-card h2{margin:8px 0 0}.side-panel p,.destination p,.legend,.mini,.unit-header p,#finishSummary{color:var(--muted);line-height:1.5}
.progress-big{font-size:38px;font-weight:800;margin:10px 0}.progress-bar{height:14px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden;margin-top:10px}.progress-fill{height:100%;width:0;background:linear-gradient(90deg, var(--done), #10b981)}
.action-btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:16px;padding:12px 16px;background:#fff;color:#08225e;font-weight:700;text-decoration:none;cursor:pointer}.action-btn.alt{background:rgba(255,255,255,.10);color:#fff;border:1px solid var(--border)}
.legend{display:flex;align-items:center;gap:10px;margin-top:10px}.dot{width:14px;height:14px;border-radius:999px;display:inline-block}.dot.done{background:var(--done)} .dot.current{background:var(--current)} .dot.locked{background:var(--locked)}
.map-shell{position:relative;min-height:960px;overflow:hidden;background:radial-gradient(circle at 30% 15%, rgba(255,255,255,.12), transparent 20%),linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
.path-line{position:absolute;inset:0;width:100%;height:100%}.boat{position:absolute;z-index:12;font-size:42px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));transition:all .4s ease}
.unit{position:absolute;z-index:10;transform:translate(-50%,-50%);text-align:center;width:120px}.unit-btn{width:84px;height:84px;border-radius:999px;border:4px solid rgba(255,255,255,.85);margin:0 auto;display:grid;place-items:center;font-size:24px;font-weight:800;color:#08225e;box-shadow:0 12px 26px rgba(0,0,0,.22);cursor:pointer;transition:transform .18s ease;position:relative;background:#38bdf8}.unit-btn:hover{transform:translateY(-4px)}.unit-btn.done{background:var(--done)}.unit-btn.current{background:var(--current)}.unit-btn.locked{background:#8ca2c8;color:#eaf1ff;border-color:rgba(255,255,255,.3);cursor:not-allowed}.ring{position:absolute;inset:-8px;border-radius:999px;border:4px solid #ffd84d}.unit-label{margin-top:8px;font-size:14px;font-weight:700}.unit-sub{font-size:11px;color:var(--muted)}.stars{margin-top:4px;color:#ffd84d;font-size:14px;letter-spacing:1px}
.destination{position:absolute;right:20px;bottom:20px;max-width:260px;padding:18px;border-radius:24px;background:rgba(255,255,255,.10);border:1px solid var(--border);z-index:11}
.unit-page,.lesson-page{max-width:980px;margin:0 auto;padding:24px}.unit-header{padding:22px}.lesson-list{display:grid;gap:16px;margin-top:20px}
.lesson-row{background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;box-shadow:0 18px 50px rgba(0,0,0,.18)}.lesson-left{display:flex;gap:14px;align-items:center}.lesson-num{width:56px;height:56px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-weight:800}.lesson-num.done{background:var(--done);color:#083a2f}.lesson-num.current{background:var(--current);color:#6a5200}.lesson-num.locked{background:#8ca2c8;color:#eaf1ff}
.lesson-card{padding:22px}.lesson-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.lesson-meta{display:flex;gap:10px;align-items:center}.hearts{font-size:22px}.xp-badge{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:700}
.exercise-box{margin-top:16px;padding:18px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid var(--border)}.exercise-box input,.exercise-box select,.choice-btn,.token-btn{width:100%;padding:13px 14px;border-radius:14px;border:1px solid rgba(7,21,95,.12);font:inherit}.exercise-box input,.exercise-box select,.choice-btn,.token-btn,.selected-answer,.match-item{background:#fff;color:#08225e}
.choice-list,.token-bank,.match-grid{display:grid;gap:10px}.choice-btn,.token-btn{cursor:pointer;text-align:left}.token-bank{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.selected-answer{min-height:54px;padding:10px;border:2px dashed #94a3b8;border-radius:14px;margin-bottom:12px}.match-grid{grid-template-columns:1fr 1fr}.match-item{padding:12px;border-radius:12px}.feedback-box{margin-top:16px;padding:12px 14px;border-radius:16px;font-weight:700}.feedback-box.ok{background:var(--ok);color:var(--ok-text)}.feedback-box.bad{background:var(--danger);color:var(--danger-text)}.hidden{display:none}
.finish-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.finish-box{min-width:130px;background:rgba(255,255,255,.12);border:1px solid var(--border);border-radius:18px;padding:16px;text-align:center}.finish-box strong{display:block;font-size:30px;color:#fff}
@media (max-width:960px){.page{grid-template-columns:1fr}.map-shell{min-height:1100px}}@media (max-width:700px){.topbar{flex-direction:column;align-items:flex-start}.lesson-row{flex-direction:column;align-items:flex-start}.match-grid{grid-template-columns:1fr}}


.choice-prompt{margin:14px 0;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.8);font-weight:800;color:#08225e;}
.speak-line{font-size:1.35rem;line-height:1.5;}
textarea{width:100%;border:2px solid rgba(7,21,95,.12);border-radius:18px;padding:16px;font:inherit;resize:vertical;min-height:150px;}
.feedback-box{line-height:1.55;}
.feedback-box .fb-title{font-size:1.2rem;font-weight:900;margin-bottom:8px;}
.feedback-box .fb-row{margin:8px 0;}
.feedback-box ul{margin:6px 0 0 18px;padding:0;}
.feedback-box.ok{background:#dcfce7;color:#14532d;border-color:#86efac;}
.feedback-box.bad{background:#fee2e2;color:#7f1d1d;border-color:#fecaca;}