/* Визуальный слой кабинета: палитра и движения лендинга. Подключается после встроенных стилей приложения. */
:root,:root[data-theme="light"]{
  --bg:#F4F3FD;--card:#FFFFFF;--tx:#1C1E3F;--mut:#5F6388;--bd:#E4E2F5;--line:#EDECF8;
  --ac:#5A46DE;--ac2:#2F6BEA;--acl:#EEEBFD;--acl2:#E8EEFF;--on:#FFFFFF;
  --bad:#D2344F;--badl:#FDECEF;--good:#14855A;--goodl:#E3F6EE;--warn:#C77A12;
  --hero:linear-gradient(120deg,#4B36D6 0%,#5A46DE 40%,#2F6BEA 100%);
  --sh:0 1px 2px rgba(38,32,120,.04),0 10px 30px rgba(58,48,170,.07);
  --sh2:0 2px 4px rgba(38,32,120,.05),0 22px 50px rgba(58,48,170,.14);
  --glow1:rgba(90,70,222,.10);--glow2:rgba(47,107,234,.09);--b1:#5A46DE;--b2:#2F6BEA;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.5,.5,1);
}
:root[data-theme="dark"]{
  --bg:#0F1030;--card:#191B45;--tx:#EEEEFF;--mut:#A9AEDB;--bd:#2C2F66;--line:#25285A;
  --ac:#9C8CFF;--ac2:#6AA6FF;--acl:#29285F;--acl2:#1E2C60;--on:#FFFFFF;
  --bad:#FF7A8E;--badl:#3B1C33;--good:#4FD09A;--goodl:#173A35;--warn:#FFC266;
  --hero:linear-gradient(120deg,#3B27C2 0%,#4E3BD6 40%,#2459D6 100%);
  --sh:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.28);
  --sh2:0 2px 6px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.45);
  --glow1:rgba(124,100,255,.18);--glow2:rgba(60,140,255,.14);--b1:#6A55F0;--b2:#3474EA;color-scheme:dark}
body{background:var(--bg);font-size:15px}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 520px at 105% -5%,var(--glow2),transparent 62%),radial-gradient(800px 480px at -8% 18%,var(--glow1),transparent 60%)}
::selection{background:color-mix(in srgb,var(--ac) 25%,transparent)}

/* ---------- Шапка: как первый экран лендинга, меню прилипает при прокрутке ---------- */
.hdr{position:sticky;z-index:40;isolation:isolate;background:var(--hero);transition:box-shadow .35s var(--ease)}
.hdr.stuck{box-shadow:0 10px 30px rgba(40,20,140,.28)}
.hdr-fx{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.hdr-fx i{position:absolute;border-radius:50%;will-change:transform}
.hdr-fx i:nth-child(1){width:520px;height:520px;left:-160px;top:-300px;background:radial-gradient(closest-side,rgba(170,140,255,.55),transparent);animation:hx1 20s ease-in-out infinite alternate}
.hdr-fx i:nth-child(2){width:460px;height:460px;right:-140px;top:-220px;background:radial-gradient(closest-side,rgba(60,190,255,.45),transparent);animation:hx2 24s ease-in-out infinite alternate}
.hdr-fx i:nth-child(3){width:300px;height:300px;left:45%;top:-120px;background:radial-gradient(closest-side,rgba(255,140,220,.22),transparent);animation:hx3 28s ease-in-out infinite alternate}
.hdr-fx:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}
@keyframes hx1{to{transform:translate(220px,60px) scale(1.15)}}
@keyframes hx2{to{transform:translate(-200px,40px) scale(.9)}}
@keyframes hx3{to{transform:translate(-160px,30px) scale(1.25)}}
.hin,main{max-width:1120px}
.brand h1{font-size:20px}
.brand h1 svg{transition:transform .5s var(--spring)}
.brand h1:hover svg{transform:rotate(-8deg) scale(1.08)}
.acct a,.thm{transition:background .25s,transform .25s var(--ease)}
.acct a:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.acct a.pro:hover{background:#fff}
.thm{flex:0 0 auto;width:34px;height:30px;display:grid;place-items:center;padding:0;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;margin-left:8px}
.thm:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.4)}
.thm svg{transition:transform .5s var(--spring)}.thm:hover svg{transform:rotate(-20deg)}
nav{position:relative;gap:6px}
nav button{position:relative;z-index:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);transition:background .25s,color .3s,border-color .25s,transform .2s var(--ease)}
nav button:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
nav button:active{transform:scale(.97)}
nav button.on,nav button.on:hover{background:transparent;color:var(--ac);border-color:transparent;box-shadow:none;transform:none}
nav button.on svg{opacity:1}
.navknob{position:absolute;z-index:0;left:0;top:0;border-radius:999px;background:var(--card);box-shadow:0 8px 22px rgba(20,10,90,.28);pointer-events:none}
.navknob.mv{transition:transform .5s var(--ease),width .5s var(--ease)}
:root[data-theme="dark"] nav button.on{color:#fff}
:root[data-theme="dark"] .navknob{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 8px 22px rgba(0,0,0,.3)}

/* ---------- Базовые элементы ---------- */
main{padding-top:22px}
.card{border-radius:20px;border-color:var(--bd);box-shadow:var(--sh);transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s}
.card[onclick]:hover,.card[style*="cursor:pointer"]:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:color-mix(in srgb,var(--ac) 30%,var(--bd))}
.card>b:first-child{font-size:16.5px}
#app>b{display:block;font:600 15px/1.3 var(--f-dis);margin:22px 4px 10px;letter-spacing:-.01em}
button{border-radius:12px;transition:background .2s,border-color .2s,box-shadow .25s,transform .2s var(--ease),color .2s}
button:not(:disabled):active{transform:scale(.97)}
button:not(.pri):not(.del):not(.on):hover{background:var(--acl);border-color:color-mix(in srgb,var(--ac) 35%,var(--bd))}
button.pri,button.on{background:linear-gradient(120deg,var(--b1),var(--b2));border-color:transparent;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 28%,transparent)}
button.pri:not(:disabled):hover{filter:none;transform:translateY(-1px);box-shadow:0 10px 24px color-mix(in srgb,var(--ac) 38%,transparent)}
button.pri:disabled{box-shadow:none}
button.del.pri{background:var(--bad);box-shadow:0 6px 16px color-mix(in srgb,var(--bad) 30%,transparent);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
input,select,textarea{background:color-mix(in srgb,var(--bg) 70%,var(--card));border-radius:12px;transition:border-color .2s,box-shadow .25s,background .2s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--ac) 30%,var(--bd))}
input:focus,select:focus,textarea:focus{background:var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent)}
input[type=checkbox]{transition:transform .2s var(--spring)}
input[type=checkbox]:checked{animation:tick .35s var(--spring)}
@keyframes tick{50%{transform:scale(1.25)}}
.bar{height:8px;background:var(--acl)}
.bar i{transform-origin:0 50%}
.tag{border-radius:999px;padding:2px 10px;background:var(--acl);color:var(--ac)}
.av{border-radius:14px;box-shadow:0 6px 14px rgba(40,20,140,.18);background-image:linear-gradient(140deg,rgba(255,255,255,.22),transparent 60%)!important}
.mut{color:var(--mut)}
table tr{transition:background .2s}
table tr:not(:first-child):hover{background:color-mix(in srgb,var(--acl) 60%,transparent)}
details>summary{transition:color .2s}
details[open]>*:not(summary){animation:fadeDown .35s var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}}
#app .usage{border-radius:18px;background:linear-gradient(120deg,var(--acl),var(--acl2))}
#app .usage a{background:linear-gradient(120deg,var(--b1),var(--b2));color:#fff;transition:transform .2s var(--ease),box-shadow .25s}
#app .usage a:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--ac) 35%,transparent)}
.hero{border-radius:24px;position:relative;overflow:hidden;isolation:isolate}
.day{border-radius:14px;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.day:hover{transform:translateY(-2px)}
.day.now span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(120deg,var(--b1),var(--b2));color:#fff!important}
.day.sel{background:var(--acl);border-color:var(--ac);box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 20%,transparent)}
#modal{animation:fadeIn .25s ease}
#modal>div{animation:pop .35s var(--ease)}
@keyframes fadeIn{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.pw-back{animation:fadeIn .25s ease}.pw{animation:pop .4s var(--ease)}
#st.fl{animation:toast .45s var(--spring)}
@keyframes toast{from{opacity:0;transform:translate(-50%,16px) scale(.96)}}
@media (min-width:641px){@keyframes toast{from{opacity:0;transform:translateY(-6px)}}}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ac) 22%,transparent);border-radius:10px;border:3px solid transparent;background-clip:content-box}

/* ---------- Появление вкладки ---------- */
#app.enter>*{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
#app.enter .stats>*,#app.enter .g2>*,#app.enter .kpis>*,#app.enter .qa>*{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms + var(--j,0) * 70ms)}
#app.enter .bar i{animation:grow 1.1s var(--ease) both;animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes grow{from{transform:scaleX(0)}}
.skel{display:grid;gap:14px}
.skel div{height:96px;border-radius:20px;background:linear-gradient(90deg,var(--card) 25%,var(--acl) 50%,var(--card) 75%);background-size:300% 100%;animation:shim 1.3s linear infinite;border:1px solid var(--bd)}
.skel div:first-child{height:120px}.skel .r{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;height:auto;background:none;border:0;animation:none}.skel .r i{height:86px;border-radius:18px;background:inherit;background:linear-gradient(90deg,var(--card) 25%,var(--acl) 50%,var(--card) 75%);background-size:300% 100%;animation:shim 1.3s linear infinite;border:1px solid var(--bd)}
@keyframes shim{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---------- Обзор ---------- */
.dhero{position:relative;overflow:hidden;isolation:isolate;background:var(--hero);color:#fff;border-radius:26px;padding:24px 26px;margin-bottom:16px;display:grid;grid-template-columns:1fr auto;gap:18px 24px;align-items:end;box-shadow:0 18px 40px rgba(60,40,190,.28)}
.dhero:before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-120px;top:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(90,200,255,.45),transparent);animation:hx2 18s ease-in-out infinite alternate}
.dhero:after{content:"∫  π  √  Δ";position:absolute;z-index:-1;right:18px;bottom:-26px;font:600 74px/1 var(--f-dis);color:rgba(255,255,255,.08);white-space:nowrap;pointer-events:none}
.dhero .hi{font-size:14px;opacity:.88}
.dhero .tt{font:600 clamp(21px,2.6vw,27px)/1.18 var(--f-dis);margin:6px 0 12px;letter-spacing:-.01em}
.dhero .ev{display:flex;flex-wrap:wrap;gap:8px}
.dhero .ev span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:6px 12px;font-size:13px;white-space:nowrap;backdrop-filter:blur(4px)}
.dhero .ev span.dn{opacity:.65;text-decoration:line-through}
.qa{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:8px}
.qa button{display:flex;align-items:center;gap:8px;justify-content:flex-start;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;font-weight:600;padding:10px 14px;border-radius:14px;white-space:nowrap;backdrop-filter:blur(6px)}
.qa button:not(:disabled):hover{background:#fff;color:var(--ac);border-color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,10,90,.25)}
:root[data-theme="dark"] .qa button:not(:disabled):hover{color:#4B36D6}
.qa button svg{flex:0 0 auto}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:16px 16px 14px;box-shadow:var(--sh);transition:transform .35s var(--ease),box-shadow .35s}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.kpi .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;color:var(--c,var(--ac));background:color-mix(in srgb,var(--c,var(--ac)) 13%,var(--card))}
.kpi b{display:block;font:600 24px/1.1 var(--f-dis);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .lb{color:var(--mut);font-size:13px;margin-top:3px}
.kpi .tr{position:absolute;right:14px;top:16px;font-size:12px;font-weight:700;border-radius:999px;padding:3px 8px}
.tr.up{color:var(--good);background:var(--goodl)}.tr.dn{color:var(--bad);background:var(--badl)}.tr.eq{color:var(--mut);background:var(--acl)}
.kpi .spk{position:absolute;right:12px;bottom:12px;width:44%;height:36px;opacity:.9}
.kpi .avs{display:flex;margin-top:8px}.kpi .avs i{width:24px;height:24px;border-radius:8px;border:2px solid var(--card);margin-left:-6px;display:grid;place-items:center;color:#fff;font:700 11px var(--f-ui);font-style:normal}.kpi .avs i:first-child{margin-left:0}
.dg{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:16px;align-items:stretch}
.dg>.card{margin:0;grid-column:span 6}.dg>.w8{grid-column:span 8}.dg>.w4{grid-column:span 4}.dg>.w12{grid-column:span 12}
.ch-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.ch-h b{font-size:16.5px;font-weight:650}
.ch-h .sub{color:var(--mut);font-size:13px;margin-top:2px}
.big{font:600 28px/1.1 var(--f-dis);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.seg{display:inline-flex;background:var(--acl);border-radius:11px;padding:3px}
.seg button{border:0;background:transparent;padding:5px 10px;font-size:12.5px;font-weight:600;color:var(--mut);border-radius:9px;box-shadow:none}
.seg button.on{background:var(--card);color:var(--ac);box-shadow:0 2px 8px rgba(40,30,120,.12)}
:root[data-theme="dark"] .seg button.on{color:#fff}
.area{position:relative;margin-top:10px}
.area svg{display:block;width:100%;height:190px;overflow:visible}
.area .ln{fill:none;stroke:url(#lg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.area .gl{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.area .pt{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--card);border:3px solid var(--ac);transition:transform .25s var(--spring)}
.area .pt:hover,.area .pt.last{transform:scale(1.35)}
.area .pt.last{background:var(--ac);box-shadow:0 0 0 6px color-mix(in srgb,var(--ac) 18%,transparent)}
.area .tip{position:absolute;transform:translate(-50%,-150%);background:var(--tx);color:var(--card);font-size:12px;font-weight:700;padding:4px 8px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s,transform .25s var(--ease)}
.area .pt:hover+.tip,.area .tip.on{opacity:1;transform:translate(-50%,-170%)}
.xl{display:grid;grid-template-columns:repeat(var(--n,6),1fr);margin-top:8px;text-align:center}
.xl span{font-size:12px;color:var(--mut)}.xl b{display:block;font-size:12.5px;color:var(--tx);font-weight:650;font-variant-numeric:tabular-nums}
#app.enter .area .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s .2s var(--ease) forwards}
#app.enter .area .fl{animation:fadeIn 1s .7s both}
#app.enter .area .pt{animation:popIn .5s var(--spring) both;animation-delay:calc(.35s + var(--k) * .16s)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes popIn{from{transform:scale(0)}}
.sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.sum div{background:color-mix(in srgb,var(--acl) 55%,transparent);border-radius:14px;padding:10px 12px}
.sum span{display:block;color:var(--mut);font-size:12px}.sum b{font-size:15px;font-variant-numeric:tabular-nums}
.vb{display:flex;align-items:flex-end;gap:10px;height:170px;margin-top:14px;padding-top:22px}
.vb div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0}
.vb i{display:block;width:100%;max-width:46px;border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,var(--c2,var(--b2)),var(--c1,var(--b1)));transform-origin:50% 100%;position:relative;transition:filter .2s}
.vb div:hover i{filter:brightness(1.12)}
.vb i.cur{box-shadow:0 8px 20px color-mix(in srgb,var(--ac) 35%,transparent)}
.vb i em{position:absolute;left:50%;top:-20px;transform:translateX(-50%);font:700 12px var(--f-ui);font-style:normal;color:var(--tx);white-space:nowrap}
.vb span{font-size:12px;color:var(--mut)}
#app.enter .vb i{animation:growY .9s var(--ease) both;animation-delay:calc(.2s + var(--k) * 70ms)}
@keyframes growY{from{transform:scaleY(0)}}
.dn-w{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:8px}
.dn-w svg{width:150px;height:150px;flex:0 0 auto;transform:rotate(-90deg)}
.dn-w .sg{fill:none;stroke-width:6;transition:stroke-width .25s;cursor:default}
.dn-w .sg:hover{stroke-width:8}
#app.enter .dn-w .sg{animation:seg 1.2s var(--ease) both;animation-delay:calc(.2s + var(--k) * 120ms)}
@keyframes seg{from{stroke-dasharray:0 100}}
.dn-c{position:relative}.dn-c .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.dn-c .ctr b{font:600 15px/1.1 var(--f-dis)}.dn-c .ctr span{display:block;font-size:11px;color:var(--mut)}
.lg{flex:1;min-width:150px;display:grid;gap:8px}
.lg div{display:flex;align-items:center;gap:8px;font-size:13.5px}
.lg i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.lg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg b{font-variant-numeric:tabular-nums;font-size:13px}
.hb{display:grid;gap:12px;margin-top:10px}
.hb .r{display:grid;grid-template-columns:minmax(80px,140px) 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.hb .r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb .t{height:10px;border-radius:99px;background:var(--acl);overflow:hidden}
.hb .t i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FF8FA3,var(--bad));transform-origin:0 50%}
.hb .t i.ok{background:linear-gradient(90deg,#7FE0B5,var(--good))}
.hb b{font-variant-numeric:tabular-nums;font-size:13px}
#app.enter .hb .t i{animation:grow 1s var(--ease) both;animation-delay:calc(.25s + var(--k) * 90ms)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:18px 10px;color:var(--mut);font-size:14px;min-height:120px}
.empty i{font-size:28px;font-style:normal;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.tl{display:grid;gap:4px;margin-top:6px}
.tl .it{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:14px;transition:background .2s}
.tl .it:hover{background:var(--acl)}
.tl .wd{width:66px;flex:0 0 auto;text-align:center;line-height:1.15}
.tl .wd b{display:block;font:600 15px var(--f-dis)}.tl .wd span{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.tl .wd.td b{color:var(--ac)}
.tl .nm{flex:1;min-width:0}.tl .nm div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.tl .nm span{font-size:12.5px;color:var(--mut)}
.tl button{padding:6px 12px;font-size:13px}
.ob{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.ob ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ob li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--acl) 50%,transparent);cursor:pointer;transition:background .2s,transform .2s var(--ease);font-size:14px}
.ob li:hover{background:var(--acl);transform:translateY(-1px)}
.ob li i{width:24px;height:24px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;border:2px solid color-mix(in srgb,var(--ac) 40%,var(--bd));color:var(--ac)}
.ob li.ok{color:var(--mut);text-decoration:line-through}
.ob li.ok i{background:var(--good);border-color:var(--good);color:#fff}
.ring{width:84px;height:84px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 17px var(--f-dis)}
#app.enter .ring .rv{animation:seg 1.2s .3s var(--ease) both}
.prg{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.prg .lst{display:grid;gap:10px}
.prg .lst .top span{font-size:13.5px}

/* ---------- Оплаты: аналитика ---------- */
.pa-k{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
.pa-k div{border-radius:16px;padding:12px 14px;background:color-mix(in srgb,var(--acl) 55%,transparent)}
.pa-k span{display:block;font-size:12.5px;color:var(--mut)}.pa-k b{font:600 20px/1.2 var(--f-dis);font-variant-numeric:tabular-nums;white-space:nowrap}
.bal{display:grid;gap:9px;margin-top:12px}
.bal .r{display:grid;grid-template-columns:minmax(80px,150px) 1fr 1fr auto;gap:0;align-items:center;font-size:13.5px}
.bal .r>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
.bal .l,.bal .p{height:12px;display:flex}
.bal .l{justify-content:flex-end;border-right:2px solid var(--bd)}
.bal .l i,.bal .p i{display:block;height:100%}
.bal .l i{background:linear-gradient(270deg,#FF8FA3,var(--bad));border-radius:99px 0 0 99px;transform-origin:100% 50%}
.bal .p i{background:linear-gradient(90deg,#7FE0B5,var(--good));border-radius:0 99px 99px 0;transform-origin:0 50%}
.bal .r>b{min-width:84px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
#app.enter .bal i{animation:grow 1s var(--ease) both;animation-delay:calc(.25s + var(--k) * 80ms)}
@keyframes growL{from{transform:scaleX(0)}}

/* ---------- Адаптив ---------- */
@media (max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}.dg>.card,.dg>.w8,.dg>.w4{grid-column:span 12}}
@media (max-width:640px){
  .dhero{grid-template-columns:1fr;padding:20px;border-radius:22px}
  .qa{grid-template-columns:repeat(4,1fr)}.qa button{flex-direction:column;gap:4px;padding:10px 4px;font-size:12px;justify-content:center}
  .kpis{gap:10px}.kpi{padding:14px}.kpi b{font-size:19px}.kpi .spk{display:none}.kpi .tr{top:14px;right:10px}
  .sum{grid-template-columns:1fr 1fr 1fr;gap:6px}.sum div{padding:8px}.sum b{font-size:13px}
  .ob{grid-template-columns:1fr}.ob .ring{display:none}.ob ol{grid-template-columns:1fr}
  .pa-k{grid-template-columns:1fr 1fr 1fr;gap:6px}.pa-k div{padding:10px}.pa-k b{font-size:15px}
  .bal .r{grid-template-columns:80px 1fr 1fr auto}.bal .r>b{min-width:70px}
  .prg{grid-template-columns:1fr}.prg .ring{margin:0 auto}
  .dn-w{justify-content:center}
  .skel .r{grid-template-columns:1fr 1fr}
  .area svg{height:150px}
  .hdr-fx i:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* правки раскладки */
nav button{padding:8px 12px;font-size:14px}
.tl .wd.wl b{font-size:13px}
.dg>.col6{grid-column:span 6;display:flex;flex-direction:column;gap:16px;min-width:0}.col6>.card{margin:0}.col6>.card:last-child{flex:1}
.prg .lst{grid-template-columns:1fr 1fr;gap:12px 28px}
.ch-h>button{flex:0 0 auto;white-space:nowrap;font-size:13.5px;padding:7px 12px}
.pa-g .c7{grid-column:span 7;min-width:0}.pa-g .c5{grid-column:span 5;min-width:0}
.dhero:after{color:rgba(255,255,255,.06)}
@media (max-width:980px){.dg>.col6{grid-column:span 12}.pa-g .c7,.pa-g .c5{grid-column:span 12}}
@media (max-width:640px){.prg .lst{grid-template-columns:1fr}.ch-h>button{font-size:12.5px;padding:6px 10px}.vb{gap:6px}.vb i em{font-size:11px}}
@media (max-width:420px){.brand h1 .ttl{display:none}}
.xl .xn{display:none}@media (max-width:640px){.xl .xw{display:none}.xl .xn{display:block}}
@supports (overflow:clip){html,body{overflow-x:clip!important;overflow-y:visible!important}}

/* ---------- Материалы 1–11 классов ---------- */
#app[data-tab="mat"] #usage{display:none}
.mt-top{padding:18px}
.mt-gr{display:flex;gap:6px;flex-wrap:wrap}
.mt-gr button{flex:0 0 auto;min-width:46px;padding:8px 12px;border-radius:12px;font-weight:700}
.mt-gr button span{font-weight:500;opacity:.7;font-size:.86em}
.mt-gr button.on{background:linear-gradient(120deg,var(--b1),var(--b2));color:#fff;border-color:transparent;box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 35%,transparent)}
.mt-i{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mt-i b{font-size:1.12em}.mt-i .mut{margin-top:4px;max-width:720px;line-height:1.5}
.mt-st{display:flex;gap:8px;flex:0 0 auto}
.mt-st span{background:var(--acl);color:var(--ac);border-radius:12px;padding:6px 12px;font-size:13px;white-space:nowrap}
.mt-st b{font-size:17px;margin-right:2px}
.mt-f{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mt-f button{flex:0 0 auto;padding:7px 13px;border-radius:999px;font-size:14px}
.mt-f button.on{background:var(--acl);color:var(--ac);border-color:color-mix(in srgb,var(--ac) 40%,transparent);font-weight:600}
.mt-l{padding:0;overflow:hidden;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.mt-l>summary{display:flex;gap:10px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none}
.mt-l>summary::-webkit-details-marker{display:none}
.mt-l>summary:after{content:"";width:9px;height:9px;flex:0 0 auto;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .25s var(--ease)}
.mt-l[open]>summary:after{transform:rotate(-135deg);margin-top:4px}
.mt-l>summary b{flex:1;line-height:1.35}
.mt-l>summary .tag{flex:0 0 auto;font-size:12.5px;font-weight:600}
.mt-l:hover{box-shadow:var(--sh2)}
.mt-l[open]>summary{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--acl) 45%,transparent)}
.mt-q{flex:0 0 auto;font-size:12.5px;color:var(--mut)}
.mt-c{border-color:color-mix(in srgb,var(--warn) 45%,var(--bd))}
.mt-c>summary .tag{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.mt-b{padding:4px 18px 18px}
.mt-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;margin:18px 0 8px}
.mt-n{font-size:12px;font-weight:600;background:var(--acl);color:var(--ac);border-radius:999px;padding:1px 8px}
.mt-th{white-space:pre-line;line-height:1.65;background:linear-gradient(135deg,color-mix(in srgb,var(--acl) 70%,transparent),color-mix(in srgb,var(--acl2) 70%,transparent));border-left:3px solid var(--ac);border-radius:0 14px 14px 0;padding:12px 16px}
.mt-ex{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:10px 14px;border:1px dashed var(--bd);border-radius:12px;margin-bottom:8px}
.mt-sol{color:var(--good)}
.mt-sol:before{content:"→ ";opacity:.7}
.mt-t{margin:0;padding:0;list-style:none;counter-reset:mt}
.mt-t li{counter-increment:mt;display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line)}
.mt-t li:last-child{border-bottom:0}
.mt-t li:before{content:counter(mt);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--acl);color:var(--ac)}
.mt-t li>div{padding-top:2px;line-height:1.55}
.mt-a{justify-self:end;text-align:right;max-width:280px}
.mt-a summary{cursor:pointer;font-size:13px;color:var(--ac);list-style:none;padding:3px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);white-space:nowrap}
.mt-a summary::-webkit-details-marker{display:none}
.mt-a[open] summary{background:var(--acl)}
.mt-a b{display:block;margin-top:6px;color:var(--good);font-weight:600;text-align:right}
.mt-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.mt-act button{flex:0 0 auto}
.mt-ai>summary{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;cursor:pointer}
.mt-ai>summary .mut{font-size:13px}
.mt-aib{margin-top:10px}.mt-aib>.card{box-shadow:none}
#app .katex{font-size:1.06em}
@media (max-width:640px){
  .mt-top{padding:14px}.mt-i{flex-direction:column;gap:10px}
  .mt-gr button{min-width:40px;padding:7px 9px}.mt-gr button span{display:none}
  .mt-f .pri{width:100%}.mt-f>span{display:none}
  .mt-l>summary{padding:12px;flex-wrap:wrap;gap:6px 8px}.mt-l>summary b{flex-basis:calc(100% - 30px);order:3}
  .mt-l>summary:after{order:2;margin-left:auto}
  .mt-b{padding:2px 12px 14px}.mt-ex{grid-template-columns:1fr}
  .mt-t li{grid-template-columns:26px 1fr;gap:8px}.mt-a{grid-column:2;justify-self:start;text-align:left;max-width:none}.mt-a b{text-align:left}
  .mt-act button{flex:1 1 calc(50% - 8px)}
}
.mt-b math{math-style:normal;font-size:1.08em}

/* ---------- Справочник ЕГЭ ---------- */
.et-seg{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--sh);margin:0 0 14px}
.et-seg button{border:0;background:transparent;border-radius:10px;padding:8px 14px;font-weight:600;color:var(--mut)}
.et-seg button.on{background:linear-gradient(120deg,var(--b1),var(--b2));color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 30%,transparent)}
.et-hero{padding:20px;position:relative;overflow:hidden}
.et-hero:before{content:"";position:absolute;right:-80px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,var(--glow1),transparent);pointer-events:none}
.et-hx{display:flex;gap:18px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;position:relative}
.et-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
.et-hero h2{margin:4px 0 6px;font-size:24px;line-height:1.2}
.et-ha{display:flex;gap:8px;flex:1 1 340px;max-width:520px}
.et-ha input{flex:1;min-width:0;border-radius:12px}
.et-ha button{flex:0 0 auto}
.et-chips,.et-nums{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px;position:relative}
.et-chips button{border-radius:999px;padding:7px 14px;font-size:14px}
.et-chips button.on,.et-nums button.on{background:var(--acl);color:var(--ac);border-color:color-mix(in srgb,var(--ac) 40%,transparent);font-weight:700}
.et-nums{margin-top:10px}.et-nums .mut{font-size:13px;margin-right:2px}
.et-nums button{min-width:38px;padding:6px 8px;border-radius:10px;font-weight:600;font-size:14px}
.et-nums .et-x{min-width:0;font-weight:500;color:var(--mut)}
.et-lay{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.et-toc{position:sticky;top:132px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 150px);overflow:auto;padding:8px;border-radius:16px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--sh)}
.et-toc a{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:10px;color:var(--tx);text-decoration:none;font-size:13.5px;line-height:1.25;transition:background .2s}
.et-toc a:hover{background:var(--acl);color:var(--ac)}
.et-toc i,.et-sh>i{font-style:normal;flex:0 0 auto;display:grid;place-items:center;font-weight:700;color:var(--ac);background:var(--acl);border-radius:9px}
.et-toc i{width:28px;height:28px;font-size:11px}
.et-main{min-width:0}
.et-sec{padding:18px;scroll-margin-top:130px}
.et-sh{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.et-sh>i{width:44px;height:44px;font-size:15px;background:linear-gradient(135deg,var(--acl),var(--acl2))}
.et-sh>div{flex:1;min-width:0}.et-sh h3{margin:0;font-size:19px}
.et-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.et-tags button{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--acl2);color:var(--ac2);border:0}
.et-tags button:hover{filter:brightness(.95)}
.et-pr{flex:0 0 auto;padding:7px 10px}
.et-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.et{border:1px solid var(--bd);border-radius:16px;padding:14px;background:color-mix(in srgb,var(--card) 92%,var(--acl));display:flex;flex-direction:column;gap:8px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.et:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:color-mix(in srgb,var(--ac) 30%,var(--bd))}
.et.w2{grid-column:span 2}.et.w3{grid-column:1/-1}
.et-h{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ac)}
.et-fig{display:grid;place-items:center;background:var(--card);border-radius:12px;padding:6px;border:1px solid var(--line)}
.et-t{line-height:1.5;font-size:14.5px}
.et-li{margin:0;padding-left:20px;line-height:1.6}
.et-f{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(var(--c,1),minmax(0,1fr));gap:6px 14px;counter-reset:f}
.et-f li{display:flex;gap:8px;align-items:center;min-height:30px;overflow-x:auto;overflow-y:hidden}
.et-f.num li{counter-increment:f}
.et-f.num li:before{content:counter(f);flex:0 0 auto;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--acl);color:var(--ac)}
.et-m{font-size:1.06em}
.et math{math-style:normal}
.et-ex{border-left:3px solid var(--good);background:color-mix(in srgb,var(--goodl) 60%,transparent);border-radius:0 10px 10px 0;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.et-ex>span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--good)}
.et-tb{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.et-tb>div{padding:9px 12px;border-bottom:1px solid var(--line)}
.et-tb>div:nth-child(odd){border-right:1px solid var(--line)}
.et-tb>div:nth-last-child(-n+2){border-bottom:0}
.et-th{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--ac);background:var(--acl)}
.et-st{display:flex;gap:10px}.et-st>b{flex:0 0 auto;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--acl);color:var(--ac);font-size:13px}
.et-st>div{display:flex;flex-direction:column;gap:6px;min-width:0}
/* чертежи */
.efig{width:100%;max-width:260px;height:auto;overflow:visible;color:var(--tx)}
.efig.wide{max-width:300px}.efig.big{max-width:520px}
.efig line,.efig polygon,.efig polyline,.efig circle,.efig path,.efig ellipse{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.efig .main{stroke-width:1.8}
.efig .thin{stroke-width:1.1}
.efig .dash{stroke-dasharray:5 4;stroke-width:1.2;opacity:.7}
.efig .grid{stroke:var(--mut);stroke-width:.8;stroke-dasharray:2 3;opacity:.55}
.efig .ax{stroke-width:1.3}
.efig .arw{fill:currentColor;stroke:none}
.efig .h,.efig .hs{stroke:var(--ac);stroke-width:2.2}
.efig .h2,.efig .h2l{stroke:var(--ac2);stroke-width:2}
.efig .hw{stroke-width:3}
.efig .arc.h{stroke-width:1.6}.efig .arc.h2{stroke-width:1.4}
.efig .mutd{stroke:var(--mut);opacity:.7}
.efig .soft{stroke:var(--ac2);stroke-width:1.4;opacity:.75}
.efig .soft2{stroke:var(--mut);opacity:.35}
.efig .fill{fill:color-mix(in srgb,var(--ac) 13%,transparent);stroke:none}
.efig .fill2{fill:color-mix(in srgb,var(--ac2) 18%,transparent);stroke:none}
.efig .nf{fill:none}
.efig .dot{fill:currentColor;stroke:none}.efig .dot.h{fill:var(--ac)}
.efig text{fill:currentColor;stroke:none;font:14px "Times New Roman",Times,serif}
.efig .it{font-style:italic}
.efig text.h,.efig .h text,.efig text.hl{fill:var(--ac)}.efig text.hl2{fill:var(--ac2)}
.efig g.h line{stroke:var(--ac)}
.efig text.mut,.efig .mut text{fill:var(--mut)}
.efig text.quad{fill:var(--mut);opacity:.28;font-weight:700}
@media (max-width:980px){.et-lay{grid-template-columns:1fr}.et-toc{display:none}}
@media (max-width:640px){.et-hero{padding:16px}.et-hero h2{font-size:20px}.et-ha{flex-basis:100%}.et-sec{padding:14px}.et.w2,.et.w3{grid-column:auto}.et-f{grid-template-columns:1fr}.et-g{grid-template-columns:1fr}.et-seg{display:flex}.et-seg button{flex:1;padding:8px 6px;font-size:13.5px}}
.efig tspan.hl{fill:var(--ac)}.efig tspan.mutt{fill:var(--mut)}
@media (max-width:640px){.et-fig:has(.big){overflow-x:auto;place-items:start}.efig.big{min-width:380px}}
.et-books{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--acl);margin-bottom:14px;position:relative;flex-wrap:wrap}
.et-books button{border:0;background:transparent;border-radius:10px;padding:7px 14px;font-weight:700;color:var(--ac)}
.et-books button.on{background:var(--card);box-shadow:var(--sh);color:var(--tx)}
.et-tags span{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--acl2);color:var(--ac2)}
.et-defs{display:flex;flex-direction:column;gap:4px;line-height:1.5}
.et-sq,.et-ht{overflow-x:auto}
.et-sq table,.et-ht table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:13.5px}
.et-sq th,.et-sq td,.et-ht th,.et-ht td{border:1px solid var(--line);padding:5px 6px;text-align:center}
.et-sq thead th,.et-ht thead th{background:var(--acl);color:var(--ac);font-weight:700}
.et-sq tbody th{background:var(--acl2);color:var(--ac2)}
.et-sq th.c{font-size:11px;white-space:nowrap}
.et-sq tbody tr:hover td{background:color-mix(in srgb,var(--acl) 50%,transparent)}
.et-pw{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.et-pw>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.et-pw b{color:var(--ac);margin-bottom:2px}
.et-dice{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;max-width:340px}
.et-dice span{text-align:center;padding:5px 0;border-radius:8px;background:var(--card);border:1px solid var(--line);font-variant-numeric:tabular-nums;font-weight:600}
.et-pairs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.et-pairs>div{display:flex;flex-direction:column;gap:8px}
@media (max-width:980px){.et-pw{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.et-pw{grid-template-columns:repeat(2,minmax(0,1fr))}.et-pairs{grid-template-columns:1fr}.et-sq table{font-size:12px}.et-sq th,.et-sq td{padding:4px 3px}}
@media (max-width:640px){.et-m{font-size:.95em}.et-f li{scrollbar-width:thin}}

/* ---------- Меню разделов по иконке ---------- */
.hdr #nav{display:none!important}
.brand h1{display:flex;align-items:center;gap:10px}
#mnb{position:relative;width:42px;height:42px;padding:0;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff;cursor:pointer;transition:transform .25s var(--spring),background .25s,box-shadow .25s}
#mnb:hover{background:rgba(255,255,255,.24);transform:translateY(-1px);box-shadow:0 8px 22px rgba(20,10,90,.28)}
#mnb:active{transform:scale(.95)}
#mnb .mnb-ic{display:grid;place-items:center;transition:opacity .25s,transform .35s var(--spring)}
#mnb .mnb-ic svg{width:28px;height:28px}
#mnb .mnb-g{position:absolute;inset:0;display:grid;grid-template-columns:7px 7px;gap:4px;place-content:center;opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .25s,transform .35s var(--spring)}
#mnb .mnb-g i{width:7px;height:7px;border-radius:2px;background:#fff}
#mnb:hover .mnb-ic,#mnb[aria-expanded="true"] .mnb-ic{opacity:0;transform:scale(.6) rotate(20deg)}
#mnb:hover .mnb-g,#mnb[aria-expanded="true"] .mnb-g{opacity:1;transform:none}
#crumb{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:6px 12px 6px 10px;font:600 14px/1 inherit;cursor:pointer;transition:background .2s;white-space:nowrap}
#crumb:hover{background:rgba(255,255,255,.22)}
#crumb .cr-s{display:none}
#crumb svg{width:15px;height:15px}#crumb .cr-v{width:12px;height:12px;opacity:.8}
.brand{flex-wrap:wrap;row-gap:8px}
.hin{padding-bottom:14px!important}
@media (max-width:640px){#crumb{padding:5px 10px;font-size:13px}#mnb{width:38px;height:38px}}

/* ---------- Замена задания ---------- */
.gx-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gx-act button{font-size:13.5px;padding:6px 12px}
.spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spn .7s linear infinite;vertical-align:-1px}
@keyframes spn{to{transform:rotate(360deg)}}

/* ---------- Прогресс по темам в карточке ученика ---------- */
.pt-card .bar{margin:8px 0 4px}
.pt-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:14px 0 4px}
.pt-row{display:flex;gap:12px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line);border-radius:10px;transition:background .2s}
.pt-row:hover{background:color-mix(in srgb,var(--acl) 45%,transparent)}
.pt-chk{flex:0 0 auto;width:26px;height:26px;min-width:0;padding:0;border-radius:8px;border:2px solid var(--bd);background:var(--card);display:grid;place-items:center;font-weight:800;color:#fff;transition:all .2s var(--spring)}
.pt-chk:hover{border-color:var(--ac)}
.pt-row.ok .pt-chk{background:var(--good);border-color:var(--good)}
.pt-chk:disabled{opacity:1;cursor:default}
.pt-row.ok .pt-t>div:first-child{color:var(--mut);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--mut) 50%,transparent)}
.pt-t .mut{font-size:12.5px}
.pt-hint{margin-top:8px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--warn) 12%,transparent);font-size:13.5px}

/* ---------- Программа ---------- */
.pl-f{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.pl-f button{border-radius:999px;padding:6px 12px;font-size:13.5px}
.pl-f button.on{background:var(--acl);color:var(--ac);font-weight:700;border-color:color-mix(in srgb,var(--ac) 40%,transparent)}
.pl-f select{width:auto;border-radius:999px;padding:6px 12px;font-size:13.5px}
.pl-row .top{align-items:flex-start;gap:12px}
.pl-m{flex:1;min-width:0}
.pl-n{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:8px;background:var(--acl);color:var(--ac);font-size:12px;font-weight:700;margin-right:8px}
.pl-sub{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px;font-size:13px}
.pl-who{padding:2px 9px;border-radius:999px;background:var(--acl2);color:var(--ac2);font-weight:600}
.pl-who.all{background:transparent;border:1px dashed var(--bd);color:var(--mut);font-weight:500}
.pl-ok{color:var(--good);font-weight:600}
.pl-mk{font-size:12.5px;padding:3px 10px}
.pl-b{display:flex;gap:6px;flex:0 0 auto}
.pl-b button{padding:6px 10px}
.pl-as{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pl-as .row{align-items:center}.pl-as select{width:auto}
.pl-st{display:flex;flex-direction:column;gap:6px}
.pl-s{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.pl-s.on{border-color:color-mix(in srgb,var(--ac) 40%,var(--bd));background:color-mix(in srgb,var(--acl) 50%,transparent)}
.pl-s input{width:18px;height:18px;flex:0 0 auto}
.pl-s span{flex:1}.pl-s small{color:var(--mut)}
.pl-d{font-size:12.5px;padding:3px 10px}.pl-d.ok{color:var(--good);border-color:var(--good)}
.pl-sum{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.pl-sum .mut{flex:1}
@media (max-width:640px){.pl-row .top{flex-direction:column}.pl-b{align-self:flex-end}}

/* ---------- Решение к заданию (Материалы и практика в теории) ---------- */
.mt-t li{grid-template-columns:30px minmax(0,1fr)}
.mt-a{grid-column:2;justify-self:stretch;text-align:left;max-width:none}
.mt-a>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ac);list-style:none;padding:4px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);white-space:nowrap;transition:background .2s}
.mt-a>summary::-webkit-details-marker{display:none}
.mt-a>summary:before{content:"💡"}
.mt-a>summary .sv-c{display:none}
.mt-a[open]>summary{background:var(--acl)}
.mt-a[open]>summary .sv-o{display:none}.mt-a[open]>summary .sv-c{display:inline}
.mt-a b{display:inline;margin:0;text-align:left}
.sv{margin-top:8px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--card) 85%,var(--acl));display:flex;flex-direction:column;gap:6px;animation:fadeDown .3s var(--ease)}
.sv-h{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
.sv-r{white-space:pre-line;line-height:1.55;font-size:14px}
.sv-e{border-left:3px solid var(--ac2);padding:6px 10px;border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--acl2) 55%,transparent);font-size:14px;line-height:1.5}
.sv-es{color:var(--good);margin-top:2px}.sv-es:before{content:"→ "}
.sv-s{display:flex;flex-direction:column;gap:3px;line-height:1.55;font-size:14.5px;counter-reset:sv}
.sv-s>div{counter-increment:sv;padding-left:24px;position:relative}
.sv-s>div:before{content:counter(sv);position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:5px;background:var(--acl);color:var(--ac);font-size:10.5px;font-weight:700;display:grid;place-items:center}
.sv-a{display:flex;gap:10px;align-items:baseline;margin-top:4px;padding-top:8px;border-top:1px dashed var(--bd)}
.sv-a span{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--good)}
.sv-a b{color:var(--good);font-size:15.5px}
@media (max-width:640px){.mt-t li{grid-template-columns:26px minmax(0,1fr)}.mt-a{grid-column:2}}

/* ---------- Практика под карточкой справочника ---------- */
.et-try{margin-top:auto;align-self:flex-start;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;color:var(--ac);background:var(--acl);border:1px solid transparent;transition:background .2s,transform .2s var(--ease)}
.et-try:hover{background:var(--acl2);transform:translateY(-1px)}
.et-pp{margin-top:auto;border-top:1px dashed var(--bd);padding-top:10px;display:flex;flex-direction:column;gap:6px;animation:fadeDown .3s var(--ease)}
.et-pph{display:flex;justify-content:space-between;align-items:center}
.et-pph b{font-size:13px;color:var(--ac)}
.et-pph .et-x{padding:2px 8px;font-size:12px;min-width:0}
.et-pp .mt-t li{padding:7px 0;font-size:14px}
.et-ppf{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.et-ppf button{font-size:12.5px;padding:5px 10px}
.et-ppf .mut{font-size:11.5px}
.brand h1 #crumb{margin-left:4px;font-family:inherit}
/* рисунки к заданиям уроков и практики */
.mt-fg{margin:8px 0 6px;max-width:300px}
.mt-fg svg{max-width:100%;height:auto}
.mt-fg .efig{max-width:240px}
.mt-fg>svg[role=img]{margin:0!important}
.et-xb{font-size:11px;font-weight:600;color:var(--mut);border:1px dashed var(--bd,#ccd);border-radius:20px;padding:1px 8px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.et-fs svg{max-width:100%;margin:0 auto!important}
.mt-t li>.mt-fg{grid-column:2;margin:2px 0 4px;padding:0}
.et-pp .mt-fg{max-width:100%}
/* ---------- Новости ---------- */
.nw-hero{background:linear-gradient(135deg,#4630CF,#2F6BEA);color:#fff;border:0;padding:24px}
.nw-hero h2{margin:4px 0 6px;font-size:26px;color:#fff}.nw-k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.nw-hs{max-width:720px;opacity:.92;line-height:1.5}
.nw-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.nw-kpi>div{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.nw-kpi b{font-size:26px;line-height:1.1}.nw-kpi span{font-size:13px;opacity:.9}.nw-kpi i{font-style:normal;font-size:12px;opacity:.8}.nw-kpi i.up{color:#b9ffd8;opacity:1}
.nw-upd{margin-top:14px;font-size:13px;opacity:.85;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nw-upd button{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.nw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.nw-grid>.card{margin:0}.nw-c.w2{grid-column:span 2}.nw-c.w3{grid-column:1/-1}
.nw-c h3{margin:6px 0 8px;font-size:18px}.nw-c p,.nw-c li{line-height:1.55}.nw-c ul{padding-left:20px;margin:6px 0}
.nw-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--ac);background:var(--acl);border-radius:999px;padding:3px 10px}
.nw-src{font-size:12px;color:var(--mut);margin-top:10px;line-height:1.5}.nw-src a{color:var(--ac)}
.nw-chart svg{max-width:100%;height:auto}
.nw-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.nw-h4{font-weight:700;margin:4px 0 6px}
.nw-pr{display:grid;grid-template-columns:48px minmax(0,1fr) 120px 44px;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}
.nw-no{font-weight:700;color:var(--ac)}.nw-pt{font-size:14px}.nw-pt small{display:block;color:var(--mut);font-size:11px}
.nw-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}.nw-bar i{display:block;height:100%;border-radius:99px;background:hsl(var(--h,100) 70% 45%)}
.nw-pr b{text-align:right}.nw-more{margin-top:10px}.nw-more summary{cursor:pointer;color:var(--ac);font-weight:600}.nw-note{font-size:12px;color:var(--mut);margin-top:6px}
.nw-warn{margin-top:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#f59e0b 14%,transparent);font-size:14px}
.nw-tip{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--acl);font-size:14px;line-height:1.5}
.nw-tb{width:100%;border-collapse:collapse;font-size:14px}.nw-tb th,.nw-tb td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}.nw-tb td+td,.nw-tb th+th{text-align:center;font-weight:700}
.nw-dirs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:8px}
.nw-dirs>div{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px}
.nw-code{font-size:11px;font-weight:700;color:var(--ac)}.nw-dirs small{color:var(--mut)}.nw-dirs em{font-style:normal;font-size:12px;color:var(--mut)}
.nw-who{font-size:13px;color:var(--mut);margin-bottom:6px}
.nw-t{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}.nw-t:last-of-type{border-bottom:0}.nw-t span{font-size:14px;line-height:1.5}
.nw-tips4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.nw-tips4 .nw-t{border:1px solid var(--line);border-radius:12px;padding:12px}
#nw-feed{margin-top:14px}.nw-fh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.nw-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}.nw-tags button{border-radius:999px;padding:5px 12px;font-size:13px}.nw-tags button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.nw-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nw-it{display:block;border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--tx);text-decoration:none;transition:border-color .15s,transform .15s}
.nw-it:hover{border-color:var(--ac);transform:translateY(-1px)}
.nw-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--mut)}.nw-tg{color:var(--ac);background:var(--acl);border-radius:99px;padding:0 8px}
.nw-tt{font-weight:700;margin-top:4px;line-height:1.4}.nw-sm{font-size:13px;color:var(--mut);margin-top:4px;line-height:1.45}
.nw-empty{padding:18px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:14px}
@media (max-width:900px){.nw-grid{grid-template-columns:1fr}.nw-c.w2,.nw-c.w3{grid-column:auto}.nw-kpi{grid-template-columns:1fr 1fr}.nw-two{grid-template-columns:1fr}.nw-tips4{grid-template-columns:1fr 1fr}.nw-feed{grid-template-columns:1fr}}
@media (max-width:520px){.nw-tips4{grid-template-columns:1fr}.nw-pr{grid-template-columns:42px minmax(0,1fr) 60px 40px}.nw-hero h2{font-size:22px}}
.nw-bars{position:relative;display:flex;align-items:flex-end;gap:2px;height:220px;padding:22px 0 22px 26px;margin-top:6px}
.nw-grid-y{position:absolute;left:26px;right:0;top:22px;bottom:22px;pointer-events:none}
.nw-grid-y span{position:absolute;left:0;right:0;border-top:1px solid var(--line)}.nw-grid-y em{position:absolute;left:-26px;top:-8px;font-style:normal;font-size:11px;color:var(--mut)}
.nw-b{position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;outline:none}
.nw-b i{position:relative;display:block;width:min(70%,34px);background:var(--ac);opacity:.55;border-radius:4px 4px 0 0;transition:opacity .15s}
.nw-b.last i{opacity:1}.nw-b:hover i,.nw-b:focus i{opacity:1}
.nw-b i b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:3px;font-size:12px;color:var(--tx);white-space:nowrap}
.nw-b small{position:absolute;bottom:-20px;font-size:11px;color:var(--mut)}
.nw-b:hover::after,.nw-b:focus::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--tx);color:var(--bg,#fff);font-size:12px;padding:3px 8px;border-radius:6px;white-space:nowrap;z-index:2}
.nw-bar i{background:var(--ac)!important}

/* ---------- меню разделов: боковая панель ---------- */
#mnu{display:none;position:fixed;inset:0;z-index:80}
#mnu.show{display:block}
#mnu .mn-bg{position:absolute;inset:0;background:rgba(18,12,60,.38);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
#mnu.in .mn-bg{opacity:1}
.mn-side{position:absolute;left:0;top:0;bottom:0;width:min(300px,86vw);background:var(--card);border-right:1px solid var(--bd);box-shadow:20px 0 60px rgba(20,16,70,.25);display:flex;flex-direction:column;padding:16px 12px 12px;transform:translateX(-102%);transition:transform .28s var(--ease,cubic-bezier(.2,.8,.2,1));overflow-y:auto;overscroll-behavior:contain}
#mnu.in .mn-side{transform:none}
.mn-top{display:flex;align-items:center;gap:10px;padding:0 4px 8px}
.mn-logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--b1,#4630CF),var(--b2,#2F6BEA));flex:none}
.mn-logo svg{width:20px;height:20px}
.mn-name{font-weight:700;font-size:16px;line-height:1.15;color:var(--tx)}
.mn-x{margin-left:auto;width:36px;height:36px;min-width:0;padding:0;border-radius:10px;display:grid;place-items:center;color:var(--mut)}
.mn-cap{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:14px 10px 6px}
.mn-i{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:12px;background:transparent;color:var(--tx);font:inherit;font-size:15px;font-weight:500;text-align:left;cursor:pointer;opacity:0;transform:translateX(-8px);transition:background .15s,opacity .25s,transform .25s}
#mnu.in .mn-i{opacity:1;transform:none;transition-delay:calc(var(--i)*16ms),calc(var(--i)*16ms),calc(var(--i)*16ms)}
.mn-i .mn-ic{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--ac)}
.mn-i .mn-ic svg{width:20px;height:20px}
.mn-i .mn-l{flex:1;min-width:0}
.mn-i:hover,.mn-i:focus-visible{background:var(--acl);outline:none}
.mn-i .mn-c{flex:none;font-size:12px;font-weight:600;color:var(--mut)}
.mn-i.on{background:linear-gradient(100deg,var(--b1,#4630CF),var(--b2,#2F6BEA));color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--ac) 35%,transparent)}
.mn-i.on .mn-ic,.mn-i.on .mn-c{color:#fff}
.mn-acc{margin-top:auto;padding-top:14px}
.mn-card{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--acl);text-decoration:none;color:var(--tx)}
.mn-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;background:linear-gradient(135deg,var(--b1,#4630CF),var(--b2,#2F6BEA));flex:none}
.mn-who{font-size:13px;line-height:1.3;min-width:0}.mn-who b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mn-who span{color:var(--mut)}
.mn-links{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.mn-links a{font-size:13px;color:var(--mut);text-decoration:none;padding:6px 8px;border-radius:8px}
.mn-links a:hover{color:var(--ac);background:var(--acl)}
@media (prefers-reduced-motion:reduce){.mn-side,.mn-i{transition:none}}