:root{--bg:#06101e;--panel:#0d1b2d;--panel-2:#11243a;--line:#203a57;--text:#f2f7ff;--muted:#91a9c3;--blue:#238cff;--cyan:#33c8ff;--green:#55d99b;--red:#ff6b73;--shadow:0 18px 45px rgba(0,0,0,.22)}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 85% 0,#102b4b 0,transparent 34%),var(--bg);color:var(--text);font-size:15px}
.shell{display:flex;min-height:100vh}.side{width:250px;background:rgba(8,22,38,.96);border-right:1px solid rgba(68,114,157,.22);padding:24px 15px;position:fixed;inset:0 auto 0 0;overflow:auto;z-index:20;backdrop-filter:blur(14px)}
.brand{font-weight:800;font-size:18px;letter-spacing:.5px;padding:8px 12px 22px;color:#fff}.brand:before{content:"S";display:inline-grid;place-items:center;width:36px;height:36px;margin-right:10px;border-radius:11px;background:linear-gradient(135deg,var(--cyan),#5856ff);box-shadow:0 8px 22px rgba(35,140,255,.3)}
.side a{display:flex;align-items:center;gap:12px;color:#aec4dc;text-decoration:none;padding:12px 14px;border-radius:11px;margin:4px 0;font-weight:600;transition:.18s ease}.side a:hover,.side a.active{color:#fff;background:linear-gradient(90deg,rgba(35,140,255,.25),rgba(51,200,255,.08));box-shadow:inset 3px 0 var(--cyan)}.side a.logout{margin-top:18px;color:#ffabb0}.nav-icon{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.main{margin-left:250px;padding:34px clamp(18px,3vw,42px);width:calc(100% - 250px);max-width:1600px}h1{font-size:clamp(25px,3vw,34px);margin:0 0 22px;letter-spacing:-.6px}h2,h3{margin-top:0}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:18px}.card,.tablewrap{background:linear-gradient(145deg,rgba(17,36,58,.96),rgba(11,25,43,.96));border:1px solid rgba(67,111,153,.38);border-radius:18px;box-shadow:var(--shadow)}.card{padding:22px}.metric{font-size:34px;font-weight:800;margin-top:9px;color:#fff}.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;background:linear-gradient(135deg,var(--blue),#0870df);color:#fff;border:0;border-radius:10px;padding:10px 15px;text-decoration:none;cursor:pointer;font-weight:700;box-shadow:0 8px 20px rgba(35,140,255,.18)}.btn:hover{filter:brightness(1.1)}.btn.danger{background:linear-gradient(135deg,#d83b45,#a71d2a)}.btn.gray{background:#34495e}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid #294966;border-radius:10px;background:#071527;color:#fff;margin:6px 0 14px;outline:none;transition:.18s ease}input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(51,200,255,.12)}label{font-size:13px;font-weight:650;color:#c3d4e7}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.theme-controls{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:16px}.branding-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.brand-preview{display:flex;align-items:center;justify-content:center;min-height:150px;background:#06101e;border:1px dashed #345878;border-radius:14px;overflow:hidden;padding:14px}.brand-preview img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:220px!important;object-fit:contain}
.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:14px 16px;border-bottom:1px solid rgba(53,87,119,.55);text-align:left;white-space:nowrap}th{color:#9fc9ef;font-size:12px;text-transform:uppercase;letter-spacing:.55px;background:rgba(7,21,39,.35)}tr:last-child td{border-bottom:0}tr:hover td{background:rgba(35,140,255,.04)}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#163b5c}.ok{color:var(--green)}.bad{color:var(--red)}.login{max-width:430px;margin:10vh auto;background:var(--panel);padding:30px;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow)}.notice{padding:13px 15px;border-radius:11px;background:#142b46;margin:12px 0}code{color:#8edcff}
.dashboard{max-width:none}.welcome{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.welcome h1{font-size:clamp(30px,4vw,44px);margin:4px 0 7px}.welcome p{color:var(--muted);margin:0;font-size:16px}.eyebrow{color:#65cfff;font-size:12px;font-weight:800;letter-spacing:1.8px}.live-pill{display:flex;align-items:center;gap:8px;color:#bfe7dc;background:rgba(35,102,91,.25);border:1px solid rgba(85,217,155,.25);padding:9px 13px;border-radius:999px;font-size:13px;font-weight:700}.live-pill i,.stat-state i{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 12px rgba(85,217,155,.75)}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(210px,1fr));gap:18px}.stat-card{position:relative;min-height:330px;padding:24px;overflow:hidden;border:1px solid rgba(71,105,255,.6);border-radius:20px;background:linear-gradient(155deg,rgba(25,45,91,.96),rgba(11,25,51,.98));box-shadow:0 22px 48px rgba(0,0,0,.25)}.stat-card:before{content:"";position:absolute;inset:-45% -35% auto;height:80%;background:radial-gradient(circle,rgba(69,103,255,.18),transparent 68%)}.stat-card.cyan{border-color:rgba(39,207,239,.55);background:linear-gradient(155deg,rgba(15,67,86,.8),rgba(9,31,54,.98))}.stat-card.violet{border-color:rgba(142,92,255,.58);background:linear-gradient(155deg,rgba(56,39,111,.72),rgba(17,24,62,.98))}.stat-icon{position:relative;display:grid;place-items:center;width:52px;height:52px;margin-bottom:28px;border-radius:17px;background:linear-gradient(135deg,#3d63ff,#1f36a9);box-shadow:0 10px 28px rgba(49,83,255,.35)}.cyan .stat-icon{background:linear-gradient(135deg,#1ccbdd,#086b8d)}.violet .stat-icon{background:linear-gradient(135deg,#9567ff,#4a24b1)}.stat-icon svg,.system-icon svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.stat-label{position:relative;color:#dce9fa;font-size:16px;font-weight:700}.stat-card .metric{position:relative;font-size:42px;margin:10px 0 32px}.stat-state{position:relative;display:flex;align-items:center;gap:9px;color:#9fb4ca;font-size:13px}.stat-state i.danger-dot{background:var(--red)}.spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:95px;fill:none;stroke:#3a6cff;stroke-width:2}.cyan .spark{stroke:#26d4ee}.violet .spark{stroke:#9a72ff}
.system-panel{display:flex;align-items:center;gap:16px;margin-top:22px;padding:20px 22px;border:1px solid rgba(35,204,213,.48);border-radius:18px;background:linear-gradient(110deg,rgba(8,58,73,.58),rgba(16,37,73,.74));box-shadow:var(--shadow)}.system-panel.warning{border-color:rgba(255,107,115,.5);background:linear-gradient(110deg,rgba(100,38,46,.42),rgba(33,29,60,.74))}.system-icon{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:linear-gradient(135deg,#17c9cf,#087086)}.system-panel strong{display:block;font-size:17px}.system-panel p{margin:5px 0 0;color:var(--muted)}.system-panel .btn{margin-left:auto}
@media(max-width:1050px){.stat-grid{grid-template-columns:repeat(2,minmax(210px,1fr))}.stat-card:last-child{grid-column:1/-1;min-height:260px}}
@media(max-width:900px){.shell{display:block}.side{position:sticky;top:0;width:100%;height:auto;display:flex;align-items:center;gap:5px;padding:9px 12px;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(68,114,157,.25)}.brand{font-size:0;padding:0 7px 0 0;flex:0 0 auto}.brand:before{font-size:18px;margin:0}.side a{flex:0 0 auto;margin:0;padding:10px 12px;white-space:nowrap}.side a.logout{margin:0 0 0 auto}.main{margin:0;width:100%;padding:24px 16px 42px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.branding-grid,.row{grid-template-columns:1fr}.card{padding:17px}th,td{padding:12px}}
@media(max-width:620px){.welcome{align-items:flex-start}.live-pill{display:none}.stat-grid{grid-template-columns:1fr}.stat-card:last-child{grid-column:auto}.stat-card{min-height:285px}.system-panel{align-items:flex-start;flex-wrap:wrap}.system-panel .btn{margin-left:68px}.side a span{display:none}.side a{padding:10px}.side a.active span{display:inline}}
@media(max-width:520px){.grid,.theme-controls{grid-template-columns:1fr}.main{padding-top:20px}h1{margin-bottom:18px}}