*{box-sizing:border-box}
:root{
--bg:#f3f7fc;--card:#fff;--ink:#18263a;--muted:#6e7f95;--blue:#2568d8;--blue2:#174fae;
--blueSoft:#eaf2ff;--green:#22a765;--greenSoft:#eaf8f1;--line:#dfe7f2;
--shadow:0 18px 55px rgba(35,70,120,.11)
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"SF Pro Rounded","SF Pro Display",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
button,input,textarea{font:inherit}a{text-decoration:none;color:inherit}button{cursor:pointer}
.student-body{background:linear-gradient(135deg,#f2f6fb 0%,#eef5ff 55%,#f7f9fc 100%)}
.app-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}
.side-panel{padding:25px 18px;display:flex;flex-direction:column;background:rgba(255,255,255,.88);border-right:1px solid var(--line);backdrop-filter:blur(14px);position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;font-weight:900;color:white;background:linear-gradient(145deg,#3479eb,#164cae);box-shadow:0 7px 18px rgba(36,105,218,.25)}
.brand strong{display:block;font-size:18px;line-height:1}.brand span{display:block;font-size:10px;letter-spacing:.18em;color:#7890ac;margin-top:5px;font-weight:800}
.exercise-list{display:flex;flex-direction:column;gap:8px;margin-top:34px;overflow:auto}
.exercise-link{display:flex;align-items:center;gap:10px;padding:12px;border-radius:15px;color:#42536a}.exercise-link:hover{background:#f5f8fc}.exercise-link.active{background:var(--blueSoft);color:#164fae}
.subject-dot{width:9px;height:9px;border-radius:50%;background:#7c9bc4;flex:none}.exercise-link.active .subject-dot{background:var(--blue)}
.exercise-link b{display:block;font-size:14px;line-height:1.2}.exercise-link small{display:block;margin-top:4px;color:#8393a8}.admin-link{margin-top:auto;padding:12px 10px;color:#6e7f95;font-weight:700;font-size:14px}
.main-panel{padding:42px clamp(24px,5vw,72px)}.lesson-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--blue);font-weight:900;font-size:11px;margin-bottom:7px}
.lesson-head h1,.section-head h1{font-size:clamp(28px,3vw,42px);margin:0 0 6px;letter-spacing:-.03em}.lesson-head p{margin:0;color:var(--muted);font-size:16px}
.mode-switch{display:flex;background:white;border:1px solid var(--line);padding:4px;border-radius:14px;box-shadow:0 8px 24px rgba(37,72,120,.07)}
.mode-switch a{padding:9px 14px;border-radius:10px;font-weight:800;color:#64758d;font-size:14px}.mode-switch a.active{background:var(--blue);color:white}
.lesson-card{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;background:var(--card);border:1px solid #e5ebf3;border-radius:28px;padding:24px;box-shadow:var(--shadow)}
.comic-panel{background:linear-gradient(180deg,#f5f9ff,#eef5ff);border-radius:22px;padding:16px;align-self:start}.comic-panel svg{width:100%;display:block}
.comic-bubble{background:white;border:1px solid #dce7f7;border-radius:16px;padding:12px 13px;font-size:13px;line-height:1.45;color:#52657d;box-shadow:0 8px 20px rgba(33,78,137,.08);margin-top:6px}
.exercise-panel{min-width:0}.training-text{font-family:"SF Pro Rounded",Inter,system-ui,sans-serif;font-size:clamp(20px,2.2vw,29px);line-height:2.05;font-weight:650;white-space:pre-wrap;color:#26384f;padding:8px 2px 20px;min-height:210px}
.drop-gap{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;min-width:108px;min-height:46px;margin:0 5px;padding:3px 12px;border-radius:13px;border:2px dashed #9eb5d3;background:#f7faff;color:#38516e;line-height:1;transition:.18s ease}
.drop-gap.drag-over{border-style:solid;border-color:var(--blue);background:var(--blueSoft);transform:translateY(-2px);box-shadow:0 8px 19px rgba(38,104,216,.15)}
.drop-gap.solved{border-style:solid;border-color:#53c889;background:var(--greenSoft);color:#16834e;box-shadow:0 7px 16px rgba(34,167,101,.12)}
.drop-gap.wrong{animation:shake .28s ease}.gap-input{width:110px;min-width:0;border:0;outline:0;background:transparent;text-align:center;font-weight:800;color:inherit;font-size:.75em}
.training-text.complete,.training-text.final-text{color:#178b54;transition:color .35s ease}
.training-text.final-text{background:var(--greenSoft);border:1px solid #bfead3;border-radius:18px;padding:20px 22px;line-height:1.8}
.tile-zone{border-top:1px solid var(--line);padding-top:19px}.zone-title{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7d8da2;font-weight:900;margin-bottom:12px}
.tile-tray{display:flex;flex-wrap:wrap;gap:12px;min-height:58px}
.word-tile{border:2px solid #bdd0ec;background:linear-gradient(180deg,#fff,#f3f7fd);color:#263c58;border-radius:14px;padding:12px 20px;min-width:92px;font-size:17px;font-weight:850;box-shadow:0 7px 0 #cfdaea,0 12px 20px rgba(43,71,110,.10);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.word-tile:hover{transform:translateY(-2px);border-color:#7aa5e7}.word-tile.dragging{opacity:.72;transform:rotate(2deg) scale(1.04);box-shadow:0 14px 28px rgba(43,71,110,.18)}
.word-tile.selected{border-color:var(--blue);background:var(--blueSoft);transform:translateY(-2px)}.word-tile.used{opacity:.25;box-shadow:none;transform:none}.word-tile.wrong{animation:shake .28s ease}
.success-box{margin-top:22px;background:var(--greenSoft);border:1px solid #bde9d1;border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:13px;color:#166e45}
.success-box[hidden]{display:none}.success-check{width:38px;height:38px;border-radius:12px;background:var(--green);color:white;display:grid;place-items:center;font-weight:900;font-size:22px}
.success-box strong,.success-box span{display:block}.success-box span{font-size:13px;margin-top:2px;color:#4e8268}.lesson-actions{display:flex;justify-content:flex-end;margin-top:20px}
.primary-btn,.ghost-btn,.mini-btn{border:0;border-radius:12px;font-weight:800}.primary-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;background:linear-gradient(145deg,#2e73e5,#1852b7);color:white;box-shadow:0 8px 18px rgba(37,104,216,.22)}
.ghost-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;background:white;border:1px solid var(--line);color:#52647c}
.empty-card{max-width:640px;margin:10vh auto;background:white;border-radius:28px;padding:42px;box-shadow:var(--shadow);text-align:center}.empty-icon{font-size:42px;color:var(--blue)}.empty-card h1{font-size:34px;margin:12px 0 8px}.empty-card p{color:var(--muted);line-height:1.6;margin-bottom:24px}
.auth-body{display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#eef4fb,#f8fafc)}.auth-card{width:min(430px,100%);background:white;border-radius:24px;padding:30px;box-shadow:var(--shadow);border:1px solid var(--line)}
.brand-center{justify-content:center;margin-bottom:24px}.auth-card h1{text-align:center;margin:0 0 7px}.auth-card>p{text-align:center;color:var(--muted);margin:0 0 22px}.auth-form{display:grid;gap:15px}
.auth-form label,.form-grid label,.text-label{display:grid;gap:7px;color:#53657d;font-size:13px;font-weight:800}
input,textarea{width:100%;border:1px solid #cad7e6;border-radius:12px;padding:11px 12px;outline:none;background:#fff;color:var(--ink)}input:focus,textarea:focus{border-color:#6096e7;box-shadow:0 0 0 3px #eaf2ff}
textarea{resize:vertical;line-height:1.55}.back-link{display:block;text-align:center;margin-top:18px;color:#6c7e95;font-size:13px}.alert{border-radius:12px;padding:11px 13px;margin:14px 0;font-weight:700;font-size:13px}
.alert.error{background:#fff0f0;border:1px solid #f0c3c3;color:#a94444}.alert.success{background:var(--greenSoft);border:1px solid #bde9d1;color:#1d7a4f}
.admin-body{background:#f3f6fa}.admin-topbar{min-height:78px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:15px clamp(18px,4vw,48px);position:sticky;top:0;z-index:20}
.admin-top-actions{display:flex;gap:9px}.admin-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;padding:26px clamp(18px,4vw,48px) 48px}
.admin-editor-card,.admin-list-card{background:white;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 10px 30px rgba(35,70,120,.06)}.admin-list-card{align-self:start;position:sticky;top:102px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:20px}.section-head h2{font-size:24px;margin:0}.section-head.compact{margin-bottom:13px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:15px}.text-label{margin-top:5px}.gap-builder-head{margin:22px 0 10px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.gap-builder-head strong,.gap-builder-head span{display:block}.gap-builder-head span{font-size:13px;color:var(--muted);margin-top:4px}
.gap-builder{min-height:150px;border:1px solid #cad7e6;border-radius:16px;padding:18px;background:#fbfdff;font-size:19px;line-height:2.05;white-space:pre-wrap}.plain-segment{white-space:pre-wrap}
.word-selector{border:0;background:transparent;padding:3px 4px;border-radius:8px;color:inherit;font-weight:650}.word-selector:hover{background:#eaf2ff}.word-selector.selected{background:#dfeeff;color:#154f9d;box-shadow:inset 0 0 0 2px #6d9fe8}
.selected-info{margin-top:9px;color:#73849a;font-size:13px;font-weight:700}.editor-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:22px}.switch-row{display:flex;align-items:center;gap:10px;font-weight:700;color:#53657d}.switch-row input{width:auto}
.admin-text-list{display:grid;gap:10px}.admin-text-item{border:1px solid var(--line);border-radius:15px;padding:13px}.admin-text-main strong,.admin-text-main small{display:block}.admin-text-main strong{margin-top:7px}.admin-text-main small{margin-top:3px;color:var(--muted)}
.status-pill{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.status-pill.on{background:var(--greenSoft);color:#188252}.status-pill.off{background:#eef1f5;color:#758395}
.admin-item-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.admin-item-actions form{margin:0}.mini-btn{display:inline-flex;padding:7px 9px;border:1px solid var(--line);background:#fff;color:#52647c;font-size:11px}.mini-btn.danger{color:#ad4d4d}.muted{color:var(--muted)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.side-panel{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:14px 18px;flex-direction:row;align-items:center;gap:14px}.exercise-list{display:none}.admin-link{margin:0 0 0 auto}.main-panel{padding:24px 18px 40px}.lesson-card{grid-template-columns:1fr}.comic-panel{display:grid;grid-template-columns:115px 1fr;align-items:center}.comic-panel svg{max-height:125px}.comic-bubble{margin:0}.admin-layout{grid-template-columns:1fr}.admin-list-card{position:static}}
@media(max-width:640px){.lesson-head{align-items:flex-start;flex-direction:column}.lesson-card{padding:15px;border-radius:20px}.comic-panel{grid-template-columns:88px 1fr;padding:11px}.training-text{font-size:20px;line-height:2.15}.drop-gap{min-width:88px;min-height:42px;margin:2px 3px}.word-tile{padding:11px 15px;min-width:82px}.form-grid{grid-template-columns:1fr}.gap-builder-head,.editor-bottom{align-items:stretch;flex-direction:column}.admin-top-actions .ghost-btn:first-child{display:none}}