/* СлайдПро: общая идентичность и учебные экраны поверх функциональных компонентов. */
:root { --sp-line:var(--c-line); --sp-muted:var(--c-ink-2); }
body { -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font-family:inherit; }
a, button { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.lwm, .brand, .home__logo { display:inline-flex; align-items:center; gap:0; letter-spacing:-.8px; text-decoration:none; font-size:24px; font-weight:750; white-space:nowrap; }
.lwm::before, .brand::before, .home__logo::before { content:''; width:36px; height:36px; flex:none; background:url('/static/brand.svg?v=saffron1') center/contain no-repeat; margin-right:10px; }
.lwm b, .brand b, .home__logo b { color:var(--text-primary); font-weight:750; }
.quiet-link { color:var(--c-ink-2); font-size:14px; font-weight:550; text-decoration:none; display:inline-flex; align-items:center; min-height:48px; }
.quiet-link:hover { color:var(--c-ink); }
.eyebrow { display:block; font-size:11px; font-weight:750; letter-spacing:1.6px; color:var(--c-ink); line-height:1.6; }
.btn, .btnp, .btng, .pshow, .emptybtn { transition:background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), scale var(--motion-fast); }
.btn:active, .btnp:active, .btng:active, .pshow:active, .emptybtn:active { scale:.96; }
.btn svg { flex:none; width:20px; height:20px; }
.finp { border-color:var(--sp-line); border-radius:var(--r-card); background:#fff; min-height:52px; }
.finp:focus { border-color:var(--c-ink); box-shadow:none; }
.lform { box-shadow:none; border-color:var(--sp-line); }
.flab { color:var(--c-ink); font-size:13px; font-weight:650; }
.topbar { border-bottom:1px solid var(--sp-line); background:#fff; }
.topbar .lwm { font-size:22px; }
.topbar .libtn:hover, .libtn:hover { background:var(--c-neutral-surface); }
.ava { background:var(--c-neutral-surface); color:var(--c-ink); font-weight:700; }
.tybdg { background:var(--c-paper); }
.sheet { border-radius:var(--r-card); }
.dlg { border-radius:var(--r-card); width:min(600px,calc(100% - 32px - var(--sal) - var(--sar))); left:50%; right:auto; transform:translate(-50%,-50%); max-height:calc(100% - 32px - var(--sat) - var(--sab)); overflow:auto; overscroll-behavior:contain; }

/* Статус сохранения входит в панель редактора и не сдвигает его сетку. */
.es .etop { background:var(--c-black); border-bottom:1px solid #ffffff16; gap:12px; }
.es .etop .saved { margin-right:auto; color:var(--suc); }
.es .etop .saved--pending { color:var(--d-ts); }
.es .etop .saved--err { color:var(--dan); }
.es .ezone { background:var(--c-black); }
.es .etabs { margin-bottom:12px; }
@media(max-width:700px){.es .etop{flex-wrap:wrap;gap:6px}.es .etop .saved{order:5;flex-basis:100%;margin:0;text-align:center}.es .etop .btn{min-height:44px;padding:0 14px}}

/* Вход и регистрация: форма сразу видна, без рекламного блока. */
.auth-screen { overflow:auto; }
.auth-screen .lnav { padding:24px 5%; min-height:88px; }
.auth-layout { width:min(440px,calc(100% - 40px)); margin:auto; display:flex; justify-content:center; padding:32px 0 48px; }
.note-dot { width:7px; height:7px; border-radius:50%; background:var(--c-success-lt); }
.auth-form.lform { min-width:0; width:100%; max-width:440px; margin:0; padding:34px; gap:20px; border-radius:var(--r-card); }
.auth-tabs { display:flex; background:var(--c-neutral-surface); padding:4px; border-radius:var(--r-card); gap:4px; }
.auth-tab { min-width:0; flex:1; min-height:44px; border:0; background:transparent; border-radius:var(--r-card); font-size:13px; font-weight:650; color:var(--c-ink-2); cursor:pointer; }
.auth-tab.is-active { background:#fff; color:var(--c-ink); box-shadow:none; }
.form-heading { padding:8px 0 2px; }
.form-heading .ftt { font-size:27px; letter-spacing:-.8px; margin:0 0 10px; }
.form-heading .fsub { margin:0; line-height:1.6; }
.auth-form .fld { gap:8px; }
.auth-form .btnp { margin-top:2px; }
.text-button { background:none; border:0; min-height:40px; color:var(--c-ink); cursor:pointer; font-size:14px; font-weight:600; }
.auth-legal, .auth-fine { text-align:center; font-size:12px; line-height:1.6; color:var(--sp-muted); margin:0; }
.auth-legal { border-top:1px solid var(--sp-line); padding-top:18px; }
.auth-footer { padding:20px; text-align:center; font-size:12px; color:var(--sp-muted); }

/* Библиотека: весь рабочий экран прокручивается единым документом. */
.library-nav { padding:16px max(28px,calc((100vw - 1160px)/2)); gap:28px; min-height:82px; flex:none; }
.library-nav .nav-current { align-self:stretch; display:flex; align-items:center; font-size:14px; font-weight:650; color:var(--c-ink); position:relative; }
.nav-current::after { content:''; height:3px; background:var(--c-saffron); position:absolute; bottom:-16px; left:0; right:0; border-radius:var(--r-card); }
.library-nav .quiet-link { margin-left:auto; }
.library-main { width:100%; padding:44px max(28px,calc((100% - 1160px)/2)) 56px; overflow:auto; min-height:0; flex:1; }
.library-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:36px; }
.library-heading h1 { font-size:36px; letter-spacing:-1.2px; font-weight:720; line-height:1.2; margin:10px 0; }
.library-heading p { font-size:15px; line-height:1.6; color:var(--sp-muted); margin:0; }
.library-actions { display:flex; align-items:center; gap:10px; flex:none; }
.library-actions .btn { min-height:48px; padding:0 18px; font-size:14px; gap:8px; display:inline-flex; align-items:center; justify-content:center; }
.screen--light .bp { background:var(--c-saffron); color:var(--c-on-saffron); }
.screen--light .bp:hover { background:var(--c-saffron-hover); }
.screen--light .bgh { color:var(--c-ink-2); }
.library-actions .bgh { border:1px solid var(--sp-line); background:#fff; }
.library-actions .bgh:hover { background:var(--c-neutral-surface); }
.section-heading, .library-toolbar { display:flex; align-items:center; gap:12px; }
.section-heading { margin-bottom:12px; }
.section-heading h2, .library-toolbar h2 { font-size:16px; font-weight:650; letter-spacing:-.2px; margin:0; }
.section-heading>span, .library-toolbar h2 span { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; border-radius:var(--r-card); background:var(--c-neutral-surface); color:var(--c-ink-2); font-size:12px; margin-left:5px; }
.upcoming { margin-bottom:36px; }
.library-screen .lesson-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0; }
.lesson-row { display:flex; align-items:center; gap:14px; text-align:left; border:1px solid var(--sp-line); border-radius:var(--r-card); padding:17px; background:#fff; color:var(--c-ink); cursor:pointer; min-width:0; transition:border-color var(--motion-fast),background-color var(--motion-fast); }
.lesson-row:hover { background:var(--c-paper); border-color:var(--c-ink); }
.lesson-symbol { width:40px; height:44px; background:var(--c-neutral-surface); color:var(--c-ink); border-radius:var(--r-card); display:grid; place-items:center; flex:none; }
.lesson-symbol svg { width:21px; height:21px; }
.lesson-info { flex:1; min-width:0; display:grid; gap:6px; }
.lesson-info strong { font-size:14px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lesson-info small { color:var(--sp-muted); font-size:12px; }
.lesson-code { font:600 15px var(--font-mono); letter-spacing:1px; color:var(--c-ink-2); }
.lesson-arrow { color:var(--sp-muted); font-size:18px; }
.library-toolbar { margin-bottom:20px; }
.library-screen .ksearch { padding:0; margin:0 0 0 auto; width:min(280px,40%); max-width:none; }
.library-screen .ksearch::before { left:14px; }
.library-screen .qinp { min-height:48px; background:white; border-radius:var(--r-card); border-color:var(--sp-line); padding-left:40px; font-size:16px; }
.library-screen .view-toggle { width:44px; min-height:44px; height:44px; background:white; border:1px solid var(--sp-line); border-radius:var(--r-card); }
.library-screen .klist { width:100%; max-width:none; padding:0; margin:0; overflow:visible; flex:none; }
.library-screen .klist.kgal { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.library-screen .bcard, .library-screen .pcard { border-color:var(--sp-line); box-shadow:none; overflow:hidden; transition:box-shadow var(--motion-fast),border-color var(--motion-fast); }
.library-screen .bcard:hover, .library-screen .pcard:hover { border-color:var(--c-ink); box-shadow:none; }
.library-screen .bcov, .library-screen .bcovbox { aspect-ratio:16/10; min-height:0; object-fit:contain; background-color:var(--c-neutral-surface); border-bottom:1px solid var(--sp-line); }
.library-screen .brow { padding:18px; flex-direction:column; align-items:stretch; gap:16px; }
.library-screen .brow .pmain { gap:7px; }
.library-screen .pname { font-size:16px; font-weight:650; line-height:1.45; letter-spacing:-.2px; }
.library-screen .pmeta { font-size:12px; color:var(--sp-muted); }
.library-screen .brow .pshow { width:100%; margin:0; background:var(--c-white); color:var(--c-ink); border:1px solid var(--c-line); min-height:44px; font-size:13px; border-radius:var(--r-card); }
.library-screen .brow .pshow:hover { background:var(--c-neutral-surface); }
.library-screen .cardmenu { background:#ffffffec; color:var(--c-ink-2); border:1px solid #00000012; border-radius:var(--r-card); width:36px; height:36px; }
.library-screen .empty { padding:48px 20px; border:1px dashed var(--c-line); border-radius:var(--r-card); background:#fff; margin:0; }

/* Подготовка занятия и раздатка используют те же поля и интервалы. */
.lesson-screen { overflow:auto; padding:30px 20px; }
.lesson-screen .lform { width:min(100%,520px); padding:32px; gap:24px; }
.lesson-screen .fld { gap:9px; color:var(--c-ink-2); font-size:13px; font-weight:600; }
.lesson-screen .ftt { font-size:29px; margin:4px 0 0; letter-spacing:-1px; }
.lesson-screen .fsub { margin:0; font-weight:400; }
.lesson-screen .btn { min-height:52px; }
.dlg .bgh { color:var(--d-ts); }
.handout { border:1px solid var(--d-brd); border-radius:var(--r-card); padding:16px; color:var(--d-tp); }
.handout .finp { color:var(--c-ink); }
.handout label { gap:12px; padding:4px 0; line-height:1.5; }
.handout input { accent-color:var(--accent); flex:none; }
.handout legend { padding:0 8px; font-size:14px; }
.handout p { font-size:13px; line-height:1.6; color:var(--text-secondary); }
#connscreen .qrcard { border-radius:var(--r-card); box-shadow:none; }
#connscreen .qcode { font-variant-numeric:tabular-nums; letter-spacing:6px; }
/* Приглашение группы прокручивается целиком: нижняя кнопка не закрывает ссылки. */
#connscreen { display:flex; flex-direction:column; overflow:auto; padding:72px 24px 28px; background:var(--c-black); }
#connscreen .hcol { position:static; inset:auto; display:grid; grid-template-columns:300px minmax(0,1fr); align-items:center; gap:18px 40px; padding:0; width:min(800px,100%); margin:auto; }
#connscreen .htitle { grid-column:1 / -1; margin-bottom:10px; font-size:25px; line-height:1.35; overflow-wrap:anywhere; }
#connscreen .qrcard { grid-column:1; grid-row:2 / 6; width:100%; max-width:300px; }
#connscreen .qor { grid-column:1; grid-row:6; text-align:center; font-size:13px; line-height:1.5; }
#connscreen .qcode { grid-column:2; grid-row:2; text-align:center; font-size:48px; }
#connscreen a.connlink { grid-column:2; grid-row:3; }
#connscreen button.connlink { grid-column:2; grid-row:4; }
#connscreen .connlink { color:var(--d-tp); background:var(--c-coal-2); border:1px solid var(--c-coal-brd); justify-content:center; margin:0; text-align:center; font-size:14px; }
#connscreen .connlink:hover { color:#fff; background:var(--c-coal); }
#connscreen .ready { grid-column:2; grid-row:5; font-size:13px; line-height:1.6; }
#connscreen .qwarn { grid-column:1 / -1; color:var(--d-ts); font-size:13px; line-height:1.6; }
#connscreen .padv { position:static; width:min(800px,100%); margin:28px auto 0; padding:0 0 var(--sab); flex:none; }
#connscreen .tip { color:var(--d-ts); }
#connscreen .connerr { grid-column:1 / -1; width:100%; margin:auto; }
@media(max-width:700px){#connscreen{padding:80px 20px 24px}#connscreen .hcol{display:flex;gap:14px;margin:0 auto}#connscreen .htitle{font-size:21px;margin:0}#connscreen .qrcard{max-width:210px;border-radius:var(--r-card)}#connscreen .qcode{font-size:36px}#connscreen .connlink{width:100%;max-width:360px}#connscreen .ready{max-width:340px}#connscreen .padv{margin-top:24px}}

/* Вход студента — шесть цифр, без регистрации и лишних шагов. */
.join-page { min-height:100svh; height:auto; display:flex; flex-direction:column; background:var(--c-paper); color:var(--c-ink); }
.join-nav { display:flex; align-items:center; justify-content:space-between; padding:24px 5%; gap:20px; }
.join-page .home { position:relative; inset:auto; padding:42px 30px; margin:auto; width:min(500px,calc(100% - 32px)); border:1px solid var(--sp-line); background:white; border-radius:var(--r-card); box-shadow:none; gap:18px; }
.join-emblem { width:56px; height:56px; border-radius:var(--r-card); background:var(--c-saffron); color:var(--c-ink); display:grid; place-items:center; font-size:26px; }
.join-page h1 { font-size:29px; font-weight:700; letter-spacing:-1px; line-height:1.2; text-align:center; margin:5px 0 0; }
.join-intro { text-align:center; font-size:15px; color:var(--sp-muted); line-height:1.65; margin:0; max-width:330px; }
.join-page .cells { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); width:100%; gap:8px; margin:12px 0 0; }
.join-page .cell { width:100%; height:66px; min-width:0; border-radius:var(--r-card); background:var(--c-paper); border-color:var(--c-line); color:var(--c-ink); font-size:30px; }
.join-page .home:focus-within .cell { border-color:var(--c-ink); }
.join-page .home__hint { text-align:center; font-size:13px; line-height:1.5; margin:0; }
.join-page .cell--err { border-color:var(--danger)!important; }
.join-page .home__foot { position:static; padding:32px 16px 20px; gap:0; }
.join-page .home__links { gap:8px; }
.join-page .home__links a { font-size:12px; }
.join-page .home__input { top:50%; left:50%; }

@media(min-width:768px){.sheet{max-width:520px;left:50%;right:auto;transform:translateX(-50%);width:100%}}
@media(max-width:1050px){.library-heading{align-items:flex-start;flex-direction:column}.library-screen .klist.kgal{grid-template-columns:repeat(2,minmax(0,1fr))}.library-screen .lesson-list{grid-template-columns:1fr}}
@media(max-width:700px){
 .auth-screen .lnav,.join-nav{padding:16px 20px}.lwm,.brand,.home__logo{font-size:21px}.lwm::before,.brand::before,.home__logo::before{width:30px;height:30px;margin-right:8px}
 .auth-layout{padding:24px 0}.auth-form.lform{margin:auto;padding:24px;gap:18px}.auth-footer{font-size:11px}
 .library-nav{padding:12px 20px;gap:20px;min-height:70px}.library-nav .nav-current{display:none}.library-nav .quiet-link{font-size:12px}.library-nav .ava{width:36px;height:36px;font-size:12px}.library-main{padding:28px 20px 40px}.library-heading{gap:22px;margin-bottom:28px}.library-heading h1{font-size:29px}.library-heading p{font-size:13px}.library-actions{width:100%;gap:8px}.library-actions .btn{padding:0 12px;font-size:12px;flex:1}.library-actions .btn svg{width:17px;height:17px}.library-screen .klist.kgal{gap:14px}.library-toolbar{flex-wrap:wrap;gap:8px}.library-toolbar h2{flex:1}.library-screen .ksearch{order:3;width:100%;margin:4px 0 0}.library-screen .lesson-row{padding:13px;gap:10px}.lesson-code{font-size:13px}.lesson-symbol{width:32px;height:38px}.lesson-info strong{font-size:13px}.lesson-info small{font-size:11px}.upcoming{margin-bottom:28px}
 .join-page h1{font-size:26px}.join-page .home{padding:30px 20px}.join-page .cell{height:58px;font-size:27px}.join-nav .quiet-link{font-size:12px}.join-page .home__foot{padding-top:24px}.join-intro{font-size:14px}
 .lesson-screen{padding:20px 12px}.lesson-screen .lform{padding:24px;gap:20px}.lesson-screen .ftt{font-size:26px}
}
@media(max-width:480px){.library-screen .klist.kgal{grid-template-columns:1fr}.library-actions .btn svg{display:none}.library-nav .quiet-link{font-size:0}.library-nav .quiet-link::after{content:'Ввести код ↗';font-size:12px}.auth-screen .lnav .quiet-link{font-size:12px}.lesson-arrow{display:none}}
/* Телефон: учитываем вырезы и оставляем прокрутку при появлении клавиатуры.
   Поворот меняет только раскладку, без перезапуска формы или занятия. */
.topbar, .etop { padding-left:max(12px,var(--sal)); padding-right:max(12px,var(--sar)); }
.constructor-title { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.constructor-screen .pshow { min-height:48px; }
.constructor-toolbar { display:flex; gap:8px; align-items:center; justify-content:flex-end; flex:none; padding:8px max(12px,var(--sar)) calc(8px + var(--sab)) max(12px,var(--sal)); background:#fff; border-top:1px solid var(--sp-line); }
.constructor-toolbar .libtn { min-height:56px; width:48px; }
.constructor-toolbar .pshow { min-height:56px; }
.constructor-screen .addbar { padding-bottom:8px; }
.es .etop { padding-bottom:calc(8px + var(--sab)); border-top:1px solid var(--d-brd); border-bottom:0; }
.es { padding-top:var(--sat); }
.es .ecard { min-width:0; min-height:160px; margin:12px max(16px,var(--sar)) 12px max(16px,var(--sal)); }
.es .ezone { min-height:0; max-height:55%; overflow-y:auto; flex-shrink:0; padding-left:max(16px,var(--sal)); padding-right:max(16px,var(--sar)); }
.es .ezone > * { flex-shrink:0; }
.es .etabs { margin-bottom:0; }
.es .etxcard { padding:16px; }
.swt { width:48px; height:48px; }
.strk { height:48px; margin:0 14px; }
.strk-line, .sfill { top:20px; }
.sth { top:10px; }
.snotch { top:16px; bottom:16px; }
.sheet, .dsheet { padding-left:max(16px,var(--sal)); padding-right:max(16px,var(--sar)); }
.shrow, .dshrow { height:auto; min-height:56px; padding-top:10px; padding-bottom:10px; overflow-wrap:anywhere; }
.handout { min-width:0; max-height:none; overflow:visible; }
.handout label { overflow-wrap:anywhere; }
.handout input[type=checkbox] { flex:none; }
.handout .finp { width:auto; flex:1; min-width:0; font-size:16px; }
.dlgr { flex-wrap:wrap; }
.dlgr .btn { min-height:56px; }
.dlg:has(.handout) { display:flex; flex-direction:column; overflow:hidden; }
.dlg:has(.handout) > :not(.handout-scroll) { flex:none; }
.handout-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin:12px 0 16px; }
.handout-scroll .handout { margin:0; }
.lesson-actions { display:flex; justify-content:flex-end; }
.lesson-actions .btn { width:100%; }
.lesson-back { position:sticky; top:0; align-self:flex-start; flex:none; min-height:56px; z-index:1; background:var(--l-bg); }
.lesson-actions .btn { padding:8px 12px; min-height:56px; height:auto; white-space:normal; line-height:1.35; }
.qcode { white-space:nowrap; }
.qor { text-align:center; }
.qrwrap { overflow:auto; justify-content:safe center; padding:calc(20px + var(--sat)) max(20px,var(--sar)) calc(20px + var(--sab)) max(20px,var(--sal)); }
.qrwrap .qrcard { flex:none; width:min(70%,300px); }
.gbar { padding-left:max(8px,var(--sal)); padding-right:max(8px,var(--sar)); }
.gs { padding-top:var(--sat); }
.cnt { top:calc(10px + var(--sat)); left:calc(12px + var(--sal)); }
.xbtn { top:auto; bottom:calc(8px + var(--sab)); right:calc(8px + var(--sar)); width:56px; height:56px; }
.pv .capbar { padding-right:calc(80px + var(--sar)); max-height:35%; overflow-y:auto; pointer-events:auto; }
.qr-close { position:absolute; bottom:calc(8px + var(--sab)); right:calc(8px + var(--sar)); background:var(--d-sur2); }
.btop { top:calc(12px + var(--sat)); left:calc(12px + var(--sal)); }
.library-main, .library-nav { padding-left:max(20px,var(--sal)); padding-right:max(20px,var(--sar)); }
.library-screen .cardmenu { width:44px; height:44px; }
.library-screen .view-toggle { width:48px; height:48px; }
.lesson-screen { padding-top:calc(20px + var(--sat)); padding-bottom:calc(20px + var(--sab)); }
.lesson-screen .lform, .auth-layout, .auth-footer { flex-shrink:0; }
.screen:has(> form.lform) { overflow-y:auto; }
.screen > form.lform { flex-shrink:0; }
.auth-screen .lnav, .join-nav { flex-wrap:wrap; gap:8px 20px; padding-left:max(20px,var(--sal)); padding-right:max(20px,var(--sar)); }
.join-page { min-height:100dvh; padding-top:var(--sat); padding-bottom:var(--sab); }
.join-page .home { flex-shrink:0; }
.home__hint { overflow-wrap:anywhere; }
/* Запуск всегда под большим пальцем, QR и сведения прокручиваются выше. */
#connscreen:has(.connection-body) { padding:0; overflow:hidden; }
.connection-body { flex:1; min-height:0; overflow-y:auto; display:flex; padding:calc(76px + var(--sat)) max(20px,var(--sar)) 20px max(20px,var(--sal)); }
#connscreen .connection-body .hcol { margin:auto; flex:none; }
#connscreen:has(.connection-body) .padv { margin:0 auto; padding:12px max(16px,var(--sar)) calc(12px + var(--sab)) max(16px,var(--sal)); width:100%; max-width:840px; background:var(--c-black); border-top:1px solid var(--d-brd); }
.connection-actions { display:flex; align-items:center; gap:12px; }
.connection-actions .btn { flex:1; min-width:0; white-space:normal; padding:8px 16px; height:auto; min-height:56px; }

@media(max-width:700px) {
  .constructor-screen .topbar { min-height:68px; }
  .constructor-toolbar .pshow { min-width:0; padding:0 12px; font-size:14px; }
  .constructor-screen .tbt { font-size:18px; }
  .es .etop { display:grid; grid-template-columns:minmax(0,1fr) 48px 48px minmax(0,1fr); gap:4px 8px; padding:8px max(8px,var(--sar)) calc(8px + var(--sab)) max(8px,var(--sal)); }
  .es .etop .saved { grid-column:1/-1; grid-row:1; order:0; }
  .es .etop .btn { padding:0 8px; font-size:14px; }
  .es .etop .bp { grid-column:4; }
  .library-main { padding-bottom:calc(104px + var(--sab)); }
  .library-actions { position:absolute; z-index:4; bottom:0; left:0; right:0; width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px max(16px,var(--sar)) calc(12px + var(--sab)) max(16px,var(--sal)); background:#fff; border-top:1px solid var(--sp-line); }
  .library-actions .btn { min-width:0; min-height:56px; height:auto; padding:8px; font-size:14px; white-space:normal; line-height:1.35; }
  .library-actions .btn svg { display:none; }
  .library-nav { gap:12px; flex-wrap:wrap; }
  .library-nav .quiet-link { white-space:nowrap; }
  .library-nav .ava { width:40px; height:40px; }
  .lesson-row { display:grid; grid-template-columns:40px minmax(0,1fr); gap:8px 12px; }
  .lesson-symbol { grid-row:1/3; }
  .lesson-info strong { white-space:normal; line-height:1.4; }
  .lesson-code { grid-column:2; }
  .lesson-arrow { display:none; }
  .lesson-screen .lform { padding:24px 18px; }
  .lesson-screen select { padding-left:10px; padding-right:4px; }
  .pcard { gap:10px; }
  .pcov, .pcovbox { width:72px; height:72px; }
  .pname { font-size:16px; }
  .pbelow .pshow { max-width:100%; padding:0 10px; font-size:13px; }
  .dlg { padding:18px; }
  .dlgr .btn { flex:1; padding:0 10px; font-size:14px; }
  .handout { padding:12px; }
}

@media(max-width:380px) {
  .library-nav .quiet-link { order:3; width:100%; justify-content:center; min-height:40px; border-top:1px solid var(--sp-line); }
  .library-nav .ava { margin-left:auto; }
  .library-nav .quiet-link::after { font-size:14px; }
  .library-main { padding-top:24px; }
}

@media(max-width:420px) {
  .gbar { height:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .gmid { order:-1; grid-column:1/-1; flex-direction:row; gap:12px; justify-content:flex-start; padding:4px 8px; }
  .gcnt { font-size:24px; flex:none; }
  .gttl { margin:0; }
  .gbar button { justify-self:center; }
}

/* В коротком альбомном экране слайд и инструменты стоят рядом. */
@media(min-width:560px) and (max-height:560px) {
  .library-main { padding-top:20px; padding-bottom:calc(100px + var(--sab)); }
  .library-heading { margin-bottom:24px; }
  .library-heading h1 { font-size:28px; }
  .library-actions { position:absolute; z-index:4; bottom:0; left:auto; right:0; width:min(450px,100%); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px max(16px,var(--sar)) calc(12px + var(--sab)) 16px; background:#fff; border:1px solid var(--sp-line); border-bottom:0; border-radius:16px 0 0 0; }
  .library-actions .btn { min-height:56px; height:auto; min-width:0; font-size:14px; white-space:normal; padding:8px; }
  .library-actions .btn svg { display:none; }
  .constructor-screen:has(.addbar) { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr) auto; }
  .constructor-screen .topbar { grid-column:1/-1; grid-row:1; }
  .constructor-screen .cgrid { grid-column:1/-1; grid-row:2; }
  .constructor-screen .addbar { grid-column:1; grid-row:3; align-items:center; padding-bottom:calc(12px + var(--sab)); }
  .constructor-toolbar { grid-column:2; grid-row:3; }
  .constructor-screen .addbtn { min-width:0; font-size:14px; }
  .es { display:grid; grid-template-columns:minmax(0,1fr) 260px; grid-template-rows:minmax(0,1fr) auto; }
  .es .etop { grid-column:1/-1; grid-row:2; display:flex; flex-wrap:nowrap; padding:6px max(12px,var(--sar)) calc(6px + var(--sab)) max(12px,var(--sal)); }
  .es .etop .saved { flex:1; order:0; text-align:left; }
  .es .ecard { grid-column:1; grid-row:1; min-height:0; margin:8px 12px 8px max(12px,var(--sal)); }
  .es .ezone { grid-column:2; grid-row:1; max-height:none; overflow-y:auto; gap:8px; padding:10px max(12px,var(--sar)) 10px 12px; border-top:0; border-left:1px solid var(--d-brd); }
  .es .ezone > * { flex-shrink:0; }
  .gs { display:grid; grid-template-columns:minmax(0,1fr) calc(176px + var(--sar)); grid-template-rows:minmax(0,1fr) 32px; }
  .gslide { grid-column:1; grid-row:1; margin-left:var(--sal); }
  .gstat { grid-column:1; grid-row:2; }
  .gbar { grid-column:2; grid-row:1/-1; height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:end; gap:10px; padding:8px max(12px,var(--sar)) calc(8px + var(--sab)) 12px; border-top:0; border-left:1px solid var(--d-brd); }
  .gmid { grid-column:1/-1; grid-row:1; }
  .gbar button { justify-self:center; }
  .gbar [data-act=sh-prev] { grid-column:1; grid-row:2; }
  .gbar [data-act=sh-next] { grid-column:2; grid-row:2; }
  .gbar [data-act=qr-open] { grid-column:1; grid-row:3; }
  .gbar [data-act=sh-more] { grid-column:2; grid-row:3; }
  .qrwrap { flex-direction:row; gap:32px; }
  .qrwrap .qrcard { width:min(42%,calc(100dvh - 80px)); }
  .qrwrap .qcode { font-size:36px; letter-spacing:4px; }
  #connscreen { padding:16px max(20px,var(--sar)) 16px max(80px,var(--sal)); }
  #connscreen .hcol { display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px 24px; }
  #connscreen .qrcard { width:100%; }
  #connscreen .qcode { font-size:32px; }
  #connscreen .htitle { font-size:20px; }
  #connscreen .connection-body .htitle { grid-column:2; grid-row:1; font-size:16px; text-align:left; }
  #connscreen .connection-body .qrcard { grid-row:1/5; align-self:start; position:sticky; top:0; }
  .connection-body { padding-top:calc(16px + var(--sat)); padding-left:max(80px,var(--sal)); }
  #connscreen .qor { font-size:12px; }
  #connscreen .connlink { min-height:56px; }
  #connscreen .padv { margin-top:16px; }
  .auth-layout { padding-top:8px; }
  .auth-screen .lnav { min-height:64px; padding-top:8px; padding-bottom:8px; }
}

/* При клавиатуре на вертикальном телефоне редактор прокручивается целиком. */
@media(min-width:1100px) { .es .ezone { max-height:none; } }
@media(max-width:559px) {
  .compact-height .es { overflow-y:auto; }
  .compact-height .es .ecard { flex:none; height:160px; }
}

@media(prefers-reduced-motion:reduce){.btn,.btnp,.btng,.pshow,.emptybtn,.bcard,.pcard,.lesson-row{transition:none}.btn:active,.btnp:active,.btng:active,.pshow:active,.emptybtn:active{scale:1}}

/* Заголовки интерфейса набраны плотным шрифтом; пользовательские слайды используют свои семейства. */
.brand, .lwm, .home__logo, .library-heading h1, .form-heading .ftt, .lesson-screen .ftt, .join-page h1 { font-family:var(--font-display); font-weight:900; }
.library-screen .brow .pshow { border-color:var(--c-ink); }
.gnav[data-act="sh-next"] { background:var(--c-saffron); color:var(--c-on-saffron); border:2px solid var(--c-on-saffron); }
.gnav[data-act="sh-next"]:hover { background:var(--c-saffron-light); }
