:root{--bg:#f1ecff;--card:#ffffff;--inp:#f5f2ff;--line:rgba(109,40,217,.2);--pu:#8b5cf6;--pu2:#6d28d9;--cy:#22d3ee;--tx:#2a1065;--mu:#6b5fa3}
*{box-sizing:border-box;margin:0}
body{background:linear-gradient(135deg,#f1ecff 0%,#e6f9ff 100%) fixed;color:var(--tx);font:15px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}input,select,button{font:inherit;color:inherit}
.app{display:flex;min-height:100vh}
aside{width:260px;flex:none;background:linear-gradient(180deg,#5b21b6,#7c3aed 60%,#0891b2);border-right:0;padding:20px 14px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:6px;color:#fff}
.brand{display:flex;gap:12px;align-items:center;padding:6px 8px 18px}.brand b{display:block;line-height:1.25}.brand small{color:#e2d8ff;font-size:12px}
.logo{color:var(--tx);width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:22px;border:2px solid transparent;background:linear-gradient(var(--inp),var(--inp)) padding-box,linear-gradient(135deg,var(--pu),var(--cy)) border-box;box-shadow:0 0 22px rgba(139,92,246,.45);overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover}.logo.big{width:84px;height:84px;font-size:36px;margin:0 auto 10px}
nav a{display:block;padding:10px 12px;border-radius:10px;color:#e9ddff}nav a:hover{background:rgba(255,255,255,.15);color:#fff}
nav a.on{background:rgba(255,255,255,.22);color:#fff;box-shadow:inset 3px 0 0 var(--cy)}
.side-foot{margin-top:auto;font-size:12px;color:#e2d8ff;padding:12px 8px;border-top:1px solid rgba(255,255,255,.28)}
main{flex:1;min-width:0;padding:22px clamp(14px,3vw,34px) 40px}
.top{display:flex;align-items:center;gap:14px;margin-bottom:22px}.top h1{font-size:24px;line-height:1.2}.top h1 small{display:block;font-size:13px;color:var(--mu);font-weight:400}
.burger{display:none;background:var(--inp);border:1px solid var(--line);border-radius:10px;width:42px;height:42px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 4px 18px rgba(109,40,217,.1)}
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.stat span{color:var(--mu);font-size:13px}.stat strong{display:block;font-size:30px;line-height:1.2;color:#0891b2}.stat:nth-child(even) strong{color:#6d28d9}
h3{font-size:17px;margin-bottom:12px}.mu{color:var(--mu)}.no{color:#e11d48}.ok{color:#059669}.cyt{color:#0891b2}
.btn{display:inline-block;background:linear-gradient(135deg,var(--pu2),var(--pu));border:0;border-radius:10px;padding:9px 16px;cursor:pointer;font-weight:600;color:#fff}
.btn.cy{background:linear-gradient(135deg,#0891b2,var(--cy));color:#2a0a6b}.btn.ghost{background:none;border:1px solid var(--line)}
:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:520px}th{color:var(--mu);font-weight:500;text-align:left;font-size:13px}
th,td{padding:10px 8px;border-bottom:1px solid rgba(109,40,217,.1)}
.tag{padding:2px 10px;border-radius:99px;font-size:12px;border:1px solid}.tag.ok{border-color:rgba(52,211,153,.4)}.tag.no{border-color:rgba(251,113,133,.4)}
input,select{background:var(--inp);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%}
.ck{width:20px;height:20px;accent-color:var(--pu)}
label{font-size:13px;color:var(--mu);display:block;margin-bottom:4px}
.f{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end;margin-bottom:16px}
.bar{display:flex;gap:10px;margin-bottom:14px}.bar input{max-width:280px}
.row{display:flex;align-items:center;gap:10px;margin:8px 0}.row span{width:90px}.row i{height:10px;border-radius:6px;background:linear-gradient(90deg,var(--pu),var(--cy))}
.notice{padding:8px 0;border-bottom:1px solid rgba(139,92,246,.12)}.notice small{color:#0891b2}
.login{display:grid;place-items:center;padding:16px}.lg{width:100%;max-width:380px;text-align:center}.lg label{text-align:left}
.rc{background:#fff;color:#111;border-radius:14px;padding:24px;max-width:420px;text-align:center}.rc p{display:flex;justify-content:space-between;text-align:left}.rc hr{border:0;border-top:1px dashed #999;margin:12px 0}
@media(max-width:820px){aside{position:fixed;z-index:8;left:0;transform:translateX(-100%);transition:transform .25s}aside.open{transform:none}.burger{display:block}}
@media print{aside,.top,.rc .btn{display:none}body{background:#fff}.rc{margin:auto}}
textarea{background:var(--inp);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;font:inherit;color:inherit;resize:vertical}
.bgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.bc{display:flex;flex-direction:column;gap:12px;border-top:4px solid var(--pu)}.bc:nth-child(even){border-top-color:var(--cy)}
.bh{display:flex;gap:12px;align-items:center}.bh h3{margin:0 0 2px;font-size:17px}
.code{font-size:12px;font-weight:600;color:var(--pu2);background:var(--inp);border:1px solid var(--line);padding:1px 8px;border-radius:6px}
.info{font-size:13.5px;color:var(--mu)}.info b{color:var(--tx);font-weight:600}.info span{font-size:12px}
.bf{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;align-items:center}.bf form{margin:0;display:flex;gap:8px}
.sm{padding:5px 12px;font-size:13px}.btn.dg{background:none;border:1px solid rgba(225,29,72,.4);color:#e11d48}
.tabs{display:flex;gap:8px;margin:18px 0 14px;flex-wrap:wrap}.tabs a{padding:9px 18px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--mu);font-weight:600}
.tabs a.on{background:linear-gradient(135deg,var(--pu2),var(--pu));color:#fff;border-color:transparent}
.tag.up{color:#0891b2;border-color:rgba(8,145,178,.4)}.stack{display:grid;gap:12px}
@media(max-width:560px){.f[style*="200px"]{grid-template-columns:1fr!important}}
.pb{height:10px;border-radius:6px;background:var(--inp);border:1px solid var(--line);overflow:hidden;margin:3px 0}
.pb i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--pu),#6d28d9)}.pb i.cyan{background:linear-gradient(90deg,#0891b2,var(--cy))}.pb i.red{background:linear-gradient(90deg,#f472b6,#e11d48)}
.brow{margin:14px 0}.brow>div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px}.brow small{color:var(--mu);text-align:right}
.rank{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--pu2),var(--cy));color:#fff;font-weight:700;font-size:13px}
.stat small{display:block;font-size:12.5px}h3 small{font-weight:400;font-size:12.5px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.tl{border-left:2px solid var(--line);margin-left:8px;padding-left:18px}.tl>div{position:relative;margin:0 0 14px}.tl>div::before{content:"";position:absolute;left:-25px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--cy);box-shadow:0 0 0 3px var(--inp)}
.bar select{max-width:190px}.bar input[name=sec]{max-width:130px}