:root{
  --bg:#07111f;--bg2:#0a1626;--panel:#0d1a2b;--panel2:#101f33;--line:#1d3048;
  --text:#eef5ff;--muted:#91a4bd;--blue:#3b82f6;--cyan:#19d3e6;--green:#2dd47a;
  --orange:#f59e0b;--red:#ef4444;--purple:#9b6cff;--shadow:0 18px 45px rgba(0,0,0,.28);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% -10%,#102d4a 0,transparent 34%),var(--bg);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
button,input,select{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:228px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#06101d,#081526);border-right:1px solid #14253a;padding:18px 12px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:10px;align-items:center;padding:8px 8px 24px}.brand-logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;box-shadow:0 8px 24px rgba(59,130,246,.28)}.brand-logo svg{width:21px;height:21px}.brand strong{display:block;font-size:15px}.brand small{color:var(--muted)}.nav{display:flex;flex-direction:column;gap:6px}.nav a{color:#cad6e5;text-decoration:none;display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;border:1px solid transparent;transition:.18s}.nav a:hover{background:#0d1f34;color:white}.nav a.active{background:linear-gradient(90deg,rgba(59,130,246,.22),rgba(59,130,246,.08));border-color:#174476;color:#65a5ff}.nav svg{width:19px;height:19px;stroke-width:1.8}.sidebar-status{margin-top:auto;border:1px solid #173149;background:#091829;border-radius:12px;padding:12px}.server-ok{display:flex;gap:8px;align-items:center;font-size:12px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--green);box-shadow:0 0 10px rgba(45,212,122,.55)}.sidebar-status div+div{margin-top:7px;color:var(--muted);font-size:11px}.sidebar-status b{color:var(--green)}
.main{min-width:0}.topbar{height:66px;border-bottom:1px solid #14243a;background:rgba(6,16,29,.78);backdrop-filter:blur(12px);display:flex;align-items:center;padding:0 26px;gap:18px;position:sticky;top:0;z-index:10}.menu-btn{display:none}.search{max-width:520px;flex:1;position:relative;margin-left:auto}.search input{width:100%;height:40px;background:#081524;border:1px solid #1a2c42;border-radius:9px;color:white;padding:0 45px 0 38px;outline:none}.search input:focus{border-color:#2c6fb5;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.search svg{position:absolute;left:12px;top:10px;width:18px;height:18px;color:#7990aa}.shortcut{position:absolute;right:9px;top:9px;color:#6f849f;background:#0c1c2d;border:1px solid #1c314a;border-radius:5px;padding:2px 6px;font-size:10px}.top-actions{display:flex;align-items:center;gap:16px}.bell{position:relative}.bell svg{width:21px}.badge{position:absolute;right:-6px;top:-8px;background:#bd3540;color:#fff;border:2px solid #07111f;border-radius:9px;min-width:17px;height:17px;display:grid;place-items:center;font-size:9px}.profile{display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1f81d8,#38d6c6);display:grid;place-items:center;font-weight:800}.profile span{display:block;font-weight:700}.profile small{color:var(--muted)}
.content{padding:24px 28px 42px;max-width:1600px;margin:0 auto}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.page-title h1{font-size:28px;line-height:1.1;margin:0 0 5px}.page-title p{margin:0;color:var(--muted)}.alert-expire{background:rgba(109,69,8,.28);border:1px solid #59400e;color:#f4b629;border-radius:10px;padding:11px 14px;display:flex;align-items:center;gap:10px;min-width:350px}.alert-expire .spacer{flex:1}.btn{border:1px solid #2a405c;background:#11233a;color:#dce8f8;border-radius:8px;padding:9px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:.16s}.btn:hover{border-color:#3e6795;background:#142b47}.btn.primary{background:linear-gradient(135deg,#1366d8,#208cf5);border-color:#2d8df1;color:white}.btn.danger{background:#3a1420;border-color:#6c2330;color:#ff9ca8}.btn.success{background:#0e3526;border-color:#17603e;color:#77efad}.btn.warn{background:#33270f;border-color:#735816;color:#ffc847}.btn.sm{padding:6px 9px;font-size:12px}.btn.icon{width:32px;height:32px;justify-content:center;padding:0}.btn svg{width:15px;height:15px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.kpi{background:linear-gradient(180deg,rgba(16,31,51,.98),rgba(10,24,40,.98));border:1px solid #1d314a;border-radius:12px;padding:16px;display:flex;gap:14px;min-height:118px;box-shadow:var(--shadow)}.kpi-icon{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center}.kpi-icon.blue{background:rgba(47,111,232,.18);color:#4d91ff}.kpi-icon.cyan{background:rgba(26,211,230,.16);color:#2adfe8}.kpi-icon.purple{background:rgba(155,108,255,.16);color:#a97cff}.kpi-icon.orange{background:rgba(245,158,11,.18);color:#ffb31d}.kpi-icon svg{width:24px}.kpi-label{color:#a7b6c9;font-size:12px}.kpi-value{font-size:27px;line-height:1.15;font-weight:750;margin-top:3px}.kpi-value small{font-size:11px;color:#8597ad;font-weight:500}.progress{height:4px;background:#152941;border-radius:8px;margin-top:12px;overflow:hidden}.progress i{height:100%;display:block;border-radius:8px;background:var(--blue)}.progress.cyan i{background:var(--cyan)}.progress.purple i{background:var(--purple)}.kpi-note{font-size:11px;color:#a3b2c6;margin-top:5px}.kpi-note.good{color:#38e7a1}.kpi-note.warn{color:#ffc13d}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:14px}.stack{display:flex;flex-direction:column;gap:14px}.card{background:linear-gradient(180deg,#0d1b2d,#0a1727);border:1px solid #1b314a;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.card.highlight{border-color:#118da8;box-shadow:0 0 0 1px rgba(25,211,230,.18),0 15px 45px rgba(0,0,0,.25),0 0 26px rgba(25,211,230,.08)}.card-head{height:47px;display:flex;align-items:center;padding:0 15px;border-bottom:1px solid #1c3148;gap:9px}.card-head h2{font-size:14px;margin:0}.card-head .push{margin-left:auto}.card-body{padding:14px}.card-head svg{width:17px;color:#4e92ff}.new-feature{display:inline-flex;align-items:center;gap:5px;background:#0a3650;border:1px solid #155273;color:#6bdcff;border-radius:15px;padding:4px 9px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.live-pill{background:#0d3828;color:#56ed9d;border-radius:14px;padding:4px 9px;font-size:10px;font-weight:700}.live-title{display:flex;align-items:flex-start;gap:10px;padding:14px 15px 0}.live-title h2{margin:8px 0 2px;font-size:18px}.live-title p{margin:0;color:var(--muted);font-size:12px}.live-title .push{margin-left:auto}.chart-wrap{margin:12px 15px;background:#091725;border:1px solid #182d44;border-radius:9px;padding:11px;position:relative}.chart-title{color:#9eb0c5;font-size:11px;margin-bottom:4px}.chart-number{position:absolute;right:12px;top:10px;text-align:right;font-size:25px;font-weight:750}.chart-number small{display:block;font-size:10px;color:#9eb0c5;font-weight:500}.chart{height:145px;width:100%;display:block}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:650px}.table th{color:#91a4bb;font-size:11px;font-weight:600;background:#102237;text-align:left;padding:9px 12px;border-bottom:1px solid #1d344d}.table td{padding:10px 12px;border-bottom:1px solid #172a40;font-size:12px;color:#d5e0ee}.table tr:last-child td{border-bottom:0}.table tr:hover td{background:rgba(20,47,76,.36)}.status-pill{display:inline-flex;align-items:center;border-radius:14px;padding:3px 8px;font-size:10px}.status-pill.on{background:#0d3b2a;color:#56dfa0}.status-pill.off{background:#321b27;color:#ff9aaf}.expire-date small{display:block;color:#e6a723}.actions{display:flex;gap:5px;white-space:nowrap}.truncate{max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9eb2ca}.green{color:#49e597}.cyan{color:var(--cyan)}.blue{color:#5b9cff}.orange{color:#ffb72f}.muted{color:var(--muted)}
.import-box{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dropzone{border:1px dashed #3c5876;border-radius:10px;padding:18px;text-align:center;background:#0a1727}.dropzone svg{width:32px;color:#4c92ff}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-row{display:flex;flex-direction:column;gap:6px}.form-row.full{grid-column:1/-1}.form-row label{font-size:11px;color:#9eb0c6}.input{width:100%;background:#081523;border:1px solid #1d334c;color:#eef6ff;border-radius:8px;padding:10px 11px;outline:0}.input:focus{border-color:#2d72bc;box-shadow:0 0 0 3px rgba(59,130,246,.09)}.check{display:flex;gap:8px;align-items:center;color:#cdd9e8}.section-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.section-actions h2{margin:0;font-size:18px}.message{margin:0 0 14px;padding:11px 13px;border:1px solid #1c6043;background:#0f3326;color:#75e7aa;border-radius:9px}.empty{padding:28px;text-align:center;color:#7990aa}.server-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.meter{padding:15px;border-right:1px solid #1d3148}.meter:last-child{border:0}.meter-top{display:flex;justify-content:space-between;color:#b7c4d4}.meter strong{font-size:19px}.meter small{display:block;color:#7f93ac}.meter .progress{margin-top:8px}.transfer{font-size:18px;font-weight:700;margin-top:4px}.transfer-sub{font-size:10px;color:#7890aa}.status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mini-card{border:1px solid #1b314a;background:#091725;border-radius:10px;padding:14px}.mini-card strong{font-size:18px}.mini-card div{color:var(--muted);font-size:11px;margin-bottom:4px}.api-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;background:#07131f;border:1px solid #18304a;border-radius:8px;padding:10px;color:#9fc5ef;font-size:11px}
.modal{position:fixed;inset:0;background:rgba(0,8,17,.74);backdrop-filter:blur(5px);z-index:100;display:none;place-items:center;padding:18px}.modal.open{display:grid}.modal-card{width:min(650px,96vw);max-height:92vh;overflow:auto;background:#0c1a2a;border:1px solid #24425e;border-radius:14px;box-shadow:0 30px 90px #000;padding:18px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.modal-head h3{margin:0}.close{background:none;border:0;color:#a8b7c9;font-size:24px;cursor:pointer}.mobile-only{display:none}
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 0,#123458 0,transparent 38%),#06101c}.login-card{width:min(430px,95vw);background:linear-gradient(180deg,#0e1e31,#0a1726);border:1px solid #1d3854;border-radius:18px;padding:28px;box-shadow:0 25px 80px rgba(0,0,0,.42)}.login-brand{text-align:center;margin-bottom:24px}.login-brand .brand-logo{margin:0 auto 12px}.login-brand h1{font-size:24px;margin:0}.login-brand p{color:var(--muted);margin:6px 0 0}.login-card .btn{width:100%;justify-content:center;margin-top:8px}.login-error{background:#3b1720;border:1px solid #6c2634;color:#ff9caa;padding:10px;border-radius:8px;margin-bottom:12px}
@media(max-width:1150px){.kpis{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.alert-expire{min-width:0}.server-strip{grid-template-columns:repeat(2,1fr)}.meter:nth-child(2){border-right:0}.meter:nth-child(-n+2){border-bottom:1px solid #1d3148}}
@media(max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-245px;width:228px;transition:.2s}.sidebar.open{left:0}.menu-btn{display:inline-flex;background:none;border:0;color:white}.mobile-only{display:inline-flex}.topbar{padding:0 14px}.profile .who{display:none}.shortcut{display:none}.content{padding:18px 14px}.page-head{flex-direction:column}.alert-expire{width:100%}.kpis{grid-template-columns:1fr 1fr}.form-grid,.import-box,.status-grid{grid-template-columns:1fr}.search{margin-left:0}.dashboard-grid{display:block}.stack{margin-bottom:14px}.server-strip{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.kpis{grid-template-columns:1fr}.page-title h1{font-size:23px}.top-actions{gap:9px}.search{display:none}.server-strip{grid-template-columns:1fr}.meter{border-right:0;border-bottom:1px solid #1d3148}.meter:last-child{border-bottom:0}}
/* V2 modules */
.status-pill.neutral{background:#1a2b3d;color:#9fb1c5;border:1px solid #29425d}.tiny{font-size:10px;margin-top:4px}.split-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}.scroll-box{max-height:320px;overflow:auto;border:1px solid #1d344d;border-radius:10px;padding:8px;background:#071522}.check-grid{display:grid;gap:5px}.check-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:8px;border-radius:7px;cursor:pointer}.check-row:hover{background:#102238}.check-row small{color:#7188a2}.check-row input{accent-color:#2e79ff}.bouquet-card{margin-top:14px}.twofa-setup{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:start}.qr{width:180px;height:180px;background:white;padding:8px;border-radius:12px}.code-input{letter-spacing:.28em;font-size:20px;text-align:center;max-width:220px}.actions form{margin:0}
@media(max-width:820px){.split-grid,.twofa-setup{grid-template-columns:1fr}.qr{width:160px;height:160px}}