/* SamVMI akademik litseyi: qog'oz, doska va katak daftar */
:root{
 --navy:#13241d;--navy2:#1c3329;--board:#1f382d;--blue:#1d5c45;--blue2:#2f7a5d;--sun:#c4572a;--sun2:#a8441c;--ochre:#c9962f;
 --bg:#f4efe4;--surface:#fbf8f1;--ink:#1b1f1a;--muted:#5d6157;--line:#ddd5c4;--line2:#c4b9a3;
 --accent:#1d5c45;--accent2:#154535;--tint:#e4ecdf;
 --ok:#2f7a3e;--ok-t:#e1eedb;--warn:#8f5b00;--warn-t:#f6e9c9;--bad:#b3362a;--bad-t:#f6ddd6;
 --head:"Fraunces",Georgia,"Times New Roman",serif;--body:"Manrope",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
 --r:6px;--sh:0 1px 0 rgba(27,31,26,.05);--sh2:0 18px 40px -18px rgba(27,31,26,.35);
 --field:#fffdf8;--th:#efe8da;--hov:#f3eee2;--glass:rgba(244,239,228,.94);
 --grid:linear-gradient(rgba(29,92,69,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(29,92,69,.07) 1px,transparent 1px) 0 0/24px 24px;
 --ph-class:url("https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&w=1400&q=70");
 --ph-grad:url("https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&w=1400&q=70");
}
:root[data-theme=dark]{--bg:#111a15;--surface:#18231d;--ink:#ece6d8;--muted:#a9ad9f;--line:#2a3830;--line2:#3c4d43;--accent:#8fc7a6;--accent2:#b5dcc4;--tint:#1f3128;--ok:#7fcf93;--ok-t:#16301e;--warn:#e8b65a;--warn-t:#33280f;--bad:#f08b7d;--bad-t:#3a1a15;--field:#141e19;--th:#1d2a23;--hov:#1d2a23;--glass:rgba(17,26,21,.94);--sun:#e08a5c;--board:#0c1611;--sh:0 1px 0 rgba(0,0,0,.3);--sh2:0 18px 40px -18px rgba(0,0,0,.7);--grid:linear-gradient(rgba(143,199,166,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(143,199,166,.06) 1px,transparent 1px) 0 0/24px 24px}
@property --p{syntax:'<percentage>';inherits:true;initial-value:0%}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15.5px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--head);font-weight:600;line-height:1.15;letter-spacing:-.01em;font-variation-settings:"opsz" 72}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
::selection{background:var(--sun);color:#fff}

/* Boshqaruv elementlari */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 20px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fbf8f1;font-size:14.5px;font-weight:700;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--accent2);border-color:var(--accent2)}
:root[data-theme=dark] .btn:not(.ghost,.red,.sun,.danger){color:#111a15}
.btn.ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.red{background:none;border-color:transparent;color:var(--bad);padding-inline:8px}
.btn.red:hover{background:var(--bad-t)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
input,textarea,select{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line2);border-radius:4px;background:var(--field);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
input[type=radio],input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--accent)}
input[type=file]{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0}
label{position:relative;display:grid;gap:5px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
label input,label textarea,label select{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);font-size:15px}
.pick{display:inline-flex;align-items:center;width:max-content;min-height:42px;padding:8px 15px;border:1px dashed var(--accent);border-radius:4px;background:var(--tint);color:var(--accent);font-weight:700;letter-spacing:0;text-transform:none;cursor:pointer}
input[type=file]:focus-visible+.pick{outline:2px solid var(--sun);outline-offset:2px}
.msg{min-height:1.4em;font-size:14px;font-weight:600}
.muted{color:var(--muted);font-size:14px}
.tag{display:inline-block;width:max-content;padding:2px 9px;border:1px solid var(--line2);border-radius:2px;background:transparent;color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tag.ok{border-color:var(--ok);color:var(--ok)}
.form{display:grid;gap:14px}
.form>.btn{justify-self:start}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* Kirish */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:100vh;background:var(--bg)}
.authSide{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,5vw,64px);overflow:hidden;color:#ece6d8;background:linear-gradient(rgba(236,230,216,.06) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(236,230,216,.06) 1px,transparent 1px) 0 0/28px 28px,var(--board)}
.authSide::before{content:"∑";position:absolute;right:-.06em;top:-.18em;font:italic 600 clamp(260px,34vw,460px)/1 var(--head);color:rgba(236,230,216,.06);pointer-events:none}
.authSide .brand{position:absolute;left:clamp(28px,5vw,64px);top:32px;padding:0;border:0;color:#ece6d8}
.authSide h2{position:relative;max-width:12em;margin-bottom:22px;font-size:clamp(34px,4.2vw,56px);font-weight:500;font-style:italic}
.authSide ul{position:relative;display:flex;gap:0;flex-wrap:wrap;margin:0;padding:0;list-style:none;border-top:1px solid rgba(236,230,216,.25)}
.authSide li{padding:12px 0 0;margin-right:26px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c9d6cc}
.authSide li::before{content:"✓";margin-right:8px;color:#e8b08f}
.authBox{align-self:center;justify-self:center;display:grid;gap:16px;width:100%;max-width:440px;padding:32px 24px}
.authBox h1{font-size:40px;font-weight:600}
.authBox>a{justify-self:start;padding:10px 0;font-size:14px;font-weight:600}
.tabs{display:flex;gap:22px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line2)}
.tabs button{min-height:42px;margin-bottom:-1px;padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-weight:700;cursor:pointer}
.tabs button.on{border-color:var(--sun);color:var(--ink)}
.tabs.roles{gap:0;padding:0;border:1px solid var(--ink);border-radius:4px;background:transparent}
.tabs.roles button{flex:1;margin:0;border:0;border-radius:0}
.tabs.roles button+button{border-left:1px solid var(--ink)}
.tabs.roles button.on{background:var(--ink);color:var(--bg)}
#demo{gap:8px;padding-top:14px;border:0;border-top:1px dashed var(--line2)}
#demo span{width:100%;font-size:12px;color:var(--muted)}
#demo button{min-height:38px;margin:0;padding:5px 14px;border:1px solid var(--line2);border-radius:4px;background:transparent;color:var(--accent)}

/* Karkas */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
aside{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border-right:1px solid var(--line2);color:var(--ink)}
.brand{display:flex;align-items:center;gap:10px;padding:22px 18px 16px;color:var(--ink);font:600 18px/1.15 var(--head);text-decoration:none}
.brand::before{content:"S";display:grid;place-items:center;flex:none;width:34px;height:34px;border:1.5px solid currentColor;border-radius:2px;font:italic 600 21px/1 var(--head);color:var(--sun)}
aside .brand{border-bottom:1px solid var(--line)}
.who{display:flex;gap:10px;align-items:center;margin:14px 14px 8px;padding:0 0 14px;border-bottom:1px dashed var(--line2)}
.who i,.topbar i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fbf8f1;font-size:13px;font-style:normal;font-weight:800}
.who img{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--accent)}
.who b{display:block;font-size:14px;font-weight:700;line-height:1.25}
.who small{color:var(--muted);font-size:12px}
.menu{position:relative;z-index:1;flex:1;display:grid;gap:0;align-content:start;padding:4px 0;overflow:auto;scrollbar-width:none}
.menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 20px;border:0;border-radius:0;background:none;color:var(--muted);font-weight:600;text-align:left;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.menu svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.menu button:hover{background:var(--hov);color:var(--ink)}
.menu button.on{background:var(--tint);color:var(--accent);box-shadow:inset 3px 0 0 var(--sun)}
.out{position:relative;z-index:1;min-height:44px;margin:8px 14px 16px;padding:8px 12px;border:1px solid var(--line2);border-radius:4px;background:none;color:var(--ink);font-weight:600;text-align:left;cursor:pointer}
.out:hover{border-color:var(--bad);color:var(--bad)}
main{min-width:0;padding:0 36px 100px}
.topbar{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;margin:0 -36px 26px;padding:10px 36px;background:var(--glass);backdrop-filter:blur(6px);border-bottom:1px solid var(--line2);font-size:13px;color:var(--muted)}
.topbar b{color:var(--ink);font-weight:700}
.crumb{letter-spacing:.04em;text-transform:uppercase;font-size:12px}
main h1{margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--ink);font-size:clamp(30px,3.6vw,44px);font-weight:500}
#v{max-width:1180px}

/* Bo'limlar */
.card{margin-bottom:16px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow-wrap:anywhere}
.card h3{margin-bottom:6px;font-size:20px}
.card p{margin:0 0 8px}
.card p:last-child{margin-bottom:0}
.card.empty{padding:44px 20px;text-align:center;color:var(--muted);background:transparent;border:1px dashed var(--line2);box-shadow:none}
.today{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:180px;margin-bottom:20px;padding:30px 34px;overflow:hidden;border-radius:var(--r);background:var(--grid),var(--board);background-color:var(--board);color:#ece6d8}
.today small{color:#e8b08f;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.today h2{margin:8px 0 8px;font-size:clamp(28px,3.4vw,42px);font-weight:500;font-style:italic}
.today p{margin:0 0 16px;color:#c9d6cc}
.today .btn{background:var(--sun);border-color:var(--sun);color:#fff}
.today .btn:hover{background:var(--sun2);border-color:var(--sun2)}
.today>b{font:500 clamp(56px,7vw,88px)/1 var(--head);color:#e8b08f}
.today>b.tring{display:grid;place-items:center;flex:none;width:128px;height:128px;border-radius:50%;background:conic-gradient(#e8b08f var(--p),rgba(236,230,216,.15) 0)}
.tring span{display:grid;place-items:center;width:110px;height:110px;border-radius:50%;background:var(--board);color:#ece6d8;font-size:28px}
.ccover{height:132px;margin:-20px -20px 16px;background:var(--img) center/cover;border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;filter:saturate(.75) sepia(.12)}
.chead{display:flex;justify-content:space-between;gap:14px}
.chead strong{font:500 30px var(--head);color:var(--sun)}
.card h4{margin:18px 0 6px;font:700 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--sun)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cgrid .card{margin:0}

/* Kurs yo'li */
.path{position:relative;margin:0;padding:0 0 0 28px;list-style:none}
.path::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;border-left:1px dashed var(--line2)}
.path li{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:52px;padding:6px 10px;border-bottom:1px solid var(--line);transition:background .15s}
.path li:hover{background:var(--hov)}
.path li::before{content:"";position:absolute;left:-26px;width:14px;height:14px;border:1.5px solid var(--line2);border-radius:2px;background:var(--surface);transform:rotate(45deg)}
.path li.now::before{border-color:var(--sun);background:var(--sun)}
.path li.done::before{border-color:var(--ok);background:var(--ok)}
.path li.lock{color:var(--muted)}
.path span{flex:1 1 170px;font-weight:600}
.path em{padding:1px 8px;border:1px solid var(--ok);border-radius:2px;color:var(--ok);font-size:12px;font-style:normal;font-weight:700}
.path small{font-size:12px}

/* Dars */
.lessonGrid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start;margin-top:14px}
.syll{position:sticky;top:68px;padding:8px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.syll h3{padding:8px 16px 10px;font-size:16px;border-bottom:1px solid var(--line)}
.syll button{display:flex;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:8px 16px;border:0;border-radius:0;background:none;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.syll button:hover:not(:disabled){background:var(--hov)}
.syll button.on{background:var(--tint);color:var(--accent);box-shadow:inset 3px 0 0 var(--sun)}
.syll button.on small{color:var(--accent)}
.syll button:disabled{color:var(--muted);cursor:not-allowed}
.syll small{flex:none;color:var(--muted);font-size:11px}
.novideo{position:relative;display:grid;place-items:end center;aspect-ratio:16/8;margin:10px 0 6px;padding:16px;border-radius:var(--r);background:var(--grid),var(--board);color:#ece6d8;font-weight:600}
.novideo::before{content:"";position:absolute;left:50%;top:44%;width:68px;height:68px;transform:translate(-50%,-50%);border:1.5px solid #ece6d8;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ece6d8' d='M9 6v12l10-6z'/%3E%3C/svg%3E") center/34px no-repeat}

/* Test */
.qno{display:block;margin-bottom:6px;color:var(--sun);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.qt{margin-bottom:8px;font-size:26px;font-weight:500}
#q{counter-reset:o}
.opt{display:flex;gap:14px;align-items:center;min-height:56px;margin:0 0 -1px;padding:10px 14px;border:1px solid var(--line2);border-radius:0;color:var(--ink);font-size:16px;font-weight:500;cursor:pointer;counter-increment:o;transition:background .12s}
.opt::before{content:counter(o,upper-alpha) ")";flex:none;order:-1;width:26px;color:var(--muted);font:italic 600 18px var(--head)}
.opt input{position:absolute;opacity:0}
.opt:hover{background:var(--hov)}
.opt:has(input:checked){position:relative;z-index:1;background:var(--tint);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.opt:has(input:checked)::before{color:var(--accent)}
.opt:has(input:focus-visible){outline:2px solid var(--sun)}
.score{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:6px 0 16px}
.score .ring{--c:var(--bad);display:grid;place-items:center;flex:none;width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--c) var(--p),var(--line) 0)}
.score.ok .ring{--c:var(--ok)}
.score .ring b{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--surface);font:500 34px var(--head);color:var(--c)}
.score h3{font-size:26px}
.bar{height:6px;min-width:80px;border-radius:0;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.card>.bar{margin:8px 0 10px}

/* Ko'rsatkichlar */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:20px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface)}
.kpi{position:relative;min-height:118px;padding:18px 20px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;--c:var(--accent)}
.kpi+.kpi{border-left:1px solid var(--line2)}
.kpi:nth-child(2){--c:var(--ok)}
.kpi:nth-child(3){--c:var(--ochre)}
.kpi:nth-child(4){--c:var(--sun)}
.kpi b{display:block;margin-bottom:4px;color:var(--c);font:500 44px/1.05 var(--head);letter-spacing:-.02em;text-transform:none}
.charts{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,1.1fr) 46px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;font-weight:600}
.hbar b{text-align:right;color:var(--accent);font-family:var(--mono);font-weight:500}
.donutRow{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.donut{display:grid;place-items:center;flex:none;width:136px;height:136px;border-radius:50%}
.donut b{display:grid;place-items:center;width:100px;height:100px;border-radius:50%;background:var(--surface);font:500 30px var(--head)}
.donutRow ul{flex:1;min-width:130px;margin:0;padding:0;list-style:none;font-size:14px;font-weight:600}
.donutRow li{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px dashed var(--line)}
.donutRow li i{width:10px;height:10px;border-radius:0}
.donutRow li b{margin-left:auto}
.stack{display:flex;height:10px;margin:10px 0 8px;overflow:hidden;background:var(--line)}

/* Jadval */
.tw{overflow-x:auto;padding:0}
.tw>h3{padding:18px 20px 8px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{padding:10px 16px;background:transparent;border-bottom:1.5px solid var(--ink);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:left;white-space:nowrap}
td{padding:12px 16px;border-top:1px solid var(--line);white-space:nowrap}
tr:hover td{background:var(--hov)}

/* Kod va doska */
pre{margin:8px 0 0;padding:14px 16px;border-radius:var(--r);background:var(--board);color:#e8efe4;font:500 13px/1.65 var(--mono);overflow:auto;max-height:260px}
textarea.code{min-height:210px;border:0;background:var(--board);color:#e8efe4;font:500 14px/1.65 var(--mono)}
textarea.code:focus{background:var(--board);box-shadow:0 0 0 3px var(--sun)}

/* Maxsus forma joylashuvi */
#v:has(#ph){display:grid;grid-template-columns:repeat(2,minmax(0,460px));gap:16px;align-items:start}
#v:has(#ph) .card{margin:0}

/* Modal, xabar, yuklanish */
.modal{width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid var(--ink);border-radius:var(--r);background:var(--surface);color:var(--ink);box-shadow:8px 8px 0 var(--ink)}
.modal::backdrop{background:rgba(19,36,29,.55)}
.modal h3{font-size:22px}
.modal .row{justify-content:flex-end}
.modal pre{font-size:19px;text-align:center;user-select:all}
.check{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.toast{position:fixed;left:50%;bottom:24px;z-index:20;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 18px;border-left:4px solid var(--sun);border-radius:2px;background:var(--navy);color:#ece6d8;font-weight:600;box-shadow:var(--sh2)}
.toast.bad{border-left-color:#f08b7d;background:var(--bad)}
body.busy::before{content:"";position:fixed;inset:0 0 auto;z-index:30;height:3px;background:repeating-linear-gradient(90deg,var(--sun) 0 18px,transparent 18px 26px)}

@media(max-width:980px){
 .lessonGrid,.charts{grid-template-columns:minmax(0,1fr)}
 .lessonGrid .syll{position:static;order:-1;display:flex;gap:0;overflow-x:auto;padding:0;scrollbar-width:none}
 .syll h3,.syll small{display:none}
 .syll button{flex:none;width:auto;max-width:230px;border-right:1px solid var(--line)}
}
@media(max-width:820px){
 .auth{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
 .authSide{min-height:200px;padding:20px 16px}
 .authSide .brand{left:16px;top:18px}
 .authSide h2{margin:0;font-size:30px}
 .authSide ul{display:none}
 .authBox{align-self:start;padding:22px 16px}
 .authBox h1{font-size:32px}
 .app{grid-template-columns:minmax(0,1fr)}
 aside{position:fixed;inset:0 auto 0 0;z-index:30;width:min(296px,86vw);height:auto;box-shadow:8px 0 0 rgba(19,36,29,.15);transform:translateX(-104%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility .26s}
 body.navOpen aside{transform:none;visibility:visible}
 body.navOpen{overflow:hidden}
 .menuBtn{display:grid}
 .navX{display:grid}
 .topBrand{display:flex}
 .crumb,.search{display:none}
 .menu button{min-height:48px}
 aside .brand{padding-right:64px}
 .themeBtn{width:42px;height:42px}
 main{padding:0 14px 100px}
 .topbar{gap:10px;margin:0 -14px 16px;padding:8px 14px}
 .today{min-height:0;padding:22px 18px;flex-wrap:wrap}
 .today>b.tring{width:96px;height:96px}
 .tring span{width:80px;height:80px;font-size:21px}
 .kpis{grid-template-columns:1fr 1fr}
 .kpi:nth-child(3){border-left:0}
 .kpi:nth-child(n+3){border-top:1px solid var(--line2)}
 .kpi{min-height:100px;padding:14px}
 .kpi b{font-size:34px}
 #v:has(#ph),#l{grid-template-columns:minmax(0,1fr)}
 input,textarea,select{font-size:16px}
 .tw table,.tw tbody,.tw tr,.tw td{display:block;width:100%}
 .tw tr:first-child{display:none}
 .tw tr{padding:10px 16px;border-top:1px solid var(--line)}
 .tw td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0;white-space:normal;background:none!important}
 .tw td:not(:empty)::before{content:attr(data-label);color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
 .tw td:last-child{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Harakat */
@media(prefers-reduced-motion:no-preference){
 #v>*{animation:fadeIn .4s ease-out both}
 #v>*:nth-child(2){animation-delay:.04s}
 #v>*:nth-child(3){animation-delay:.08s}
 #v>*:nth-child(n+4){animation-delay:.12s}
 .tring,.ring{animation:ringIn 1.1s cubic-bezier(.2,.8,.2,1) both}
 .bar i{animation:growX .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
}
@keyframes fadeIn{from{opacity:0}}
@keyframes ringIn{from{--p:0%}}
@keyframes growX{from{transform:scaleX(0)}}
@keyframes growH{from{height:0}}
/* Yuqori panel */
.topActs{display:flex;align-items:center;gap:8px;margin-left:auto}
.menuBtn{display:none;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);cursor:pointer}
.menuBtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.navX{display:none;place-items:center;position:absolute;right:12px;top:16px;z-index:2;width:38px;height:38px;border:1px solid var(--line2);border-radius:4px;background:var(--surface);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.scrim{position:fixed;inset:0;z-index:29;background:rgba(19,36,29,.5);opacity:0;pointer-events:none;transition:opacity .26s}
body.navOpen .scrim{opacity:1;pointer-events:auto}
.topBrand{display:none;padding:0;color:var(--ink);font-size:16px}
.topBrand::before{width:30px;height:30px;font-size:18px}
.search{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:6px 12px;border:1px solid var(--line2);border-radius:4px;background:var(--field);color:var(--muted);font-size:13px;cursor:pointer}
.search kbd{padding:1px 6px;border:1px solid var(--line2);border-radius:2px;background:transparent;font:500 11px var(--mono)}
.themeBtn{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line2);border-radius:4px;background:var(--field);color:var(--ink);font-size:16px;cursor:pointer}
.cmdk{padding:0;overflow:hidden}
.cmdk input{min-height:52px;padding:12px 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.cmdk ul{max-height:340px;margin:0;padding:0;overflow:auto;list-style:none}
.cmdk button{display:flex;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:8px 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;text-align:left;font-weight:600;cursor:pointer}
.cmdk button:hover,.cmdk button:focus-visible{background:var(--tint);outline:0}
.cmdk small{color:var(--muted);font-weight:400}
/* Ism, holat, asboblar */
.nm{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.nm i{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--accent);border-radius:50%;background:var(--tint);color:var(--accent);font-size:11px;font-style:normal;font-weight:800}
.st{display:inline-block;padding:1px 8px;border:1px solid currentColor;border-radius:2px;color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.04em}
.st.ok{color:var(--ok)}
.st.warn{color:var(--warn)}
.card.warn{background:var(--warn-t);border-color:var(--warn);box-shadow:inset 4px 0 0 var(--warn)}
.st.bad{color:var(--bad)}
.st.mute{color:var(--muted)}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tools input{flex:1 1 240px}
.tools select{flex:0 1 180px}
.seg{display:inline-flex;gap:0;margin-bottom:14px;border:1px solid var(--ink);border-radius:4px;overflow:hidden}
.seg button{min-height:38px;padding:6px 14px;border:0;border-radius:0;background:transparent;color:var(--ink);font-weight:700;cursor:pointer}
.seg button+button{border-left:1px solid var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg)}
/* Topshiriqni tekshirish */
.rev{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;margin-bottom:16px;overflow:hidden;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface)}
.revWork{min-width:0;padding:20px}
.revWork header{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.revWork small{display:block;color:var(--muted)}
.revGrade{display:grid;gap:12px;align-content:start;padding:20px;border-left:1px solid var(--line2);background:var(--grid),var(--th);background-color:var(--th)}
.gradeVal{font:500 56px/1 var(--head);color:var(--sun)}
.revGrade input[type=range]{min-height:0;padding:0;border:0;background:none;accent-color:var(--accent)}
.revGrade input[type=range]:focus{box-shadow:none}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{min-height:34px;padding:4px 12px;border:1px solid var(--line2);border-radius:2px;background:var(--surface);color:var(--ink);font-family:var(--mono);font-weight:500;cursor:pointer}
.chips button:hover{border-color:var(--accent);color:var(--accent)}
.aiBox{padding:12px;border-left:3px solid var(--ochre);background:var(--th);font-size:14px}
/* Podium */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:end;margin-bottom:20px;border-bottom:1.5px solid var(--ink)}
.pod{position:relative;display:grid;justify-items:center;gap:4px;padding:20px 12px;overflow:hidden;border:1px solid var(--line2);border-bottom:0;background:var(--surface);text-align:center}
.pod.p1{padding-block:36px;background:var(--board);border-color:var(--board);color:#ece6d8}
.pod i{display:grid;place-items:center;width:56px;height:56px;border:1.5px solid currentColor;border-radius:50%;background:transparent;color:var(--accent);font-style:normal;font-weight:800}
.pod.p1 i{color:#e8b08f}
.pod b{font-size:15px}
.pod span{font:500 30px var(--head)}
.pod em{position:absolute;right:12px;top:2px;font:italic 600 54px var(--head);opacity:.12}
/* Dars formasi */
#v:has(#l),#v:has(#n),#v:has(#b){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
.nlist{display:grid;gap:0;border-top:1.5px solid var(--ink)}
.nlist>.card{margin:0;border-width:0 0 1px;border-radius:0;background:transparent;box-shadow:none;padding:16px 0}
.nitem{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;align-items:start}
.nitem:not(:has(>img)){grid-template-columns:minmax(0,1fr)}
.nitem>img{width:116px;height:88px;object-fit:cover;border-radius:2px;filter:saturate(.8)}
.nitem h3{font-size:17px}
.nitem p:not(.muted){font-size:14px}
@media(max-width:560px){.nitem{grid-template-columns:minmax(0,1fr)}.nitem>img{width:100%;height:150px}}
#l{display:block}
#l .btn{margin-top:14px}
.grp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px;padding:16px;border:1px solid var(--line2);border-radius:var(--r)}
.grp legend{padding:0 8px;color:var(--sun);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.grp .full,.grp>label:has(textarea){grid-column:1/-1}
.llist{min-width:0}
.lgroup summary{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:700;cursor:pointer}
.lrow{display:grid;gap:4px;padding:10px 0;border-top:1px dashed var(--line2);margin-top:10px}
.lrow b{font-size:14px}
.lrow div{display:flex;gap:6px;flex-wrap:wrap}
.lrow .btn{min-height:34px;padding:4px 10px;font-size:13px}
/* Profil */
.pbanner{position:relative;height:110px;margin:-20px -20px 48px;border-radius:var(--r) var(--r) 0 0;background:var(--grid),var(--board);background-color:var(--board)}
.pbanner i,.pbanner img{position:absolute;left:20px;bottom:-34px;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px var(--surface);color:#fff;font-size:22px;font-style:normal;font-weight:800;object-fit:cover}
.meter{height:5px;background:var(--line);overflow:hidden}
.meter i{display:block;width:0;height:100%;transition:width .2s,background .2s}
/* Javon */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:26px 20px;padding:24px 24px 28px;border:1px solid var(--line2);border-bottom:6px solid var(--ochre);border-radius:var(--r) var(--r) 0 0;background:var(--th)}
.book{display:block;color:var(--ink);text-decoration:none}
.cover3d{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:3/4;padding:18px 14px 14px 22px;border-radius:2px;background:var(--a);box-shadow:4px 4px 0 rgba(27,31,26,.25);transition:transform .2s,box-shadow .2s}
.cover3d::before{content:"";position:absolute;left:8px;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.35)}
.book:hover .cover3d{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(27,31,26,.3)}
.cover3d b{font:600 18px/1.15 var(--head)}
.cover3d small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.bookNote{display:block;margin-top:10px;color:var(--muted);font-size:13px}
.skel{height:150px;margin-bottom:14px;border-radius:var(--r);background:linear-gradient(100deg,var(--line) 30%,var(--surface) 50%,var(--line) 70%);background-size:220% 100%;animation:shine 1.2s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.card.empty::before{content:"∅";display:block;margin:0 auto 8px;font:italic 500 44px/1 var(--head);color:var(--line2)}
@media(max-width:980px){
 #v:has(#l),#v:has(#n),#v:has(#b),.rev{grid-template-columns:minmax(0,1fr)}
 .revGrade{border-left:0;border-top:1px solid var(--line2)}
 .search span,.search kbd{display:none}
 .search::before{content:"⌕";font-size:18px}
}
@media(max-width:820px){
 .grp{grid-template-columns:minmax(0,1fr)}
 .pod{padding-inline:6px}
 .pod i{width:44px;height:44px;font-size:13px}
 .pod b{font-size:12px}
 .pod span{font-size:22px}
 .shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;padding:18px 16px 22px}
 .tw .nm{justify-content:flex-end}
}
/* Muqovali kartalar panjarasi */
#v:has(>.card>.ccover){display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
#v:has(>.card>.ccover)>.card{margin:0}
#v:has(>.card>.ccover)>.today,#v:has(>.card>.ccover)>.tw,#v:has(>.card>.ccover)>.kpis,#v:has(>.card>.ccover)>form{grid-column:1/-1;margin:0}

/* AI yordamchi */
.aiFab{position:fixed;right:18px;bottom:18px;z-index:12;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:5px 18px 5px 5px;border:1px solid var(--ink);border-radius:4px;background:var(--surface);color:var(--ink);font-weight:700;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.aiFab:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.aiMark{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:2px;background:var(--accent);color:#fbf8f1}
.aiMark svg{width:20px;height:20px;fill:currentColor}
.aiPanel{position:fixed;right:18px;bottom:82px;z-index:12;display:flex;flex-direction:column;width:min(392px,calc(100vw - 24px));height:min(560px,calc(100vh - 110px));overflow:hidden;border:1px solid var(--ink);border-radius:var(--r);background:var(--surface);box-shadow:8px 8px 0 rgba(27,31,26,.85)}
section.aiPanel{padding:0;scroll-margin:0}
.aiPanel[hidden]{display:none}
.aiPanel>header{position:relative;flex:none;display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--grid),var(--board);background-color:var(--board);color:#ece6d8}
.aiPanel header b{display:block;font:600 18px/1.15 var(--head)}
.aiPanel header small{display:flex;align-items:center;gap:6px;margin-top:3px;color:#c9d6cc;font-size:12px}
.aiPanel header small i{width:8px;height:8px;border-radius:50%;background:#e8b08f}
.aiPanel header small.on i{background:#7fcf93}
.aiX{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;margin-left:auto;border:1px solid rgba(236,230,216,.4);border-radius:4px;background:transparent;color:#ece6d8;font-size:22px;line-height:1;cursor:pointer}
.aiX:hover{background:rgba(236,230,216,.15)}
.aiLog{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:16px;overflow-y:auto;background:var(--bg)}
.aiM{max-width:86%;padding:10px 13px;border-radius:2px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.aiM.bot{align-self:flex-start;border:1px solid var(--line2);border-left:3px solid var(--accent);background:var(--surface)}
.aiM.me{align-self:flex-end;background:var(--accent);color:#fbf8f1}
.aiDots{display:inline-flex;gap:4px;padding:4px 2px}
.aiDots i{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.45}
.aiSug{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px;background:var(--bg)}
.aiSug[hidden]{display:none}
.aiSug button{flex:none;min-height:34px;padding:5px 11px;border:1px solid var(--line2);border-radius:2px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer}
.aiSug button:hover{border-color:var(--accent);color:var(--accent)}
.aiForm{flex:none;display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--line2);background:var(--surface)}
.aiForm textarea{overflow-y:hidden;min-height:44px;max-height:120px;padding:10px 12px;border-radius:4px;resize:none;font-size:15px}
.aiForm button{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:4px;background:var(--sun);color:#fff;cursor:pointer}
.aiForm svg{width:20px;height:20px;fill:currentColor}
body:has(.form textarea:focus) .aiFab,body:has(.form input:focus) .aiFab{display:none}
@media(prefers-reduced-motion:no-preference){
 .aiPanel{animation:aiIn .2s ease-out both;transform-origin:right bottom}
 .aiM{animation:aiMsg .2s ease-out both}
 .aiDots i{animation:aiDot 1s infinite}
 .aiDots i:nth-child(2){animation-delay:.15s}
 .aiDots i:nth-child(3){animation-delay:.3s}
}
@keyframes aiIn{from{opacity:0;transform:translateY(10px)}}
@keyframes aiMsg{from{opacity:0;transform:translateY(5px)}}
@keyframes aiDot{50%{opacity:1;transform:translateY(-3px)}}
@media(max-width:820px){
 .aiFab{right:12px;bottom:12px;min-height:46px;padding:4px;box-shadow:3px 3px 0 var(--ink)}
 .aiFab .aiLabel{display:none}
 .aiPanel{left:8px;right:8px;bottom:68px;width:auto;height:min(68vh,560px)}
}

/* Telefonda yuqori panel va yon menyu */
@media(max-width:820px){
 .menuBtn,.navX{display:grid}
 .topBrand{display:flex}
 .crumb,.search{display:none}
}

/* O'xshashlik, qurilma hisoblari, admin sozlamalari */
.simBox{padding:12px;border-left:3px solid var(--ok);background:var(--ok-t);color:var(--ok);font-size:14px}
.simBox.warn{border-color:var(--warn);background:var(--warn-t);color:var(--warn)}
.simBox.bad{border-color:var(--bad);background:var(--bad-t);color:var(--bad)}
.simBox small{display:block;margin-top:2px;color:var(--muted)}
.accs{display:grid;gap:8px}
.accs>small{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.acc{display:flex;align-items:center;gap:6px}
.acc>button:first-child{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:54px;padding:8px 12px;border:1px solid var(--line2);border-radius:4px;background:var(--field);color:var(--ink);cursor:pointer}
.acc>button:first-child:hover{border-color:var(--accent)}
.acc small{color:var(--muted);font-size:12px}
.accX{flex:none;width:40px;height:40px;border:0;border-radius:4px;background:none;color:var(--muted);font-size:20px;cursor:pointer}
.accX:hover{background:var(--bad-t);color:var(--bad)}
#v:has(#pg){display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;align-items:start}
#v:has(#pg)>.card{max-width:none!important;margin:0}
#v:has(#pg)>.tw{grid-column:1/-1}

/* Kutubxona: javon va bibliografiya */
.libHead{display:flex;align-items:baseline;gap:12px;margin:8px 0 16px;padding-bottom:10px;border-bottom:1.5px solid var(--ink);font-size:24px;font-weight:500}
.libHead span{font:500 14px var(--mono);color:var(--sun)}
.libHead:not(:first-child){margin-top:36px}
.shelf .cover3d{text-decoration:none;color:#fbf8f1}
.shelf .book{display:flex;flex-direction:column}
.shelf .bookNote{min-height:1.2em}
.bookActs{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.bookActs .btn{min-height:34px;padding:4px 10px;font-size:12.5px}
.libTools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.libTools .seg{margin:0;flex-wrap:wrap}
.libTools input{flex:1 1 240px}
.arts{display:grid;grid-template-columns:minmax(0,1fr);gap:0;counter-reset:art}
.art{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"n top acts" "n title acts" "n src acts" "n au acts";column-gap:18px;row-gap:3px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line2);background:transparent;counter-increment:art}
.art::before{content:"[" counter(art) "]";grid-area:n;padding-top:2px;font:500 15px var(--mono);color:var(--sun)}
.art[hidden]{display:none}
.artTop{grid-area:top;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.artTop small{color:var(--muted);font:500 12px var(--mono)}
.art h4{grid-area:title;font:600 18px/1.3 var(--head)}
.art>p{grid-area:src;margin:0;font-size:14px;font-style:italic;color:var(--muted)}
.art>p.muted{grid-area:au;font-style:normal;font-weight:600;color:var(--ink)}
.art .row{grid-area:acts;margin:0;align-self:center;flex-wrap:nowrap}
.art .btn{min-height:36px;padding:5px 12px;font-size:13px}
.cover3d b{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:820px){.art{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"n top" "n title" "n src" "n au" "n acts"}.art .row{margin-top:8px;flex-wrap:wrap}.art .btn{flex:1 1 0;min-height:44px}.seg button{min-height:44px}.libTools .seg{display:flex;width:100%}.libTools .seg button{flex:1 1 auto}.bookActs .btn{flex:1 1 0;min-width:0;padding:4px 6px}.cover3d b{font-size:16px}.libHead{font-size:21px}}

/* Bilim ko‘rsatkichlari: jadval va diagramma */
.levels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:30px;align-items:center}
.lvTable{overflow-x:auto}
.levels table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14.5px}
.lvC0{width:32%}
.levels th,.levels td{padding:10px 12px;text-align:center;border-bottom:1px solid var(--line);background:none}
.levels th{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--muted);white-space:normal}
.levels th small{display:block;font-weight:600;opacity:.85}
.levels th[rowspan],.levels td:first-child{text-align:left}
.levels td{font-family:var(--mono);font-size:13.5px}
.levels td:first-child{font-family:var(--body);font-weight:700;white-space:nowrap}
.levels td i,.lvLegend i,.lvLists h4 i{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:0;vertical-align:0}
.levels tr:last-child td{border-top:1.5px solid var(--ink);border-bottom:0;font-weight:700}
.lvChart{padding:26px 0 0 40px}
.lvArea{position:relative;height:230px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--grid)}
.lvTick{position:absolute;left:-40px;right:0;height:0}
.lvTick em{position:absolute;left:0;width:33px;transform:translateY(-50%);font:500 11px/1 var(--mono);font-style:normal;text-align:right;color:var(--muted)}
.lvTick::after{content:"";position:absolute;left:40px;right:0;border-top:1px dashed var(--line2)}
.lvGroups{position:absolute;inset:0;display:flex}
.lvBars{flex:1;display:flex;justify-content:center;align-items:flex-end;gap:6px}
.lvBar{position:relative;width:min(44px,24%);height:var(--h);border-radius:0;background:var(--c);animation:growH .8s ease both}
.lvBar b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:5px;font:500 12px var(--mono);white-space:nowrap}
.lvNames{display:flex;margin-top:10px}
.lvNames span{flex:1;padding:0 6px;text-align:center;font-size:12.5px;color:var(--muted)}
.lvLegend{display:flex;justify-content:center;gap:18px;margin:14px 0 0;padding:0;list-style:none;font-size:13px;font-weight:600}
.lvLists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:22px;border:1px solid var(--line2)}
.lvLists>div{padding:14px}
.lvLists>div+div{border-left:1px solid var(--line2)}
.lvLists h4{display:flex;align-items:center;margin:0 0 8px;font-size:15px}
.lvLists h4 span{margin-left:auto;font:500 12.5px var(--mono);color:var(--muted)}
.lvLists p{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0;font-size:13.5px}
@media(max-width:820px){.levels,.lvLists{grid-template-columns:minmax(0,1fr)}.lvLists>div+div{border-left:0;border-top:1px solid var(--line2)}.lvArea{height:200px}.levels table{font-size:13px}.levels th{font-size:10.5px}.levels th,.levels td{padding:8px 3px}.levels td i{margin-right:5px}.lvNames span{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.lvBar{animation:none}}
.levels th.lvGroupHead{color:var(--ink);font-size:12px;border-bottom:1px solid var(--line)}
.lvAxisT{margin-top:6px;text-align:center;font-size:12px;font-weight:800;letter-spacing:.08em}