:root{--bg:#f3f5fb;--card:#fff;--ink:#0f172a;--mut:#64748b;--line:#e4e8f2;--pri:#4f46e5;--pri2:#7c3aed;--ok:#047857;--okbg:#e8f8f1;--bad:#dc2626;--badbg:#fdecec;--warn:#b45309;--warnbg:#fff6e5;--soft:#eef0ff}
@media(prefers-color-scheme:dark){:root{--bg:#0a0f1f;--card:#131a30;--ink:#e8ecf7;--mut:#94a3b8;--line:#232c49;--ok:#34d399;--okbg:#07281f;--bad:#f87171;--badbg:#2e1014;--warn:#fbbf24;--warnbg:#2b1f08;--soft:#1c2347}}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;font:15px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--ink);display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.side{background:linear-gradient(185deg,#0f1838,#241a66);color:#c7d0f2;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{display:flex;gap:12px;align-items:center;margin:4px 6px 28px;color:#fff;font-size:17px}
.brand small{display:block;color:#98a4d8;font-size:12px}
.logo{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#6366f1,#c084fc);display:grid;place-items:center;font-size:22px;box-shadow:0 8px 20px rgba(99,102,241,.45)}
#nav a{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:12px;color:#c7d0f2;text-decoration:none;margin-bottom:4px;font-weight:500;transition:.15s}
#nav a:hover{background:rgba(255,255,255,.08)}#nav a.on{background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 3px 0 0 #a5b4fc}
.foot{margin-top:auto;font-size:12px;color:#8793c9;padding:0 8px}
main{padding:32px 38px 60px;max-width:1200px;width:100%}
h1{margin:0;font-size:27px;letter-spacing:-.3px}.sub{margin:4px 0 24px;color:var(--mut)}h3{margin:0 0 14px;font-size:17px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px rgba(15,23,42,.05)}
.grid{display:grid;gap:18px}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:1.4fr 1fr}.f2{grid-template-columns:1fr 220px;gap:14px}
.stat{display:flex;gap:14px;align-items:center;margin:0}.stat b{font-size:28px;line-height:1.1;display:block}.stat small{color:var(--mut)}
.ico{width:50px;height:50px;border-radius:15px;background:var(--soft);display:grid;place-items:center;font-size:23px}
label.l{display:block;font-weight:600;font-size:13px;margin:0 0 6px;color:var(--mut)}
input,select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;outline:0;transition:.15s}
input:focus,select:focus{border-color:var(--pri);box-shadow:0 0 0 4px rgba(79,70,229,.15)}
.btn{border:1px solid var(--line);border-radius:12px;padding:11px 18px;font:inherit;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink);transition:.15s}
.btn:hover{transform:translateY(-1px)}.btn.pri{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border:0;box-shadow:0 8px 18px rgba(79,70,229,.35)}
.btn.red{color:var(--bad);border-color:var(--bad)}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tabs{display:inline-flex;background:var(--soft);border-radius:13px;padding:4px;margin-bottom:18px}
.tabs button{border:0;background:none;padding:9px 18px;border-radius:10px;font:inherit;font-weight:600;color:var(--mut);cursor:pointer}.tabs button.on{background:var(--card);color:var(--pri);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.banner{display:flex;gap:16px;align-items:center;border-radius:18px;padding:20px 24px;margin-bottom:16px;font-size:19px;font-weight:700}
.banner.ok{background:var(--okbg);color:var(--ok)}.banner.bad{background:var(--badbg);color:var(--bad)}.banner .big{font-size:36px}
.sm{font-size:13px}.fw4{font-weight:400}.mut{color:var(--mut)}
.hit{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--warn);border-radius:14px;padding:14px 18px;margin-bottom:10px}
.hit.dir{border-left-color:var(--bad);background:var(--badbg)}.hh{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.chip{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.chip.ok{background:var(--okbg);color:var(--ok)}.chip.bad{background:var(--badbg);color:var(--bad)}.chip.warn{background:var(--warnbg);color:var(--warn)}.chip.mut{background:var(--soft);color:var(--pri)}
.grp{margin-bottom:14px}.gt{font-weight:600;margin-bottom:8px}
table{width:100%;border-collapse:collapse}th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line)}tbody tr{cursor:pointer;transition:.12s}tbody tr:hover{background:var(--soft)}
.drop{display:block;border:2px dashed var(--line);border-radius:18px;padding:40px 20px;text-align:center;cursor:pointer;transition:.15s;background:var(--soft)}
.drop:hover,.drop.over{border-color:var(--pri);background:var(--card)}.drop .big{font-size:42px}
.bar{height:12px;border-radius:99px;background:var(--soft);overflow:hidden;margin:16px 0 6px}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pri),var(--pri2));transition:.2s}
.log{max-height:360px;overflow:auto;margin-top:12px}.lr{display:flex;justify-content:space-between;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:14px}
.li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line)}.li small{display:block;color:var(--mut)}
#ov{position:fixed;inset:0;background:rgba(10,15,31,.5);opacity:0;pointer-events:none;transition:.2s;z-index:20}#ov.on{opacity:1;pointer-events:auto}
#drawer{position:fixed;top:0;right:0;bottom:0;width:min(540px,100%);background:var(--card);z-index:21;transform:translateX(105%);transition:.25s;padding:26px;overflow:auto;box-shadow:-20px 0 50px rgba(0,0,0,.2)}#drawer.open{transform:none}
dialog{border:0;border-radius:20px;padding:26px;width:min(460px,92vw);background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(10,15,31,.55)}
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);background:#111827;color:#fff;padding:12px 20px;border-radius:12px;opacity:0;transition:.25s;z-index:50;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}#toast.bad{background:#b91c1c}
.spin{display:inline-block;width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--pri);border-radius:50%;animation:s .8s linear infinite;vertical-align:middle}@keyframes s{to{transform:rotate(360deg)}}
@media(max-width:900px){body{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;align-items:center;overflow:auto;padding:10px}.brand{margin:0 14px 0 0}.brand small,.foot{display:none}#nav{display:flex}#nav a{white-space:nowrap;margin:0}main{padding:20px 16px}.g4,.g2,.f2{grid-template-columns:1fr 1fr}.g2,.f2{grid-template-columns:1fr}}
#auth{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:linear-gradient(135deg,#0f1838,#2b1d78 55%,#6d28d9);padding:20px}
#auth .box{background:var(--card);border-radius:24px;padding:34px;width:min(420px,100%);box-shadow:0 40px 100px rgba(0,0,0,.45)}
#auth .logo{margin:0 auto 14px;width:58px;height:58px;font-size:28px}#auth h2{text-align:center;margin:0 0 4px}#auth p{text-align:center;color:var(--mut);margin:0 0 22px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin:8px 0 0}
.who{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border-radius:14px;padding:10px 12px;margin-bottom:12px;color:#fff;font-size:14px}.who b{flex:1;overflow:hidden;text-overflow:ellipsis}
.who button{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:9px;padding:6px 9px;cursor:pointer}.who button:hover{background:rgba(255,255,255,.25)}
.x{border:0;background:none;color:var(--mut);cursor:pointer;font-size:16px;padding:4px 8px;border-radius:8px}.x:hover{background:var(--badbg);color:var(--bad)}
.rg{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;color:var(--ink);font:inherit;padding:11px 14px;border-radius:12px;cursor:pointer;text-align:left}.rg:hover{background:var(--soft)}.rg.on{background:var(--soft);color:var(--pri);font-weight:700}
.dist{display:flex;align-items:center;gap:8px;padding:9px 4px;border-bottom:1px solid var(--line)}.dist>span:first-child{flex:1}
textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;outline:0;min-height:140px;resize:vertical}textarea:focus{border-color:var(--pri);box-shadow:0 0 0 4px rgba(79,70,229,.15)}
@media(max-width:900px){.sg{grid-template-columns:1fr!important}}
body.r-kuzatuvchi .spc,body.r-kuzatuvchi .adm,body.r-mutaxassis .adm{display:none!important}
body:not(.r-admin) #drawer .adm{display:none!important}
.c3{grid-template-columns:repeat(3,1fr)}.click{cursor:pointer;transition:.15s}.click:hover{transform:translateY(-2px);border-color:var(--pri)}
.notebox{background:var(--soft);border-radius:14px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.fgrid input,.fgrid select{padding:10px 12px}
th.s{cursor:pointer;user-select:none}th.s:hover{color:var(--pri)}
dialog.wide{width:min(1000px,95vw)}
.onode{display:flex;align-items:flex-start;gap:8px;padding:8px 6px;border-bottom:1px dashed var(--line)}.onode .ob{flex:1}.od{color:var(--mut);width:14px}
@media(max-width:900px){.c3,.fgrid{grid-template-columns:1fr}}
:root{--bg:#f3f6f8;--ink:#10222f;--pri:#086957;--pri2:#0a8069;--soft:#e8f3f0;--line:#dce7e8;--mut:#526773}
body{font-family:Inter,system-ui,sans-serif}.side{background:linear-gradient(170deg,#101f2c,#142d35);overflow:auto}.logo{background:#127763;box-shadow:none}.brand b,.auth-brand{font-weight:800;letter-spacing:.15em}.auth-brand{margin-top:12px}.side #nav a{color:#c9dbde}.side #nav a.on{box-shadow:inset 3px 0 #51cfaa}.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#142738,#0d514a);color:white;border-radius:20px;padding:40px 32px;margin-bottom:24px;display:grid;grid-template-columns:minmax(0,1fr) 200px;align-items:center;gap:20px}.hero h1{font-size:clamp(28px,4vw,49px);line-height:1.05;max-width:620px;letter-spacing:-.04em}.hero p{color:#c5e1dd;max-width:430px;margin:14px 0 22px}.hero a{padding:10px 14px;text-decoration:none;border-radius:9px;font-weight:700}.hero-primary{background:#82e1c2;color:#0e2e2a}.hero-secondary{border:1px solid #77a8a0;color:#fff}.hero-art{position:relative;width:168px;height:168px;justify-self:center;display:grid;place-items:center;border:1px solid #78d8bb66;border-radius:100%;box-shadow:0 0 0 26px #78d8bb16,0 0 0 54px #78d8bb12;background:repeating-linear-gradient(0deg,transparent 0 27px,#78d8bb22 28px),repeating-linear-gradient(90deg,transparent 0 27px,#78d8bb22 28px)}.hero-art b{font-size:72px;color:#9cf0d5}.hero-art i{position:absolute;width:8px;height:8px;border-radius:50%;background:#a4f8dd}.hero-art i:nth-child(1){top:18%;left:15%}.hero-art i:nth-child(2){top:8%;right:22%}.hero-art i:nth-child(3){bottom:15%;right:14%}.hero-art i:nth-child(4){bottom:22%;left:10%}.hero-art i:nth-child(5){top:49%;right:-3px}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding:25px}.hero-art{display:none}.hero .row{gap:8px}}@media(prefers-color-scheme:dark){:root{--bg:#101a21;--ink:#edf5f5;--soft:#203831;--line:#2b4147;--mut:#b5c9cd}}
#auth{background:radial-gradient(ellipse at 76% 28%,#1b6b5d 0%,#153b42 34%,#101f2c 75%);overflow:auto}
.auth-brand{text-align:center;color:var(--pri);margin:0 0 12px}#setupKey{margin-bottom:12px}
@media(prefers-color-scheme:dark){.auth-brand{color:#82e1c2}}
@media(max-width:900px){.side{height:auto;position:static}.g4 .stat{gap:8px;padding:14px}.stat .ico{width:36px;height:36px;font-size:18px}}
@media(max-width:400px){.g4{gap:9px}.stat small{font-size:11px}.stat b{font-size:24px}.hero{padding:22px}}