:root{
  --bg:#0a0f1f;
  --bg2:#111a2f;
  --panel:#11192b;
  --panel2:#16223a;
  --line:rgba(255,255,255,.08);
  --text:#e7ecf7;
  --muted:#8f9bb8;
  --primary:#5b8cff;
  --primary2:#7d5cff;
  --success:#2dd4bf;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow:0 20px 45px rgba(0,0,0,.28);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left, rgba(91,140,255,.18), transparent 28%),radial-gradient(circle at top right, rgba(125,92,255,.18), transparent 22%),linear-gradient(180deg,#09101f 0%,#0d1324 100%);color:var(--text);min-height:100%}
a{text-decoration:none;color:inherit}
.app{display:flex;min-height:100vh}
.sidebar{width:275px;background:linear-gradient(180deg,rgba(16,24,43,.96),rgba(11,17,31,.96));border-right:1px solid var(--line);padding:24px 18px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:14px;padding:10px 10px 18px 10px;border-bottom:1px solid var(--line);margin-bottom:18px}
.brand-logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:var(--shadow)}
.brand-title{font-size:20px;font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:3px}
.side-section{padding:8px 10px 10px 10px;color:#7282a6;text-transform:uppercase;font-size:11px;letter-spacing:1px}
.nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:6px 0;border:1px solid transparent;border-radius:14px;color:#c9d4f0;transition:.18s;background:transparent}
.nav a:hover{background:rgba(255,255,255,.04);border-color:var(--line);transform:translateX(2px)}
.nav a.active{background:linear-gradient(90deg,rgba(91,140,255,.18),rgba(125,92,255,.14));border-color:rgba(91,140,255,.28);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.nav .ico{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:14px}
.main{flex:1;padding:28px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}
.page-title{font-size:28px;font-weight:800;letter-spacing:.2px}
.page-sub{color:var(--muted);font-size:14px;margin-top:6px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#d5def5;font-size:12px}
.badge.success{background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.35);color:#87f0de}
.badge.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#ffd48a}
.badge.danger{background:rgba(239,68,68,.11);border-color:rgba(239,68,68,.33);color:#ff9c9c}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.card{background:linear-gradient(180deg,rgba(18,27,47,.94),rgba(14,22,38,.96));border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 14px 0;font-size:18px}
.stat{position:relative;overflow:hidden}
.stat:after{content:"";position:absolute;right:-35px;top:-35px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(91,140,255,.20),transparent 70%)}
.stat-label{color:var(--muted);font-size:13px;margin-bottom:10px}
.stat-value{font-size:34px;font-weight:800;line-height:1.05}
.stat-foot{margin-top:10px;color:#9fb1d9;font-size:12px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px}
table{width:100%;border-collapse:collapse;min-width:780px}
th,td{padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;font-size:13px;vertical-align:top}
th{background:rgba(255,255,255,.03);font-size:12px;color:#aebadc;text-transform:uppercase;letter-spacing:.6px;position:sticky;top:0}
tr:hover td{background:rgba(255,255,255,.02)}
.muted{color:var(--muted)}
.mono{font-family:Consolas,Monaco,monospace;font-size:12px;word-break:break-all}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
label{display:block;font-size:12px;color:#9badcf;margin-bottom:7px}
input,select,textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(7,12,23,.92);color:#eef3ff;outline:none;transition:.18s}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(91,140,255,.55);box-shadow:0 0 0 4px rgba(91,140,255,.10)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border:0;border-radius:14px;font-weight:700;cursor:pointer;transition:.18s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:white}
.btn-secondary{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#eef3ff}
.btn-danger{background:linear-gradient(135deg,#ff5a6b,#ef4444);color:#fff}
.btn-success{background:linear-gradient(135deg,#15c9a2,#16a34a);color:#fff}
.notice{padding:14px 16px;border-radius:14px;margin-bottom:16px;font-size:13px}
.notice.ok{background:rgba(45,212,191,.11);border:1px solid rgba(45,212,191,.25);color:#87f0de}
.notice.err{background:rgba(239,68,68,.11);border:1px solid rgba(239,68,68,.25);color:#ffb0b0}
.split{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kv .item{padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04)}
.kv .k{font-size:12px;color:#9badcf;margin-bottom:6px}
.kv .v{font-size:16px;font-weight:700}
.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:26px;background:linear-gradient(135deg,rgba(91,140,255,.18),rgba(125,92,255,.14));border:1px solid rgba(91,140,255,.24);border-radius:20px;margin-bottom:18px}
.hero h2{margin:0 0 8px 0;font-size:26px}
.hero p{margin:0;color:#c7d2ee;line-height:1.6}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.login-wrap{width:1120px;max-width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.login-info{padding:34px;border-radius:26px;background:linear-gradient(135deg,rgba(91,140,255,.20),rgba(125,92,255,.16));border:1px solid rgba(91,140,255,.24);box-shadow:var(--shadow)}
.login-card{padding:34px;border-radius:26px;background:linear-gradient(180deg,rgba(18,27,47,.98),rgba(13,19,34,.98));border:1px solid var(--line);box-shadow:var(--shadow)}
.login-info h1,.login-card h1{margin:0 0 10px 0;font-size:30px}
.login-info p,.login-card p{color:#d3ddf4;line-height:1.7}
.login-list{margin-top:22px;display:grid;gap:14px}
.login-list .li{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.login-card form{display:grid;gap:14px;margin-top:18px}
.small{font-size:12px;color:var(--muted)}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:11px;color:#dce7ff}
.empty{padding:22px;text-align:center;color:#93a4c9}
.footer-note{margin-top:20px;color:#8191b5;font-size:12px;text-align:center}
@media (max-width:1200px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.login-wrap{grid-template-columns:1fr}}
@media (max-width:980px){.app{display:block}.sidebar{position:relative;width:auto;height:auto}.main{padding:18px}.grid-2,.form-grid{grid-template-columns:1fr}.kv{grid-template-columns:1fr}.hero{display:block}}
@media (max-width:640px){.grid-4{grid-template-columns:1fr}.page-title{font-size:24px}.login-info,.login-card{padding:24px}.topbar{display:block}.badge{margin-top:10px}}