:root{
  --navy:#0E1B33; --navy2:#16294A; --panel:#132540; --panel2:#16294A;
  --slate:#1F3A5F; --cyan:#2DD4BF; --cyan-d:#14B8A6;
  --ink:#E7EDF6; --mut:#9FB0CE; --mut2:#7F91B0;
  --line:#22375C; --danger:#F87171; --ok:#34D399; --warn:#FBBF24;
  --radius:14px; --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--navy);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Auth screens ---------- */
body.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 700px at 80% -10%, #16294A 0%, #0E1B33 55%)}
.auth-wrap{position:relative;width:100%;max-width:440px;padding:24px}
.auth-rings{position:absolute;right:-160px;top:-120px;width:420px;height:420px;border-radius:50%;
  border:1px solid var(--slate);box-shadow:0 0 0 40px rgba(31,58,95,.28),0 0 0 90px rgba(31,58,95,.16);opacity:.5;pointer-events:none}
.auth-card{position:relative;background:var(--navy2);border:1px solid var(--slate);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow)}
.auth-card.glow{box-shadow:0 0 0 1px rgba(45,212,191,.35),var(--shadow)}
.auth-head{text-align:center;margin-bottom:22px}
.auth-logo{display:inline-flex;align-items:center;gap:10px;justify-content:center;font-weight:700;font-size:19px}
.auth-logo .brand-mark{width:34px;height:34px}
.auth-sub{color:var(--mut);font-size:13px;margin-top:6px}
.auth-foot{text-align:center;color:var(--mut2);font-size:12px;margin-top:18px}
.auth-note{color:var(--mut);font-size:12px;text-align:center;margin-top:14px}

.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--cyan),#3B82F6);color:var(--navy);font-weight:800}

/* ---------- Forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--mut);margin-bottom:6px;font-weight:600;letter-spacing:.2px}
.input,select,textarea{width:100%;background:#0F2140;border:1px solid var(--slate);color:var(--ink);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:14.5px;font-family:inherit;outline:none;transition:border .15s,box-shadow .15s}
.input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(45,212,191,.15)}
textarea{resize:vertical;min-height:80px}
.input-group{position:relative}
.input-group .toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--mut);cursor:pointer;font-size:12px}
.help{color:var(--mut2);font-size:12px;margin-top:5px}
.code-inputs{display:flex;gap:8px;justify-content:center;margin:6px 0 4px}
.code-inputs input{width:46px;height:54px;text-align:center;font-size:22px;font-weight:700;background:#0F2140;
  border:1px solid var(--slate);border-radius:10px;color:var(--ink)}
.code-inputs input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(45,212,191,.15);outline:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-sm);padding:11px 16px;font-size:14.5px;font-weight:600;
  font-family:inherit;transition:transform .05s,background .15s,border .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,var(--cyan),var(--cyan-d));color:#04262A;box-shadow:0 6px 18px rgba(45,212,191,.25)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;border-color:var(--slate);color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-danger{background:transparent;border-color:#5b2330;color:var(--danger)}
.btn-danger:hover{background:rgba(248,113,113,.1)}
.btn-block{width:100%}
.btn-sm{padding:8px 12px;font-size:13px}
.btn-launch{background:linear-gradient(180deg,var(--cyan),var(--cyan-d));color:#04262A;font-weight:700}

/* ---------- Alerts ---------- */
.alert{border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:16px;font-size:14px;border:1px solid}
.alert-success{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.4);color:#8af0cf}
.alert-error{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.4);color:#f6b0b0}

/* ---------- App shell ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:248px;flex:0 0 248px;background:#0B1730;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px;border-bottom:1px solid var(--line);font-weight:700}
.brand-logo{width:28px;height:28px;border-radius:7px;object-fit:cover}
.brand-name{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{padding:12px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--mut);font-size:14px;font-weight:500}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.nav-item.is-active{background:rgba(45,212,191,.12);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(45,212,191,.3)}
.sidebar-foot{padding:14px 18px;border-top:1px solid var(--line)}
.badge-secure{color:var(--ok);font-size:11.5px;font-weight:600}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:62px;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(14,27,51,.9);backdrop-filter:blur(8px);z-index:30}
.topbar-title{font-weight:700;font-size:16px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.who{display:flex;align-items:center;gap:9px}
.who-name{font-size:13.5px;color:var(--mut)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--slate);display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.logout-form{margin:0}
.content{padding:24px;max-width:1200px;width:100%}

.hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{width:22px;height:2px;background:var(--ink);border-radius:2px}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35}
.scrim.show{display:block}

/* ---------- Page bits ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:22px;margin:0}
.muted{color:var(--mut)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.search{flex:1;min-width:200px}
.search input{width:100%}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.kpi{background:var(--navy2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.kpi .k{font-size:12px;color:var(--mut)}
.kpi .v{font-size:26px;font-weight:800;margin-top:2px}
.kpi .v .u{font-size:13px;color:var(--cyan);font-weight:600}

/* Server cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.scard{background:var(--navy2);border:1px solid var(--line);border-radius:var(--radius);padding:15px;
  box-shadow:inset 0 0 0 1px rgba(45,212,191,.05);transition:border .15s,transform .1s}
.scard:hover{border-color:rgba(45,212,191,.4);transform:translateY(-2px)}
.scard .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.scard .label{font-weight:700;color:var(--cyan);font-size:15px}
.scard .meta{color:var(--mut);font-size:13px;margin-top:6px;line-height:1.6}
.scard .last{color:var(--mut2);font-size:12px;margin:10px 0}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.online{background:var(--ok);box-shadow:0 0 8px rgba(52,211,153,.7)}
.dot.offline{background:#6B7280}
.dot.maintenance{background:var(--warn)}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);
  border:1px solid var(--line);border-radius:20px;padding:3px 10px}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.data{width:100%;border-collapse:collapse;min-width:640px}
table.data th{background:var(--slate);color:#fff;text-align:left;font-size:12.5px;padding:11px 14px;font-weight:600;white-space:nowrap}
table.data td{padding:11px 14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mut);vertical-align:middle}
table.data tr:hover td{background:rgba(255,255,255,.02)}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;border:1px solid}
.pill-super{color:var(--cyan);border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.08)}
.pill-admin{color:var(--mut);border-color:var(--line)}
.pill-on{color:var(--ok);border-color:rgba(52,211,153,.4)}
.pill-off{color:var(--mut2);border-color:var(--line)}

/* Panels / cards */
.panel{background:var(--navy2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.panel h2{font-size:15px;margin:0 0 14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.launch-card{background:linear-gradient(160deg,rgba(45,212,191,.12),rgba(20,184,166,.03));
  border:1px solid rgba(45,212,191,.35);border-radius:var(--radius);padding:22px;text-align:center}
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.dl dt{color:var(--mut2)}
.dl dd{margin:0;color:var(--ink);word-break:break-word}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Chips / filters */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:13px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);color:var(--mut)}
.chip.is-active{background:rgba(45,212,191,.12);color:var(--cyan);border-color:rgba(45,212,191,.4)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:16px;align-items:center}

.actions{display:flex;gap:8px;flex-wrap:wrap}
.form-actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.avatar-lg{width:72px;height:72px;border-radius:50%;background:var(--slate);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;font-size:26px;font-weight:700}
.avatar-lg img{width:100%;height:100%;object-fit:cover}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.qr-box{background:#fff;border-radius:12px;padding:12px;width:214px;height:214px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.secret-key{display:flex;align-items:center;gap:8px;background:#0F2140;border:1px solid var(--slate);border-radius:10px;padding:9px 11px;margin-top:8px}
.secret-key code{font-size:14px;letter-spacing:1px;word-break:break-all}

/* Icons (simple CSS masks via unicode fallback) */
.ico{width:18px;height:18px;display:inline-block;flex:0 0 18px;opacity:.9;
  background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ico-grid{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E")}
.ico-server{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='7' rx='1'/%3E%3Crect x='2' y='14' width='20' height='7' rx='1'/%3E%3Cline x1='6' y1='6.5' x2='6' y2='6.5'/%3E%3Cline x1='6' y1='17.5' x2='6' y2='17.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='7' rx='1'/%3E%3Crect x='2' y='14' width='20' height='7' rx='1'/%3E%3C/svg%3E")}
.ico-users{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E")}
.ico-list{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3C/svg%3E")}
.ico-cog{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .sidebar{position:fixed;left:-260px;top:0;transition:left .22s ease}
  .sidebar.open{left:0}
  .hamburger{display:flex}
  .kpis{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .who-name{display:none}
  .content{padding:16px}
}
@media (max-width: 520px){
  .card-grid{grid-template-columns:1fr}
  .page-head h1{font-size:19px}
}