/* ══════════════════════════════════════════════════════════════════════════
   HYSTERIA 1 — LUXURY CYBER COMMAND CENTER
   Design system v2 · obsidian / navy / cyan / violet / gold
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── core palette ─────────────────────────────────────────── */
  --obsidian:#05070D;
  --navy:#080F1D;
  --deep:#0D1728;
  --cyan:#23D9F5;
  --blue:#397BFF;
  --violet:#855BFF;
  --gold:#D6B46A;
  --green:#20D6A0;
  --red:#FF5575;
  --ink:#EAF2FF;
  --ink-2:#8292AD;

  /* ── derived surfaces ─────────────────────────────────────── */
  --s0:#04060B;
  --s1:rgba(13,23,40,.72);
  --s2:rgba(16,28,49,.82);
  --s3:rgba(21,36,62,.88);
  --s4:rgba(28,46,78,.92);

  /* ── borders ──────────────────────────────────────────────── */
  --edge:rgba(120,170,255,.13);
  --edge-2:rgba(120,170,255,.22);
  --edge-lit:rgba(35,217,245,.42);
  --edge-gold:rgba(214,180,106,.40);

  /* ── tints ────────────────────────────────────────────────── */
  --t-cyan:rgba(35,217,245,.12);
  --t-blue:rgba(57,123,255,.13);
  --t-violet:rgba(133,91,255,.13);
  --t-gold:rgba(214,180,106,.12);
  --t-green:rgba(32,214,160,.12);
  --t-red:rgba(255,85,117,.12);

  /* ── text ramp ────────────────────────────────────────────── */
  --ink-3:#6B7C99;
  --ink-4:#4C5A75;

  /* ── type ─────────────────────────────────────────────────── */
  --display:'Kanit','Inter','IBM Plex Sans Thai',system-ui,sans-serif;
  --sans:'Inter','IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','IBM Plex Sans Thai',ui-monospace,monospace;

  /* ── geometry ─────────────────────────────────────────────── */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;

  /* ── elevation ────────────────────────────────────────────── */
  --lift-1:0 2px 8px rgba(0,0,0,.44);
  --lift-2:0 10px 30px rgba(0,0,0,.46);
  --lift-3:0 22px 60px rgba(0,0,0,.58);
  --bevel:inset 0 1px 0 rgba(255,255,255,.055);
  --bevel-strong:inset 0 1px 0 rgba(255,255,255,.10);

  /* ── motion ───────────────────────────────────────────────── */
  --ease:cubic-bezier(.22,1,.36,1);
  --fast:.15s;
  --mid:.26s;

  /* ── layout ───────────────────────────────────────────────── */
  --rail-w:266px;
  --hud-h:78px;
}

/* ══════════════ RESET ══════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%}
body{
  background:var(--obsidian);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","ss01";
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px}
svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
a{color:var(--cyan);text-decoration:none}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(120,170,255,.16);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(35,217,245,.32);background-clip:content-box}

::selection{background:rgba(35,217,245,.26);color:#fff}

/* ══════════════ AMBIENT BACKGROUND ══════════════ */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb-glow{position:absolute;border-radius:50%;filter:blur(120px);will-change:transform}
.amb-a{width:760px;height:760px;top:-340px;right:-220px;
  background:radial-gradient(circle,rgba(35,217,245,.20),transparent 66%);
  animation:ambFloat1 34s var(--ease) infinite}
.amb-b{width:680px;height:680px;bottom:-320px;left:-240px;
  background:radial-gradient(circle,rgba(57,123,255,.20),transparent 66%);
  animation:ambFloat2 42s var(--ease) infinite}
.amb-c{width:520px;height:520px;top:38%;left:58%;
  background:radial-gradient(circle,rgba(133,91,255,.14),transparent 70%);
  animation:ambFloat1 50s var(--ease) infinite reverse}
@keyframes ambFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-52px,62px) scale(1.11)}}
@keyframes ambFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(62px,-52px) scale(1.09)}}

.amb-mesh{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(120,170,255,.042) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,255,.042) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 92% 58% at 50% 0%,#000 8%,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 92% 58% at 50% 0%,#000 8%,transparent 74%);
  opacity:.9;
}
.amb-scan{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(35,217,245,.05) 48%,transparent 56%);
  background-size:100% 260%;animation:ambScan 16s linear infinite}
@keyframes ambScan{0%{background-position:0 -120%}100%{background-position:0 220%}}
.amb-vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 42%,rgba(2,4,8,.72) 100%)}

/* ══════════════ SHARED PRIMITIVES ══════════════ */
.pulse-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(32,214,160,.5),0 0 10px var(--green);
  animation:beat 2.4s ease-in-out infinite;
}
.pulse-dot.is-off{background:var(--red);box-shadow:0 0 10px var(--red);animation:none}
.pulse-dot.is-warn{background:var(--gold);box-shadow:0 0 10px var(--gold)}
@keyframes beat{
  0%,100%{box-shadow:0 0 0 0 rgba(32,214,160,.42),0 0 10px var(--green);opacity:1}
  50%{box-shadow:0 0 0 6px rgba(32,214,160,0),0 0 14px var(--green);opacity:.72}
}

/* ══════════════ LOGIN GATE ══════════════ */
.gate{
  position:fixed;inset:0;z-index:120;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px;overflow-y:auto;
}
.gate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 520px at 50% -14%,rgba(35,217,245,.13),transparent 64%),
    radial-gradient(640px 460px at 88% 112%,rgba(133,91,255,.11),transparent 66%);
}

.gate-frame{
  position:relative;width:100%;max-width:432px;
  border-radius:var(--r-xl);
  background:
    linear-gradient(168deg,rgba(24,40,70,.92),rgba(8,15,29,.96));
  border:1px solid var(--edge-2);
  box-shadow:var(--lift-3),var(--bevel-strong),
             0 0 0 1px rgba(35,217,245,.06),
             0 0 70px -20px rgba(35,217,245,.30);
  backdrop-filter:blur(26px) saturate(1.4);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);
  overflow:hidden;
  animation:gateIn .55s var(--ease);
}
@keyframes gateIn{from{opacity:0;transform:translateY(22px) scale(.972)}to{opacity:1;transform:none}}

/* top light seam */
.gate-frame::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan) 42%,var(--violet) 62%,transparent);
  opacity:.85;
}
/* corner brackets */
.gate-frame::after{
  content:"";position:absolute;inset:9px;border-radius:calc(var(--r-xl) - 9px);
  border:1px solid rgba(35,217,245,.07);pointer-events:none;
}

.gate-rail{position:absolute;top:26px;right:26px;display:flex;gap:4px}
.gate-rail span{width:16px;height:2px;border-radius:2px;background:rgba(120,170,255,.22)}
.gate-rail span:nth-child(2){background:rgba(35,217,245,.5)}
.gate-rail span:nth-child(3){background:rgba(214,180,106,.6)}

.gate-body{position:relative;padding:40px 32px 26px}

.gate-crest{
  width:66px;height:66px;margin:0 auto 20px;border-radius:20px;
  display:grid;place-items:center;position:relative;
  background:linear-gradient(158deg,#15294A,#060B15);
  border:1px solid rgba(35,217,245,.34);
  box-shadow:0 0 34px rgba(35,217,245,.22),var(--bevel-strong);
}
.gate-crest::before{
  content:"";position:absolute;inset:5px;border-radius:15px;
  border:1px solid rgba(35,217,245,.14);
}
.gate-crest svg{width:34px;height:34px;stroke:var(--cyan);stroke-width:1.5;
  filter:drop-shadow(0 0 10px rgba(35,217,245,.6))}
.gate-crest .crest-check{stroke:var(--gold);stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(214,180,106,.6))}

.gate-title{text-align:center;margin-bottom:28px}
.gate-title h1{
  font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:2.4px;line-height:1.1;
  background:linear-gradient(180deg,#fff,#9FB4D6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.gate-title h1 span{
  background:linear-gradient(120deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-left:4px;
}
.gate-title p{
  font-size:9.5px;letter-spacing:3.4px;color:var(--ink-2);
  font-weight:600;margin-top:8px;
}

.gate-field{
  display:flex;align-items:center;gap:12px;
  background:rgba(4,7,14,.82);
  border:1px solid var(--edge-2);
  border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:12px;
  transition:border-color var(--mid),box-shadow var(--mid),background var(--mid);
}
.gate-field:focus-within{
  border-color:rgba(35,217,245,.58);
  background:rgba(6,12,22,.94);
  box-shadow:0 0 0 3px rgba(35,217,245,.10),0 0 26px -10px rgba(35,217,245,.5);
}
.gf-icon{display:grid;place-items:center;color:var(--ink-4);flex:0 0 auto;transition:color var(--mid)}
.gf-icon svg{width:17px;height:17px}
.gate-field:focus-within .gf-icon{color:var(--cyan)}
.gate-field input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--ink);font-size:14px;letter-spacing:.2px;
}
.gate-field input::placeholder{color:#7E90AC}
.gf-eye{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  color:var(--ink-3);flex:0 0 auto;transition:all var(--fast);
}
.gf-eye svg{width:16px;height:16px}
.gf-eye:hover{color:var(--cyan);background:var(--t-cyan)}
.gf-eye.on{color:var(--cyan)}

.gate-err{
  color:#FFA8B9;font-size:12.5px;text-align:center;
  margin-top:12px;min-height:18px;font-weight:500;
}

.gate-meta{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  font-size:10.5px;color:var(--ink-3);letter-spacing:.5px;font-weight:500;
}
.gate-meta i{width:3px;height:3px;border-radius:50%;background:var(--ink-4);font-style:normal}

.gate-foot{
  margin-top:22px;font-size:9px;letter-spacing:2.6px;
  color:var(--ink-4);font-weight:600;text-align:center;
}

/* ══════════════ BUTTONS ══════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;letter-spacing:.15px;
  white-space:nowrap;position:relative;overflow:hidden;
  transition:transform var(--fast) var(--ease),filter var(--fast),
             box-shadow var(--mid),border-color var(--mid),background var(--mid);
}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn:active{transform:scale(.974)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-block{width:100%}
.btn-sm{padding:8px 13px;font-size:12px;border-radius:var(--r-xs)}
.btn-sm svg{width:13px;height:13px}

.btn-hero{
  padding:14px 22px;font-size:14.5px;font-weight:700;
  border-radius:var(--r-sm);letter-spacing:.3px;
  background:linear-gradient(118deg,var(--cyan) 0%,var(--blue) 54%,var(--violet) 100%);
  color:#04121C;
  box-shadow:0 10px 30px -8px rgba(35,217,245,.48),
             0 0 0 1px rgba(255,255,255,.12) inset,
             var(--bevel-strong);
}
.btn-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 52%);
  pointer-events:none;
}
.btn-hero:hover:not(:disabled){
  filter:brightness(1.08);
  box-shadow:0 14px 38px -8px rgba(35,217,245,.62),
             0 0 0 1px rgba(255,255,255,.16) inset;
}

.btn-primary{
  background:linear-gradient(122deg,var(--cyan),var(--blue));
  color:#04121C;font-weight:700;
  box-shadow:0 8px 24px -8px rgba(35,217,245,.44),var(--bevel-strong);
}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 10px 30px -8px rgba(35,217,245,.56)}

.btn-secondary{
  background:linear-gradient(160deg,rgba(28,46,78,.8),rgba(14,24,42,.9));
  border:1px solid var(--edge-2);color:var(--ink);
  box-shadow:var(--bevel);
}
.btn-secondary:hover:not(:disabled){
  border-color:rgba(35,217,245,.42);
  box-shadow:var(--bevel),0 0 22px -8px rgba(35,217,245,.4);
}

.btn-ghost{background:transparent;border:1px solid var(--edge);color:var(--ink-2)}
.btn-ghost:hover:not(:disabled){
  border-color:var(--edge-2);color:var(--ink);
  background:rgba(120,170,255,.055);
}

.btn-danger{
  background:linear-gradient(122deg,#FF7A93,var(--red));
  color:#fff;font-weight:700;
  box-shadow:0 8px 24px -8px rgba(255,85,117,.48),var(--bevel-strong);
}
.btn-danger:hover:not(:disabled){filter:brightness(1.08)}

.btn-gold{
  background:linear-gradient(122deg,#E8CD8E,var(--gold));
  color:#231A05;font-weight:700;
  box-shadow:0 8px 24px -8px rgba(214,180,106,.44),var(--bevel-strong);
}
.btn-gold:hover:not(:disabled){filter:brightness(1.06)}

.spin{
  width:15px;height:15px;border-radius:50%;display:inline-block;
  border:2px solid rgba(0,0,0,.24);border-top-color:currentColor;
  animation:spin .62s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════ SHELL ══════════════ */
.shell{position:relative;z-index:1;min-height:100vh;display:flex}

/* ── left rail ───────────────────────────────────────────── */
.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);z-index:70;
  display:flex;flex-direction:column;padding:22px 15px 16px;
  background:linear-gradient(182deg,rgba(9,16,31,.97) 0%,rgba(4,7,13,.99) 100%);
  border-right:1px solid var(--edge);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.rail::after{
  content:"";position:absolute;top:0;right:-1px;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent 4%,rgba(35,217,245,.34) 42%,
             rgba(133,91,255,.24) 72%,transparent 96%);
}

.rail-brand{display:flex;align-items:center;gap:12px;padding:0 7px 22px;min-width:0}
.rail-crest{
  width:44px;height:44px;border-radius:13px;flex:0 0 auto;
  display:grid;place-items:center;position:relative;
  background:linear-gradient(158deg,#15294A,#060B15);
  border:1px solid rgba(35,217,245,.30);
  box-shadow:0 0 20px -4px rgba(35,217,245,.34),var(--bevel-strong);
}
.rail-crest::before{content:"";position:absolute;inset:3px;border-radius:10px;
  border:1px solid rgba(35,217,245,.13)}
.rail-crest svg{width:23px;height:23px;stroke:var(--cyan);stroke-width:1.5;
  filter:drop-shadow(0 0 7px rgba(35,217,245,.55))}
.rail-crest .crest-check{stroke:var(--gold);stroke-width:2}

.rail-wordmark{min-width:0}
.rail-wordmark b{
  display:block;font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:1.9px;line-height:1.2;
  background:linear-gradient(180deg,#fff,#A9BEDD);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.rail-wordmark b span{
  background:linear-gradient(120deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-left:2px;
}
.rail-wordmark small{
  display:block;font-size:8.5px;letter-spacing:1.1px;
  color:#71829E;font-weight:700;margin-top:4px;
}

.rail-nav{flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto;padding:2px 0}
.rail-group{
  font-size:9.5px;font-weight:700;color:#7A8AA6;
  letter-spacing:1.1px;padding:16px 12px 7px;
}
.rail-group:first-child{padding-top:2px}

.rail-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:13px;font-weight:500;
  position:relative;width:100%;text-align:left;
  transition:color var(--fast),background var(--fast);
}
.rail-item svg{width:17px;height:17px;flex:0 0 auto;opacity:.72;transition:opacity var(--fast)}
.rail-item:hover{color:var(--ink);background:rgba(120,170,255,.065)}
.rail-item:hover svg{opacity:.95}

.rail-item.on{
  color:var(--cyan);
  background:linear-gradient(94deg,rgba(35,217,245,.16),rgba(35,217,245,.015));
  box-shadow:inset 0 0 0 1px rgba(35,217,245,.14);
}
.rail-item.on svg{opacity:1;filter:drop-shadow(0 0 7px rgba(35,217,245,.65))}
.rail-item.on::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2.5px;height:19px;border-radius:2px;
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  box-shadow:0 0 12px var(--cyan);
}

.rail-count{
  margin-left:auto;font-family:var(--mono);font-size:9.5px;font-weight:700;
  padding:1.5px 6px;border-radius:5px;
  background:rgba(120,170,255,.11);color:var(--ink-2);
  transition:all var(--fast);
}
.rail-item.on .rail-count{background:rgba(35,217,245,.2);color:var(--cyan)}

.rail-foot{border-top:1px solid var(--edge);padding-top:13px;display:flex;flex-direction:column;gap:9px}
.rail-status{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-sm);
  background:linear-gradient(160deg,rgba(13,23,40,.9),rgba(6,11,20,.9));
  border:1px solid var(--edge);
  box-shadow:var(--bevel);
}
.rs-txt{min-width:0}
.rs-txt b{display:block;font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rs-txt small{display:block;font-size:10px;color:#8FA0BC;font-family:var(--mono);margin-top:2px}

.rail-out{
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;border-radius:var(--r-sm);
  color:var(--ink-3);font-size:12.5px;font-weight:500;
  transition:all var(--fast);
}
.rail-out svg{width:15px;height:15px}
.rail-out:hover{color:#FF8FA5;background:var(--t-red)}

/* ── workspace ────────────────────────────────────────────── */
.workspace{flex:1;min-width:0;margin-left:var(--rail-w);display:flex;flex-direction:column}

.hud{
  position:sticky;top:0;z-index:50;
  height:var(--hud-h);
  display:flex;align-items:center;gap:14px;
  padding:0 28px;
  background:rgba(4,7,13,.82);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--edge);
}
.hud::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 3%,rgba(35,217,245,.28) 42%,
             rgba(133,91,255,.18) 62%,transparent 96%);
}

.hud-burger{
  display:none;width:38px;height:38px;border-radius:10px;
  place-items:center;border:1px solid var(--edge-2);
  color:var(--ink-2);transition:all var(--fast);
}
.hud-burger svg{width:18px;height:18px}
.hud-burger:hover{border-color:var(--edge-lit);color:var(--cyan)}

.hud-title{min-width:0}
.hud-eyebrow{
  display:block;font-size:9px;font-weight:800;letter-spacing:1.9px;
  color:#71829E;text-transform:uppercase;margin-bottom:2px;
}
.hud-title h2{
  font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:.2px;line-height:1.2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.hud-spacer{flex:1}

.hud-meters{display:flex;gap:8px}
.meter{
  display:flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:10px;
  background:linear-gradient(160deg,rgba(16,28,49,.9),rgba(8,15,29,.92));
  border:1px solid var(--edge);
  box-shadow:var(--bevel);
  transition:border-color var(--mid);
}
.meter-ic{display:grid;place-items:center;flex:0 0 auto}
.meter-ic svg{width:13px;height:13px}
.meter-val{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:-.2px}
.meter[data-kind="down"]{color:var(--cyan);border-color:rgba(35,217,245,.20)}
.meter[data-kind="up"]{color:var(--blue);border-color:rgba(57,123,255,.20)}
.meter[data-kind="conn"]{color:var(--green);border-color:rgba(32,214,160,.20)}

.canvas{
  padding:26px 28px 40px;
  max-width:1620px;width:100%;margin:0 auto;flex:1;
}

/* ══════════════ SECTION HEADS ══════════════ */
.sec{
  display:flex;align-items:center;gap:11px;
  margin:30px 0 14px;
}
.sec:first-child{margin-top:0}
.sec-ic{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--t-cyan);color:var(--cyan);
  border:1px solid rgba(35,217,245,.20);
}
.sec-ic svg{width:13px;height:13px}
.sec-t{
  font-family:var(--display);font-size:13px;font-weight:600;
  color:var(--ink);letter-spacing:.7px;
}
.sec-line{flex:1;height:1px;
  background:linear-gradient(90deg,var(--edge-2),transparent)}

/* ══════════════ SURFACE CARDS ══════════════ */
.surface{
  position:relative;overflow:hidden;
  border-radius:var(--r);
  background:linear-gradient(168deg,rgba(20,34,58,.82),rgba(8,15,29,.92));
  border:1px solid var(--edge-2);
  box-shadow:var(--lift-1),var(--bevel);
  transition:border-color var(--mid),transform var(--mid) var(--ease),box-shadow var(--mid);
}
.surface::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 40%,transparent);
  pointer-events:none;
}
.surface-pad{padding:18px 20px}
.surface-hover:hover{
  border-color:rgba(35,217,245,.26);
  transform:translateY(-2px);
  box-shadow:var(--lift-2),var(--bevel);
}

/* ══════════════ GRIDS ══════════════ */
.g-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g-hero{display:grid;grid-template-columns:1.62fr 1fr 1fr;gap:14px}
.mt{margin-top:14px}

/* ══════════════ METRIC CARDS ══════════════ */
.metric{
  position:relative;overflow:hidden;
  padding:17px 19px;border-radius:var(--r);
  background:linear-gradient(168deg,rgba(20,34,58,.84),rgba(8,15,29,.94));
  border:1px solid var(--edge-2);
  box-shadow:var(--lift-1),var(--bevel);
  transition:border-color var(--mid),transform var(--mid) var(--ease),box-shadow var(--mid);
}
.metric::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  opacity:.82;
}
.metric::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}
.metric:hover{transform:translateY(-2px);box-shadow:var(--lift-2),var(--bevel)}
.metric.k-green::before{background:linear-gradient(90deg,var(--green),var(--cyan))}
.metric.k-red::before{background:linear-gradient(90deg,var(--red),var(--violet))}
.metric.k-gold::before{background:linear-gradient(90deg,var(--gold),#E88C4D)}
.metric.k-blue::before{background:linear-gradient(90deg,var(--blue),var(--violet))}
.metric.k-violet::before{background:linear-gradient(90deg,var(--violet),var(--blue))}

.metric-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}
.metric-lbl{
  font-size:10.5px;font-weight:700;color:#93A4C0;
  letter-spacing:.9px;text-transform:uppercase;line-height:1.4;
}
.metric-ic{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--t-cyan);color:var(--cyan);
  border:1px solid rgba(35,217,245,.22);
}
.metric-ic svg{width:14px;height:14px}
.metric.k-green .metric-ic{background:var(--t-green);color:var(--green);border-color:rgba(32,214,160,.24)}
.metric.k-red .metric-ic{background:var(--t-red);color:#FF8FA5;border-color:rgba(255,85,117,.24)}
.metric.k-gold .metric-ic{background:var(--t-gold);color:var(--gold);border-color:rgba(214,180,106,.26)}
.metric.k-blue .metric-ic{background:var(--t-blue);color:#7FA6FF;border-color:rgba(57,123,255,.24)}
.metric.k-violet .metric-ic{background:var(--t-violet);color:#A98BFF;border-color:rgba(133,91,255,.24)}

.metric-val{
  font-family:var(--display);font-size:29px;font-weight:600;
  letter-spacing:-.8px;line-height:1.06;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFFFFF,#A8BCD9);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.metric-val.sm{font-size:20px;letter-spacing:-.3px}
.metric-val.xs{font-size:15px;letter-spacing:0}
.metric-val.mono{font-family:var(--mono);font-size:22px;letter-spacing:-.6px}

.metric-sub{
  font-size:11.5px;color:#8FA0BC;margin-top:6px;
  line-height:1.5;overflow-wrap:anywhere;
}
.metric-sub .sep{opacity:.45;margin:0 5px}

/* ══════════════ HERO STATUS PANEL ══════════════ */
.hero{
  position:relative;overflow:hidden;
  border-radius:var(--r);padding:22px 24px;
  background:
    radial-gradient(520px 220px at 0% 0%,rgba(32,214,160,.10),transparent 62%),
    linear-gradient(168deg,rgba(20,36,60,.88),rgba(7,13,25,.95));
  border:1px solid rgba(32,214,160,.24);
  box-shadow:var(--lift-2),var(--bevel);
}
.hero.is-down{
  background:
    radial-gradient(520px 220px at 0% 0%,rgba(255,85,117,.11),transparent 62%),
    linear-gradient(168deg,rgba(34,20,32,.88),rgba(11,7,12,.95));
  border-color:rgba(255,85,117,.26);
}
.hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--cyan),transparent 82%);
}
.hero.is-down::before{background:linear-gradient(90deg,var(--red),var(--violet),transparent 82%)}

.hero-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.hero-ic{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--t-green);color:var(--green);
  border:1px solid rgba(32,214,160,.26);
}
.hero.is-down .hero-ic{background:var(--t-red);color:#FF8FA5;border-color:rgba(255,85,117,.26)}
.hero-ic svg{width:16px;height:16px}
.hero-lbl{
  font-size:9.5px;font-weight:800;letter-spacing:1.6px;
  color:var(--ink-2);text-transform:uppercase;
}

.hero-state{
  display:flex;align-items:center;gap:13px;margin-bottom:8px;
}
.hero-word{
  font-family:var(--display);font-size:38px;font-weight:700;
  letter-spacing:1.4px;line-height:1;
  background:linear-gradient(180deg,#FFFFFF,#7FE9CE);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero.is-down .hero-word{
  background:linear-gradient(180deg,#FFFFFF,#FF9AAD);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-spec{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  margin-top:9px;letter-spacing:.2px;
}
.hero-spec b{color:var(--ink-2);font-weight:600}

.hero-health{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:18px;padding-top:15px;border-top:1px solid rgba(32,214,160,.16);
}
.hero.is-down .hero-health{border-top-color:rgba(255,85,117,.18)}
.hh{
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.5px;color:#9AAAC6;
}
.hh-d{
  width:6px;height:6px;border-radius:50%;flex:0 0 auto;font-style:normal;
  background:var(--ink-4);
}
.hh-d.ok{background:var(--green);box-shadow:0 0 8px var(--green)}
.hh-d.off{background:var(--red);box-shadow:0 0 8px var(--red)}

/* ══════════════ TRAFFIC PANELS ══════════════ */
.traffic{
  position:relative;overflow:hidden;
  border-radius:var(--r);padding:18px 20px;
  background:linear-gradient(168deg,rgba(20,34,58,.84),rgba(8,15,29,.94));
  border:1px solid var(--edge-2);
  box-shadow:var(--lift-1),var(--bevel);
  transition:border-color var(--mid);
}
.traffic.is-down{border-color:rgba(35,217,245,.24)}
.traffic.is-up{border-color:rgba(57,123,255,.24)}
.traffic::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
}
.traffic.is-down::before{background:linear-gradient(90deg,var(--cyan),transparent 78%)}
.traffic.is-up::before{background:linear-gradient(90deg,var(--blue),transparent 78%)}

.traffic-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.traffic-ic{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
}
.traffic.is-down .traffic-ic{background:var(--t-cyan);color:var(--cyan);border:1px solid rgba(35,217,245,.24)}
.traffic.is-up .traffic-ic{background:var(--t-blue);color:#7FA6FF;border:1px solid rgba(57,123,255,.24)}
.traffic-ic svg{width:13px;height:13px}
.traffic-lbl{
  font-size:10.5px;font-weight:800;letter-spacing:1.1px;
  color:#93A4C0;text-transform:uppercase;
}
.traffic-peak{
  margin-left:auto;font-family:var(--mono);font-size:9.5px;
  color:var(--ink-4);font-weight:600;
}

.traffic-val{
  font-family:var(--display);font-size:27px;font-weight:600;
  letter-spacing:-.7px;margin:10px 0 2px;
  font-variant-numeric:tabular-nums;
}
.traffic.is-down .traffic-val{color:var(--cyan);text-shadow:0 0 26px rgba(35,217,245,.34)}
.traffic.is-up .traffic-val{color:#7FA6FF;text-shadow:0 0 26px rgba(57,123,255,.30)}

.traffic-tot{font-size:11.5px;color:#8FA0BC}
.traffic-tot b{color:var(--ink-2);font-family:var(--mono);font-weight:600}

.chart-host{position:relative;margin-top:12px;height:76px}
.chart-svg{width:100%;height:76px;display:block;overflow:visible}
.chart-empty{
  display:grid;place-items:center;height:76px;position:relative;
  font-size:11.5px;color:#93A4C0;
  border:1px dashed var(--edge-2);border-radius:10px;
  text-align:center;padding:0 8px;
}
.chart-empty.chart-idle{border-style:dashed;background:rgba(120,170,255,.02)}
.chart-empty.chart-idle span{position:relative;z-index:1}

.chart-axis{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:7px;font-family:var(--mono);font-size:10px;
  color:#8394B0;letter-spacing:.2px;
}

/* a zero rate must not shout louder than the server status */
.traffic-val.is-idle{
  color:#5A6B88 !important;
  text-shadow:none !important;
}

.chart-tip{
  position:absolute;pointer-events:none;z-index:5;
  padding:5px 9px;border-radius:7px;
  background:rgba(6,12,22,.96);
  border:1px solid var(--edge-lit);
  font-family:var(--mono);font-size:10px;color:var(--ink);
  white-space:nowrap;opacity:0;transform:translate(-50%,-118%);
  transition:opacity var(--fast);
  box-shadow:0 6px 20px rgba(0,0,0,.6);
}
.chart-tip.on{opacity:1}

/* ══════════════ DATA ROWS ══════════════ */
.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--edge);
}
.row:last-child{border-bottom:0}
.row-l{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#9AAAC6;font-weight:500}
.row-l svg{width:14px;height:14px;opacity:.7;flex:0 0 auto}
.row-v{
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink);
  text-align:right;word-break:break-all;min-width:0;
  font-variant-numeric:tabular-nums;
}
.row-v.sans{font-family:var(--sans)}

/* ══════════════ PILLS ══════════════ */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3.5px 9px;border-radius:99px;
  font-size:10px;font-weight:700;letter-spacing:.35px;white-space:nowrap;
  border:1px solid transparent;
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pill.ok{background:var(--t-green);color:var(--green);border-color:rgba(32,214,160,.28)}
.pill.ok::before{box-shadow:0 0 7px currentColor}
.pill.warn{background:var(--t-gold);color:var(--gold);border-color:rgba(214,180,106,.30)}
.pill.err{background:var(--t-red);color:#FF8FA5;border-color:rgba(255,85,117,.30)}
.pill.off{background:rgba(120,170,255,.09);color:var(--ink-2);border-color:var(--edge-2)}
.pill.cyan{background:var(--t-cyan);color:var(--cyan);border-color:rgba(35,217,245,.28)}
.pill.blue{background:var(--t-blue);color:#7FA6FF;border-color:rgba(57,123,255,.28)}
.pill.violet{background:var(--t-violet);color:#A98BFF;border-color:rgba(133,91,255,.28)}

/* ══════════════ TOOLBAR ══════════════ */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.search{
  display:flex;align-items:center;gap:10px;flex:1;min-width:210px;max-width:400px;
  background:linear-gradient(160deg,rgba(13,23,40,.92),rgba(7,13,25,.94));
  border:1px solid var(--edge-2);border-radius:var(--r-sm);
  padding:11px 14px;
  box-shadow:var(--bevel);
  transition:border-color var(--mid),box-shadow var(--mid);
}
.search:focus-within{
  border-color:rgba(35,217,245,.52);
  box-shadow:var(--bevel),0 0 0 3px rgba(35,217,245,.09);
}
.search svg{width:15px;height:15px;color:var(--ink-4);flex:0 0 auto}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font-size:13px}
.search input::placeholder{color:#7E90AC}
.tb-sp{flex:1}

.sel{
  background:linear-gradient(160deg,rgba(13,23,40,.92),rgba(7,13,25,.94));
  border:1px solid var(--edge-2);border-radius:var(--r-sm);
  padding:11px 34px 11px 14px;color:var(--ink);font-size:12.5px;font-weight:500;
  outline:none;appearance:none;cursor:pointer;
  box-shadow:var(--bevel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238292AD' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px;
  transition:border-color var(--mid);
}
.sel:focus{border-color:rgba(35,217,245,.52)}

.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:99px;
  font-size:11.5px;font-weight:600;
  background:linear-gradient(160deg,rgba(13,23,40,.9),rgba(7,13,25,.92));
  border:1px solid var(--edge-2);color:var(--ink-2);
  transition:all var(--fast);
}
.chip:hover{border-color:rgba(35,217,245,.36);color:var(--ink)}
.chip .n{
  font-family:var(--mono);font-size:10px;font-weight:700;
  padding:1px 5px;border-radius:4px;
  background:rgba(120,170,255,.12);color:var(--ink-2);
}
.chip.on{
  background:linear-gradient(120deg,rgba(35,217,245,.18),rgba(57,123,255,.12));
  border-color:rgba(35,217,245,.5);color:var(--cyan);
  box-shadow:0 0 20px -6px rgba(35,217,245,.45);
}
.chip.on .n{background:rgba(35,217,245,.22);color:var(--cyan)}

/* ══════════════ TABLE ══════════════ */
.table-wrap{
  overflow-x:auto;
  border-radius:var(--r);
  border:1px solid var(--edge-2);
  background:linear-gradient(168deg,rgba(17,29,51,.8),rgba(6,11,21,.92));
  box-shadow:var(--lift-1),var(--bevel);
}
table.grid{width:100%;border-collapse:collapse;min-width:900px}
.grid thead th{
  text-align:left;padding:13px 16px;
  font-size:9.5px;font-weight:800;color:var(--ink-2);
  letter-spacing:1.15px;text-transform:uppercase;
  background:rgba(6,11,21,.78);
  border-bottom:1px solid var(--edge-2);
  white-space:nowrap;position:sticky;top:0;z-index:2;
}
.grid thead th.num{text-align:right}
.grid tbody td{
  padding:13px 16px;
  border-bottom:1px solid rgba(120,170,255,.07);
  font-size:12.5px;vertical-align:middle;
}
/* action column sits flush against the card edge — give it real padding */
.grid thead th:last-child{padding-right:22px}
.grid tbody td:last-child{padding-right:22px}
.grid tbody tr{transition:background var(--fast)}
.grid tbody tr:hover{background:rgba(35,217,245,.035)}
.grid tbody tr:last-child td{border-bottom:0}
.grid tbody tr.is-dim{opacity:.72}

.acct{display:flex;align-items:center;gap:11px;min-width:0}
.acct-ava{
  width:36px;height:36px;border-radius:11px;flex:0 0 auto;
  display:grid;place-items:center;
  font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.4px;
  background:linear-gradient(150deg,rgba(35,217,245,.22),rgba(133,91,255,.18));
  border:1px solid rgba(35,217,245,.28);color:var(--cyan);
  box-shadow:var(--bevel);
}
.acct-ava.is-off{
  background:rgba(120,170,255,.07);
  border-color:var(--edge-2);color:var(--ink-3);
}
.acct-id{min-width:0}
.acct-name{
  font-size:13px;font-weight:600;letter-spacing:.1px;
  display:flex;align-items:center;gap:7px;
}
.acct-meta{
  font-size:11px;color:#8FA0BC;font-family:var(--mono);
  margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:230px;
}
.live-tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:8.5px;font-weight:800;color:var(--green);
  font-family:var(--mono);letter-spacing:.4px;
}
.live-tag::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--green);box-shadow:0 0 8px var(--green);
  animation:beat 2s ease-in-out infinite;
}

.num{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.num b{color:var(--ink);font-weight:600}

.exp{font-family:var(--mono);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.exp .d{color:var(--ink)}
.exp .t{display:block;font-size:10.5px;color:#8FA0BC;margin-top:3px}

.acts{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--edge);background:rgba(120,170,255,.05);
  color:var(--ink-3);
  transition:all var(--fast);
}
.icon-btn svg{width:14px;height:14px}
.icon-btn:hover{
  color:var(--cyan);border-color:rgba(35,217,245,.46);
  background:var(--t-cyan);transform:translateY(-1px);
}
.icon-btn.act-power:hover{color:var(--gold);border-color:rgba(214,180,106,.46);background:var(--t-gold)}
.icon-btn.act-del{
  color:#E48CA0;border-color:rgba(255,85,117,.20);background:rgba(255,85,117,.055);
}
.icon-btn.act-del:hover{color:#FF8FA5;border-color:rgba(255,85,117,.52);background:var(--t-red)}

/* ══════════════ MOBILE ACCOUNT CARDS ══════════════ */
.acct-cards{display:none;flex-direction:column;gap:11px}
.acct-card{
  position:relative;overflow:hidden;
  border:1px solid var(--edge-2);border-radius:var(--r);
  padding:15px 16px;
  background:linear-gradient(168deg,rgba(20,34,58,.84),rgba(8,15,29,.94));
  box-shadow:var(--lift-1),var(--bevel);
}
.acct-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
}
.acct-card.is-dim{opacity:.6}
.ac-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px}
.ac-top .acct{flex:1;min-width:0}
.ac-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;
  padding-top:12px;border-top:1px solid var(--edge);
}
.ac-k{
  font-size:9.5px;color:#8FA0BC;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;margin-bottom:3px;
}
.ac-v{font-family:var(--mono);font-size:11.5px;color:var(--ink);font-weight:500;
  font-variant-numeric:tabular-nums}
.ac-acts{display:flex;gap:6px;margin-top:13px;padding-top:12px;border-top:1px solid var(--edge)}
.ac-acts .btn{flex:1;padding:9px 6px;font-size:11px;gap:5px}
.ac-acts .btn svg{width:12px;height:12px}

/* ══════════════ PAGER ══════════════ */
.pager{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:14px;flex-wrap:wrap;
}
.pager-info{font-size:12px;color:#8FA0BC}
.pager-info b{color:var(--ink-2);font-family:var(--mono);font-weight:600}
.pager-btns{display:flex;gap:5px}
.pgbtn{
  min-width:34px;height:34px;padding:0 10px;border-radius:9px;
  font-size:12px;font-weight:600;font-family:var(--mono);
  border:1px solid var(--edge-2);
  background:linear-gradient(160deg,rgba(13,23,40,.9),rgba(7,13,25,.92));
  color:var(--ink-2);
  transition:all var(--fast);
}
.pgbtn:hover:not(:disabled){border-color:rgba(35,217,245,.42);color:var(--cyan)}
.pgbtn.on{
  background:linear-gradient(120deg,rgba(35,217,245,.2),rgba(57,123,255,.14));
  border-color:rgba(35,217,245,.5);color:var(--cyan);
  box-shadow:0 0 18px -6px rgba(35,217,245,.5);
}
.pgbtn:disabled{opacity:.3;cursor:not-allowed}

/* ══════════════ EMPTY / ERROR / SKELETON ══════════════ */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 24px;text-align:center;gap:14px;
}
.empty-ic{
  width:64px;height:64px;border-radius:19px;display:grid;place-items:center;
  background:var(--t-cyan);border:1px solid rgba(35,217,245,.20);
  color:var(--cyan);opacity:.9;
}
.empty-ic svg{width:26px;height:26px}
.empty-t{font-family:var(--display);font-size:15px;font-weight:600}
.empty-s{font-size:12.5px;color:var(--ink-2);max-width:340px;line-height:1.6}

.skel{
  background:linear-gradient(90deg,rgba(120,170,255,.045) 25%,
             rgba(120,170,255,.115) 50%,rgba(120,170,255,.045) 75%);
  background-size:220% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
  border-radius:10px;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-row{height:54px;margin:7px 0}

.err-box{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 18px;border-radius:var(--r);
  background:var(--t-red);border:1px solid rgba(255,85,117,.30);
  color:#FFC3CE;font-size:12.5px;line-height:1.55;
}
.err-box svg{width:18px;height:18px;color:#FF8FA5;flex:0 0 auto;margin-top:1px}

/* ══════════════ MODAL SHEET ══════════════ */
.sheet{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:22px}
.sheet-scrim{
  position:absolute;inset:0;
  background:rgba(2,4,9,.82);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.sheet-panel{
  position:relative;width:100%;max-width:512px;max-height:90vh;overflow-y:auto;
  border-radius:var(--r-lg);padding:26px;
  background:linear-gradient(168deg,rgba(24,40,70,.95),rgba(8,15,29,.97));
  border:1px solid var(--edge-2);
  box-shadow:var(--lift-3),var(--bevel-strong),
             0 0 0 1px rgba(35,217,245,.06),
             0 0 70px -24px rgba(35,217,245,.34);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  animation:sheetIn .34s var(--ease);
}
@keyframes sheetIn{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
.sheet-panel.wide{max-width:680px}
.sheet-panel::before{
  content:"";position:absolute;top:0;left:16%;right:16%;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);
  opacity:.7;
}
.sheet-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;color:var(--ink-3);
  border:1px solid var(--edge);transition:all var(--fast);
}
.sheet-x svg{width:14px;height:14px}
.sheet-x:hover{color:var(--ink);border-color:var(--edge-2);background:rgba(120,170,255,.08)}

.sheet-title{font-family:var(--display);font-size:18px;font-weight:600;
  letter-spacing:.2px;margin-bottom:5px;padding-right:36px}
.sheet-sub{font-size:12px;color:var(--ink-2);margin-bottom:20px;line-height:1.55}

/* ══════════════ FORMS ══════════════ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px}
.flabel{font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:.35px}
.flabel .req{color:#FF8FA5}
.finput{
  background:rgba(4,7,14,.86);
  border:1px solid var(--edge-2);border-radius:var(--r-sm);
  padding:11px 13px;color:var(--ink);font-size:13px;outline:none;width:100%;
  box-shadow:var(--bevel);
  transition:border-color var(--mid),box-shadow var(--mid);
}
.finput:focus{
  border-color:rgba(35,217,245,.56);
  box-shadow:var(--bevel),0 0 0 3px rgba(35,217,245,.09);
}
.finput::placeholder{color:#7E90AC}
select.finput{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238292AD' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px;
  padding-right:34px;
}
.fhint{font-size:10.5px;color:var(--ink-3);line-height:1.5}

.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.qd{
  padding:8px 12px;border-radius:8px;font-size:11.5px;font-weight:600;
  background:rgba(120,170,255,.06);border:1px solid var(--edge-2);
  color:var(--ink-2);min-height:34px;
  transition:all var(--fast);
}
.qd:hover{border-color:rgba(35,217,245,.4);color:var(--cyan)}
.qd.on{
  background:var(--t-cyan);border-color:rgba(35,217,245,.5);color:var(--cyan);
  box-shadow:0 0 16px -6px rgba(35,217,245,.5);
}

.switch-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(4,7,14,.62);border:1px solid var(--edge-2);
}
.switch-lbl{font-size:12px;font-weight:500;color:var(--ink-2)}
.switch{position:relative;width:44px;height:25px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .trk{
  position:absolute;inset:0;border-radius:99px;cursor:pointer;
  background:rgba(120,170,255,.15);border:1px solid var(--edge-2);
  transition:all var(--mid);
}
.switch .trk::after{
  content:"";position:absolute;top:2.5px;left:2.5px;
  width:18px;height:18px;border-radius:50%;
  background:var(--ink-3);transition:all var(--mid) var(--ease);
}
.switch input:checked + .trk{
  background:linear-gradient(90deg,rgba(35,217,245,.34),rgba(57,123,255,.34));
  border-color:rgba(35,217,245,.55);
}
.switch input:checked + .trk::after{
  left:21px;background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
}

.sheet-foot{
  display:flex;gap:9px;margin-top:22px;
  padding-top:17px;border-top:1px solid var(--edge);
}
.sheet-foot .btn{flex:1}

/* ══════════════ CREDENTIAL / NOTES ══════════════ */
.cred-box{
  display:flex;align-items:center;gap:9px;
  background:rgba(3,6,13,.94);
  border:1px solid var(--edge-lit);border-radius:var(--r-sm);
  padding:13px 14px;
  box-shadow:0 0 24px -12px rgba(35,217,245,.5);
}
.cred-box code{
  flex:1;font-family:var(--mono);font-size:12px;color:var(--cyan);
  word-break:break-all;line-height:1.6;
}
.copy-btn{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid rgba(35,217,245,.32);background:var(--t-cyan);color:var(--cyan);
  transition:all var(--fast);
}
.copy-btn svg{width:13px;height:13px}
.copy-btn:hover{background:rgba(35,217,245,.24);transform:translateY(-1px)}

.note-danger,.note-warn,.note-info{
  display:flex;align-items:flex-start;gap:11px;
  padding:14px;border-radius:var(--r-sm);
  font-size:12px;line-height:1.6;
}
.note-danger{background:var(--t-red);border:1px solid rgba(255,85,117,.30);color:#FFC3CE}
.note-warn{background:var(--t-gold);border:1px solid rgba(214,180,106,.30);color:#F3DCA8}
.note-info{background:var(--t-blue);border:1px solid rgba(57,123,255,.28);color:#BBD2FF}
.note-danger svg,.note-warn svg,.note-info svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.note-danger svg{color:#FF8FA5}
.note-warn svg{color:var(--gold)}
.note-info svg{color:#7FA6FF}

/* ══════════════ TOASTS ══════════════ */
.toast-rail{
  position:fixed;bottom:22px;right:22px;z-index:300;
  display:flex;flex-direction:column;gap:9px;max-width:370px;
}
.toast{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 16px;border-radius:var(--r-sm);
  background:linear-gradient(168deg,rgba(24,40,70,.97),rgba(9,16,31,.98));
  border:1px solid var(--edge-2);
  box-shadow:var(--lift-3);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  animation:toastIn .34s var(--ease);
}
.toast.out{animation:toastOut .26s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(28px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(28px) scale(.95)}}
.toast-ic{width:19px;height:19px;flex:0 0 auto;margin-top:1px}
.toast.ok{border-color:rgba(32,214,160,.38)}
.toast.ok .toast-ic{color:var(--green)}
.toast.err{border-color:rgba(255,85,117,.38)}
.toast.err .toast-ic{color:#FF8FA5}
.toast.info{border-color:rgba(35,217,245,.38)}
.toast.info .toast-ic{color:var(--cyan)}
.toast-t{font-size:12.5px;font-weight:600;margin-bottom:2px}
.toast-m{font-size:11px;color:var(--ink-3);line-height:1.5}

/* ══════════════ BOTTOM DOCK ══════════════ */
.dock{display:none}

/* ══════════════ BARS ══════════════ */
.bar-row{display:flex;align-items:center;gap:12px;padding:10px 0}
.bar-row + .bar-row{border-top:1px solid var(--edge)}
.bar-l{width:78px;font-size:12px;font-weight:600;color:#9AAAC6;flex:0 0 auto}
.bar-track{
  flex:1;height:6px;border-radius:99px;
  background:rgba(120,170,255,.09);overflow:hidden;position:relative;
}
.bar-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  box-shadow:0 0 14px rgba(35,217,245,.5);
  transition:width .8s var(--ease);
}
.bar-fill.warn{background:linear-gradient(90deg,var(--gold),#E88C4D);box-shadow:0 0 14px rgba(214,180,106,.5)}
.bar-fill.danger{background:linear-gradient(90deg,#FF7A93,var(--violet));box-shadow:0 0 14px rgba(255,85,117,.5)}
.bar-v{
  width:92px;text-align:right;font-family:var(--mono);font-size:11px;
  font-weight:600;color:var(--ink-2);flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.bar-sub{font-size:10.5px;color:#71829E;margin:-6px 0 6px 90px}

/* ══════════════ EVENTS ══════════════ */
.ev-list{display:flex;flex-direction:column}
.ev{
  display:flex;align-items:center;gap:11px;
  padding:10px 0;border-bottom:1px solid var(--edge);font-size:12px;
}
.ev:last-child{border-bottom:0}
.ev-d{width:5px;height:5px;border-radius:50%;flex:0 0 auto;background:var(--ink-4)}
.ev-d.ok{background:var(--green);box-shadow:0 0 8px var(--green)}
.ev-d.deny{background:var(--red);box-shadow:0 0 8px var(--red)}
.ev-d.act{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.ev-t{
  flex:1;min-width:0;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ev-t b{color:var(--ink);font-weight:600}
.ev-time{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);flex:0 0 auto}

/* ══════════════ LOG VIEWER ══════════════ */
.logbox{
  background:rgba(3,6,13,.94);
  border:1px solid var(--edge-2);border-radius:var(--r-sm);
  padding:14px;
  font-family:var(--mono);font-size:11px;line-height:1.75;
  color:#8FB6D9;
  max-height:440px;overflow:auto;
  white-space:pre-wrap;word-break:break-word;
}
.logbox .lg-err{color:#FF8FA5}
.logbox .lg-warn{color:var(--gold)}
.logbox .lg-ok{color:var(--green)}

/* ══════════════ SNI CARDS ══════════════ */
.sni{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:var(--r-sm);
  border:1px solid var(--edge-2);
  background:linear-gradient(168deg,rgba(17,29,51,.78),rgba(7,13,25,.9));
  box-shadow:var(--bevel);
  transition:border-color var(--mid),transform var(--mid) var(--ease);
}
.sni:hover{transform:translateY(-1px)}
.sni.is-primary{border-color:rgba(214,180,106,.36);background:linear-gradient(168deg,rgba(40,34,20,.6),rgba(13,11,6,.9))}
.sni-ic{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--t-cyan);color:var(--cyan);border:1px solid rgba(35,217,245,.24);
}
.sni.is-primary .sni-ic{background:var(--t-gold);color:var(--gold);border-color:rgba(214,180,106,.32)}
.sni-ic svg{width:15px;height:15px}
.sni-id{flex:1;min-width:0}
.sni-name{font-family:var(--mono);font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sni-sub{font-size:10px;color:var(--ink-3);margin-top:2px}

/* ══════════════ MISC ══════════════ */
.tag{
  font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:6px;
  background:rgba(120,170,255,.1);color:var(--ink-2);border:1px solid var(--edge-2);
}
.divider{height:1px;background:var(--edge);margin:14px 0}

/* ══════════════ CLIENT CONFIGURATION (HexX UDP Plus) ══════════════ */
.cfg-hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;margin-bottom:16px;
  border:1px solid rgba(35,217,245,.24);border-radius:var(--r);
  background:
    radial-gradient(560px 130px at 6% -30%,rgba(35,217,245,.16),transparent 70%),
    linear-gradient(168deg,rgba(20,36,62,.92),rgba(8,15,29,.96));
  box-shadow:var(--lift-1),var(--bevel);
}
.cfg-hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(35,217,245,.6),transparent);
}
.cfg-hero-l{display:flex;align-items:center;gap:14px;min-width:0}
.cfg-hero-ic{
  width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(35,217,245,.22),rgba(133,91,255,.18));
  border:1px solid rgba(35,217,245,.34);color:var(--cyan);
  box-shadow:0 0 22px -8px rgba(35,217,245,.65),var(--bevel);
}
.cfg-hero-ic svg{width:20px;height:20px}
.cfg-hero-t{
  font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:2.4px;
  color:var(--ink);line-height:1.2;
}
.cfg-hero-s{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:2.6px;
  color:var(--cyan);margin-top:5px;text-transform:uppercase;
}

.cfg-sel-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:16px;
  border:1px solid var(--edge-2);border-radius:var(--r);
  background:linear-gradient(168deg,rgba(17,29,51,.7),rgba(6,11,21,.88));
  box-shadow:var(--lift-1),var(--bevel);
}
.cfg-sel-row .cfg-head{margin-bottom:11px}
.cfg-sel-row .sel{width:100%;max-width:460px}
.cfg-sel-row .pill{flex:0 0 auto}

.cfg-grid{display:grid;grid-template-columns:1fr;gap:14px}

.cfg-created{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;margin-bottom:16px;
  border:1px solid rgba(32,214,160,.34);border-radius:var(--r);
  background:linear-gradient(168deg,rgba(20,60,50,.55),rgba(8,26,22,.75));
  box-shadow:var(--lift-1),0 0 28px -18px rgba(32,214,160,.9);
}
.cfg-created-ic{
  width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;
  background:rgba(32,214,160,.16);border:1px solid rgba(32,214,160,.42);color:var(--green);
}
.cfg-created-ic svg{width:14px;height:14px}
.cfg-created-txt{flex:1;min-width:0}
.cfg-created-txt b{display:block;font-size:13px;color:#B9F2DF;font-weight:600}
.cfg-created-txt span{display:block;font-size:11.5px;color:#8FD6C2;margin-top:3px;line-height:1.5}
.cfg-created-x{
  width:26px;height:26px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;
  border:1px solid transparent;background:transparent;color:#8FD6C2;
}
.cfg-created-x svg{width:13px;height:13px}
.cfg-created-x:hover{background:rgba(32,214,160,.14);border-color:rgba(32,214,160,.3)}

.cfg-hint{font-size:10.5px;color:#7E90AC;margin-top:8px;line-height:1.5}

.cfg-block{
  position:relative;overflow:hidden;
  padding:15px 17px 17px;
  border:1px solid var(--edge-2);border-radius:var(--r);
  background:linear-gradient(168deg,rgba(19,32,55,.86),rgba(7,13,25,.94));
  box-shadow:var(--lift-1),var(--bevel);
  transition:border-color var(--med),box-shadow var(--med),transform var(--med);
}
.cfg-block::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
}
.cfg-block:hover{
  border-color:rgba(35,217,245,.34);
  box-shadow:var(--lift-2),var(--bevel),0 0 30px -16px rgba(35,217,245,.55);
  transform:translateY(-1px);
}
.cfg-block[data-block="auth"]{border-color:rgba(133,91,255,.26)}
.cfg-block[data-block="auth"]:hover{border-color:rgba(133,91,255,.46)}

.cfg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cfg-lbl{
  font-size:10.5px;font-weight:800;letter-spacing:1.6px;
  color:#93A4C0;text-transform:uppercase;
}
.cfg-tools{display:flex;align-items:center;gap:7px}
.cfg-copy{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 11px;border-radius:8px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;
  border:1px solid rgba(35,217,245,.26);
  background:rgba(35,217,245,.06);color:var(--cyan);
  transition:all var(--fast);
}
.cfg-copy svg{width:13px;height:13px}
.cfg-copy:hover{
  border-color:rgba(35,217,245,.6);background:rgba(35,217,245,.14);
  box-shadow:0 0 18px -8px rgba(35,217,245,.85);
}
.cfg-copy:active{transform:scale(.96)}
.cfg-eye{
  width:32px;padding:0;justify-content:center;
  border-color:rgba(133,91,255,.3);background:rgba(133,91,255,.08);color:#B9A6FF;
}
.cfg-manage{
  width:32px;padding:0;justify-content:center;
  border-color:rgba(214,180,106,.32);background:rgba(214,180,106,.07);color:var(--gold);
}
.cfg-manage:hover{
  border-color:rgba(214,180,106,.62);background:rgba(214,180,106,.15);color:#EBD3A0;
  box-shadow:0 0 18px -8px rgba(214,180,106,.9);
}

.obfs-state{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;border-radius:11px;
  border:1px solid var(--edge-2);background:rgba(8,15,29,.72);
}
.obfs-state.is-on{border-color:rgba(32,214,160,.3);background:rgba(32,214,160,.06)}
.obfs-state b{display:block;font-size:12.5px;color:var(--ink);font-weight:600}
.obfs-state span{display:block;font-size:11px;color:#8FA0BC;margin-top:3px;
  font-family:var(--mono);overflow-wrap:anywhere}
.cfg-eye:hover{border-color:rgba(133,91,255,.62);background:rgba(133,91,255,.16);color:#CDBFFF;
  box-shadow:0 0 18px -8px rgba(133,91,255,.9)}

.cfg-val{
  margin-top:12px;padding:13px 14px;border-radius:10px;
  font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.3px;
  color:var(--ink);word-break:break-all;line-height:1.5;
  background:rgba(3,7,14,.72);
  border:1px solid rgba(120,170,255,.13);
  -webkit-user-select:all;user-select:all;cursor:text;
}
.cfg-val.sans{font-family:var(--body)}
.cfg-val.is-empty{
  color:#5F7190;font-size:12.5px;letter-spacing:.5px;
  border-style:dashed;border-color:rgba(120,170,255,.16);
}

.cfg-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:14px;padding:12px 16px;
  border:1px solid var(--edge);border-radius:var(--r);
  background:rgba(8,15,29,.7);font-size:12px;
}
.cfg-foot .row-v{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1380px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-hero{grid-template-columns:1.4fr 1fr}
  .g-hero > .metric:last-child{grid-column:1/-1}
}

@media (max-width:1100px){
  :root{--rail-w:0px}
  .rail{
    transform:translateX(-100%);
    transition:transform .32s var(--ease);
    width:270px;
  }
  .rail.open{transform:none;box-shadow:0 0 80px rgba(0,0,0,.88)}
  .workspace{margin-left:0}
  .hud-burger{display:grid}
  .g-3{grid-template-columns:1fr 1fr}
  .g-hero{grid-template-columns:1fr 1fr}
}

@media (max-width:920px){
  .canvas{padding:20px 16px 118px}
  .hud{padding:0 16px;height:66px}
  .hud-title h2{font-size:16.5px}
  .hud-eyebrow{font-size:7.5px;letter-spacing:1.6px}
  .meter[data-kind="conn"]{display:none}
  .meter{padding:6px 10px}
  .meter-val{font-size:10.5px}

  .table-wrap{display:none}
  .acct-cards{display:flex}
  .g-2,.g-3,.g-hero{grid-template-columns:1fr}
  .g-hero > .metric:last-child{grid-column:auto}

  .dock{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    background:rgba(5,9,18,.96);
    backdrop-filter:blur(26px) saturate(1.5);
    -webkit-backdrop-filter:blur(26px) saturate(1.5);
    border-top:1px solid var(--edge-2);
    box-shadow:0 -10px 34px rgba(0,0,0,.6);
    overflow-x:auto;gap:2px;
  }
  .dock::before{
    content:"";position:absolute;top:-1px;left:8%;right:8%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(35,217,245,.4),rgba(133,91,255,.24),transparent);
  }
  .dock button{
    flex:1 0 auto;min-width:62px;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:6px 2px;border-radius:11px;
    color:var(--ink-4);font-size:9px;font-weight:700;letter-spacing:.2px;
    position:relative;
    transition:color var(--fast),background var(--fast);
  }
  .dock button svg{width:19px;height:19px;opacity:.8;transition:opacity var(--fast)}
  .dock button.on{
    color:var(--cyan);
    background:linear-gradient(180deg,rgba(35,217,245,.16),rgba(35,217,245,.03));
  }
  .dock button.on svg{opacity:1;filter:drop-shadow(0 0 8px rgba(35,217,245,.7))}
  .dock button.on::after{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:18px;height:2px;border-radius:0 0 3px 3px;
    background:linear-gradient(90deg,var(--cyan),var(--blue));
    box-shadow:0 0 10px var(--cyan);
  }

  .toast-rail{left:12px;right:12px;bottom:84px;max-width:none}
  .sheet{padding:0;align-items:flex-end}
  .sheet-panel{
    max-width:none;max-height:92vh;
    border-radius:22px 22px 0 0;
    padding:22px 18px calc(22px + env(safe-area-inset-bottom));
    animation:sheetUp .34s var(--ease);
  }
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
  .form-grid{grid-template-columns:1fr}
  .sheet-foot{flex-direction:column-reverse}
}

@media (max-width:560px){
  /* compact vertical rhythm so all four boxes sit near the fold on a phone */
  .cfg-hero{padding:11px 13px;align-items:center;margin-bottom:11px}
  .cfg-hero-t{font-size:12.5px;letter-spacing:1.5px}
  .cfg-hero-s{font-size:9px;letter-spacing:1.8px;margin-top:3px}
  .cfg-hero-ic{width:32px;height:32px;border-radius:10px}
  .cfg-hero-ic svg{width:15px;height:15px}
  .cfg-hero-l{gap:11px}
  .cfg-created{padding:10px 12px;margin-bottom:11px;gap:9px}
  .cfg-created-txt b{font-size:12px}
  .cfg-created-txt span{font-size:10.5px;margin-top:2px}
  .cfg-created-ic{width:22px;height:22px}
  .cfg-sel-row{padding:10px 13px;margin-bottom:11px}
  .cfg-sel-row .cfg-head{margin-bottom:8px}
  .cfg-sel-row .sel{max-width:none;height:38px}
  .cfg-grid{gap:10px}
  .cfg-block{padding:11px 13px 12px}
  .cfg-val{font-size:13px;padding:10px 11px;margin-top:9px}
  .cfg-hint{margin-top:6px;font-size:10px}
  .cfg-copy span{display:none}
  .cfg-copy{width:38px;padding:0;justify-content:center;height:34px;border-radius:9px}
  .cfg-copy svg{width:14px;height:14px}
  .cfg-eye,.cfg-manage{width:38px;height:34px}
  .cfg-foot{flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;padding:10px 13px}
  .canvas{padding:16px 13px 118px}
  .hud{height:60px;gap:10px}
  .hud-title h2{font-size:15px}
  .hud-meters{gap:6px}
  .meter{padding:5px 8px;border-radius:8px}
  .meter-ic svg{width:11px;height:11px}
  .meter-val{font-size:10px}

  .g-4{grid-template-columns:1fr 1fr;gap:10px}
  .metric{padding:14px 14px}
  .metric-val{font-size:23px}
  .metric-val.sm{font-size:16px}
  .metric-val.mono{font-size:18px}
  .metric-ic{width:26px;height:26px}
  .metric-ic svg{width:12px;height:12px}
  .metric-lbl{font-size:8.5px;letter-spacing:.85px}
  .metric-sub{font-size:10px}

  .hero{padding:18px 18px}
  .hero-word{font-size:30px}
  .traffic{padding:15px 16px}
  .traffic-val{font-size:22px}

  .gate-body{padding:32px 22px 22px}
  .gate-title h1{font-size:21px;letter-spacing:1.8px}
  .gate-crest{width:58px;height:58px;border-radius:17px}
  .gate-crest svg{width:29px;height:29px}

  .bar-l{width:64px;font-size:10.5px}
  .bar-v{width:76px;font-size:10px}
  .bar-sub{margin-left:76px}

  .acct-card{padding:14px}
  .ac-grid{gap:9px 11px}
  .ac-k{font-size:8.5px}
  .ac-v{font-size:11px}
  .ac-acts .btn{font-size:10.5px;padding:8px 4px}

  .pager{flex-direction:column;align-items:stretch;gap:10px}
  .pager-btns{justify-content:center}

  .toolbar{gap:8px}
  .search{max-width:none;flex:1 1 100%}
  .sel{flex:1 1 auto}
}

@media (max-width:390px){
  .g-4{grid-template-columns:1fr}
  .hud-meters .meter[data-kind="up"]{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .amb-glow,.amb-scan{animation:none !important}
}