:root{--bg:#f4f6f9;--surface:#fff;--text:#1a2332;--muted:#5c6b7f;--accent:#c41e3a;--accent-soft:#fff0f3;--link:#0b5cab;--border:#dde3ec;--ok:#1a7f4b;--ok-soft:#e8f6ee;--warn:#b26a00;--warn-soft:#fff5e2;--radius:14px;--shadow:0 2px 12px #1a23320f}*{box-sizing:border-box}html,body{margin:0;padding:0}body{color:var(--text);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}a{color:var(--link);text-decoration:none}a:hover{color:var(--accent)}.site-header{color:#fff;z-index:100;background:linear-gradient(135deg,#1a2332 0%,#2d3f5c 100%);position:sticky;top:0;box-shadow:0 2px 16px #00000026}.header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:1320px;margin:0 auto;padding:.8rem 1.25rem;display:flex}.brand{color:#fff;align-items:center;gap:.6rem;font-size:1.1rem;font-weight:700;display:flex}.brand small{opacity:.75;font-size:.85rem;font-weight:400}.header-nav{align-items:center;gap:.4rem;display:flex}.header-nav a,.header-nav button{color:#ffffffe6;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:.35rem .7rem;font-family:inherit;font-size:.88rem;font-weight:500}.header-nav a:hover,.header-nav button:hover{color:#fff;background:#ffffff24}.wrap{max-width:1320px;margin:0 auto;padding:1.4rem 1.25rem 3rem}.cols{grid-template-columns:380px 1fr;align-items:start;gap:1.2rem;display:grid}.cols-lesson{grid-template-columns:1fr 380px;align-items:start;gap:1.2rem;display:grid}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.2rem}.panel+.panel{margin-top:1rem}.panel h2{margin:0 0 .8rem;font-size:1.05rem}.panel h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .6rem;font-size:.75rem}button,input,select,textarea{font-family:inherit;font-size:.92rem}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:.45rem;padding:.6rem 1.1rem;font-weight:600;transition:filter .12s,background .12s;display:inline-flex}.btn:hover:not(:disabled){background:#f7f9fc}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.08)}.btn-ghost{background:0 0}.btn-big{width:100%;padding:.9rem 1.6rem;font-size:1.02rem}.btn-row{flex-wrap:wrap;gap:.5rem;display:flex}input[type=text],input[type=password],input[type=number],select,textarea{border:1px solid var(--border);width:100%;color:var(--text);background:#fff;border-radius:9px;padding:.55rem .7rem}input:focus,select:focus,textarea:focus{outline-offset:-1px;outline:2px solid #9dc0ea}textarea{resize:vertical;min-height:90px;line-height:1.5}label.field{margin-bottom:.9rem;display:block}label.field>span{color:var(--muted);margin-bottom:.25rem;font-size:.8rem;font-weight:600;display:block}label.field small{color:var(--muted);margin-top:.2rem;font-size:.75rem;font-weight:400;display:block}.grid2{grid-template-columns:1fr 1fr;gap:0 .8rem;display:grid}.tabs{flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem;display:flex}.tab{border:1px solid var(--border);cursor:pointer;color:var(--muted);background:#fff;border-radius:999px;padding:.4rem .8rem;font-size:.85rem;font-weight:600}.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.topic-list{max-height:52vh;margin:0 -.4rem;padding:0 .4rem;overflow-y:auto}.topic{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;width:100%;margin-bottom:.15rem;padding:.5rem .6rem;display:block}.topic:hover{background:var(--accent-soft)}.topic.active{background:var(--accent);color:#fff;border-color:var(--accent)}.topic .n{margin-right:.35rem;font-weight:700}.topic .t{font-size:.9rem;line-height:1.3}.topic .s{color:var(--muted);font-size:.78rem;display:block}.topic.active .s{color:#ffffffd9}.modes{grid-template-columns:repeat(2,1fr);gap:.6rem;display:grid}.mode{text-align:left;border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:12px;padding:.8rem .9rem}.mode:hover{border-color:#b9c6d8}.mode.active{border-color:var(--accent);background:var(--accent-soft)}.mode b{margin-bottom:.15rem;font-size:.98rem;display:block}.mode span{color:var(--muted);font-size:.82rem;line-height:1.4}.stage-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1rem;padding:.7rem 1.1rem;display:flex}.pill{color:var(--muted);background:#eef2f7;border-radius:999px;align-items:center;gap:.35rem;padding:.22rem .65rem;font-size:.8rem;font-weight:600;display:inline-flex}.pill-live{background:var(--ok-soft);color:var(--ok)}.pill-warn{background:var(--warn-soft);color:var(--warn)}.pill-err{background:var(--accent-soft);color:var(--accent)}.orb-row{align-items:center;gap:1rem;display:flex}.orb{background:#e6ebf2;border-radius:50%;flex:none;place-items:center;width:54px;height:54px;font-size:1.4rem;transition:transform .1s,box-shadow .15s,background .15s;display:grid}.orb.listening{background:var(--ok-soft);box-shadow:0 0 0 6px #1a7f4b1f}.orb.speaking{background:var(--accent-soft);box-shadow:0 0 0 6px #c41e3a1f}.meter{background:#e6ebf2;border-radius:3px;flex:1;height:6px;overflow:hidden}.meter i{background:var(--ok);width:0;height:100%;transition:width 80ms linear;display:block}.transcript{max-height:58vh;padding-right:.3rem;overflow-y:auto}.turn{gap:.6rem;margin-bottom:.85rem;display:flex}.turn .who{background:#eef2f7;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-size:.95rem;display:grid}.turn.teacher .who{background:var(--accent-soft)}.turn.student .who{background:var(--ok-soft)}.turn .body{flex:1;min-width:0}.turn .body b{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem}.turn .body p{white-space:pre-wrap;word-wrap:break-word;margin:.1rem 0 0}.turn.system .body p{color:var(--muted);font-size:.88rem;font-style:italic}.card-md{font-size:.92rem}.card-md table{border-collapse:collapse;width:100%;margin:.5rem 0;font-size:.86rem}.card-md th,.card-md td{border:1px solid var(--border);text-align:left;padding:.3rem .5rem}.card-md th{background:#f3f6fa}.card-md p{margin:.4rem 0}.card-md ul{margin:.4rem 0;padding-left:1.2rem}.card-md code{background:#f3f6fa;border-radius:4px;padding:.1rem .3rem}.err-item{border-left:3px solid var(--accent);margin-bottom:.6rem;padding:.35rem 0 .35rem .6rem;font-size:.86rem}.err-item.drobny{border-left-color:#c9a227}.err-item .bad{color:var(--accent);text-decoration:line-through}.err-item .good{color:var(--ok);font-weight:600}.err-item .rule{color:var(--muted);margin-top:.15rem;font-size:.8rem;display:block}.result-card{background:var(--ok-soft);border:1px solid #bfe3cd;border-radius:12px;padding:1rem}.result-card .score{color:var(--ok);font-size:2.4rem;font-weight:700;line-height:1}.notice{background:var(--warn-soft);border:1px solid #f0d9a8;border-radius:10px;margin-bottom:1rem;padding:.7rem .9rem;font-size:.88rem}.notice.error{background:var(--accent-soft);border-color:#f2c3cc}.muted{color:var(--muted);font-size:.85rem}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}.sess-item{border-bottom:1px solid var(--border);cursor:pointer;padding:.6rem 0}.sess-item:hover{background:#f7f9fc}.sess-item.active{background:var(--accent-soft)}.log{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.88rem;line-height:1.55}.controls{border-top:1px solid var(--border);flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding-top:1rem;display:flex}.controls-primary,.controls-quick{flex-wrap:wrap;gap:.5rem;display:flex}.orb-sm{flex:none;width:40px;height:40px;font-size:1rem}.meter-top{width:100%;height:4px}.phone-only{display:none}@media (max-width:1000px){.cols,.cols-lesson,.modes,.grid2{grid-template-columns:1fr}}@media (max-width:820px){.desk-only{display:none}.orb.phone-only{display:grid}.meter.phone-only{display:block}.wrap{padding:.8rem .75rem 1.5rem}.panel{border-radius:12px;padding:.9rem 1rem}.panel+.panel{margin-top:.75rem}.cols,.cols-lesson{gap:.75rem}input[type=text],input[type=password],input[type=number],select,textarea{padding:.65rem .75rem;font-size:16px}.btn{min-height:46px;padding:.7rem 1rem;font-size:.95rem}.btn-big{padding:.85rem 1rem}.tab{min-height:40px;padding:.5rem .9rem;font-size:.88rem}.topic{min-height:46px;padding:.7rem}.header-inner{gap:.4rem;padding:.55rem .75rem}.brand{font-size:1rem}.brand small{display:none}.header-nav{gap:.2rem}.header-nav a,.header-nav button{padding:.4rem .5rem;font-size:.85rem}.header-nav .pill{display:none}.topic-list{max-height:44vh}.mode{padding:.7rem .85rem}.mode b{font-size:.95rem}.mode span{font-size:.82rem}.start-bar{z-index:90;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #1a233214}.start-bar .btn{margin:0}.stage-bar{gap:.4rem;padding:.55rem .8rem;font-size:.85rem}.pill-title{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.transcript{max-height:none;overflow:visible}.turn .who{width:30px;height:30px;font-size:.85rem}.card-md{overflow-x:auto}.card-md table{width:max-content;min-width:100%}.cols-lesson{flex-direction:column;align-items:stretch;display:flex}.lesson-side{display:contents}.lesson-result{order:1}.lesson-card{order:2}.lesson-main{order:3}.lesson-errors{order:4}.lesson-stages{order:5}.lesson-side>.panel{margin-top:0}.controls{z-index:90;padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface);flex-direction:column;gap:.45rem;margin:0;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #1a233214}.controls-primary{flex-wrap:nowrap;align-items:center}.controls-primary .btn{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.controls-quick{scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;min-width:0;max-width:100%;padding-bottom:2px;overflow-x:auto}.controls-quick::-webkit-scrollbar{display:none}.controls-quick .btn{flex:none;min-height:40px;padding:.5rem .85rem}body:has(.start-bar) .wrap{padding-bottom:5.5rem}body:has(.controls) .wrap{padding-bottom:9.5rem}}