:root{--ink:#141913;--muted:#687064;--paper:#f3f0e7;--panel:#fffdf8;--line:#d8d5cb;--lime:#c7f45f;--green:#55781a}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Noto Sans SC",system-ui,sans-serif}.topbar{height:68px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(243,240,231,.96)}.brand{display:flex;align-items:center;color:var(--ink);font-weight:800;text-decoration:none}.brand b{width:34px;height:34px;margin-right:9px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--lime)}.top-actions{display:flex;align-items:center;gap:16px}.top-actions a{color:var(--muted);text-decoration:none;font-size:13px}.badge{padding:7px 11px;border-radius:999px;background:var(--lime);font-size:12px;font-weight:800}.layout{height:calc(100vh - 68px);display:grid;grid-template-columns:350px minmax(0,1fr)}.catalog{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel)}.catalog-head{padding:22px;border-bottom:1px solid var(--line)}.eyebrow{margin:0;color:var(--green);font-size:11px;font-weight:800;letter-spacing:.15em}.catalog h1{margin:7px 0 14px;font-size:28px}.categories{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}.categories button{padding:9px 5px;border:1px solid var(--line);border-radius:10px;background:white;font-size:12px;font-weight:750;cursor:pointer}.categories button.active{background:var(--ink);border-color:var(--ink);color:white}#search{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:white;font:inherit;outline:none}.lesson-list{padding:10px;overflow:auto}.lesson{width:100%;display:grid;grid-template-columns:42px 1fr;gap:10px;padding:12px;border:1px solid transparent;border-radius:13px;background:transparent;text-align:left;cursor:pointer}.lesson:hover{background:#f2f5eb}.lesson.active{background:#efffd1;border-color:#90b849}.lesson-num{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#e8e6de;font-size:12px;font-weight:800}.lesson.active .lesson-num{background:var(--green);color:white}.lesson strong{display:block;margin-bottom:3px;font-size:14px}.lesson small{color:var(--muted)}.reader{min-width:0;min-height:0;display:flex;flex-direction:column;background:white}.lesson-head{min-height:72px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.lesson-head small{color:var(--green);font-weight:800}.lesson-head h2{margin:3px 0 0;font-size:20px}.lesson-nav{display:flex;gap:7px}.lesson-nav button,.player-card button,.player-card select,.transcript-head button{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);font:inherit;font-size:12px;font-weight:750;cursor:pointer}.player-card{margin:18px 22px 12px;padding:14px 16px;display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.play{width:44px;height:44px;padding:0!important;background:var(--lime)!important;font-size:17px!important}.progress-wrap{min-width:120px;flex:1}.progress-wrap input{width:100%;accent-color:var(--green)}.times{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.transcript-head{padding:8px 26px 12px;display:flex;align-items:center;justify-content:space-between}.transcript-head strong{display:block}.transcript-head span{color:var(--muted);font-size:12px}.transcript{padding:4px 22px 100px;overflow:auto;scroll-behavior:smooth}.line{width:100%;padding:14px 16px;display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.line:hover{background:#f5f7f0}.line.active{background:#efffd1;border-color:#90b849}.line time{padding-top:2px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.line p{margin:0;font-size:18px;line-height:1.6}.line .speaker{margin-right:6px;color:var(--green);font-weight:800}.empty{padding:36px;text-align:center;color:var(--muted)}@media(max-width:800px){.layout{height:auto;display:block}.catalog{height:420px;border-right:0}.reader{min-height:760px}.top-actions .badge{display:none}.player-card{margin:12px;flex-wrap:wrap}.progress-wrap{order:3;flex-basis:100%}.transcript{max-height:650px;padding:4px 12px 80px}.line{grid-template-columns:48px 1fr}.line p{font-size:16px}}