:root{color-scheme:dark;--bg:#08090b;--surface:#101116;--surface2:#17181d;--line:#ffffff1a;--line-soft:#ffffff0c;--text:#f1f2f6;--muted:#94a3b8;--dim:#526174;--accent:#6366f1;--blue:#2563eb;--green:#10b981;--orange:#f59e0b;--font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Cairo,Arial,sans-serif;font-size:14px;line-height:1.5;min-height:100vh}body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(to right,#ffffff08 1px,transparent 1px),linear-gradient(to bottom,#ffffff08 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(#000 70%,transparent);pointer-events:none;z-index:-1}.ambient{position:fixed;width:820px;height:550px;top:50px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,#6366f112,transparent 70%);pointer-events:none;z-index:-1}body[data-skill=schreiben] .ambient{background:radial-gradient(ellipse,#f59e0b07,transparent 70%)}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}button{border:0;background:none}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;flex-shrink:0;vertical-align:middle}button{transition:background .22s,border-color .22s,transform .22s,box-shadow .22s,color .22s}button:active{transform:scale(.97)}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input:focus-visible,textarea:focus-visible{outline:1px solid var(--accent)}.topbar{position:relative;z-index:10;max-width:1280px;height:66px;margin:16px auto 0;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);border-radius:40px;background:#0e0f12ed;backdrop-filter:blur(20px)}.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}.logo{width:35px;height:35px;border:2px solid #6444bd;border-radius:11px;display:grid;place-items:center;color:#925cff;font-family:Inter,Arial,sans-serif;font-weight:800;font-size:24px;font-style:italic;box-shadow:0 5px 12px #7754dc30}.brand strong{font-size:18px;font-weight:900;display:block;line-height:1.35}.brand small{font-family:Inter,Arial,sans-serif;font-size:8px;letter-spacing:1px;color:#6e819d;font-weight:700;display:block;margin-top:5px}.nav{display:flex;align-items:center;padding:4px;border:1px solid var(--line);border-radius:30px;background:#ffffff05;gap:0;flex:0 0 530px;height:46px}.nav a{flex:1;text-align:center;white-space:nowrap;font-size:13px;font-weight:700;padding:8px 12px;border-radius:24px;color:#cbd5e1;transition:all .25s}.nav a.active{background:#ffffff30;box-shadow:inset 0 0 0 1px #ffffff20,0 2px 6px #0004;color:white}.utilities{display:flex;align-items:center;gap:8px}.pill{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border:1px solid var(--line-soft);border-radius:30px;color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap;background:#ffffff02}.pill svg{width:14px;height:14px}.round{height:38px;width:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);background:#ffffff02}.round:hover,.pill:hover{color:var(--text);border-color:#6366f170;background:#ffffff08}.profile{height:38px;gap:10px;padding:4px 10px}.avatar{background:#6366f12b;border:1px solid #6366f14d;color:#dfddff;font-size:11px;font-weight:900;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.profile strong{color:#d8dde6;font-size:13px}.tiny{border:1px solid #ffffff12;background:#ffffff05;border-radius:7px;font:700 9px Inter,Arial,sans-serif;padding:4px 7px;color:#a2b2c8}.profile svg{width:12px;height:12px}.workspace{max-width:1280px;margin:62px auto 70px}.hero{height:104px;display:flex;align-items:center;justify-content:space-between}.hero-copy .eyebrow{font-size:10px;line-height:18px;display:inline-block;color:#7877ff;background:#6366f110;border:1px solid #6366f135;border-radius:30px;font-weight:800;padding:0 10px}.eyebrow:before,.eyebrow:after{content:"•";margin:0 6px}.hero h1{font-size:48px;font-weight:700;letter-spacing:-1.2px;margin:3px 0 0;line-height:1;color:#fff}.hero-stat{height:104px;min-width:192px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:17px;background:#0c0d0fbd;gap:25px;padding:20px 24px}.stat{display:flex;flex-direction:column;align-items:center;gap:2px}.stat strong{font:700 28px Cairo,sans-serif;line-height:1.3;color:#fff}.stat small{font-size:11px;font-weight:800;color:#6c7c94}.divider{height:52px;width:1px;background:var(--line)}.switch{display:flex;align-items:center;padding:7px;border:1px solid var(--line);border-radius:40px;height:58px;background:#101116b8;width:264px;margin:16px auto 28px}.switch button{height:40px;border-radius:30px;flex:1;text-align:center;font-weight:800;color:#cbd5e1;font-size:14px}.switch button.selected{background:var(--accent);color:white;box-shadow:0 3px 6px color-mix(in srgb,var(--accent) 28%,transparent)}.parts{display:flex;align-items:center;padding:8px;border:1px solid var(--line);border-radius:40px;height:62px;background:#101116d9;margin-bottom:28px}.parts button{height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:30px;flex:1;font-size:15px;font-weight:700;color:#d5dbe4}.parts button svg{width:18px;height:18px;color:var(--part-color,#6366f1)}.parts button.selected{background:var(--blue);color:white}.parts button.selected svg{color:white}.search-row{display:flex;align-items:center;gap:12px;margin-bottom:32px}.search{position:relative;flex:1}.search svg{position:absolute;top:15px;left:17px;color:#63758e}.search input{width:100%;height:50px;border:1px solid var(--line);border-radius:12px;background:#101114ed;color:var(--text);font-size:15px;padding:0 18px 0 48px;direction:ltr}.search input::placeholder{color:#4d5b6d}.search-row .action{height:46px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:13px;background:#111216;color:var(--muted);padding:0 16px;white-space:nowrap}.action:hover{color:white;border-color:#6366f170}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.study-card{display:flex;flex-direction:column;justify-content:space-between;min-height:132px;text-align:left;padding:20px;border:1px solid var(--line);border-radius:17px;background:#111217;transition:border .28s,transform .28s,background .28s,box-shadow .28s;width:100%;position:relative;overflow:hidden}.study-card:hover{border-color:#6366f150;background:#14151c;transform:translateY(-3px);box-shadow:0 8px 28px #6366f109}.study-card h3{font-weight:700;font-size:16px;line-height:1.5;margin:0;color:#e7eaf0}.study-card .subtitle{font-size:12px;color:#8997ad;margin:5px 0 0;line-height:1.6}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #ffffff08;margin-top:23px;padding-top:12px;min-height:36px}.badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:20px;padding:0 8px;font-weight:800;border:1px solid #3b82f648;color:#5da4ff;background:#3b82f61a;border-radius:6px;white-space:nowrap}.badge.purple{background:#a855f71c;border-color:#a855f741;color:#c585ff}.badge.gray{border-color:#ffffff1a;background:#ffffff08;color:#c4ccd8;font-size:11px}.badge.gold{color:#ffb100;background:#f59e0b13;border-color:#f59e0b30}.card-arrow{height:28px;width:28px;border-radius:12px;background:#ffffff06;color:var(--muted);display:grid;place-items:center;flex-shrink:0}.card-arrow svg{width:15px;height:15px}.card-arrow.locked{color:#eab308;background:#f59e0b10;border:1px solid #f59e0b30}.completed{color:#10b981}.duration{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}.duration svg{width:14px;height:14px}.writing-controls{display:flex;align-items:center;gap:16px;margin:28px 0 32px}.writing-controls .switch{width:340px;margin:0;flex-shrink:0}.writing-controls .search{width:100%}body[data-skill=schreiben] .hero-copy .eyebrow{color:var(--orange);border-color:#f59e0b40;background:#f59e0b15}body[data-skill=schreiben]{--accent:var(--orange)}body[data-skill=schreiben] .study-card{min-height:156px}body[data-skill=schreiben] .card-footer{margin-top:16px}.type-tag{margin-top:10px}.center-switch{margin-top:32px}body[data-skill=hoeren],body[data-skill=sprechen]{--accent:var(--blue)}body[data-skill=sprechen] .study-card{min-height:145px}body[data-skill=sprechen] .card-footer{margin-top:16px}body[data-skill=sprechen] .hero-copy .eyebrow,body[data-skill=hoeren] .hero-copy .eyebrow{color:#5da4ff;background:#3b82f610;border-color:#3b82f630}.listen-mode{width:296px;margin:24px auto 32px;display:flex;border:1px solid var(--line);border-radius:26px;background:#101114;height:62px;padding:6px;gap:6px}.listen-mode button{flex:1;font-size:18px;font-weight:800;color:var(--muted);border-radius:20px;display:flex;align-items:center;justify-content:center;gap:9px}.listen-mode .selected{background:linear-gradient(110deg,#2563eb,#4f46e5);color:white;box-shadow:0 5px 12px #2563eb30}.listening-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.listening-card{border:2px solid var(--line);border-radius:24px;background:#101114;padding:20px;min-height:226px;display:flex;flex-direction:column;justify-content:space-between}.listen-top{display:flex;justify-content:space-between;align-items:flex-start}.lock-large{width:56px;height:56px;display:grid;place-items:center;border-radius:17px;border:1px solid #f59e0b35;background:#f59e0b15;color:#ffb000}.listening-card h3{margin:17px 0 23px;font-size:20px;font-weight:900}.unlock{border:1px solid #f59e0b35;color:#ffb000;background:#f59e0b15;border-radius:17px;width:100%;height:58px;font-weight:900;font-size:18px;display:flex;justify-content:center;align-items:center;gap:12px}.empty{padding:60px;text-align:center;border:1px solid var(--line);border-radius:20px;color:var(--muted);grid-column:1/-1}.empty strong{display:block;color:var(--text);margin-bottom:8px}.float-progress{position:fixed;bottom:28px;right:28px;width:56px;height:56px;border-radius:50%;background:#009d78;color:white;border:0;box-shadow:0 8px 20px #0003;display:grid;place-items:center;z-index:9}.float-progress svg{height:27px;width:27px}
.session{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;animation:sessionIn .2s ease}.session-header{height:80px;padding:0 40px;display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);background:#0c0d10d9;flex-shrink:0}.back{padding:11px;border-radius:16px;background:#ffffff05;color:var(--muted);display:grid;place-items:center}.session-title{min-width:0;flex:1}.session-title h1{font-size:16px;font-weight:900;margin:3px 0 0;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-title small{font:700 8px Inter,sans-serif;letter-spacing:1px;color:#65778f;margin-left:8px}.session-title .badge{font-size:8px;line-height:14px;padding:0 6px}.session-tools{display:flex;align-items:center;gap:18px}.session-tools .round{border-radius:14px;height:42px;width:42px}.timer{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:8px 15px;display:flex;align-items:center;gap:8px;font:700 13px Inter,sans-serif;color:var(--muted);font-variant-numeric:tabular-nums}.stage-nav{display:flex;gap:4px;justify-content:center;max-width:650px}.stage-nav button{padding:8px 12px;border-radius:16px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}.stage-nav button.selected{background:#6366f125;color:#9394ff;border:1px solid #6366f150}.session-body{display:grid;grid-template-columns:minmax(0,1fr) 500px;min-height:0;flex:1}.passage-pane{padding:16px 32px 50px;overflow-y:auto;scroll-behavior:smooth}.passage-inner{max-width:1024px;margin:0 auto}.passage-heading{text-align:center;margin:0 0 36px}.passage-heading h2{font-size:36px;font-weight:900;letter-spacing:-1px;margin:0}.passage-heading small{display:block;margin-top:8px;font:700 8px Inter,sans-serif;letter-spacing:3px;color:#657182}.text-card{padding:28px;border-radius:18px;border:1px solid var(--line);background:#0e0f13;margin:0 0 24px;cursor:pointer;transition:border-color .25s,box-shadow .25s}.text-card.active{border-color:#8580ff;box-shadow:0 0 0 1px #6366f120,0 6px 30px #6366f112}.text-card .number{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;color:#a9b7c9;font-weight:900;margin-bottom:16px}.text-card p{font-size:var(--font-size);line-height:1.6;color:var(--text);white-space:pre-wrap;margin:0}.text-card .assignment{display:inline-flex;margin-left:12px;color:#a5a1ff;padding:4px 10px;font-size:12px;border:1px dashed #6366f180;border-radius:8px}.text-card .translation{margin-top:18px}.translation{font-size:13px;color:#6ed6b9;line-height:1.9;direction:rtl;white-space:pre-wrap;background:#10b98108;border:1px solid #10b98120;border-radius:12px;padding:14px;text-align:right}.translation.hidden{display:none}.quiz-pane{border-left:1px solid var(--line);background:#101116;display:flex;flex-direction:column;min-height:0;overflow:hidden}.quiz-heading{padding:24px 24px 22px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);min-height:100px}.quiz-heading h3{font-size:14px;font-weight:900;margin:0 0 8px}.progress-line{height:5px;width:96px;background:#ffffff06;border-radius:6px;display:inline-block;vertical-align:middle;overflow:hidden;margin-right:8px}.progress-line i{display:block;background:var(--accent);height:100%;transition:width .3s}.quiz-heading small{font:700 9px Inter,sans-serif;color:var(--muted)}.quiz-actions{display:flex;gap:8px}.quiz-actions button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#cbd5e1}.quiz-actions button svg{width:17px;height:17px}.quiz-content{padding:16px;overflow:auto;flex:1;scroll-behavior:smooth}.option{display:flex;align-items:stretch;width:100%;min-height:64px;border:1px solid var(--line);border-radius:17px;background:var(--bg);padding:0;text-align:left;margin-bottom:12px;overflow:hidden;font-size:13px;line-height:1.6;font-weight:800}.option:hover{border-color:#64748b;transform:translateY(-2px);box-shadow:0 4px 12px #0002}.option-letter{display:grid;place-items:center;align-self:stretch;width:55px;flex-shrink:0;background:#ffffff04;border-right:1px solid var(--line);color:#97a9bf;font-size:16px}.option-copy{flex:1;padding:16px;display:flex;justify-content:center;flex-direction:column;gap:5px}.option.selected{border-color:#6366f1;background:#6366f11c}.option.correct{border-color:#10b98180;background:#10b98115}.option.wrong{border-color:#f43f5e80;background:#f43f5e15}.option .option-translation{color:#4cccaa;font-size:12px;font-weight:600;direction:rtl;text-align:right}.question{margin-bottom:28px;scroll-margin:10px}.question-prompt{display:flex;align-items:flex-start;gap:12px;font-size:14px;font-weight:800;margin-bottom:16px}.question-prompt .qnum{color:#8885ff;font-size:13px;padding-top:2px;flex-shrink:0}.question-prompt p{margin:0}.question-prompt .translation{padding:8px;margin-top:8px;font-size:12px}.explanation{padding:14px;border:1px solid #3b82f630;background:#3b82f610;border-radius:12px;font-size:12px;line-height:1.9;text-align:right;direction:rtl;margin:10px 0 0;white-space:pre-wrap}.explanation strong{display:block;color:#64a4fa;margin-bottom:5px}.choices-inline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.choices-inline .option{display:block;padding:10px 5px;text-align:center;min-height:44px;font-size:13px;margin:0;border-radius:12px}.gap{display:inline-flex;justify-content:center;align-items:center;min-width:42px;padding:1px 10px;border:1px dashed #6366f190;border-radius:6px;background:#6366f115;color:#8e8dff;vertical-align:baseline;font-size:14px;font-weight:900;line-height:1.6}.gap.active{outline:2px solid #818cf8;outline-offset:2px}.gap.correct{color:#69d8b2;border-color:#10b981;background:#10b98120}.gap.wrong{color:#fda4af;border-color:#f43f5e;background:#f43f5e16}.grammar-text{padding:24px;font-size:var(--font-size);line-height:2.1;white-space:pre-wrap;color:var(--text)}.word-bank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.word-bank .option{min-height:52px;margin:0}.word-bank .option-letter{width:35px;font-size:12px}.word-bank .option-copy{padding:10px;font-size:12px}.gap-list{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.gap-list button{border:1px solid var(--line);background:#ffffff05;border-radius:8px;min-width:30px;height:30px;font-size:11px}.gap-list button.active{background:var(--accent);color:white}.gap-list button.answered{border-color:#10b98160}.situation-answer{width:100%;border:1px solid var(--line);border-radius:10px;padding:7px 12px;background:var(--bg);color:#b6c4d9;margin-top:10px}.session-footer{height:80px;border-top:1px solid var(--line);background:#101116ec;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;gap:12px;flex-shrink:0}.primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 28px;border-radius:17px;background:#6366f1;color:white;box-shadow:0 4px 12px #6366f122;font-weight:900;font-size:13px;border:1px solid #ffffff08;min-height:48px}.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary.green{background:#10b981;box-shadow:0 4px 12px #10b98122}.primary.orange{background:linear-gradient(110deg,#f59e0b,#f97316);box-shadow:0 4px 12px #f59e0b20}.secondary{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid var(--line);color:var(--muted);background:#ffffff03;padding:11px 20px;border-radius:13px;font-size:13px;font-weight:700;min-height:44px}.footer-nav{display:flex;gap:12px;align-items:center}.score-small{color:#9bb0ca;font:700 12px Inter,sans-serif}.mobile-session-tabs{display:none}.writing-body{grid-template-columns:1fr 1fr}.writing-body .passage-inner{max-width:700px}.writing-body .passage-heading{text-align:left;margin-bottom:24px}.writing-body h2{font-size:20px;letter-spacing:0}.writing-body .text-card{cursor:default;padding:24px}.writing-body .text-card p{font-size:14px;line-height:1.9}.task-list{list-style:none;margin:16px 0 0;padding:0}.task-list li{padding:15px;border:1px solid var(--line);border-radius:14px;background:#ffffff02;margin:10px 0;font-size:14px}.task-list label{display:flex;gap:10px;cursor:pointer}.task-list input{accent-color:#f59e0b}.editor-pane{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:#0e0f13}.editor-tools{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line);gap:12px}.special-chars{display:flex;gap:8px}.special-chars button{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:#ffffff05;color:var(--muted)}.word-count{font-size:11px;color:var(--muted)}.editor-pane textarea{flex:1;width:100%;background:none;border:0;color:#dce3ee;padding:32px;resize:none;font-size:18px;line-height:1.8;outline:none;min-height:180px}.editor-pane textarea::placeholder{color:#445164}.editor-status{padding:10px 20px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.speaking-note{background:#2563eb10;border:1px solid #2563eb25;padding:14px;border-radius:12px;color:var(--muted);font-size:12px;margin:20px 0}.speaking-prompts p{margin:12px 0;font-size:16px}.feedback{padding:24px;background:var(--surface);border-top:1px solid var(--line);font-size:13px;line-height:1.8;overflow:auto;max-height:35vh}.feedback h3{margin:0 0 12px;font-size:16px}.feedback ul{margin:10px 0;padding-left:20px}.feedback .limitation{color:var(--muted);font-size:12px}.feedback .good{color:#63d3a9}
dialog{color:var(--text);background:#111217;border:1px solid var(--line);border-radius:24px;padding:28px;max-width:600px;width:calc(100% - 32px);max-height:85vh;box-shadow:0 24px 80px #0009;overflow:auto}dialog::backdrop{background:#0009;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.dialog-head h2{font-size:22px;font-weight:900;margin:0}.dialog-head .round{width:30px;height:30px}.dialog-content{line-height:1.9;color:#b7c3d5;font-size:14px}.dialog-content p{margin:12px 0}.dialog-content strong{color:var(--text)}.dialog-content .primary,.dialog-content .secondary{margin-top:14px}.settings-row{padding:18px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px}.settings-row small{display:block;color:var(--muted);font-size:11px}.settings-row input[type=range]{width:180px;accent-color:var(--accent)}.settings-row input[type=file]{max-width:220px;font-size:11px}.results-total{text-align:center;margin-bottom:20px}.results-total strong{display:block;font:900 48px Inter,sans-serif;color:#8280ff}.results-total span{font-size:14px;color:var(--muted)}.result-row{padding:12px;border-radius:12px;border:1px solid var(--line);background:#ffffff02;margin:8px 0;display:flex;justify-content:space-between;gap:12px}.result-row .good{color:#10b981}.result-row .bad{color:#fb7185}.history-item{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px}.history-item small{display:block;color:var(--muted);font-size:11px}.availability{border:1px solid #f59e0b30;background:#f59e0b0a;border-radius:14px;padding:18px;color:#c4b08e}.dialog-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-top:20px}.list-editor{display:grid;gap:8px}.list-editor label{padding:10px 12px;border:1px solid var(--line);border-radius:10px;display:flex;gap:10px;align-items:center;cursor:pointer}.list-editor input{accent-color:#6366f1}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#20222de8;border:1px solid #6366f150;color:#e5e7f4;padding:12px 24px;border-radius:16px;z-index:300;backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90vw;font-size:13px;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.loading{padding:80px;text-align:center;color:var(--muted)}.muted{color:var(--muted)}.available-note{font-size:11px;color:var(--muted);text-align:center;margin:35px 0}.light{color-scheme:light;--bg:#f8f9fc;--surface:#fff;--surface2:#edf0f7;--line:#15244120;--line-soft:#15244112;--text:#172136;--muted:#65748b;--dim:#7b8798}.light:before{filter:invert(1)}.light .topbar,.light .parts,.light .switch,.light .search input,.light .study-card,.light .listening-card,.light .listen-mode,.light .quiz-pane,.light .session-header,.light .session-footer,.light .editor-pane,.light dialog,.light .text-card{background:#ffffffea}.light .hero h1,.light .hero-stat strong,.light .study-card h3,.light .brand strong,.light .session-title h1{color:#121b2e}.light .hero-stat{background:#fff}.light .nav a,.light .switch button,.light .parts button{color:#526174}.light .nav a.active{background:#e3e6ee;color:#172136;box-shadow:inset 0 0 0 1px #17213612}.light .switch button.selected,.light .parts button.selected{color:white}.light .profile strong{color:#172136}.light .option{background:#f8f9fc}.light .option.selected{background:#6366f118}.light .dialog-content{color:#526174}.light .editor-pane textarea{color:#172136}
::-webkit-scrollbar{width:8px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff16;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#ffffff25}.light ::-webkit-scrollbar-thumb{background:#15244126}@keyframes sessionIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes cardIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.cards{animation:cardIn .22s ease}
@media(max-width:1400px){.topbar,.workspace{margin-left:32px;margin-right:32px}.topbar{gap:16px;padding:8px 20px}.nav{flex-basis:500px}.utilities{gap:6px}.utilities>.pill:not(.profile){padding:8px 12px}.session-body{grid-template-columns:minmax(0,1fr) 430px}.writing-body{grid-template-columns:1fr 1fr}.stage-nav button{padding:7px 9px}.session-tools{gap:10px}}
@media(max-width:1150px){.topbar{gap:14px}.nav{flex:1;min-width:420px}.utilities>.pill:not(.profile),.utilities .bell{display:none}.profile strong,.profile .tiny{display:none}.profile{padding:4px;gap:0}.profile>svg{display:none}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.listening-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-nav{max-width:500px}.stage-nav button{font-size:11px}.session-header{padding:0 20px;gap:12px}.session-header .session-tools .timer{display:none}.session-body{grid-template-columns:minmax(0,1fr) 370px}.writing-body{grid-template-columns:1fr 1fr}.passage-pane{padding:16px 20px 40px}.text-card{padding:22px}.session-tools{gap:8px}}
@media(max-width:900px){.topbar{margin:12px 20px 0;height:auto;min-height:66px;flex-wrap:wrap;padding:12px 16px;border-radius:24px}.brand{flex:1}.nav{order:3;min-width:0;flex-basis:100%;height:46px}.workspace{margin:36px 20px 50px}.hero h1{font-size:40px}.hero-stat{height:92px;min-width:170px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.listening-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.listening-card{padding:16px}.listening-card h3{font-size:18px}.unlock{font-size:14px}.session-header{height:68px}.stage-nav{position:absolute;top:68px;left:0;right:0;height:48px;max-width:none;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;justify-content:flex-start;padding:6px 12px;z-index:2}.session.full-exam .session-body{margin-top:48px}.session.full-exam .mobile-session-tabs{margin-top:48px}.session.full-exam .session-body{margin-top:0}.session-body{grid-template-columns:1fr 350px}.writing-body{grid-template-columns:1fr 1fr}.passage-heading h2{font-size:29px}.session-tools .secondary{display:none}}
@media(max-width:700px){.topbar{margin:10px 12px 0}.brand strong{font-size:17px}.logo{width:32px;height:32px;font-size:22px}.nav a{padding:7px 6px;font-size:12px}.utilities .round{width:34px;height:34px}.utilities .profile{display:none}.workspace{margin:28px 16px 60px}.hero{height:100px}.hero h1{font-size:33px;letter-spacing:-1px}.hero-copy .eyebrow{font-size:8px;padding:0 5px;line-height:17px}.eyebrow:before,.eyebrow:after{margin:0 3px}.hero-stat{height:84px;min-width:120px;padding:12px;gap:12px;border-radius:14px}.stat strong{font-size:23px}.stat small{font-size:9px}.divider{height:42px}.switch{height:52px;width:240px;margin:20px auto 24px;padding:6px}.switch button{height:38px;font-size:13px}.parts{height:auto;min-height:58px;padding:6px;border-radius:22px;gap:3px;flex-wrap:wrap;margin-bottom:20px}.parts button{height:38px;flex:1 0 30%;font-size:12px;gap:6px}.parts button svg{width:15px;height:15px}.parts.speaking-parts button{flex:1;font-size:13px}.search-row{gap:8px;margin-bottom:20px}.search input{font-size:13px;height:48px}.search-row .action{padding:0 11px;height:44px}.search-row .action span{display:none}.cards{gap:12px}.study-card{padding:16px;min-height:140px;border-radius:16px}.study-card h3{font-size:14px}.study-card .subtitle{font-size:11px}.card-footer{margin-top:18px;padding-top:10px}.badges{gap:5px}.badge{font-size:9px;padding:0 6px}.writing-controls{flex-direction:column;gap:14px;margin:20px 0}.writing-controls .switch{width:100%}.listening-cards{grid-template-columns:1fr;gap:16px}.listening-card{min-height:210px}.listen-mode{margin-top:20px;height:56px;width:280px}.listen-mode button{font-size:16px}.float-progress{width:48px;height:48px;bottom:18px;right:18px}.session-header{padding:0 12px;height:64px;gap:12px}.back{padding:9px}.session-title h1{font-size:13px}.session-tools{gap:8px}.session-tools .round{width:34px;height:34px;border-radius:11px}.session-tools .timer{display:none}.mobile-session-tabs{display:flex;border-bottom:1px solid var(--line);padding:7px 12px;gap:6px;background:var(--surface);height:52px;flex-shrink:0}.mobile-session-tabs button{flex:1;border-radius:12px;color:var(--muted);font-size:12px;font-weight:900}.mobile-session-tabs button.selected{background:var(--accent);color:white}.session-body,.writing-body{display:block;position:relative;min-height:0;overflow:hidden}.passage-pane,.quiz-pane,.editor-pane{height:100%;width:100%;border:0;overflow:auto;display:none}.session[data-pane=text] .passage-pane{display:block}.session[data-pane=questions] .quiz-pane{display:flex}.session[data-pane=questions] .editor-pane{display:flex}.passage-pane{padding:16px 16px 40px}.passage-heading{margin-bottom:24px}.passage-heading h2{font-size:26px}.text-card{padding:20px;margin-bottom:16px}.text-card p{font-size:15px}.quiz-heading{min-height:88px;padding:18px}.quiz-content{padding:16px}.session-footer{padding:10px 12px;height:66px;gap:8px}.primary{min-height:42px;padding:10px 16px;border-radius:13px;font-size:11px}.footer-nav{gap:7px}.footer-nav .secondary{padding:8px 10px;min-height:40px;font-size:11px}.footer-nav .secondary span{display:none}.footer-nav .primary{padding:10px 13px}.score-small{font-size:10px}.session.full-exam .stage-nav{top:64px;height:48px}.session.full-exam .mobile-session-tabs{margin-top:48px}.session.full-exam .session-body{margin-top:0}.session-tools .font-button{display:none}.stage-nav button{flex:1;white-space:nowrap;font-size:10px}.editor-tools{padding:14px}.special-chars{gap:5px}.special-chars button{width:29px;height:29px}.editor-pane textarea{padding:20px;font-size:16px}.dialog-head h2{font-size:20px}dialog{padding:22px}.settings-row{flex-wrap:wrap}.writing-body .passage-heading{margin-bottom:16px}.writing-body .text-card{padding:20px}.feedback{padding:18px}.grammar-text{padding:8px;font-size:16px}.quiz-content .word-bank{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:390px){.hero h1{font-size:28px}.hero-copy .eyebrow{font-size:7px}.hero-stat{min-width:105px;gap:10px}.cards{grid-template-columns:1fr}.study-card{min-height:126px}.nav a{font-size:11px}.nav a:last-child{font-size:10px}}
[hidden]{display:none!important}.option:disabled{opacity:1}.option:disabled:hover{transform:none;box-shadow:none}.audio-player{width:100%;margin:0 0 24px}.audio-note{font-size:12px;color:var(--muted)}
@media(min-width:701px) and (max-width:900px){.session.full-exam .session-body{margin-top:48px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.card-arrow svg[data-icon="play"]{fill:currentColor;stroke:none}.study-card:hover h3{color:#60a5fa}.study-card:hover .card-arrow{background:#2563eb;color:white}.study-card .subtitle{margin-top:4px;line-height:18px}.center-switch{margin-top:30px}
.result-question{display:block}.result-prompt{display:block;margin-bottom:10px;color:var(--text)}.result-answers{display:grid;gap:8px}.result-answer{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;background:#ffffff03}.result-answer span{font-size:12px;flex-shrink:0}.result-answer strong{font-weight:700;text-align:right;overflow-wrap:anywhere;min-width:0}.result-answer.good{background:#10b9810a}.result-answer.bad{background:#fb71850a}@media(max-width:480px){.result-answer{align-items:flex-start;flex-direction:column;gap:3px}.result-answer strong{text-align:left}}
.dialog-content .result-answer strong{color:inherit}
.option.used{position:relative;background:var(--surface2);color:var(--muted);opacity:.5;filter:grayscale(1)}.option.used:hover{opacity:.75}.used-marker{position:absolute;right:-4px;top:-4px;border:2px solid var(--surface);border-radius:50%;background:#94a3b8;color:white;width:16px;height:16px;display:grid;place-items:center;font-size:7px}.clear-answer{display:block;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:7px 12px;margin-top:12px;font-size:12px;cursor:pointer}.clear-answer:hover{color:#fb7185;border-color:#fb718570}
.gap-correction{display:inline-block;vertical-align:baseline;color:#10b981;background:#10b98114;border:1px solid #10b98180;border-radius:8px;margin-left:6px;padding:0 8px;line-height:1.9;font-weight:700;font-size:.85em}.text-card.used-ad{opacity:.55;border-style:dashed}.situation-answer.correct,.situation-correction{color:#10b981}.situation-answer.wrong{color:#fb7185}.situation-correction{font-size:12px;margin-top:10px}
.result-section{border-bottom:1px solid var(--line);padding:6px 0}.result-section summary{cursor:pointer;padding:10px 0;display:flex;justify-content:space-between;gap:12px}.result-section summary span:before{content:'▸';margin-right:8px;color:var(--muted)}.result-section[open] summary span:before{content:'▾'}
.word-bank .option{flex-direction:column;align-items:center;justify-content:center;min-height:64px;padding:10px 16px;position:relative}.word-bank .option-letter{width:auto;border:0;background:none;font-size:9px;line-height:1.4;align-self:center;margin-bottom:3px}.word-bank .option-copy{padding:0;font-size:13px;text-align:center}.grammar-bank-session .passage-inner{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px 40px 32px}.grammar-bank-session .passage-heading{margin-bottom:24px}.grammar-bank-session .passage-heading h2{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.5px}.grammar-bank-session .grammar-text{padding:0;font-size:calc(var(--font-size) + 2px);line-height:1.8}.light .grammar-bank-session .passage-inner{background:white}@media(max-width:700px){.grammar-bank-session .passage-inner{padding:20px 18px}.grammar-bank-session .grammar-text{font-size:var(--font-size)}.word-bank .option{padding:10px;min-height:60px}}
.gap-holder{display:inline-flex;position:relative;vertical-align:baseline}.gap-remove{position:absolute;top:-8px;right:-7px;z-index:1;background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:50%;width:18px;height:18px;padding:0;display:grid;place-items:center;font-size:9px;opacity:0}.gap-holder:hover .gap-remove,.gap-holder:focus-within .gap-remove{opacity:1}.gap-remove:hover{color:#fb7185;border-color:#fb7185}@media(max-width:700px){.gap-remove{opacity:1}}
.option.used{overflow:visible}

/* Keep the original SVG geometry centered without stretching or text glyphs. */
.ui-icon{display:inline-block;aspect-ratio:1;overflow:visible}
.logo{width:36px;height:36px;border:0;border-radius:10px;font-style:normal}
.logo .brand-logo{display:block;width:100%;height:100%}
.round .ui-icon,.back .ui-icon{display:block}
/* Dialog controls must not inherit the browser's asymmetric button padding. */
#dialog-close{display:flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border-radius:50%;line-height:1}
#dialog-close .ui-icon{display:block;flex:none;width:18px;height:18px;aspect-ratio:1;stroke-width:1.8}
.dialog-head h2{min-width:0;overflow-wrap:anywhere;line-height:1.5}
.reference-mark{display:inline-grid;place-items:center;flex-shrink:0;min-width:18px;height:18px;padding:0 3px;border:1px solid #64748b45;border-radius:5px;background:#64748b0d;color:#8b9cb5;font:800 7px/1 Inter,sans-serif;letter-spacing:.2px;cursor:help;vertical-align:middle}
.reference-mark:hover{border-color:#818cf880;color:#a5b4fc;background:#6366f114}
.light .reference-mark{color:#52617a;background:#64748b08}
.listen-matched-title{display:flex;align-items:center;gap:8px;min-width:0}
.whatsapp-contact .whatsapp-icon{width:30px;height:30px;stroke:none}
.whatsapp-contact[hidden]{display:none}
.whatsapp-contact[href]{transition:background .2s,transform .2s}
.whatsapp-contact[href]:hover{background:#008c6b;transform:translateY(-2px)}

/* Five catalogue cards per row on desktop; retain the smaller-screen grids. */
/* Keep saved results and account navigation reachable on smaller screens. */
@media(max-width:1150px){.topbar .utilities .bell{display:grid}}
@media(max-width:700px){
 .topbar{gap:10px}.topbar .brand{gap:8px}
 .topbar .utilities .profile{display:flex;justify-content:center;width:34px;height:34px;padding:0;flex:none}
 .topbar .profile .avatar{width:26px;height:26px}
}
@media(max-width:360px){
 .topbar{padding:12px;gap:8px}.topbar .utilities{gap:4px}
 .topbar .utilities .round,.topbar .utilities .profile{width:30px;height:30px}
 .topbar .brand strong{font-size:15px}.topbar .brand small{font-size:7px}
 .topbar .logo{width:30px;height:30px}
}
@media(max-width:400px){
 .session-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;gap:8px;padding:10px 12px}
 .session-footer>#grade{justify-self:start}
 .session-footer>.score-small{min-width:0;text-align:right}
 .session-footer>.footer-nav{grid-column:1/-1;width:100%;min-width:0;justify-content:space-between}
 .session-footer .footer-nav .primary{flex:1;min-width:0;justify-content:center}
}
@media(min-width:1151px){
 .cards,.listening-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Custom favorites editor. Controls are siblings of the exercise button. */
.favorites-editing{padding-bottom:90px}
.search-row #edit-list.selected{color:#fbbf24;border-color:#d9921880;background:#f59e0b15}
.search-row #sort.custom-selected{color:#a5a1ff;border-color:#7771ff}
.favorites-banner{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #6366f140;background:#6366f10c;border-radius:14px;margin:-10px 0 24px}
.favorites-banner strong{font-size:14px;color:var(--text)}
.favorites-banner p{font-size:12px;color:var(--muted);margin:3px 0 0}
.favorites-banner-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#6366f1;color:white;flex:none}
.favorites-count{margin-inline-start:auto;color:#a5a1ff;font-size:12px;white-space:nowrap}
.favorite-card-wrap{position:relative;min-width:0;padding-bottom:34px}
.favorite-card-wrap .study-card{height:100%}
.favorite-card-wrap .study-card h3{padding-right:28px}
.favorite-card-wrap .variant-count{margin-right:28px}
.favorites-editing .study-card:hover{transform:none}
.favorites-editing .card-arrow{visibility:hidden}
.favorite-selected .study-card{border-color:#f59e0b65;background:color-mix(in srgb,var(--surface) 95%,#f59e0b)}
.favorite-star{position:absolute;right:14px;top:15px;width:28px;height:28px;padding:0;display:grid;place-items:center;color:var(--muted);border-radius:8px}
.favorite-star:hover{color:#fbbf24;background:#f59e0b12}
.favorite-star .ui-icon{width:17px;height:17px;stroke-width:1.7}
.favorite-star.selected{color:#fbbf24}
.favorite-star.selected .ui-icon{fill:#fbbf24}
.favorite-move{position:absolute;bottom:2px;right:5px;display:flex;align-items:center;gap:5px}
.favorite-move button{width:26px;height:26px;padding:0;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px}
.favorite-move button:hover:enabled{color:#fbbf24;border-color:#f59e0b70}
.favorite-move .ui-icon{width:15px;height:15px}
.favorite-position{font:700 10px Inter,sans-serif;color:var(--muted);min-width:18px;text-align:center}
.favorites-actions{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:20;padding:7px;background:var(--surface);border:1px solid var(--line);border-radius:40px;box-shadow:0 10px 35px #0005}
.favorites-actions .primary{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:30px;min-height:44px;white-space:nowrap}
.favorites-cancel{background:#e82d36}
.editing-favorites .whatsapp-contact{display:none}
@media(max-width:700px){.favorites-banner{align-items:flex-start;flex-wrap:wrap}.favorites-count{margin-inline-start:52px}.favorites-actions{bottom:12px;max-width:calc(100% - 24px)}.favorite-card-wrap .study-card{padding:16px}.favorite-star{right:10px;top:11px}}
.restore-options{display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:0;max-width:100%}
.restore-options input{max-width:100%}
.backup-label{display:block;margin-bottom:10px;color:var(--muted)}
.backup-json{display:block;width:100%;box-sizing:border-box;min-height:180px;padding:14px;resize:vertical;font:13px/1.6 monospace;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}
#backup-error{color:#ef4444;overflow-wrap:anywhere}

/* DeutschWeg identity: a route in mint and cyan, shared by the header and browser icon. */
.brand .logo{box-shadow:0 4px 16px #14b8a624}
.brand .brand-logo{object-fit:contain}