:root{
    --bg:#050b16;
    --panel:#071222;
    --panel-2:#0a1729;
    --card:#0b1728cc;
    --line:#18304d;
    --line-soft:#13263e;
    --text:#eef6ff;
    --muted:#8fa3bf;
    --blue:#1188ff;
    --cyan:#24d9ff;
    --green:#21d07a;
    --amber:#f3a833;
    --red:#ff5b6b;
    --shadow:0 26px 80px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 25% 10%, rgba(17,136,255,.16), transparent 30%),
        radial-gradient(circle at 85% 15%, rgba(36,217,255,.07), transparent 28%),
        linear-gradient(135deg,#03070e 0%,#06101d 48%,#030812 100%);
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.app-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.sidebar{
    position:sticky;top:0;height:100vh;padding:28px 18px;display:flex;flex-direction:column;gap:20px;
    background:linear-gradient(180deg,rgba(7,18,34,.98),rgba(3,10,20,.98));
    border-right:1px solid var(--line-soft);box-shadow:var(--shadow);z-index:4
}
.brand-block{text-align:center;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.05)}
.brand-icon{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto 8px;filter:drop-shadow(0 0 24px rgba(17,136,255,.25))}
.brand-logo{width:165px;max-height:80px;object-fit:contain;object-position:center;display:block;margin:0 auto;filter:drop-shadow(0 0 16px rgba(17,136,255,.25))}
.side-nav{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.side-nav a{
    display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid transparent;border-radius:12px;
    color:#c7d5e8;transition:.18s ease;background:transparent
}
.side-nav a span{width:22px;text-align:center;color:#8fb9ff;font-size:18px}
.side-nav a:hover,.side-nav a.is-active{background:linear-gradient(135deg,rgba(17,136,255,.18),rgba(17,136,255,.06));border-color:#1e62a8;color:#fff;box-shadow:0 10px 28px rgba(17,136,255,.1)}
.sidebar-help{margin-top:auto;border:1px solid var(--line-soft);border-radius:18px;padding:18px;background:linear-gradient(180deg,rgba(12,28,50,.78),rgba(4,12,24,.78))}
.help-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(17,136,255,.16);color:var(--cyan);font-weight:800;margin-bottom:12px}
.sidebar-help p{color:var(--muted);font-size:13px;line-height:1.45;margin:7px 0 14px}
.sidebar-footer{font-size:12px;color:#667b96;line-height:1.6;padding:0 8px 8px}
.main{min-width:0}
.topbar{
    height:70px;display:flex;align-items:center;gap:16px;padding:0 34px;position:sticky;top:0;z-index:3;
    background:rgba(5,12,23,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft)
}
.icon-btn{position:relative;border:1px solid var(--line-soft);background:#0b1728;color:#c9d7ea;border-radius:11px;width:42px;height:42px;cursor:pointer}
.notification b{position:absolute;right:-5px;top:-5px;background:var(--blue);font-size:10px;border-radius:999px;padding:2px 6px}
.search-box{display:flex;align-items:center;gap:12px;background:#071324;border:1px solid var(--line-soft);border-radius:12px;padding:0 12px;height:42px;min-width:min(520px,42vw)}
.search-box input{background:transparent;border:0;outline:0;color:var(--text);width:100%}
.search-box kbd{color:#91a6c4;border:1px solid var(--line-soft);border-radius:8px;padding:3px 7px;background:#0d1c32;font-size:12px}
.topbar-spacer{flex:1}.system-status{color:#d7e3f4;font-size:14px;display:flex;align-items:center;gap:9px}.system-status i{width:10px;height:10px;background:var(--green);border-radius:50%;box-shadow:0 0 14px var(--green)}
.account-chip{display:flex;align-items:center;gap:12px;border-left:1px solid var(--line-soft);padding-left:18px}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#102b59,#0b1830);border:1px solid #1e57a0;font-weight:800}.account-chip strong{display:block;font-size:14px}.account-chip small{display:block;color:var(--muted);font-size:12px}.account-chip a{color:#8da4c2;font-size:18px}
.content{padding:30px 34px 42px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.page-head h1{margin:0;font-size:34px;letter-spacing:-.04em}.page-head p{margin:6px 0 0;color:#a7b8cf}.page-actions{display:flex;gap:10px;flex-wrap:wrap}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}.stat-card,.panel-card,.server-card,.form-card,.login-card{
    border:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(12,26,47,.82),rgba(5,14,27,.88));border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.18)
}
.stat-card{padding:20px;display:flex;align-items:center;justify-content:space-between;min-height:128px;overflow:hidden;position:relative}.stat-card:after{content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;background:radial-gradient(circle,rgba(17,136,255,.2),transparent 68%)}.stat-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(36,217,255,.28),rgba(17,136,255,.14));border:1px solid rgba(36,217,255,.2);box-shadow:0 0 30px rgba(17,136,255,.15);font-size:26px}.stat-card small{color:#8aa0bd;text-transform:uppercase;letter-spacing:.05em}.stat-card strong{display:block;font-size:28px;margin:5px 0}.stat-card span{color:var(--muted);font-size:13px}.mini-chart{width:72px;height:38px;background:linear-gradient(135deg,transparent 50%,rgba(17,136,255,.22));clip-path:polygon(0 80%,15% 65%,30% 72%,45% 45%,60% 58%,75% 25%,100% 10%,100% 100%,0 100%);opacity:.95}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px}.section-card{border:1px solid var(--line-soft);background:rgba(6,16,30,.64);border-radius:18px;padding:18px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title h2{font-size:20px;margin:0}.view-link{font-size:13px;color:#4ca8ff}.servers-grid{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:14px}.server-card{padding:14px;position:relative;overflow:hidden}.server-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 55% 15%,rgba(17,136,255,.13),transparent 36%);pointer-events:none}.server-card-head,.server-title-row,.server-actions{position:relative;display:flex;align-items:center}.server-card-head{justify-content:space-between}.status-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 10px;font-size:12px;border:1px solid rgba(255,255,255,.08)}.status-pill i{width:8px;height:8px;border-radius:50%}.status-ok{color:#80f4b9;background:rgba(33,208,122,.11)}.status-ok i{background:var(--green)}.status-warning{color:#ffd08a;background:rgba(243,168,51,.13)}.status-warning i{background:var(--amber)}.status-maintenance{color:#ffd08a;background:rgba(243,168,51,.13)}.status-maintenance i{background:var(--amber)}.status-offline{color:#ff9ba5;background:rgba(255,91,107,.12)}.status-offline i{background:var(--red)}.card-menu{background:transparent;border:0;color:#9db1c9;font-size:22px;cursor:pointer}.server-visual{height:132px;margin:10px 0 8px;position:relative;display:grid;place-items:center}.server-globe{position:absolute;width:140px;height:66px;border-radius:50%;border:1px dashed rgba(17,136,255,.25);box-shadow:0 0 38px rgba(17,136,255,.08)}.server-rack{position:relative;width:46px;height:82px;border:1px solid #2375c9;border-radius:7px;background:linear-gradient(145deg,#173e68,#071a31);box-shadow:0 0 32px rgba(17,136,255,.38);transform:perspective(120px) rotateY(-10deg)}.server-rack i{display:block;height:12px;margin:6px;border-radius:4px;background:linear-gradient(90deg,#78d6ff,#0c6ed4)}.server-ring{position:absolute;bottom:16px;width:112px;height:24px;border-radius:50%;border:2px solid rgba(36,217,255,.35);box-shadow:0 0 25px rgba(36,217,255,.18)}.city-line{position:absolute;bottom:25px;left:12px;right:12px;height:36px;background:linear-gradient(90deg,transparent,rgba(17,136,255,.17),transparent);clip-path:polygon(0 100%,10% 55%,18% 100%,27% 35%,34% 100%,45% 10%,58% 100%,68% 30%,80% 100%,90% 50%,100% 100%)}.server-title-row{gap:10px;margin-bottom:12px}.flag{font-size:22px}.server-title-row h3{margin:0;font-size:17px}.server-title-row p,.server-title-row small{margin:2px 0 0;color:#91a4be}.metric-list{position:relative;border-top:1px solid rgba(255,255,255,.06);padding-top:12px;display:flex;flex-direction:column;gap:10px}.metric-list div{display:grid;grid-template-columns:88px 1fr auto;gap:9px;align-items:center;font-size:13px}.metric-list div:first-child{grid-template-columns:1fr auto}.metric-list span{color:#9dafc7}.metric-list strong{font-weight:600;color:#dce9fb}meter{width:100%;height:7px;appearance:none}meter::-webkit-meter-bar{background:#13283f;border:0;border-radius:999px}meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#106bdb,#25d7ff);border-radius:999px}.server-card.warning meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#f3a833,#ffcf72)}.server-actions{gap:10px;margin-top:16px}.btn{border:1px solid #1b3d63;background:#0b1830;color:#d8e8fb;border-radius:10px;min-height:40px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:.18s ease}.btn:hover{transform:translateY(-1px);border-color:#2d83d6;box-shadow:0 10px 22px rgba(17,136,255,.12)}.btn-primary{background:linear-gradient(135deg,#0d5bc7,#0a3270);border-color:#186bd2;color:white}.btn-outline{background:transparent;border-color:#23517f;color:#6db8ff}.btn-muted{background:#0a1527;color:#a7b8ce}.btn-danger,.btn.danger:hover{border-color:rgba(255,91,107,.35);color:#ff9ba5}.btn.full{width:100%}.icon-only{width:42px;padding:0}.right-stack{display:flex;flex-direction:column;gap:14px}.panel-card{padding:18px}.connection-map{height:140px;margin:4px 0 12px;border-radius:14px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(17,136,255,.16),transparent 44%)}.connection-map:before{content:"";position:absolute;inset:18px;background-image:radial-gradient(circle,rgba(68,153,255,.45) 1px,transparent 1px);background-size:10px 8px;opacity:.28}.connection-map:after{content:"";position:absolute;left:42px;right:42px;top:52px;height:60px;border-top:2px solid rgba(36,217,255,.58);border-radius:50%;filter:drop-shadow(0 0 10px rgba(36,217,255,.5))}.connection-list,.activity-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.connection-list li,.activity-list li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.connection-list strong,.activity-list strong{display:block;font-size:14px}.connection-list small,.activity-list small{display:block;color:#7f93ae;font-size:12px}.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}.activity-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(17,136,255,.14);color:#6ab8ff}.activity-icon.warning{background:rgba(243,168,51,.13);color:#ffce84}.activity-icon.success{background:rgba(33,208,122,.13);color:#80f4b9}.users-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.user-chip{display:flex;align-items:center;gap:12px;background:rgba(8,20,36,.82);border:1px solid var(--line-soft);border-radius:14px;padding:13px}.user-chip .avatar{width:42px;height:42px}.user-chip strong{display:block;font-size:14px}.user-chip small{display:block;color:#8298b4;font-size:12px}.user-status{margin-top:4px;color:#93a8c2;font-size:12px}.user-status i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:flex;flex-direction:column;gap:8px}.field label{color:#b3c5dc;font-size:13px}.field input,.field select,.field textarea{background:#081526;color:#edf5ff;border:1px solid #18304d;border-radius:12px;padding:13px 14px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#2579cc;box-shadow:0 0 0 3px rgba(17,136,255,.12)}.form-card{padding:20px;margin-bottom:18px}.table-card{overflow:hidden}.premium-table{width:100%;border-collapse:collapse}.premium-table th,.premium-table td{padding:15px;border-bottom:1px solid var(--line-soft);text-align:left}.premium-table th{color:#95aac6;font-size:12px;text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.02)}.premium-table td{color:#dce7f4}.server-detail{display:grid;grid-template-columns:380px 1fr;gap:20px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.kv{background:rgba(8,20,36,.72);border:1px solid var(--line-soft);border-radius:14px;padding:14px}.kv small{display:block;color:#8aa0bd;margin-bottom:6px}.kv strong{font-size:16px}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(520px,100%);padding:34px}.login-brand{text-align:center;margin-bottom:22px}.login-brand img:first-child{width:98px}.login-brand img:last-child{width:210px;display:block;margin:8px auto 0}.login-card h1{text-align:center;margin:0;font-size:28px}.login-card p{text-align:center;color:#9aadc4}.alert{border:1px solid rgba(255,91,107,.32);background:rgba(255,91,107,.1);border-radius:12px;padding:12px;color:#ffc8ce;margin-bottom:14px}.success-box{border:1px solid rgba(33,208,122,.25);background:rgba(33,208,122,.08);border-radius:12px;padding:12px;color:#bdf8d8;margin-bottom:14px}.toast{position:fixed;right:28px;bottom:26px;max-width:420px;background:#0b1728;border:1px solid #245482;border-radius:14px;padding:14px 16px;color:#e8f4ff;box-shadow:var(--shadow);transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s ease;z-index:50}.toast.show{transform:translateY(0);opacity:1}.placeholder-panel{min-height:360px;display:grid;place-items:center;text-align:center}.placeholder-panel h2{margin:0 0 10px}.placeholder-panel p{color:var(--muted);max-width:640px}
@media(max-width:1400px){.servers-grid{grid-template-columns:repeat(2,minmax(260px,1fr))}.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.users-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-290px;transition:.2s ease}.sidebar.open{left:0}.topbar{padding:0 18px}.search-box{min-width:0;flex:1}.system-status,.account-chip div:not(.avatar){display:none}.content{padding:22px 16px}.stats-grid,.servers-grid,.form-grid,.detail-grid,.server-detail{grid-template-columns:1fr}.users-strip{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}}
.user-status i.status-ok{background:var(--green);box-shadow:0 0 10px var(--green)}
.user-status i.status-warning,.user-status i.status-maintenance{background:var(--amber);box-shadow:0 0 10px rgba(243,168,51,.65)}
.user-status i.status-offline{background:var(--red);box-shadow:0 0 10px rgba(255,91,107,.65)}