/* GeniusX Control.
   Calm, light-first, with a dark theme that is a real theme rather than an
   inversion. Two local typefaces: Vazirmatn for Persian, JetBrains Mono for
   anything an operator compares character by character (addresses, keys,
   counters). The rules that matter most: 4.5:1 contrast everywhere, 44px
   touch targets, nothing under 12px, and motion that is short and optional. */

@font-face{font-family:"Vazirmatn";src:url("/fonts/Vazirmatn.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono.woff2") format("woff2");font-weight:100 800;font-display:swap}

/* ---- Tokens ------------------------------------------------------------ */
:root{
  --bg:#f4f6f9;--surface:#ffffff;--surface-2:#f8fafc;--surface-3:#eef2f6;
  --line:#e5e9ef;--line-strong:#cfd6df;
  --text:#0f172a;--text-2:#475569;--text-3:#64748b;
  --brand:#0f766e;--on-brand:#ffffff;--brand-strong:#115e59;--brand-soft:#e6f7f4;--brand-ink:#115e59;--brand-ring:rgba(15,118,110,.25);
  --violet:#7c3aed;--violet-soft:#f1eafe;--blue:#2563eb;--blue-soft:#e8effd;
  --ok:#15803d;--ok-soft:#e5f6ea;--warn:#b45309;--warn-soft:#fdf1e1;--danger:#dc2626;--danger-soft:#fdeaea;
  /* Text on the soft fills needs a darker ink than the icon colour to clear 4.5:1. */
  --ok-ink:#166534;--warn-ink:#92400e;--danger-ink:#b91c1c;--blue-ink:#1d4ed8;--violet-ink:#6d28d9;--on-danger:#ffffff;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -14px rgba(15,23,42,.16);
  --shadow-lg:0 24px 60px -20px rgba(15,23,42,.3);
  --radius:14px;--radius-sm:10px;--radius-xs:8px;
  --sidebar:264px;
  --font:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--dur:180ms;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1220;--surface:#111a2b;--surface-2:#16213a;--surface-3:#1b2740;
    --line:rgba(148,163,184,.14);--line-strong:rgba(148,163,184,.28);
    --text:#e8eef7;--text-2:#b0bccd;--text-3:#8b98ad;
    --brand:#2dd4bf;--on-brand:#04221f;--brand-strong:#5eead4;--brand-soft:rgba(45,212,191,.12);--brand-ink:#99f6e4;--brand-ring:rgba(45,212,191,.28);
    --violet:#a78bfa;--violet-soft:rgba(167,139,250,.14);--blue:#60a5fa;--blue-soft:rgba(96,165,250,.14);
    --ok:#34d399;--ok-soft:rgba(52,211,153,.13);--warn:#fbbf24;--warn-soft:rgba(251,191,36,.13);--danger:#f87171;--danger-soft:rgba(248,113,113,.13);
    --ok-ink:#34d399;--warn-ink:#fbbf24;--danger-ink:#f87171;--blue-ink:#60a5fa;--violet-ink:#a78bfa;--on-danger:#1a0808;
    --shadow-sm:0 1px 0 rgba(255,255,255,.03) inset;
    --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 14px 34px -18px rgba(0,0,0,.7);
    --shadow-lg:0 30px 80px -24px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1220;--surface:#111a2b;--surface-2:#16213a;--surface-3:#1b2740;
  --line:rgba(148,163,184,.14);--line-strong:rgba(148,163,184,.28);
  --text:#e8eef7;--text-2:#b0bccd;--text-3:#8b98ad;
  --brand:#2dd4bf;--on-brand:#04221f;--brand-strong:#5eead4;--brand-soft:rgba(45,212,191,.12);--brand-ink:#99f6e4;--brand-ring:rgba(45,212,191,.28);
  --violet:#a78bfa;--violet-soft:rgba(167,139,250,.14);--blue:#60a5fa;--blue-soft:rgba(96,165,250,.14);
  --ok:#34d399;--ok-soft:rgba(52,211,153,.13);--warn:#fbbf24;--warn-soft:rgba(251,191,36,.13);--danger:#f87171;--danger-soft:rgba(248,113,113,.13);
  --ok-ink:#34d399;--warn-ink:#fbbf24;--danger-ink:#f87171;--blue-ink:#60a5fa;--violet-ink:#a78bfa;--on-danger:#1a0808;
  --shadow-sm:0 1px 0 rgba(255,255,255,.03) inset;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 14px 34px -18px rgba(0,0,0,.7);
  --shadow-lg:0 30px 80px -24px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---- Base -------------------------------------------------------------- */
*{box-sizing:border-box}
html{font-family:var(--font);font-size:15px;line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizeLegibility}
body{margin:0;min-height:100vh;background:var(--bg)}
h1,h2,h3,p{margin:0}
h1{font-size:24px;font-weight:800;letter-spacing:-.2px}
h2{font-size:17px;font-weight:800}
h3{font-size:15.5px;font-weight:800}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--brand);text-decoration:none}
code{font:500 12.5px var(--mono);color:var(--text-2);background:var(--surface-3);padding:2px 6px;border-radius:6px;direction:ltr;unicode-bidi:embed}
kbd{font:600 12px var(--mono);color:var(--text-3);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--surface)}
.hidden,[hidden]{display:none!important}
.mono{font-family:var(--mono)!important;font-size:13.5px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:15px;height:15px}
.ic.ok{color:var(--ok)}
.gx-mark{width:40px;height:40px;flex:0 0 auto}
.gx-mark.lg{width:64px;height:64px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
::selection{background:var(--brand-ring)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
.eyebrow{color:var(--brand);font:800 12px/1.5 var(--mono);letter-spacing:2px;text-transform:uppercase}
.lead{color:var(--text-2);font-size:14.5px}
.hint{color:var(--text-3);font-size:12.5px;line-height:1.8;font-weight:400}
.mobile-only{display:none!important}

/* ---- Buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;border:1px solid transparent;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:progress;transform:none}
.btn.block{width:100%}
.btn.primary{background:var(--brand);color:var(--on-brand);box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 20px -10px var(--brand)}
.btn.primary:hover{background:var(--brand-strong)}
.btn.secondary{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.btn.secondary:hover{background:var(--surface-2);border-color:var(--text-3)}
.btn.ghost{background:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-3);color:var(--text)}
.btn.ghost.danger:hover{background:var(--danger-soft);color:var(--danger-ink)}
.btn.danger{background:var(--danger-soft);color:var(--danger-ink)}
.btn.danger:hover{background:var(--danger);color:var(--on-danger)}
/* After .btn.danger on purpose: a ghost button only turns red when pointed at. */
.btn.ghost.danger{background:transparent;color:var(--text-2)}
.btn.ghost.danger:hover{background:var(--danger-soft);color:var(--danger-ink)}
.btn.icon{width:42px;padding:0}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:var(--radius-xs)}
.btn.sm.icon{width:34px}
.btn .ic{width:18px;height:18px}
.btn.loading{position:relative;color:transparent!important}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid currentColor;border-color:var(--text-2) transparent var(--text-2) transparent;border-radius:50%;animation:spin .8s linear infinite;opacity:.9}
.btn.primary.loading::after{border-color:var(--on-brand) transparent var(--on-brand) transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Fields ------------------------------------------------------------ */
.form,.stack{display:grid;gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.span-2{grid-column:span 2}
.field{display:grid;gap:7px;min-width:0}
.field>label,.field>.label{font-size:13.5px;font-weight:700;color:var(--text-2)}
.field .unit{font-weight:500;color:var(--text-3);font-size:12.5px}
.field input,.field select,.search input{width:100%;min-height:42px;padding:0 13px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);outline:0;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur)}
.field input::placeholder{color:var(--text-3);opacity:.8;font-family:var(--font);font-size:13.5px}
.field input:hover{border-color:var(--text-3)}
.field input:focus,.field select:focus,.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.field input[readonly]{background:var(--surface-2)}
.field input[dir="ltr"]{text-align:left}
.field-error{color:var(--danger);font-size:13.5px;min-height:20px;font-weight:600}
.form-message{min-height:20px;font-size:13.5px;color:var(--ok);font-weight:600;margin:0}
.form-message.error{color:var(--danger)}
.input-group{position:relative;display:flex}
.input-group input{padding-inline-end:46px}
/* The affix sits at the GROUP's inline end (the left, in this RTL page). An
   LTR input resolves its own inline end to the right, so it needs the room on
   its inline start instead, or the icon lands on the first characters. */
.input-group input[dir="ltr"]{padding-inline-end:13px;padding-inline-start:46px}
.input-affix{position:absolute;inset-inline-end:4px;top:4px;bottom:4px;width:36px;display:grid;place-items:center;border-radius:8px;color:var(--text-3);transition:background var(--dur),color var(--dur)}
.input-affix:hover{background:var(--surface-3);color:var(--text)}
.input-affix[aria-pressed="true"]{color:var(--brand)}
.select-wrap{position:relative}
.select-wrap select{appearance:none;padding-inline-end:40px;cursor:pointer}
.select-wrap .ic{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%) rotate(90deg);color:var(--text-3);pointer-events:none;width:18px}
.segmented{display:inline-flex;background:var(--surface-3);border-radius:var(--radius-sm);padding:4px;gap:4px;flex-wrap:wrap}
.segmented label{position:relative;cursor:pointer}
.segmented input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.segmented span{display:block;padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--text-2);transition:background var(--dur),color var(--dur),box-shadow var(--dur)}
.segmented input:checked+span{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm),0 1px 3px rgba(15,23,42,.12)}
.segmented input:focus-visible+span{outline:2px solid var(--brand);outline-offset:1px}
.switch{position:relative;display:inline-block;width:46px;height:28px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.switch i{position:absolute;inset:0;background:var(--line-strong);border-radius:999px;transition:background var(--dur)}
.switch i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--dur) var(--ease)}
.switch input:checked+i{background:var(--brand)}
.switch input:checked+i::after{transform:translateX(-18px)}
.switch input:focus-visible+i{outline:2px solid var(--brand);outline-offset:2px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer}
.switch-text{display:grid;gap:3px}
.switch-text strong{font-size:14px}
.switch-text small{color:var(--text-3);font-size:12.5px;line-height:1.7}
.divider{padding-top:6px;border-top:1px solid var(--line);font-size:14px;font-weight:800;display:grid;gap:2px}
.divider small{font-weight:400;color:var(--text-3);font-size:12.5px;line-height:1.7}

/* ---- Login ------------------------------------------------------------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,var(--brand-soft),transparent 60%),var(--bg)}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:40px 36px 28px;display:grid;gap:26px}
.auth-brand{display:grid;justify-items:center;text-align:center;gap:6px}
.auth-brand .gx-mark{margin-bottom:10px}
.auth-brand h1{font-size:24px}
.auth-foot{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text-3);font-size:12.5px}

/* ---- Shell ------------------------------------------------------------- */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:20px 14px;border-inline-start:1px solid var(--line);background:var(--surface);overflow:auto}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 22px;color:var(--text)}
.brand-text{display:grid;line-height:1.25}
.brand-text strong{font-size:17px;font-weight:800;letter-spacing:-.2px}
.brand-text span{font:600 12px var(--mono);color:var(--text-3);letter-spacing:1.5px;text-transform:uppercase}
.nav{display:grid;gap:4px}
.nav-section{font-size:12px;font-weight:800;color:var(--text-3);letter-spacing:.6px;padding:14px 12px 6px}
.nav-section:first-child{padding-top:0}
.nav-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--radius-sm);color:var(--text-2);font-size:14.5px;font-weight:600;text-align:start;width:100%;transition:background var(--dur),color var(--dur)}
.nav-item:hover{background:var(--surface-3);color:var(--text)}
.nav-item.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:800}
.nav-item.active .ic{color:var(--brand)}
.sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:10px}
.admin{display:flex;align-items:center;gap:10px;padding:4px 6px;min-width:0}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);font:800 14px var(--mono);flex:0 0 auto;text-transform:uppercase}
.admin-text{display:grid;min-width:0;line-height:1.3}
.admin-text strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-text span{font:500 12px var(--mono);color:var(--text-3)}
.sidebar-tools{display:flex;gap:4px;justify-content:flex-end}
.theme-moon{display:none}
:root[data-theme="dark"] .theme-sun{display:none}
:root[data-theme="dark"] .theme-moon{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-sun{display:none}
  :root:not([data-theme="light"]) .theme-moon{display:block}
}

.main{min-width:0;padding:28px 36px 60px;max-width:1360px;width:100%;margin-inline:auto}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px}
.topbar-title p{color:var(--text-3);font-size:13.5px;margin-top:3px}
.topbar-actions{display:flex;align-items:center;gap:6px}
.live{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:600}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);animation:pulse 2s infinite}
.live.paused .live-dot{background:var(--text-3);box-shadow:none;animation:none}
.live.error .live-dot{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft);animation:none}
@keyframes pulse{50%{opacity:.4}}
.page{animation:rise .28s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Cards ------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.card-head.compact{padding:18px 20px}
.card-title{display:grid;gap:3px;min-width:0}
.card-title h2,.card-title h3{display:flex;align-items:center;gap:8px}
.card-title p{color:var(--text-3);font-size:13px}
.card-body{padding:22px}
.count{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2);font:700 12.5px var(--mono)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.badge.mono{font-family:var(--mono);font-size:12px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:26px 0 12px}
.section-head:first-child{margin-top:0}
.section-head.with-action{align-items:center;margin-bottom:18px}
.section-head p{color:var(--text-3);font-size:13px;margin-top:2px}
.side-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.notice{display:flex;gap:12px;padding:14px;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--text);border:1px solid transparent}
.notice .ic{color:var(--brand);margin-top:2px}
.notice div{display:grid;gap:3px}
.notice strong{font-size:13.5px}
.notice span{font-size:12.5px;line-height:1.8;color:var(--text-2)}
.notice.warn{background:var(--warn-soft)}
.notice.warn .ic{color:var(--warn)}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:14px}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:2px 12px;counter-increment:s}
.steps li>*{grid-column:2}
.steps li::before{content:counter(s);grid-column:1;grid-row:1/span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-3);color:var(--text-2);font:800 12.5px var(--mono)}
.steps strong{display:block;font-size:14px}
.steps span{color:var(--text-3);font-size:12.5px;line-height:1.75}
.two-col{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.result{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring),var(--shadow)}

/* ---- KPIs -------------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{display:flex;gap:14px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.kpi-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
/* Not ".brand": that class is the sidebar logo, and its mobile rule
   (display:none) would take this icon with it. */
.kpi-icon.primary{background:var(--brand-soft);color:var(--brand)}
.kpi-icon.blue{background:var(--blue-soft);color:var(--blue)}
.kpi-icon.violet{background:var(--violet-soft);color:var(--violet)}
.kpi-icon.teal{background:var(--ok-soft);color:var(--ok)}
.kpi-body{display:grid;gap:2px;min-width:0;flex:1}
.kpi-label{font-size:13px;color:var(--text-3);font-weight:600}
.kpi-value{font:800 28px/1.15 var(--mono);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi-value.text{font-family:var(--font);font-size:22px}
.kpi-value.ok{color:var(--ok-ink)}
.kpi-value.warn{color:var(--warn-ink)}
.kpi-value.danger{color:var(--danger-ink)}
.kpi-hint{font-size:12px;color:var(--text-3)}
.split{display:flex;gap:14px;font-size:13px;color:var(--text-2);margin-top:4px}
.split strong{font:800 18px var(--mono);color:var(--text);margin-inline-end:4px}
.split-bar{height:6px;border-radius:999px;background:var(--violet-soft);overflow:hidden;margin-top:8px}
.split-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:999px;transition:width .4s var(--ease)}

/* ---- Servers ----------------------------------------------------------- */
.servers{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:22px}
.server{display:grid;gap:10px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.server-top{display:flex;align-items:center;gap:10px}
.server-top strong{font-size:14.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.server-kind{font:600 12px var(--mono);color:var(--text-3);letter-spacing:.5px}
.server-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;color:var(--text-3)}
.server-meta b{font:800 20px var(--mono);color:var(--text)}
.server-tags{display:flex;gap:6px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--text-3);flex:0 0 auto}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.dot.danger{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.dot.off{background:var(--line-strong)}

/* ---- Tags -------------------------------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;background:var(--surface-3);color:var(--text-2)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.ikev2{background:var(--blue-soft);color:var(--blue-ink)}
.tag.stealth{background:var(--violet-soft);color:var(--violet-ink)}
.tag.ok{background:var(--ok-soft);color:var(--ok-ink)}
.tag.warn{background:var(--warn-soft);color:var(--warn-ink)}
.tag.off{background:var(--danger-soft);color:var(--danger-ink)}
.tag.plain::before{display:none}

/* ---- Toolbar / table --------------------------------------------------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.chips{display:inline-flex;gap:4px;padding:4px;background:var(--surface-3);border-radius:var(--radius-sm)}
.chip{min-height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:700;color:var(--text-2);transition:background var(--dur),color var(--dur),box-shadow var(--dur)}
.chip:hover{color:var(--text)}
.chip.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.search{position:relative;display:flex;align-items:center;width:280px;max-width:100%}
.search .ic{position:absolute;inset-inline-start:12px;color:var(--text-3);width:18px;pointer-events:none}
.search input{padding-inline-start:38px;padding-inline-end:38px;font-size:13.5px}
.search kbd{position:absolute;inset-inline-end:10px;pointer-events:none}
.table-wrap{overflow:auto;position:relative}
.table{width:100%;border-collapse:collapse;min-width:900px;text-align:start}
.table th{position:sticky;top:0;z-index:1;text-align:start;padding:11px 18px;font-size:12px;font-weight:800;color:var(--text-3);letter-spacing:.3px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.table td{padding:13px 18px;font-size:13.5px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text-2)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--dur)}
.table tbody tr:hover{background:var(--surface-2)}
.user{display:flex;align-items:center;gap:10px;color:var(--text)}
.user .avatar{width:30px;height:30px;border-radius:9px;font-size:12.5px}
.user strong{font-size:14px}
.ltr{direction:ltr;text-align:start;font:500 13px var(--mono);unicode-bidi:isolate}
.cipher{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;font:500 12px var(--mono);color:var(--text-3)}
.skeleton-rows{display:grid;gap:10px;padding:18px}
.skeleton{height:44px;border-radius:10px;background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.card-skel{height:180px;border-radius:var(--radius)}
@keyframes shimmer{to{background-position:-200% 0}}
.empty{text-align:center;padding:52px 20px;color:var(--text-3)}
.empty-icon{width:52px;height:52px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;background:var(--surface-3);color:var(--text-3)}
.empty h3{color:var(--text);margin-bottom:4px}
.empty p{font-size:13.5px;max-width:40ch;margin:0 auto}

/* ---- Settings ---------------------------------------------------------- */
.settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.settings-main{display:grid;gap:18px;min-width:0}
.settings-side{display:grid;gap:18px;position:sticky;top:20px}
.savebar{position:sticky;bottom:16px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);animation:rise .22s var(--ease)}
.savebar>span{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--text-2)}
.savebar .ic{color:var(--warn)}
.savebar-actions{display:flex;gap:8px}
.test-result{margin:0 22px 22px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.test-result.success{border-color:var(--ok)}
.test-result.failure{border-color:var(--danger)}
.test-summary{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.test-summary strong{font-size:14px}
.test-summary small{grid-column:2;color:var(--text-3);font-size:12.5px;line-height:1.7;overflow-wrap:anywhere}
.test-dot{width:10px;height:10px;border-radius:50%;background:var(--text-3);grid-row:span 2}
.test-dot.success{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.test-dot.failure{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.test-stages{display:grid;margin-top:10px}
.test-stage{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.stage-mark{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;font:800 12.5px var(--mono);color:var(--ok);background:var(--ok-soft)}
.test-stage.failure .stage-mark{color:var(--danger);background:var(--danger-soft)}
.test-stage>div{display:grid;gap:2px;min-width:0}
.test-stage strong{font-size:13px}
.test-stage small{font-size:12px;line-height:1.7;color:var(--text-3);overflow-wrap:anywhere}
.test-policy{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.test-policy span{font:600 12px var(--mono);color:var(--brand-ink);background:var(--brand-soft);border-radius:6px;padding:4px 8px}

/* ---- Nodes ------------------------------------------------------------- */
.node-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.node{display:grid;gap:14px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:border-color var(--dur)}
.node.disabled{opacity:.82}
.node-top{display:flex;align-items:center;gap:12px}
.node-title{flex:1;min-width:0;display:grid;gap:1px}
.node-title strong{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node-title span{font:500 12px var(--mono);color:var(--text-3)}
.node-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.fact{display:grid;gap:2px;min-width:0}
.fact span{font-size:12.5px;font-weight:700;color:var(--text-3);letter-spacing:.2px}
.fact b{font:500 13px var(--mono);color:var(--text);direction:ltr;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:isolate}
.fact b.fa{font-family:var(--font);font-weight:600;direction:rtl}
.node-tags{display:flex;gap:6px;flex-wrap:wrap}
.node-actions{display:flex;gap:6px;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--line)}

/* ---- Dialogs ----------------------------------------------------------- */
.dialog{border:0;padding:0;background:transparent;max-width:min(640px,calc(100vw - 32px));width:100%;margin:auto}
.dialog.sm{max-width:420px}
.dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(3px)}
.dialog[open]{animation:rise .22s var(--ease)}
.dialog-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);color:var(--text);display:grid;max-height:calc(100vh - 32px);overflow:auto}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.dialog-head h2{font-size:17px}
.dialog-head p{color:var(--text-3);font-size:13px;margin-top:2px}
.dialog-body{padding:20px 22px}
.dialog-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px 18px;border-top:1px solid var(--line)}
.dialog .form-message{padding:0 22px}
.dialog .side-icon{margin:0 auto}
.dialog.sm .dialog-body{text-align:center;justify-items:center}
.dialog.sm .dialog-foot{justify-content:center}

/* ---- Toast ------------------------------------------------------------- */
.toast{position:fixed;inset-inline-end:20px;bottom:20px;z-index:20;display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 40px));padding:12px 16px;border-radius:12px;background:var(--surface);color:var(--text);border:1px solid var(--line-strong);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.toast.show{opacity:1;transform:none}
.toast .ic{width:18px;height:18px}
.toast.success .ic{color:var(--ok-ink)}
.toast.error .ic{color:var(--danger-ink)}

/* ---- Responsive -------------------------------------------------------- */
@media(max-width:1180px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-layout{grid-template-columns:1fr}
  .settings-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col{grid-template-columns:1fr}
}
@media(max-width:1024px){
  :root{--sidebar:76px}
  .sidebar{padding:16px 10px}
  .brand{justify-content:center;padding:4px 0 18px}
  .brand-text,.nav-item span,.nav-section,.admin-text{display:none}
  .nav-item{justify-content:center;padding:0}
  .admin{justify-content:center}
  .sidebar-tools{flex-direction:column;align-items:center}
  .main{padding:22px 22px 60px}
}
@media(max-width:700px){
  html{font-size:14.5px}
  .shell{display:block}
  .sidebar{position:fixed;inset:auto 0 0 0;height:auto;flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-inline-start:0;border-top:1px solid var(--line);z-index:5;overflow:visible}
  .brand,.sidebar-foot{display:none}
  .nav{display:flex;width:100%;justify-content:space-around;gap:0}
  .nav-item{flex-direction:column;gap:2px;min-height:52px;padding:6px 4px;font-size:12px;justify-content:center}
  .nav-item span{display:block}
  .mobile-only{display:inline-flex!important}
  .main{padding:18px 14px calc(90px + env(safe-area-inset-bottom))}
  .topbar{flex-direction:column;align-items:stretch}
  .topbar-actions{justify-content:flex-end}
  h1{font-size:21px}
  .kpis{grid-template-columns:1fr}
  .settings-side{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .card-head{flex-direction:column}
  .toolbar{justify-content:stretch}
  .search{width:100%}
  .chips{width:100%;justify-content:stretch}
  .chip{flex:1}
  .node-grid{grid-template-columns:1fr}
  .savebar{bottom:calc(76px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch}
  .savebar-actions{justify-content:stretch}
  .savebar-actions .btn{flex:1}
  .dialog{max-width:100%;margin:auto 0 0;width:100%}
  .dialog-card{border-radius:18px 18px 0 0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom)}
  .dialog.sm{width:calc(100% - 32px);margin:auto}
  .dialog.sm .dialog-card{border-radius:18px}
  .toast{inset-inline:14px;bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* Motion is a courtesy, not a feature. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}