:root{
  --bg:#f4f7fb;--body-glow:#dff7ef;--panel:#ffffff;--panel2:#f8fafc;--sidebar:rgba(255,255,255,.94);--topbar:rgba(244,247,251,.84);
  --line:#dce5ef;--text:#102033;--muted:#66788c;--accent:#18a77b;--accent2:#3d83df;--danger:#e6536b;--warn:#e6a72f;--ok:#18a77b;
  --nav:#52677e;--nav-hover-bg:#eef6f3;--nav-hover-text:#102033;--input:#ffffff;--input-border:#cfdae7;--button:#e8eff7;--ghost:#ffffff;--ghost-border:#d2dce8;
  --table-border:#e7edf4;--table-head:#f7f9fc;--table-head-text:#60758a;--kpi-border:#e7edf4;--bar-label:#718198;--login-bg:rgba(255,255,255,.97);
  --modal-overlay:rgba(15,23,42,.36);--modal-bg:#ffffff;--modal-border:#d8e3ee;--modal-close:#66788c;--toast-bg:#ffffff;--toast-border:#d8e3ee;
  --key-bg:#f8fafc;--progress-bg:#e8eef5;--code-bg:#f7f9fc;--code-border:#dce5ef;--code-text:#33475b;--notice-text:#335f8d;
  --skeleton1:#e8eef5;--skeleton2:#f7f9fc;--stat-sub:#718399;--label-text:#536a80;--security:#718399;
  --ok-text:#0b7e5f;--warn-text:#956000;--danger-text:#c83c55;--info-text:#2f6fb5;--brand-ink:#05241a;
  --shadow:0 12px 34px rgba(43,62,82,.09);--shadow-lg:0 28px 80px rgba(35,52,70,.15);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light
}
html[data-theme="dark"]{
  --bg:#07111f;--body-glow:#10243d;--panel:#101f33;--panel2:#0c192a;--sidebar:rgba(8,18,32,.92);--topbar:rgba(7,17,31,.72);
  --line:#1d3048;--text:#eaf2ff;--muted:#8fa6c3;--accent:#5ee1b7;--accent2:#6aa8ff;--danger:#ff6b7d;--warn:#f5c56b;--ok:#5ee1b7;
  --nav:#a8bbd2;--nav-hover-bg:#12243a;--nav-hover-text:#ffffff;--input:#091625;--input-border:#243a55;--button:#152944;--ghost:#0c1b2d;--ghost-border:#263a54;
  --table-border:#192c43;--table-head:#0b192a;--table-head-text:#8ea6c2;--kpi-border:#1a2d44;--bar-label:#7188a4;--login-bg:rgba(11,25,42,.95);
  --modal-overlay:rgba(2,8,15,.76);--modal-bg:#0d1b2d;--modal-border:#29405b;--modal-close:#8ea5bf;--toast-bg:#102238;--toast-border:#29415e;
  --key-bg:#0a1828;--progress-bg:#07121f;--code-bg:#07121f;--code-border:#21364f;--code-text:#b8cae0;--notice-text:#b9d4fa;
  --skeleton1:#12233a;--skeleton2:#18304d;--stat-sub:#91a7bf;--label-text:#a5b8ce;--security:#7088a4;
  --ok-text:#8ff1d3;--warn-text:#f7d78f;--danger-text:#ff9baa;--info-text:#9bc4ff;--brand-ink:#06120f;
  --shadow:0 18px 50px rgba(0,0,0,.28);--shadow-lg:0 30px 90px rgba(0,0,0,.5);color-scheme:dark
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(circle at 80% 0,var(--body-glow) 0,transparent 36%),var(--bg);color:var(--text);min-height:100vh;transition:background .25s ease,color .2s ease}
button,input,textarea,select{font:inherit}.hidden{display:none!important}a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--sidebar);backdrop-filter:blur(18px);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;z-index:20;transition:background .25s ease,border-color .25s ease}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px}.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 76%,#000));color:var(--brand-ink);font-weight:900;box-shadow:0 8px 28px color-mix(in srgb,var(--accent) 22%,transparent)}.brand strong{display:block;font-size:16px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
nav{display:flex;flex-direction:column;gap:5px}.nav-item{border:0;background:transparent;color:var(--nav);text-align:left;padding:11px 12px;border-radius:11px;cursor:pointer;display:flex;align-items:center;gap:11px;transition:.2s}.nav-item:hover{background:var(--nav-hover-bg);color:var(--nav-hover-text)}.nav-item.active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent) 4%,transparent));color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:16px 8px 0;color:var(--muted);font-size:12px;display:flex;gap:8px;align-items:center}.dot{width:8px;height:8px;border-radius:50%}.dot.online{background:var(--ok);box-shadow:0 0 12px color-mix(in srgb,var(--ok) 70%,transparent)}
.main{min-width:0}.topbar{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:var(--topbar);backdrop-filter:blur(16px);position:sticky;top:0;z-index:10;transition:background .25s ease,border-color .25s ease}.topbar h2{margin:0;font-size:22px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:12px}.top-actions{display:flex;gap:10px;align-items:center}.content{padding:26px 28px 50px;max-width:1700px;margin:0 auto}
.theme-switch{height:38px;border:1px solid var(--ghost-border);border-radius:10px;padding:0 11px;background:var(--ghost);color:var(--text);display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:700;font-size:11px;box-shadow:0 4px 14px rgba(40,60,80,.04);transition:.18s}.theme-switch:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 55%,var(--ghost-border));box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 10%,transparent)}.theme-icon{font-size:15px;line-height:1}.login-theme{position:fixed;right:22px;top:22px;z-index:5}
.grid{display:grid;gap:16px}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}.stat-card{position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;right:-22px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%)}.stat-label{color:var(--muted);font-size:12px}.stat-value{font-size:28px;font-weight:800;margin:8px 0 4px}.stat-sub{font-size:11px;color:var(--stat-sub)}
.section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.section-head h3{margin:0;font-size:16px}.section-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.input,select,textarea,input[type="text"],input[type="number"],input[type="password"]{width:100%;background:var(--input);border:1px solid var(--input-border);color:var(--text);border-radius:10px;padding:10px 12px;outline:none;transition:.2s}.input:focus,select:focus,textarea:focus,input:focus{border-color:color-mix(in srgb,var(--accent) 72%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}textarea{resize:vertical;min-height:110px}.toolbar .input{width:min(320px,100%)}.toolbar select{width:auto;min-width:150px}
.btn{border:1px solid transparent;border-radius:10px;padding:9px 13px;color:var(--text);cursor:pointer;background:var(--button);transition:.18s;font-weight:650;font-size:12px}.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}.btn.primary{background:var(--accent);color:#fff}.btn.ghost{background:var(--ghost);border-color:var(--ghost-border)}.btn.danger{background:var(--danger);color:#fff}.btn.danger-soft{background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:color-mix(in srgb,var(--danger) 24%,transparent);color:var(--danger-text)}.btn.warn{background:var(--warn);color:#201704}.btn.full{width:100%}.btn.small{padding:6px 9px;font-size:11px}.icon-btn{border:1px solid var(--ghost-border);background:var(--ghost);color:var(--text);width:38px;height:38px;border-radius:10px;cursor:pointer}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:11px 12px;border-bottom:1px solid var(--table-border);text-align:left;font-size:12px;vertical-align:middle}.table th{color:var(--table-head-text);background:var(--table-head);position:sticky;top:0}.table tr:hover td{background:color-mix(in srgb,var(--accent2) 4%,transparent)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:750;border:1px solid transparent}.badge.ok{color:var(--ok-text);background:color-mix(in srgb,var(--ok) 9%,transparent);border-color:color-mix(in srgb,var(--ok) 20%,transparent)}.badge.warn{color:var(--warn-text);background:color-mix(in srgb,var(--warn) 10%,transparent);border-color:color-mix(in srgb,var(--warn) 22%,transparent)}.badge.danger{color:var(--danger-text);background:color-mix(in srgb,var(--danger) 9%,transparent);border-color:color-mix(in srgb,var(--danger) 22%,transparent)}.badge.info{color:var(--info-text);background:color-mix(in srgb,var(--accent2) 9%,transparent);border-color:color-mix(in srgb,var(--accent2) 22%,transparent)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.muted{color:var(--muted)}.kpi-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--kpi-border);font-size:12px}.kpi-line:last-child{border:0}.chart{height:230px;display:flex;align-items:end;gap:8px;padding-top:18px}.bar-col{flex:1;min-width:14px;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}.bar{width:100%;max-width:30px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 64%,#000));min-height:3px}.bar-label{font-size:9px;color:var(--bar-label);writing-mode:vertical-rl;transform:rotate(180deg);max-height:45px}
.stack{display:flex;flex-direction:column;gap:14px}.stack label{font-size:12px;color:var(--label-text);display:grid;gap:7px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(460px,100%);background:var(--login-bg);border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:var(--shadow-lg);backdrop-filter:blur(16px)}.brand-login{padding:0 0 28px}.login-card h1{margin:0 0 10px}.login-card>p{color:var(--muted);line-height:1.6;font-size:13px;margin:0 0 22px}.security-note{margin-top:18px;font-size:10px;color:var(--security);text-align:center}.form-error{margin-top:12px;color:var(--danger-text);background:color-mix(in srgb,var(--danger) 9%,transparent);padding:10px;border-radius:10px;font-size:12px}
.modal-backdrop{position:fixed;inset:0;background:var(--modal-overlay);display:grid;place-items:center;padding:24px;z-index:100;backdrop-filter:blur(8px)}.modal-card{width:min(760px,96vw);max-height:88vh;overflow:auto;background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:18px;padding:22px;box-shadow:var(--shadow-lg);position:relative}.modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:var(--modal-close);font-size:26px;cursor:pointer}
.toast-area{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px}.toast{min-width:260px;max-width:420px;background:var(--toast-bg);border:1px solid var(--toast-border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);font-size:12px}.toast.ok{border-color:color-mix(in srgb,var(--ok) 38%,transparent)}.toast.err{border-color:color-mix(in srgb,var(--danger) 42%,transparent)}
.empty{padding:34px;text-align:center;color:var(--muted)}.key-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}.key-card{border:1px solid var(--line);border-radius:13px;padding:14px;background:var(--key-bg)}.key-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.key-meta{font-size:10px;color:var(--muted);margin-top:7px}.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.7fr);gap:16px}.progress{height:7px;background:var(--progress-bg);border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px}.code-block{background:var(--code-bg);border:1px solid var(--code-border);border-radius:11px;padding:12px;white-space:pre-wrap;overflow:auto;font-family:ui-monospace,monospace;font-size:11px;color:var(--code-text)}.checkbox{width:16px;height:16px;accent-color:var(--accent)}.notice{border:1px solid color-mix(in srgb,var(--accent2) 24%,transparent);background:color-mix(in srgb,var(--accent2) 7%,transparent);border-radius:12px;padding:12px;color:var(--notice-text);font-size:12px;line-height:1.6}.danger-zone{border-color:color-mix(in srgb,var(--danger) 28%,transparent)}.mobile-only{display:none}.skeleton{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--skeleton1),var(--skeleton2),var(--skeleton1));background-size:200% 100%;animation:shimmer 1.2s infinite}@keyframes shimmer{to{background-position:-200% 0}}
@media(max-width:1100px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media(max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:260px;transition:left .2s,background .25s}.sidebar.open{left:0}.mobile-only{display:inline-grid}.topbar{padding:0 14px;height:78px}.content{padding:18px 14px 40px}.top-actions{gap:6px}.top-actions .btn.ghost{display:none}.top-actions .theme-label{display:none}.top-actions .theme-switch{width:38px;padding:0;justify-content:center}.form-grid,.form-grid.cols-3,.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}.stat-value{font-size:24px}.login-theme .theme-label{display:inline}}
@media(max-width:520px){.topbar h2{font-size:18px}.topbar p{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.theme-switch.login-theme{right:14px;top:14px}.login-card{padding:26px 20px}.toast-area{left:12px;right:12px}.toast{min-width:0;width:100%}}