:root{--bg:#fff;--ink:#1b2340;--mut:#6b7491;--line:#e8ebf5;--soft:#f6f7fd;--ac:#4f46e5;--ac2:#7c3aed;--ok:#16a34a;--bad:#dc2626;--m:"Cambria Math","STIX Two Math","Source Serif 4",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.55 "Source Serif 4",Georgia,serif}
h1,h2,h3,button,.tag,.k,input{font-family:"Bricolage Grotesque",system-ui,sans-serif}
.top{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:9px 20px;background:#ffffffee;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font:800 20px "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;white-space:nowrap}.logo i{font-style:normal;color:#fff;background:linear-gradient(135deg,var(--ac),var(--ac2));padding:1px 7px;border-radius:7px;margin-right:6px}
.ov{width:100%;max-width:340px;justify-self:end}.ov p{margin:0 0 4px;font:600 11.5px "Bricolage Grotesque",sans-serif;color:var(--mut)}
.bar{height:6px;background:var(--line);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--ac),#22c55e);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.cr{display:flex;align-items:baseline;gap:8px;padding:4px 16px;border:1px solid var(--line);border-radius:99px;background:var(--soft);white-space:nowrap;transition:.3s}.cr:hover{transform:translateY(-1px);box-shadow:0 6px 16px #4f46e522}
.cr small{font:italic 400 12px "Source Serif 4",Georgia,serif;color:var(--mut)}
.cr b{font:800 14px "Bricolage Grotesque",sans-serif;letter-spacing:.01em;background:linear-gradient(90deg,var(--ac),var(--ac2),#ec4899,var(--ac));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh2 6s linear infinite}
@keyframes sh2{to{background-position:-250% 0}}
.wrap{display:grid;grid-template-columns:320px minmax(0,1fr) 340px;max-width:1320px;margin:0 auto;gap:22px;padding:18px}
@media(max-width:860px){.wrap{grid-template-columns:1fr;padding:10px}.top{grid-template-columns:1fr;gap:6px;padding:9px 12px}.cr{justify-self:start}.ov{justify-self:stretch;max-width:none}}
#toc{position:sticky;top:62px;max-height:calc(100vh - 80px);overflow:auto;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:8px;scrollbar-width:thin}
@media(max-width:860px){#toc{position:static;max-height:none}}
.sec{border-radius:11px;margin-bottom:2px;animation:in .45s both}
.sh{width:100%;border:0;background:none;color:var(--ink);text-align:left;padding:8px 9px;border-radius:11px;cursor:pointer;display:flex;gap:10px;align-items:center;transition:background .25s}
.sh:hover{background:#eceefb}.sec.open>.sh{background:#fff;box-shadow:0 1px 6px #4f46e51c}
.k{flex:none;width:26px;height:26px;border-radius:8px;background:#e6e8fa;color:var(--ac);display:grid;place-items:center;font-weight:800;font-size:12px;transition:.3s}
.sec.open .k{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;transform:rotate(-6deg) scale(1.08)}
.sh b{display:block;font:700 13px/1.25 "Bricolage Grotesque",sans-serif}.sh small{font-size:11px;color:var(--mut)}
.cv{margin-left:auto;font-size:9px;color:var(--mut);transition:transform .3s}.sec.open .cv{transform:rotate(90deg)}
.tw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}.sec.open .tw{grid-template-rows:1fr}.tl{overflow:hidden}
.tp{display:flex;gap:9px;align-items:center;width:100%;border:0;background:none;color:var(--ink);text-align:left;padding:6px 10px 6px 14px;cursor:pointer;font:500 12.5px/1.3 "Source Serif 4",serif;border-radius:9px;transition:background .2s,transform .2s}
.tp:hover{background:#eceefb;transform:translateX(3px)}.tp.sel{background:var(--ac);color:#fff}
.dot{flex:none;min-width:26px;height:19px;padding:0 5px;border-radius:99px;border:1.5px solid #c3c8e2;font:700 9.5px/16px "Bricolage Grotesque",sans-serif;text-align:center;color:var(--mut)}
.sel .dot{border-color:#fff9;color:#fff}.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.soon{padding:6px 12px 8px 14px;font-size:12px;color:var(--mut);font-style:italic}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.96);opacity:0}100%{transform:none;opacity:1}}
#d>*{animation:in .5s both}#d>*:nth-child(2){animation-delay:.06s}#d>*:nth-child(3){animation-delay:.12s}#d>*:nth-child(4){animation-delay:.18s}
.hero{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border-radius:18px;padding:20px 22px;position:relative;overflow:hidden}
.hero:after{content:"+ − × ÷";position:absolute;right:14px;bottom:-10px;font:800 54px var(--m);opacity:.14;letter-spacing:6px}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;background:#ffffff2e;margin:0 5px 7px 0}.tag.a{background:var(--ok)}
.hero h2{margin:0;font-size:24px;line-height:1.15;font-weight:800;position:relative}
h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:20px 0 9px}
.rule{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;transition:box-shadow .25s}.rule:hover{box-shadow:0 8px 20px #4f46e51a}
.rule h4{margin:0 0 5px;font:700 15px/1.3 "Bricolage Grotesque",sans-serif;display:flex;gap:9px;align-items:flex-start}
.rule h4 b{flex:none;background:var(--ac);color:#fff;border-radius:8px;padding:0 8px;font-size:12px;line-height:22px;margin-top:1px}
.rule p{margin:0 0 10px}
.ex{background:#fff;border:1px solid var(--line);border-left:3px solid var(--ac);border-radius:10px;padding:7px 12px;margin-top:6px;transition:transform .25s}.ex:hover{transform:translateX(4px)}
.ex code{font:600 17px var(--m);color:var(--ac)}.ex span{display:block;font-size:13px;color:var(--mut)}
.lab{font:700 11px "Bricolage Grotesque",sans-serif;color:var(--mut);margin-right:6px;text-transform:uppercase;letter-spacing:.06em}
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.pg.c2{grid-template-columns:repeat(2,1fr)}.pg div{word-break:break-word}@media(max-width:520px){.pg div{font-size:13px;padding:6px}}
.pg div{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font:15px var(--m);transition:.2s}.pg div:hover{border-color:var(--ac);transform:translateY(-2px)}
.pg i{font:700 10px "Bricolage Grotesque",sans-serif;color:var(--ac);font-style:normal;margin-right:6px}
.btn{font:700 14px "Bricolage Grotesque",sans-serif;padding:9px 20px;border:0;border-radius:99px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;cursor:pointer;box-shadow:0 6px 16px #4f46e540;transition:.2s}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px #4f46e555}
.btn.g{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none;padding:7px 14px;font-size:12.5px}.btn.g:hover:not(:disabled){background:var(--soft);box-shadow:none}.btn:disabled{opacity:.4;cursor:default;transform:none}
#pr{margin-top:14px}
.stp{display:flex;gap:10px;margin-top:8px;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.stp>b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ac);color:#fff;font:700 11px/22px "Bricolage Grotesque",sans-serif;text-align:center}
.stp strong{display:block;font:700 13.5px "Bricolage Grotesque",sans-serif}.stp span{display:block;color:var(--mut);font-size:13px}.stp code{display:block;font:600 17px var(--m);color:var(--ac);margin-top:3px}
.intro{margin:0 0 10px}.note{background:linear-gradient(135deg,#eef0ff,#f5eeff);border:1px solid #d9dcf7;border-radius:12px;padding:10px 14px;font-weight:600}
.sc{display:flex;align-items:baseline;gap:10px;margin:2px 0 8px}.sc b{font:800 32px "Bricolage Grotesque",sans-serif;color:var(--ac)}.sc span{color:var(--mut)}
.pg div.rs.y{border-color:#86efac;background:#f0fdf4}.pg div.rs.n{border-color:#fca5a5;background:#fef2f2}.rs b{font-weight:700}.rs small{display:block;font:600 11px "Bricolage Grotesque",sans-serif;color:var(--bad);margin-top:2px}
.pc{border:2px solid var(--ac);border-radius:18px;padding:18px 20px;animation:pop .35s both;background:#fff}
.ph{display:flex;justify-content:space-between;align-items:center;font:600 12.5px "Bricolage Grotesque",sans-serif;color:var(--mut);margin-bottom:8px;gap:8px;flex-wrap:wrap}
.dots{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}.dots button{width:24px;height:24px;border-radius:50%;border:1.5px solid #c3c8e2;background:#fff;font:700 10px "Bricolage Grotesque",sans-serif;color:var(--mut);cursor:pointer;padding:0;transition:.2s}
.dots .y{background:var(--ok);border-color:var(--ok);color:#fff}.dots .n{background:var(--bad);border-color:var(--bad);color:#fff}.dots .c{box-shadow:0 0 0 3px #4f46e533;border-color:var(--ac)}
.q{font:600 34px var(--m);text-align:center;margin:10px 0 14px}
.ar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ar input{width:170px;font-size:22px;text-align:center;padding:8px 12px;border:2px solid var(--line);border-radius:12px;outline:0;color:var(--ink);transition:.2s}.ar input:focus{border-color:var(--ac);box-shadow:0 0 0 4px #4f46e51f}
.ar input.y{border-color:var(--ok);background:#f0fdf4}.ar input.n{border-color:var(--bad);background:#fef2f2;animation:sh .35s}
@keyframes sh{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
.fb{text-align:center;min-height:24px;margin:10px 0;font:700 14px "Bricolage Grotesque",sans-serif}.fb.y{color:var(--ok)}.fb.n{color:var(--bad)}
.pn{display:flex;justify-content:space-between;gap:8px}
.soonbox{border:2px dashed #c3c8e2;border-radius:16px;padding:38px 20px;text-align:center;margin-top:14px;color:var(--mut);background:var(--soft)}.soonbox b{display:block;font:800 18px "Bricolage Grotesque",sans-serif;color:var(--ink);margin-bottom:4px}
.nav{display:flex;justify-content:space-between;margin-top:22px;gap:8px;flex-wrap:wrap}
#rt{position:sticky;top:62px;align-self:start;display:grid;gap:12px;align-content:start;max-height:calc(100vh - 80px);overflow:auto;scrollbar-width:thin}
#rkd{display:grid;gap:8px;align-content:start;max-height:max(280px,calc(100vh - 360px));overflow:auto;scrollbar-width:thin}
#rkd .rk-t button{font-size:11.5px;padding:7px 4px}
.stc,.stc2,.fc{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px;animation:in .5s both}
.stc{display:flex;gap:12px;align-items:center}.av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;font:800 16px "Bricolage Grotesque",sans-serif}
.stc b,.stc2>b{display:block;font:700 15px/1.25 "Bricolage Grotesque",sans-serif}.stc small{color:var(--mut);font-size:12px}.stc a{color:var(--ac);text-decoration:none}.stc a:hover{text-decoration:underline}
.nr{display:flex;gap:6px;margin-top:8px}.nr input{flex:1;min-width:0;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;outline:0}.nr input:focus{border-color:var(--ac)}.nr .btn{padding:6px 12px;font-size:12.5px;box-shadow:none}
.fc h3{margin:0 0 9px}.fi{background:#fff;border:1px solid var(--line);border-left:3px solid var(--ac);border-radius:10px;padding:7px 11px;margin-bottom:7px;font:15px/1.4 var(--m);transition:.25s}.fi:hover{transform:translateX(3px);border-color:var(--ac)}
@media(max-width:1240px){.wrap{grid-template-columns:320px 1fr}#toc{grid-row:1/span 2}#rt{grid-column:2;position:static;max-height:none;overflow:visible}}
@media(max-width:860px){.wrap{grid-template-columns:1fr}#toc{grid-row:auto}#rt{grid-column:auto}}
/* ===== Orqa fon: matematika daftari (katak) ===== */
body{background-color:#f7f9ff;background-image:linear-gradient(rgba(79,70,229,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.07) 1px,transparent 1px),linear-gradient(rgba(79,70,229,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.11) 1px,transparent 1px);background-size:22px 22px,22px 22px,110px 110px,110px 110px;background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(620px 420px at 88% -6%,rgba(165,180,252,.35),transparent),radial-gradient(520px 420px at -6% 104%,rgba(216,180,254,.30),transparent)}
#d{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 10px 34px rgba(79,70,229,.09)}
@media(max-width:860px){#d{padding:12px;border-radius:18px}}
/* ===== Kasr va daraja ko'rinishi ===== */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.1;margin:0 3px;font-size:.88em}
.fr>span{display:block!important;font-size:inherit!important;color:inherit!important;margin:0!important}
.fr>span:first-child{border-bottom:1.5px solid currentColor;padding:0 4px 1px}.fr>span:last-child{padding:1px 4px 0}
/* ===== Profil ===== */
.pf{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(79,70,229,.10);animation:in .5s both}
.pf-cover{height:72px;background:linear-gradient(135deg,var(--ac),var(--ac2) 60%,#ec4899);position:relative;overflow:hidden}
.pf-cover:after{content:"∑  π  ∫  √  ∞";position:absolute;left:0;right:0;bottom:-8px;text-align:center;font:800 34px var(--m);letter-spacing:10px;color:#fff;opacity:.17;white-space:nowrap}
.pf-av{width:80px;height:80px;margin:-40px auto 0;border-radius:50%;border:4px solid #fff;display:grid;place-items:center;font:800 28px "Bricolage Grotesque",sans-serif;color:#fff;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 6px 16px rgba(79,70,229,.30);position:relative;transition:transform .3s}
.pf-av:hover{transform:rotate(-6deg) scale(1.05)}.pf-av.g{font-size:38px;font-family:"Cambria Math","Segoe UI Emoji","Apple Color Emoji",serif}
.pf-body{padding:8px 14px 14px;text-align:center}
.pf-name{display:block;font:800 17px/1.2 "Bricolage Grotesque",sans-serif;margin-top:4px;word-break:break-word}
.pf-role{display:inline-block;margin:6px 0 12px;padding:1px 11px;border-radius:99px;background:#eef0ff;color:var(--ac);font:700 11px "Bricolage Grotesque",sans-serif;letter-spacing:.04em}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.pf-stats div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:7px 2px}
.pf-stats b{display:block;font:800 17px "Bricolage Grotesque",sans-serif}.pf-stats small{font:600 10px "Bricolage Grotesque",sans-serif;color:var(--mut)}
.pf-act{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pf-act button{padding:7px 0;border:1px solid var(--line);background:#fff;border-radius:10px;font:700 12px "Bricolage Grotesque",sans-serif;color:var(--ink);cursor:pointer;transition:.2s}
.pf-act button:hover{background:var(--ac);color:#fff;border-color:var(--ac);transform:translateY(-2px)}
.pf-out{margin-top:10px;background:none;border:0;color:var(--bad);font:700 12px "Bricolage Grotesque",sans-serif;cursor:pointer}.pf-out:hover{text-decoration:underline}
.pf-form{text-align:left}.pf-form label{display:block;font:700 11px "Bricolage Grotesque",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-bottom:6px}
.avg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avo{aspect-ratio:1;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);font-size:22px;color:#fff;cursor:pointer;transition:.2s;display:grid;place-items:center;padding:0;font-family:"Cambria Math","Segoe UI Emoji","Apple Color Emoji",serif;font-weight:700}
.avo:hover{transform:scale(1.12)}.avo.on{box-shadow:0 0 0 3px var(--ac)}
/* ===== Mashq ishlash ===== */
.ar input{width:min(250px,100%);font-size:22px}
.lnk{background:none;border:0;color:var(--mut);cursor:pointer;font:600 12px "Bricolage Grotesque",sans-serif;padding:0}.lnk:hover{color:var(--bad)}
.dots .a{background:#e0e7ff;border-color:var(--ac);color:var(--ac)}
.tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0 0;padding:9px;background:var(--soft);border:1px dashed #c3c8e2;border-radius:12px;animation:pop .25s both}.tools[hidden]{display:none}
.tools button{min-width:42px;padding:5px 10px;border:1px solid var(--line);background:#fff;border-radius:9px;font:600 16px var(--m);cursor:pointer;transition:.15s;color:var(--ink)}
.tools button:hover{background:var(--ac);color:#fff;border-color:var(--ac);transform:translateY(-2px)}
.pv{min-height:20px;text-align:center;font:600 13px "Bricolage Grotesque",sans-serif;color:var(--ac);margin:10px 0}.pv.w{color:#b45309}
.btn.g.fin{border-color:var(--ac);color:var(--ac);font-weight:700}
/* ===== Natijalar ===== */
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.rh{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ring{--p:0;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),#e8ebf5 0);display:grid;place-items:center;animation:fillr 1.1s ease-out both;flex:none}
.ring span{width:86px;height:86px;border-radius:50%;background:#fff;display:grid;place-items:center;align-content:center;text-align:center}
.ring b{font:800 25px/1 "Bricolage Grotesque",sans-serif}.ring small{color:var(--mut);font:600 12px "Bricolage Grotesque",sans-serif}
@keyframes fillr{from{--p:0}}
.rm h4{margin:0 0 8px;font:800 19px/1.25 "Bricolage Grotesque",sans-serif}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips .c{font:700 12px "Bricolage Grotesque",sans-serif;padding:3px 10px;border-radius:99px;background:var(--soft);border:1px solid var(--line)}
.chips .y{background:#f0fdf4;border-color:#86efac;color:#15803d}.chips .n{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}.chips .s{background:#fffbeb;border-color:#fcd34d;color:#b45309}
.pg div.rs{animation:pop .4s both}.pg div.rs.s{border-color:#fcd34d;background:#fffbeb}
/* ===== Telefon uchun moslashtirish ===== */
html{-webkit-text-size-adjust:100%}
button,a,input{touch-action:manipulation}
.wrap>*{min-width:0}
.ex code,.stp code,.fi,.rs,.q,.rule p{overflow-wrap:anywhere}
.mb,#bk,.dh,.fab,#rbk,.rth,#rkp{display:none}
/* ===== Reyting paneli va profildagi bob testi ===== */
.rk-t{display:flex;gap:6px}
.rk-t button{flex:1;padding:8px 6px;border:1px solid var(--line);background:#fff;border-radius:10px;font:700 12.5px "Bricolage Grotesque",sans-serif;color:var(--mut);cursor:pointer;transition:.2s}
.rk-t button.on{background:var(--ac);border-color:var(--ac);color:#fff}
.rk-note{margin:0 2px;font:500 12px/1.45 "Source Serif 4",Georgia,serif;color:var(--mut)}
.rk-row{display:grid;grid-template-columns:28px 38px 1fr;gap:8px 10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 10px}
.rk-row.me{border:2px solid var(--ac);background:#eef0ff}
.rk-n{font:800 15px "Bricolage Grotesque",sans-serif;text-align:center;color:var(--mut)}
.rk-n.t1{color:#d97706}.rk-n.t2{color:#64748b}.rk-n.t3{color:#c2410c}
.rk-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 14px/1 "Bricolage Grotesque",sans-serif;background:linear-gradient(135deg,var(--ac),var(--ac2))}
.rk-av.g{font-size:20px;font-family:"Segoe UI Emoji","Apple Color Emoji","Cambria Math",serif}
.rk-nm b{display:block;font:700 13.5px/1.25 "Bricolage Grotesque",sans-serif;word-break:break-word}
.rk-nm small{font:600 10.5px "Bricolage Grotesque",sans-serif;color:var(--ac)}
.rk-m{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:8px}
.rk-m small,.pf-test small{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font:700 10.5px "Bricolage Grotesque",sans-serif;color:var(--mut)}
.rk-m small b,.pf-test small b{font:800 14px "Bricolage Grotesque",sans-serif;color:var(--ink)}
.rk-b{height:6px;margin-top:3px;background:var(--line);border-radius:9px;overflow:hidden}.rk-b i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--ac),#22c55e)}
.pf-prog{display:grid;gap:8px;margin:0 0 12px}.pf-prog .pf-test{margin:0}
.pf-test{margin:0 0 12px;padding:9px 12px;background:var(--soft);border:1px solid var(--line);border-radius:12px;text-align:left}
/* ===== Bosh oyna ===== */
.hm-sub{margin:8px 0 0;font:500 14.5px/1.5 "Source Serif 4",Georgia,serif;opacity:.93;position:relative;max-width:48ch}
.hm-go{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:14px;padding:14px 16px;border:2px solid var(--ac);border-radius:16px;background:#fff}
.hm-go small{display:block;font:700 11px "Bricolage Grotesque",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.hm-go b{display:block;font:800 16px/1.3 "Bricolage Grotesque",sans-serif;margin-top:2px}
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.hm-ch{display:flex;gap:10px;align-items:center;text-align:left;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--soft);cursor:pointer;color:var(--ink);transition:.2s}
.hm-ch:hover{border-color:var(--ac);transform:translateY(-2px)}
.hm-ch b{display:block;font:700 13px/1.25 "Bricolage Grotesque",sans-serif}.hm-ch small{font-size:11px;color:var(--mut)}
.hm-ch.empty{opacity:.65}
.logo{cursor:pointer}
#offb{background:#fef3c7;color:#92400e;text-align:center;font:700 12px/1.4 "Bricolage Grotesque",sans-serif;padding:6px 12px;border-bottom:1px solid #fcd34d}
@media(hover:none){.tp:hover,.ex:hover,.fi:hover,.rule:hover,.pg div:hover,.ch span:hover,.tools button:hover,.pf-act button:hover,.btn:hover,.avo:hover,.cr:hover,.f:hover{transform:none}}
@media(max-width:860px){
 body{font-size:15px;padding-bottom:calc(70px + env(safe-area-inset-bottom))}
 .top{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:9px 12px}
 .logo{font-size:17px}.cr{padding:2px 10px;gap:5px}.cr small{font-size:10.5px}.cr b{font-size:12px}
 .ov{flex:1 1 100%;max-width:none;width:auto}
 .wrap{gap:12px;padding:10px}
 #toc{position:fixed;top:0;left:0;bottom:0;z-index:60;width:min(86vw,340px);max-height:none;border-radius:0 20px 20px 0;padding:12px 8px calc(12px + env(safe-area-inset-bottom));transform:translateX(-105%);transition:transform .3s ease;box-shadow:none;overflow:auto;grid-row:auto;-webkit-overflow-scrolling:touch}
 body.nav-open #toc{transform:none;box-shadow:0 0 40px rgba(20,32,70,.35)}
 .dh{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-12px;z-index:2;background:var(--soft);padding:4px 6px 10px;margin:-4px -2px 4px}
 .dh b{font:800 16px "Bricolage Grotesque",sans-serif}
 .dh button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:15px;cursor:pointer;color:var(--ink)}
 #bk{display:block;position:fixed;inset:0;z-index:55;background:rgba(20,32,70,.45);opacity:0;pointer-events:none;transition:opacity .3s}
 body.nav-open #bk{opacity:1;pointer-events:auto}
 body.nav-open{overflow:hidden}
 .mb{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -6px 20px rgba(79,70,229,.08)}
 body.typing .mb{display:none}
 .mb button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:var(--mut);font:700 10.5px "Bricolage Grotesque",sans-serif;padding:4px 0;border-radius:10px;cursor:pointer}
 .mb button:active{background:#eef0ff;color:var(--ac)}
 .mb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .hero{padding:16px}.hero h2{font-size:20px}
 .tp{padding:10px 10px 10px 14px;font-size:14px}.sh{padding:10px}
 .rule{padding:12px}.ex code{font-size:16px}
 .btn{padding:10px 18px}.btn.g{padding:9px 12px;font-size:13px}
 .nav{margin-bottom:52px}.nav button{padding:9px 14px;flex:1}
 .pc{padding:14px}
 .ar{flex-direction:column;align-items:stretch}.ar input{width:100%;font-size:20px}.ar .btn{width:100%}
 .en{display:none}
 .pn{flex-wrap:wrap}.pn .btn{flex:1}.pn .fin{order:3;flex:1 1 100%}
 .dots button{width:34px;height:34px;font-size:12px}
 .tools button{min-width:44px;min-height:40px}
 .ring{width:98px;height:98px}.ring span{width:74px;height:74px}.ring b{font-size:21px}
 .rm h4{font-size:17px}
 .nr input,.pf-form input,#login-overlay input{font-size:16px!important}
 .pg.c3{grid-template-columns:repeat(2,1fr)}.pg.c2{grid-template-columns:1fr}
 /* O'ng ustun (profil + formulalar) telefonda pastdan chiqadigan panel */
 #rt,#rkp{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:84vh;max-height:84dvh;overflow:auto;-webkit-overflow-scrolling:touch;background:#f6f7fd;border-radius:22px 22px 0 0;padding:0 12px calc(16px + env(safe-area-inset-bottom));grid-column:auto;align-self:auto;gap:12px;transform:translateY(105%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s}
 #rkp{display:grid;align-content:start}
 #rt .fc{display:none}
 #rkd{max-height:none}
 body.rt-open #rt,body.rk-open #rkp{transform:none;visibility:visible;transition:transform .3s ease;box-shadow:0 -10px 40px rgba(20,32,70,.35)}
 .rth{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:2;background:#f6f7fd;padding:14px 2px 10px}
 .rth b{font:800 16px "Bricolage Grotesque",sans-serif}
 .rth button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:15px;cursor:pointer;color:var(--ink)}
 #rbk{display:block;position:fixed;inset:0;z-index:65;background:rgba(20,32,70,.45);opacity:0;pointer-events:none;transition:opacity .3s}
 body.rt-open #rbk,body.rk-open #rbk{opacity:1;pointer-events:auto}
 body.rt-open,body.rk-open{overflow:hidden}
 .fab svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .fab{display:flex;align-items:center;justify-content:center;position:fixed;right:14px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:52;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;font:800 24px var(--m);cursor:pointer;box-shadow:0 8px 22px rgba(79,70,229,.45);transition:transform .2s}
 .fab:active{transform:scale(.92)}
 body.typing .fab,body.nav-open .fab{display:none}
 .fg{grid-template-columns:1fr}
 #login-overlay{height:100dvh!important;overflow:auto;padding:16px}
 #login-overlay .pc{width:min(340px,92vw)!important}
}
/* ===== v4 ===== */
.fab{display:none!important}
.subst{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:var(--soft);border:1px solid var(--line);font:600 12.5px/1.4 "Bricolage Grotesque",sans-serif;color:var(--mut)}
/* ===== v5: ixcham profil, tahrirlash oynasi, formulalar, reyting ===== */
/* Profil kartasi */
.pr{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 24px rgba(79,70,229,.10);overflow:hidden;animation:in .5s both}
.pr:before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--ac),var(--ac2) 60%,#ec4899)}
.pr-h{display:flex;align-items:center;gap:11px;padding:12px 12px 10px}
.pr-av{flex:none;width:50px;height:50px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;font:800 18px/1 "Bricolage Grotesque",sans-serif;color:#fff;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 4px 12px #4f46e540;cursor:pointer;transition:transform .2s}
.pr-av:hover{transform:rotate(-6deg) scale(1.05)}
.pr-av.g{font-size:27px;font-family:"Segoe UI Emoji","Apple Color Emoji","Cambria Math",serif}
.pr-id{flex:1;min-width:0}
.pr-nm{display:block;font:800 15.5px/1.2 "Bricolage Grotesque",sans-serif;overflow-wrap:anywhere}
.pr-sub{display:inline-block;margin-top:4px;padding:0 9px;border-radius:99px;background:#eef0ff;color:var(--ac);font:700 10.5px/17px "Bricolage Grotesque",sans-serif;letter-spacing:.04em}
.pr-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 12px 12px}
.pr-m>div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:7px 8px 7px;min-width:0}
.pr-m b{display:block;font:800 17px/1.1 "Bricolage Grotesque",sans-serif}
.pr-m small{display:block;margin-top:2px;font:700 10px "Bricolage Grotesque",sans-serif;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-m em{display:block;font:600 10px "Bricolage Grotesque",sans-serif;font-style:normal;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-bar{display:block;height:4px;margin:5px 0 4px;background:var(--line);border-radius:9px;overflow:hidden}
.pr-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--ac),#22c55e)}
.pr-f{display:flex;border-top:1px solid var(--line)}
.pr-f button{border:0;background:none;padding:10px 0;font:700 12px "Bricolage Grotesque",sans-serif;cursor:pointer;transition:.2s}
.pr-edit{flex:1;color:var(--ac)}.pr-edit:hover{background:#eef0ff}
.pr-f .pr-out{flex:none;width:34%;color:var(--bad);border-left:1px solid var(--line)}.pr-out:hover{background:#fef2f2}
/* Profilni tahrirlash oynasi */
.pem{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(20,32,70,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pem.on{display:flex}
body.pe-open{overflow:hidden}
.pe{width:min(460px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;-webkit-overflow-scrolling:touch;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(20,32,70,.4);animation:pop .3s both}
.pe-h{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;padding:14px 16px}
.pe-h b{font:800 17px "Bricolage Grotesque",sans-serif}
.pe-h button{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:14px;cursor:pointer}
.pe-b{padding:4px 16px 18px}
.pe-s{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:10px}
.pe-s:last-child{border-bottom:0;padding-bottom:0}
.pe-prev{display:flex;flex-direction:column;align-items:center;gap:6px}
.pe-prev small{font:700 11px "Bricolage Grotesque",sans-serif;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.pr-av.big{width:76px;height:76px;font-size:26px;cursor:default}.pr-av.big:hover{transform:none}.pr-av.big.g{font-size:40px}
.pe-avg{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.pe-avg .avo{font-size:18px;border-width:2px}
.pe-link{justify-self:center;border:0;background:none;color:var(--ac);font:700 12px "Bricolage Grotesque",sans-serif;cursor:pointer;padding:2px 6px}.pe-link:hover{text-decoration:underline}
.pe-names{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pe-fl{min-width:0}
.pe-fl label{display:block;margin-bottom:5px;font:700 11px "Bricolage Grotesque",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.pe input{width:100%;box-sizing:border-box;font:500 14.5px "Source Serif 4",Georgia,serif;padding:10px 12px;border:1px solid var(--line);border-radius:12px;outline:0;background:#fff;color:var(--ink);transition:.2s}
.pe input:focus{border-color:var(--ac);box-shadow:0 0 0 3px #4f46e51f}
.pe-pi{position:relative}.pe-pi input{padding-right:44px}
.pe-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:none;cursor:pointer;font-size:16px;opacity:.7}
.pe-s h4{margin:0;font:800 14px "Bricolage Grotesque",sans-serif}
.pe-wide{width:100%;padding:11px 18px}
.btn.g.pe-wide{padding:10px 18px;font-size:13.5px}
.pe-msg{font:600 12.5px/1.4 "Bricolage Grotesque",sans-serif;color:var(--mut)}.pe-msg:empty{display:none}
.pe-msg.err{color:var(--bad)}.pe-msg.ok{color:var(--ok)}
/* Mavzu ichidagi formulalar bloki */
.fx{margin-top:18px;padding:14px;border-radius:18px;border:1px solid #dcdffa;background:linear-gradient(160deg,#eef0ff,#f6f2ff 55%,#fdf2fb);position:relative;overflow:hidden}
.fx:after{content:"∑";position:absolute;right:12px;top:-20px;font:800 100px var(--m);color:var(--ac);opacity:.06;pointer-events:none}
.fx-h{display:flex;align-items:center;gap:11px;margin-bottom:12px;position:relative}
.fx-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;font:800 20px var(--m);box-shadow:0 6px 16px #4f46e540}
.fx-h b{display:block;font:800 16px/1.2 "Bricolage Grotesque",sans-serif}
.fx-h small{font:600 11.5px "Bricolage Grotesque",sans-serif;color:var(--mut)}
.fx-c{margin-left:auto;padding:2px 10px;border-radius:99px;background:#fff;border:1px solid #dcdffa;font:700 11px "Bricolage Grotesque",sans-serif;color:var(--ac)}
.fx-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:relative}
.fx-i{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #e3e6fb;border-radius:14px;padding:10px 12px;transition:.2s}
.fx-i.r{grid-column:1/-1}
.fx-i:hover{border-color:var(--ac);box-shadow:0 8px 18px #4f46e51f;transform:translateY(-2px)}
.fx-n{flex:none;width:22px;height:22px;border-radius:50%;background:#eef0ff;color:var(--ac);font:800 11px/22px "Bricolage Grotesque",sans-serif;text-align:center}
.fx-t{min-width:0;overflow-wrap:anywhere}
.fx-i.m .fx-t{font:17px/1.35 var(--m);white-space:pre-wrap;color:var(--ink)}
.fx-i.r .fx-t{font:500 13.5px/1.45 "Source Serif 4",Georgia,serif}
/* Reyting */
.rkc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 8px 10px 12px;box-shadow:0 8px 24px rgba(79,70,229,.08)}
.rkc>h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:800 14px "Bricolage Grotesque",sans-serif;text-transform:none;letter-spacing:0;color:var(--ink)}
.rkc>h3:before{content:"";width:6px;height:18px;border-radius:4px;background:linear-gradient(var(--ac),var(--ac2))}
.rk-top{position:sticky;top:0;z-index:3;background:#fff;padding-bottom:6px;display:grid;gap:7px}
.rk-t{display:flex;gap:2px;padding:3px;background:var(--soft);border:1px solid var(--line);border-radius:11px}
.rk-t button{flex:1;padding:7px 4px;border:0;background:none;border-radius:8px;font:700 11.5px "Bricolage Grotesque",sans-serif;color:var(--mut);cursor:pointer;transition:.2s}
.rk-t button.on{background:#fff;color:var(--ac);box-shadow:0 2px 8px rgba(79,70,229,.18)}
.rk-pos{padding:0 2px;font:600 11.5px "Bricolage Grotesque",sans-serif;color:var(--mut)}.rk-pos b{color:var(--ac);font-size:13px}
.rk-warn{margin:0;padding:6px 9px;border-radius:9px;background:#fef3c7;color:#92400e;font:600 11px/1.4 "Bricolage Grotesque",sans-serif}
.rk-list{display:grid;gap:8px}
.rk-row{display:grid;grid-template-columns:30px 40px minmax(0,1fr);gap:8px 10px;align-items:center;padding:10px 11px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:.2s}
.rk-row:hover{border-color:#c9cdf5;box-shadow:0 6px 16px #4f46e514}
.rk-row.me{border-color:var(--ac);background:linear-gradient(180deg,#f7f7ff,#eef0ff);box-shadow:0 0 0 1px var(--ac) inset}
.rk-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;justify-self:center;font:800 12.5px "Bricolage Grotesque",sans-serif;color:var(--mut);background:var(--soft)}
.rk-n.t1{color:#fff;background:linear-gradient(135deg,#fbbf24,#d97706)}
.rk-n.t2{color:#fff;background:linear-gradient(135deg,#cbd5e1,#64748b)}
.rk-n.t3{color:#fff;background:linear-gradient(135deg,#fdba74,#c2410c)}
.rk-av{width:40px;height:40px}
.rk-nm{min-width:0}
.rk-nm b{display:block;font:700 14px/1.25 "Bricolage Grotesque",sans-serif;overflow-wrap:anywhere}
.rk-nm small{display:inline-block;margin-top:3px;padding:0 8px;border-radius:99px;background:var(--ac);color:#fff;font:700 10px/16px "Bricolage Grotesque",sans-serif}
.rk-m{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:2px}
.rk-c{min-width:0;padding:6px 8px 7px;border-radius:10px;background:var(--soft)}
.rk-c.hl{background:#eef0ff;box-shadow:0 0 0 1px #d6d9fb inset}
.rk-l{display:block;font:700 10px "Bricolage Grotesque",sans-serif;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-v{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:1px}
.rk-v b{font:800 16px/1.1 "Bricolage Grotesque",sans-serif;color:var(--ink)}
.rk-v em{font:600 10.5px "Bricolage Grotesque",sans-serif;font-style:normal;color:var(--mut);white-space:nowrap}
.rk-c .rk-b{margin-top:4px;height:5px}
.rk-note{margin:2px 2px 0}
@media(max-width:860px){
 .fx-g{grid-template-columns:1fr}
 #rt{top:auto}
 #rkp .rk-top{position:static}
 .pem{align-items:flex-end;padding:0}
 .pe{width:100%;max-height:92vh;max-height:92dvh;border-radius:22px 22px 0 0}
 .pe input{font-size:16px!important}
 .rkc{padding-right:12px}
}
@media(max-width:380px){.pe-names{grid-template-columns:1fr}.pe-avg{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ===== v6: brend va yangi reyting maketi ===== */
.logo{display:flex;align-items:center}
.lg-uz{font-style:normal;font-weight:700;color:var(--ac);opacity:.75;margin-left:1px}
.hero .lg-uz{color:#fff;opacity:.7}
/* O'ng ustun: butun balandlikni egallaydi, profil yig'iladi, reyting qolgan joyni to'ldiradi */
@media(min-width:861px){
 #rt{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 80px);max-height:none;overflow:hidden;align-content:normal}
 #rt .rth{display:none}
 #rt .pr{flex:none}
 #rt .rkc{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
 #rt .rkc>h3{flex:none}
 #rkd{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:none;overflow:hidden;gap:0}
 #rkd .rk-top{position:static;flex:none}
 #rkd .rk-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 6px 2px 0;margin-right:-4px}
 #rkd .rk-note{flex:none;margin-top:8px}
}
@media(min-width:861px) and (max-width:1240px){
 #rt{height:auto;overflow:visible}
 #rkd{max-height:70vh}
}
/* Profil: yig'iladigan */
.pr-tg{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--mut);font-size:11px;cursor:pointer;transition:.25s}
.pr-tg:hover{border-color:var(--ac);color:var(--ac)}
.pr-tg span{display:inline-block;transition:transform .3s}
.pr:not(.min) .pr-tg span{transform:rotate(180deg)}
.pr.min .pr-m,.pr.min .pr-f{display:none}
.pr.min .pr-h{padding:9px 12px}
.pr.min .pr-av{width:38px;height:38px;font-size:14px}.pr.min .pr-av.g{font-size:21px}
.pr.min .pr-sub{display:none}
.pr-mini{display:none;font:700 11px "Bricolage Grotesque",sans-serif;color:var(--mut);margin-top:2px}
.pr.min .pr-mini{display:block}
/* Reyting qatori: ixcham, bir qatorli */
.rk-list{gap:6px}
.rk-row{grid-template-columns:26px 34px minmax(0,1fr) auto;gap:0 10px;padding:7px 10px;border-radius:12px}
.rk-av{width:34px;height:34px}
.rk-row .rk-n{width:24px;height:24px;font-size:11.5px}
.rk-nm b{font-size:13px;line-height:1.2}
.rk-nm small{margin-top:2px}
.rk-s{display:flex;align-items:center;gap:6px;white-space:nowrap}
.rk-s .p{display:grid;justify-items:end;line-height:1.1;padding:3px 9px;border-radius:9px;background:var(--soft)}
.rk-s .p.hl{background:#eef0ff;box-shadow:0 0 0 1px #d6d9fb inset}
.rk-s .p b{font:800 14px "Bricolage Grotesque",sans-serif;color:var(--ink)}
.rk-s .p.hl b{color:var(--ac)}
.rk-s .p small{font:700 9px "Bricolage Grotesque",sans-serif;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.rk-row.me{position:sticky;top:0;bottom:0;z-index:2}
.rk-top{padding-bottom:8px}
@media(max-width:860px){
 #rkp .rk-list{overflow:visible;max-height:none}
 .rk-row{padding:8px 10px}
}
@media(max-width:360px){.rk-s .p:not(.hl){display:none}}

/* ===== v7: reyting qatori — ism bir qatorda, ostida foiz chizig'i ===== */
.rk-row{grid-template-columns:24px 34px minmax(0,1fr) auto;align-items:center;gap:0 10px}
.rk-nm{min-width:0}
.rk-l1{display:flex;align-items:center;gap:6px;min-width:0}
.rk-l1 b{display:block;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 13px/1.25 "Bricolage Grotesque",sans-serif}
.rk-l1 small{flex:none;margin:0;padding:0 7px;border-radius:99px;background:var(--ac);color:#fff;font:700 9.5px/15px "Bricolage Grotesque",sans-serif}
.rk-nm .rk-b{height:6px;margin-top:5px;background:#e3e6f7;border-radius:99px;overflow:hidden}
.rk-nm .rk-b i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#4f46e5,#6366f1);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.rk-pc{min-width:38px;text-align:right;font:800 14px "Bricolage Grotesque",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.rk-row.me .rk-pc{color:var(--ac)}
.rk-row{padding:8px 10px}
/* Savollarni almashtirish */
.sh2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:20px 0 9px}
.sh2 h3{margin:0;flex:1 1 150px;min-width:0}
.swp-b{flex:none;padding:1px 9px;border-radius:99px;background:#ecfdf3;color:var(--ok);border:1px solid #bbf7d0;font:700 10.5px/17px "Bricolage Grotesque",sans-serif}
.swp{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 13px 6px 10px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ac);font:700 12px "Bricolage Grotesque",sans-serif;cursor:pointer;transition:.2s}
.swp:hover{background:var(--ac);border-color:var(--ac);color:#fff}
.swp svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s}
.swp:hover svg{transform:rotate(180deg)}
@keyframes swf{from{opacity:.2;transform:translateY(5px);background:#eef0ff}to{opacity:1;transform:none}}
.pg.swf>div{animation:swf .45s both}
@media(max-width:380px){.swp span{display:none}.swp{padding:7px 9px}}
/* ===== v8: ustoz paneli ===== */
.tpm{position:fixed;inset:0;z-index:110;overflow:auto;-webkit-overflow-scrolling:touch;background:#f7f9ff}
.tpm[hidden]{display:none!important}
body.tp-open{overflow:hidden}
.tp-w{max-width:1100px;margin:0 auto;padding:14px}
.tp-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tp-h b{font:800 20px "Bricolage Grotesque",sans-serif}
.tp-role{padding:1px 11px;border-radius:99px;background:#eef0ff;color:var(--ac);font:700 11px/20px "Bricolage Grotesque",sans-serif}
.tp-g{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.tp-l,.tp-r{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(79,70,229,.08)}
.tp-l h3,.tp-r h3{margin:0 0 10px}.tp-r h3{margin-top:16px}
.tp-f{display:flex;gap:8px;margin-bottom:8px}
.tp-f input{flex:1;min-width:0;font:500 14px "Source Serif 4",Georgia,serif;padding:9px 12px;border:1px solid var(--line);border-radius:12px;outline:0}
.tp-f input:focus{border-color:var(--ac);box-shadow:0 0 0 3px #4f46e51f}
.tp-f .btn{padding:8px 16px;font-size:13px;white-space:nowrap}
.tp-gi{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 12px;margin-bottom:6px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);cursor:pointer;transition:.2s}
.tp-gi:hover{border-color:var(--ac)}.tp-gi.on{background:var(--ac);border-color:var(--ac);color:#fff}
.tp-gi b{display:block;font:700 14px/1.2 "Bricolage Grotesque",sans-serif}
.tp-gi small{font:600 11px "Bricolage Grotesque",sans-serif;opacity:.75}
.tp-gi i{font:800 13px "Bricolage Grotesque",sans-serif;font-style:normal}
.tp-dh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.tp-dh h2{margin:0;font:800 20px "Bricolage Grotesque",sans-serif}
.tp-dh small{color:var(--mut);font:600 12px "Bricolage Grotesque",sans-serif}
.tp-msg{min-height:18px;margin:0 0 6px;font:600 12.5px/1.4 "Bricolage Grotesque",sans-serif;color:var(--mut)}
.tp-msg.ok{color:var(--ok)}.tp-msg.err{color:var(--bad)}
.tp-m{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:6px;border:1px solid var(--line);border-radius:12px;background:#fff}
.tp-m span{flex:1;min-width:0;font:700 13.5px "Bricolage Grotesque",sans-serif;overflow-wrap:anywhere}
.tp-m small{display:block;font:600 11px "Bricolage Grotesque",sans-serif;color:var(--mut)}
.tp-x{border:0;background:none;color:var(--bad);font:700 12px "Bricolage Grotesque",sans-serif;cursor:pointer;padding:6px}
.tp-n{margin:6px 0;color:var(--mut);font:500 13px/1.45 "Source Serif 4",Georgia,serif}
@media(max-width:860px){.tp-g{grid-template-columns:1fr}.tp-w{padding:10px 10px calc(20px + env(safe-area-inset-bottom))}.tp-f input{font-size:16px}}
/* ===== v9: ustoz paneli, natijalar tahlili ===== */
.tp-tabs{display:flex;gap:4px;padding:3px;margin:12px 0 4px;background:var(--soft);border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.tp-tabs button{flex:1 0 auto;padding:8px 12px;border:0;background:none;border-radius:9px;font:700 12.5px "Bricolage Grotesque",sans-serif;color:var(--mut);cursor:pointer;white-space:nowrap;transition:.2s}
.tp-tabs button.on{background:#fff;color:var(--ac);box-shadow:0 2px 8px rgba(79,70,229,.18)}
.tp-tabs .tp-rf{flex:none;font-size:16px;padding:6px 12px}
.tp-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 4px}
.tp-kpi div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:9px 10px}
.tp-kpi b{display:block;font:800 22px/1.1 "Bricolage Grotesque",sans-serif;color:var(--ac)}
.tp-kpi small{font:700 10.5px "Bricolage Grotesque",sans-serif;color:var(--mut)}
.tp-hist{display:grid;gap:6px}
.tp-hr{display:grid;grid-template-columns:minmax(90px,130px) 1fr 36px;align-items:center;gap:10px;font:600 12px "Bricolage Grotesque",sans-serif;color:var(--mut)}
.tp-hr.wide{grid-template-columns:minmax(120px,240px) 1fr 44px}
.tp-hr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-hr b{text-align:right;font-weight:800;color:var(--ink)}
.tp-bar{height:7px;background:#e3e6f7;border-radius:99px;overflow:hidden}
.tp-bar i{display:block;height:100%;border-radius:99px;background:var(--ac);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.tp-bar i.g{background:linear-gradient(90deg,#22c55e,#16a34a)}
.tp-bar i.m{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.tp-bar i.b{background:linear-gradient(90deg,#f87171,#dc2626)}
.tp-bar i.n{background:#c3c8e2}
.tp-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px}
.tp-t{width:100%;border-collapse:collapse;font:500 13px "Source Serif 4",Georgia,serif}
.tp-t th{background:var(--soft);text-align:left;padding:8px 10px;font:700 11px "Bricolage Grotesque",sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);white-space:nowrap;border-bottom:1px solid var(--line)}
.tp-t th button{border:0;background:none;padding:0;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;cursor:pointer}
.tp-t th button:hover{color:var(--ac)}
.tp-t td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;min-width:0}
.tp-t tbody tr{cursor:pointer;transition:background .15s}.tp-t tbody tr:hover{background:#f3f4ff}
.tp-t tbody tr:last-child td{border-bottom:0}
.tp-t td b{display:block;font:700 13.5px "Bricolage Grotesque",sans-serif}
.tp-t small,.tp-er small{display:block;font:600 11px "Bricolage Grotesque",sans-serif;color:var(--mut)}
.tp-t td .tp-bar{width:90px;margin:4px 0 3px}
.tp-pc{display:inline-block;font:800 14px "Bricolage Grotesque",sans-serif}
.tp-pc.g{color:var(--ok)}.tp-pc.m{color:#b45309}.tp-pc.b{color:var(--bad)}
.tp-t small.tp-w2{color:var(--bad)}
.tp-sd{position:fixed;inset:0;z-index:115;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,32,70,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.tp-sd[hidden]{display:none!important}
.tp-sdw{width:min(860px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(20,32,70,.4);overflow:hidden;animation:pop .3s both}
.tp-sdh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff}
.tp-sdh b{display:block;font:800 17px "Bricolage Grotesque",sans-serif}
.tp-sdh small{font:600 12px "Bricolage Grotesque",sans-serif;opacity:.8}
.tp-sdh button{width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:14px;cursor:pointer}
.tp-sdb{padding:4px 16px 18px;overflow:auto;-webkit-overflow-scrolling:touch}
.tp-sdb h3{margin-top:14px}
.tp-sdb .tp-t tbody tr{cursor:default}.tp-sdb .tp-t tbody tr:hover{background:none}
.tp-t.sm td,.tp-t.sm th{padding:6px 8px;font-size:12.5px}
.tp-el{display:grid;gap:8px}
.tp-er{padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:12px;background:#fff}
.tp-eq{font:600 16px var(--m);overflow-wrap:anywhere}
.tp-ea{margin:2px 0;font:600 12.5px "Bricolage Grotesque",sans-serif;color:var(--mut)}.tp-ea b{color:var(--ink)}
.tp-ek{display:flex;align-items:center;gap:10px;margin-bottom:6px}.tp-ek .tp-eq{flex:1;min-width:0}
.tp-rk{flex:none;width:24px;height:24px;border-radius:50%;background:#fef2f2;color:var(--bad);font:800 12px/24px "Bricolage Grotesque",sans-serif;text-align:center}
.tp-er>.tp-bar{margin:0 0 6px}
@media(max-width:860px){
 .tp-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tp-sd{align-items:flex-end;padding:0}
 .tp-sdw{border-radius:22px 22px 0 0;max-height:92vh;max-height:92dvh}
 .tp-hr,.tp-hr.wide{grid-template-columns:minmax(80px,120px) 1fr 40px}
}
.th-r{display:grid;grid-template-columns:minmax(120px,38%) 1fr auto;gap:10px;align-items:center;padding:6px 0}
.th-l{font:600 13px/1.3 "Bricolage Grotesque",sans-serif;overflow-wrap:anywhere}.th-l small{display:block;color:var(--mut);font-size:11px}
.th-b{height:12px;background:#e6e8fa;border-radius:99px;overflow:hidden}
.th-b i{display:block;height:100%;border-radius:99px;animation:thw .6s ease-out both}
.th-b i.hi{background:#ef4444}.th-b i.mid{background:#f59e0b}.th-b i.lo{background:#22c55e}
.th-v{font:800 12.5px "Bricolage Grotesque",sans-serif;text-align:right;white-space:nowrap}.th-v small{display:block;color:var(--mut);font:600 10.5px "Bricolage Grotesque",sans-serif}
@keyframes thw{from{width:0}}
@media(max-width:560px){.th-r{grid-template-columns:1fr auto}.th-b{grid-column:1/-1;order:3}}
/* ===== Dark rejim ===== */
:root{--card:#fff;--card-a:rgba(255,255,255,.96);--topbg:#ffffffee;--bg2:#f7f9ff;--tint:#eef0ff;--tint2:#e6e8fa;--line2:#dcdffa;--line3:#c3c8e2;--okbg:#f0fdf4;--okbd:#86efac;--oktx:#15803d;--badbg:#fef2f2;--badbd:#fca5a5;--badtx:#b91c1c;--warnbg:#fffbeb;--warnbd:#fcd34d;--warntx:#92400e;color-scheme:light}
html[data-theme="dark"]{--bg:#0b1020;--ink:#e7ebfb;--mut:#98a3c7;--line:#27305a;--soft:#121a36;--ac:#7c78ff;--ac2:#a78bfa;--ok:#4ade80;--bad:#f87171;--card:#161f40;--card-a:rgba(22,31,64,.96);--topbg:#0b1020ee;--bg2:#0b1020;--tint:#1d2650;--tint2:#232d57;--line2:#2f3a6b;--line3:#3a4577;--okbg:#10301f;--okbd:#1f6b3d;--oktx:#86efac;--badbg:#3a1520;--badbd:#7f2a3a;--badtx:#fca5a5;--warnbg:#3a2e10;--warnbd:#8a6a14;--warntx:#fcd34d;color-scheme:dark}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--card);color:var(--ink)}
html[data-theme="dark"] ::placeholder{color:var(--mut);opacity:.8}
html[data-theme="dark"] body:before{opacity:.3}
html[data-theme="dark"] .pf2-edit:hover,html[data-theme="dark"] .tbtn:hover{color:#fff}
.thbtn{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:16px;line-height:1;transition:.2s}
.thbtn:hover{border-color:var(--ac);color:var(--ac)}
html[data-theme="dark"] body{background-color:var(--bg2);background-image:linear-gradient(rgba(124,120,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(124,120,255,.06) 1px,transparent 1px),linear-gradient(rgba(124,120,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(124,120,255,.11) 1px,transparent 1px)}
html[data-theme="dark"] .top{background:var(--topbg)}
html[data-theme="dark"] #d,html[data-theme="dark"] .pc,html[data-theme="dark"] .pr,html[data-theme="dark"] .rkc,html[data-theme="dark"] .rk-top,html[data-theme="dark"] .tp-l,html[data-theme="dark"] .tp-r,html[data-theme="dark"] .pe,html[data-theme="dark"] .tp-sdw,html[data-theme="dark"] .ex,html[data-theme="dark"] .stp,html[data-theme="dark"] .fi,html[data-theme="dark"] .rk-row,html[data-theme="dark"] .tp-m,html[data-theme="dark"] .tp-er,html[data-theme="dark"] .fx-i,html[data-theme="dark"] .hm-go,html[data-theme="dark"] .ring span,html[data-theme="dark"] .btn.g,html[data-theme="dark"] .swp,html[data-theme="dark"] .dots button,html[data-theme="dark"] .tools button,html[data-theme="dark"] .dh button,html[data-theme="dark"] .rth button,html[data-theme="dark"] .rk-t button.on,html[data-theme="dark"] .tp-tabs button.on,html[data-theme="dark"] .sec.open>.sh,html[data-theme="dark"] .pf,html[data-theme="dark"] .pf-act button{background:var(--card);color:var(--ink)}
html[data-theme="dark"] .tpm{background:var(--bg2)}
html[data-theme="dark"] .mb{background:var(--card-a)}
html[data-theme="dark"] #rt,html[data-theme="dark"] #rkp,html[data-theme="dark"] .rth{background:var(--bg2)}
@media(min-width:861px){html[data-theme="dark"] #rt{background:none}}
html[data-theme="dark"] .sh:hover,html[data-theme="dark"] .tp:hover,html[data-theme="dark"] .tp-t tbody tr:hover,html[data-theme="dark"] .pr-edit:hover{background:var(--tint)}
html[data-theme="dark"] .k,html[data-theme="dark"] .th-b,html[data-theme="dark"] .tp-bar,html[data-theme="dark"] .rk-nm .rk-b{background:var(--tint2)}
html[data-theme="dark"] .fx,html[data-theme="dark"] .note{background:linear-gradient(160deg,var(--tint),var(--soft));border-color:var(--line2)}
html[data-theme="dark"] .fx-c{background:var(--card);border-color:var(--line2)}
html[data-theme="dark"] .fx-i{border-color:var(--line2)}
html[data-theme="dark"] .fx-n,html[data-theme="dark"] .pr-sub,html[data-theme="dark"] .tp-role,html[data-theme="dark"] .pf-role,html[data-theme="dark"] .dots .a,html[data-theme="dark"] .rk-c.hl,html[data-theme="dark"] .rk-s .p.hl{background:var(--tint);color:var(--ac)}
html[data-theme="dark"] .rk-row.me{background:linear-gradient(180deg,var(--card),var(--tint));border-color:var(--ac)}
html[data-theme="dark"] .ring{background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--line) 0)}
html[data-theme="dark"] .pg div.rs.y,html[data-theme="dark"] .ar input.y,html[data-theme="dark"] .chips .y,html[data-theme="dark"] .swp-b{background:var(--okbg);border-color:var(--okbd);color:var(--oktx)}
html[data-theme="dark"] .pg div.rs.n,html[data-theme="dark"] .ar input.n,html[data-theme="dark"] .chips .n,html[data-theme="dark"] .pr-out:hover,html[data-theme="dark"] .tp-rk{background:var(--badbg);border-color:var(--badbd);color:var(--badtx)}
html[data-theme="dark"] .pg div.rs.s,html[data-theme="dark"] .chips .s,html[data-theme="dark"] .rk-warn,html[data-theme="dark"] #offb{background:var(--warnbg);border-color:var(--warnbd);color:var(--warntx)}

[data-item-id].locked {
  opacity: 0.6;
  cursor: not-allowed;
}
[data-item-id].locked .lock-icon {
  margin-left: 6px;
}

.lock-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: #333;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 10000;
}
.lock-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ===== CLAUDE LOGIN OVERLAY ===== */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: overlayIn .35s ease both;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 44px 36px 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  box-shadow: 0 30px 80px -20px rgba(79, 70, 229, 0.45), 0 8px 24px rgba(15, 23, 42, 0.12);
  animation: cardIn .5s cubic-bezier(.2, .9, .3, 1.2) both;
  overflow: hidden;
}

.login-card::before {
  content: ""; position: absolute; top: -90px; left: 50%;
  width: 260px; height: 260px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(124, 92, 255, .28), transparent 70%);
  pointer-events: none;
}

.login-icon {
  position: relative; width: 84px; height: 84px; margin: 0 auto 22px;
  display: grid; place-items: center; border-radius: 26px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #ec4899);
  box-shadow: 0 14px 32px -8px rgba(99, 102, 241, .6);
  animation: float 3.5s ease-in-out infinite;
}

.login-icon svg { width: 42px; height: 42px; }

.login-title {
  position: relative; margin: 0 0 12px; font-size: 30px; font-weight: 800;
  letter-spacing: -.5px; background: linear-gradient(90deg, #4338ca, #7c3aed, #db2777);
  -webkit-background-clip: text; color: transparent;
}

.login-text {
  position: relative; margin: 0 0 30px; font-size: 15px; line-height: 1.65; color: #475569;
}

.login-btn {
  position: relative; width: 100%; padding: 16px 24px; border: 0; border-radius: 16px;
  font-size: 16px; font-weight: 700; letter-spacing: .3px; color: #fff;
  cursor: pointer; overflow: hidden;
  background: linear-gradient(120deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
  background-size: 300% 100%;
  box-shadow: 0 10px 28px -6px rgba(124, 92, 255, .65), 0 0 0 0 rgba(139, 92, 246, .5);
  transition: transform .2s ease, box-shadow .3s ease;
  animation: gradientMove 6s linear infinite, pulseGlow 2.6s ease-out infinite;
}

.login-btn::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}

.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -8px rgba(124, 92, 255, .8), 0 0 24px rgba(236, 72, 153, .35);
}
.login-btn:hover::after { left: 130%; }
.login-btn:active { transform: translateY(0) scale(.96); }

.login-btn .ripple {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55);
  transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none;
}

.login-close {
  position: relative; margin-top: 18px; padding: 8px 14px; border: 0; background: none;
  font-size: 14px; color: #94a3b8; cursor: pointer; border-radius: 8px;
  transition: color .2s ease, background .2s ease;
}
.login-close:hover { color: #64748b; background: rgba(148, 163, 184, .15); }

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(30px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes gradientMove { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 10px 28px -6px rgba(124, 92, 255, .65); } 70% { box-shadow: 0 10px 28px -6px rgba(124, 92, 255, .65), 0 0 0 16px rgba(139, 92, 246, 0); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* =========================================================
   Ustoz paneli — Lock / Unlock bo'limi
   Qoida: checkbox belgilangan (checked) = OCHIQ, belgilanmagan = QULFLANGAN
   ========================================================= */

/* ---------- 1. Tokenlar ---------- */
:root {
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --line:      #e7e9ee;
  --line-soft: #f0f2f5;
  --text:      #0f172a;
  --muted:     #64748b;
  --faint:     #9aa4b5;

  --open:        #0e9f6e;
  --open-bg:     #e6f6ef;
  --partial:     #c2790b;
  --partial-bg:  #fdf2de;
  --locked:      #64748b;
  --locked-bg:   #eceff3;

  --radius: 12px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: .28s;

  font-family: Inter, "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

*,
*::before,
*::after { box-sizing: border-box; }

h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

/* ---------- 2. Panel ---------- */
.panel {
  max-width: 640px;
  margin: 0 auto;
}

.panel__header { margin-bottom: 20px; }

.panel__title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.panel__subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
}

.chapters {
  display: grid;
  gap: 12px;
}

/* ---------- 3. Bob (Chapter) ---------- */
.chapter {
  /* holat o'zgaruvchilari — quyida :has() orqali almashadi */
  --tone:    var(--locked);
  --tone-bg: var(--locked-bg);
  --label:   "Yopiq";

  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(15 23 42 / .04);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.chapter:hover { box-shadow: 0 4px 14px rgb(15 23 42 / .06); }

/* chap tomondagi rangli indikator */
.chapter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--tone);
  transition: background-color var(--t) var(--ease);
}

/* --- Bob holatlari (tartib muhim: oxirgisi ustun) --- */

/* kamida bitta mavzu ochiq → qisman ochiq */
.chapter:where(:has(.topics .switch__input:checked)) {
  --tone: var(--partial);
  --tone-bg: var(--partial-bg);
  --label: "Qisman ochiq";
}

/* hamma mavzu ochiq → ochiq */
.chapter:where(:not(:has(.topics .switch__input:not(:checked)))) {
  --tone: var(--open);
  --tone-bg: var(--open-bg);
  --label: "Ochiq";
}

/* Bob o'zi qulflangan → hammasi yopiq */
.chapter:where(:has(.chapter-lock:not(:checked))) {
  --tone: var(--locked);
  --tone-bg: var(--locked-bg);
  --label: "Qulflangan";
}

/* ---------- 4. Bob sarlavhasi ---------- */
.chapter__head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
}

.chapter__index {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  letter-spacing: .04em;
}

.chapter__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
}

.chapter__meta {
  margin-top: 1px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- 5. Holat belgisi ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tone);
  background: var(--tone-bg);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status::after { content: var(--label); }

/* ---------- 6. Mavzular (Topics) ---------- */
.topics {
  margin: 0 14px 12px 30px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  transition: opacity var(--t) var(--ease), filter var(--t) var(--ease);
}

.topic {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 8px 4px 10px;
  border-radius: 8px;
  transition: background-color .18s var(--ease), opacity var(--t) var(--ease);
}

.topic:hover { background: #f8f9fb; }

.topic__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--open);
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.topic__title {
  position: relative;
  justify-self: start;
  color: var(--text);
  transition: color var(--t) var(--ease);
}

/* ustiga tortiladigan chiziq */
.topic__title::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 55%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease);
}

/* alohida yopiq mavzu */
.topic:has(.switch__input:not(:checked)) .topic__dot {
  background: var(--faint);
  transform: scale(.75);
}
.topic:has(.switch__input:not(:checked)) .topic__title { color: var(--faint); }

/* Bob qulflanganda: barcha mavzular xira, chizilgan, bosib bo'lmaydi */
.chapter:has(.chapter-lock:not(:checked)) .topics {
  opacity: .5;
  filter: grayscale(1);
}
.chapter:has(.chapter-lock:not(:checked)) .topic { pointer-events: none; }
.chapter:has(.chapter-lock:not(:checked)) .topic__title { color: var(--muted); }
.chapter:has(.chapter-lock:not(:checked)) .topic__title::after { transform: scaleX(1); }

/* ---------- 7. Qulf-kalit switch ---------- */
.switch {
  --w: 44px;
  --h: 24px;
  --pad: 3px;
  --k: calc(var(--h) - var(--pad) * 2);

  position: relative;
  display: inline-flex;
  flex: none;
  cursor: pointer;
}

.switch--sm {
  --w: 38px;
  --h: 21px;
  --pad: 3px;
}

.switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch__track {
  position: relative;
  width: var(--w);
  height: var(--h);
  border-radius: 999px;
  background: #e2e6ec;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / .06);
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.switch__knob {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  display: grid;
  place-items: center;
  width: var(--k);
  height: var(--k);
  border-radius: 50%;
  background: #fff;
  color: var(--locked);
  box-shadow: 0 1px 3px rgb(15 23 42 / .22);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}

/* OCHIQ holat */
.switch__input:checked + .switch__track { background: var(--open); }

.switch__input:checked + .switch__track .switch__knob {
  transform: translateX(calc(var(--w) - var(--k) - var(--pad) * 2));
  color: var(--open);
}

.switch__input:hover + .switch__track { box-shadow: inset 0 0 0 1px rgb(15 23 42 / .14); }

.switch__input:active + .switch__track .switch__knob { transform: scale(.94); }
.switch__input:checked:active + .switch__track .switch__knob {
  transform: translateX(calc(var(--w) - var(--k) - var(--pad) * 2)) scale(.94);
}

.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--open);
  outline-offset: 2px;
}

/* ---------- 8. Qulf ikonkasi (sof CSS) ---------- */
.lock {
  position: relative;
  display: block;
  width: 10px;
  height: 11px;
}

.switch--sm .lock { transform: scale(.85); }

.lock__body {
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  border-radius: 1.5px;
  background: currentColor;
}

.lock__shackle {
  position: absolute;
  left: 1.5px;
  bottom: 5px;
  width: 7px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  transform-origin: 0 100%;
  transition: transform var(--t) var(--ease);
}

/* ochilganda halqa ko'tariladi */
.switch__input:checked + .switch__track .lock__shackle {
  transform: translateY(-1px) rotate(-32deg);
}

/* ---------- 9. Harakatni kamaytirish ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@media (max-width: 480px) {
  .chapter__head { grid-template-columns: 1fr auto auto; }
  .chapter__index { display: none; }
}
/* ===== hw-lock.css — 90% qulf + ustoz jadvali ===== */
:root {
  --hw-bg: #ffffff;
  --hw-surface: #f6f7fb;
  --hw-border: #e4e7ef;
  --hw-text: #1b2030;
  --hw-muted: #6b7388;
  --hw-primary: #5b6cff;
  --hw-ok: #16a34a;
  --hw-ok-bg: #dcfce7;
  --hw-bad: #dc2626;
  --hw-bad-bg: #fee2e2;
  --hw-warn: #d97706;
  --hw-warn-bg: #fef3c7;
  --hw-shadow: 0 10px 30px rgba(20, 30, 60, .08);
  --hw-radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hw-bg: #12151f; --hw-surface: #1a1f2e; --hw-border: #2a3147;
    --hw-text: #e8ebf5; --hw-muted: #8d96b0;
    --hw-ok: #4ade80; --hw-ok-bg: rgba(74,222,128,.14);
    --hw-bad: #f87171; --hw-bad-bg: rgba(248,113,113,.14);
    --hw-warn: #fbbf24; --hw-warn-bg: rgba(251,191,36,.14);
    --hw-shadow: 0 10px 30px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --hw-bg: #12151f; --hw-surface: #1a1f2e; --hw-border: #2a3147;
  --hw-text: #e8ebf5; --hw-muted: #8d96b0;
  --hw-ok: #4ade80; --hw-ok-bg: rgba(74,222,128,.14);
  --hw-bad: #f87171; --hw-bad-bg: rgba(248,113,113,.14);
  --hw-warn: #fbbf24; --hw-warn-bg: rgba(251,191,36,.14);
  --hw-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* ---------- Tekshirish tugmasi ---------- */
.hw-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border: 0; border-radius: 12px; cursor: pointer;
  font: 600 1rem/1 inherit; color: #fff; background: var(--hw-primary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--hw-primary) 40%, transparent);
  transition: transform .15s ease, background .3s ease, box-shadow .3s ease;
}
.hw-btn:hover { transform: translateY(-2px); }
.hw-btn:active { transform: translateY(0) scale(.98); }
.hw-btn[disabled] { opacity: .7; cursor: wait; }
.hw-btn--fail { background: linear-gradient(135deg, #ef4444, #f59e0b); box-shadow: 0 6px 18px rgba(239,68,68,.4); }
.hw-btn--ok   { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 6px 18px rgba(34,197,94,.45); }
.hw-shake { animation: hw-shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes hw-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* ---------- Alert ---------- */
.hw-alert {
  display: flex; gap: .75rem; align-items: flex-start; margin-top: .9rem; padding: .9rem 1rem;
  border-radius: 12px; border: 1px solid; font-size: .95rem; line-height: 1.4;
  animation: hw-slide .35s ease both;
}
.hw-alert--bad  { background: var(--hw-bad-bg);  border-color: color-mix(in srgb, var(--hw-bad) 35%, transparent);  color: var(--hw-text); }
.hw-alert--warn { background: var(--hw-warn-bg); border-color: color-mix(in srgb, var(--hw-warn) 35%, transparent); color: var(--hw-text); }
.hw-alert strong { color: var(--hw-bad); }
.hw-alert__bar { flex: 1; height: 6px; margin-top: .55rem; border-radius: 99px; background: var(--hw-border); overflow: hidden; position: relative; }
.hw-alert__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--hw-bad); border-radius: inherit; animation: hw-grow .8s ease both; }
.hw-alert__bar b { position: absolute; left: 90%; top: -2px; bottom: -2px; width: 2px; background: var(--hw-text); opacity: .5; }
@keyframes hw-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes hw-grow  { from { width: 0; } }

/* ---------- Success overlay ---------- */
.hw-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }
.hw-success {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: none;
}
.hw-success__card {
  display: grid; justify-items: center; gap: .6rem; padding: 1.6rem 2.4rem; border-radius: 20px;
  background: var(--hw-bg); color: var(--hw-text); box-shadow: var(--hw-shadow); border: 1px solid var(--hw-border);
  animation: hw-pop .5s cubic-bezier(.2,1.4,.4,1) both, hw-out .4s ease 2s forwards;
}
.hw-success__card h3 { margin: 0; font-size: 1.15rem; }
.hw-success__card p  { margin: 0; color: var(--hw-muted); font-size: .95rem; }
.hw-check { width: 72px; height: 72px; }
.hw-check circle { fill: none; stroke: var(--hw-ok); stroke-width: 4; stroke-dasharray: 190; stroke-dashoffset: 190; animation: hw-draw .6s ease .1s forwards; }
.hw-check path   { fill: none; stroke: var(--hw-ok); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: hw-draw .4s ease .6s forwards; }
@keyframes hw-draw { to { stroke-dashoffset: 0; } }
@keyframes hw-pop  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes hw-out  { to { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* ---------- Ustoz paneli: jadval ---------- */
.hw-card { background: var(--hw-bg); color: var(--hw-text); border: 1px solid var(--hw-border); border-radius: var(--hw-radius); box-shadow: var(--hw-shadow); overflow: hidden; }
.hw-card__head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--hw-border); }
.hw-card__head h2 { margin: 0; font-size: 1.1rem; }
.hw-search {
  padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--hw-border);
  background: var(--hw-surface); color: var(--hw-text); min-width: 220px; font: inherit; outline: none; transition: border-color .2s, box-shadow .2s;
}
.hw-search:focus { border-color: var(--hw-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw-primary) 25%, transparent); }
.hw-scroll { overflow-x: auto; }
.hw-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hw-table th {
  text-align: left; padding: .75rem 1.25rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hw-muted); background: var(--hw-surface); white-space: nowrap; cursor: pointer; user-select: none;
}
.hw-table th[data-dir="asc"]::after  { content: " ▲"; }
.hw-table th[data-dir="desc"]::after { content: " ▼"; }
.hw-table td { padding: .85rem 1.25rem; border-top: 1px solid var(--hw-border); white-space: nowrap; }
.hw-table tbody tr { transition: background .15s; animation: hw-slide .35s ease both; }
.hw-table tbody tr:hover { background: var(--hw-surface); }
.hw-name { display: flex; align-items: center; gap: .65rem; font-weight: 600; }
.hw-ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; background: var(--hw-primary); flex: none; }
.hw-badge { display: inline-block; padding: .25rem .65rem; border-radius: 99px; font-weight: 700; font-size: .85rem; }
.hw-badge--ok  { color: var(--hw-ok);  background: var(--hw-ok-bg); }
.hw-badge--bad { color: var(--hw-bad); background: var(--hw-bad-bg); }
.hw-muted { color: var(--hw-muted); }
.hw-empty { padding: 2rem; text-align: center; color: var(--hw-muted); }

@media (prefers-reduced-motion: reduce) {
  .hw-shake, .hw-alert, .hw-success__card, .hw-table tbody tr { animation: none !important; }
}