/* ═══════════════════════════════════════════════════════════
   COMMAND DECK · admin.server1606.com
   Style: Aurora — dark + cyan/pink/violet gradient dashboard
   ───────────────────────────────────────────────────────────
   Phase 1 (Foundation): import shared tokens + admin theme.
   New tokens use --sp-*, --type-*, --r-*, --ease-*, --dur-*,
   --admin-* prefixes. Legacy variables below remain in use
   for Phase 1; Phase 2 begins migration.
   ═══════════════════════════════════════════════════════════ */

@import url('assets/tokens/base.css');
@import url('assets/tokens/admin.css');

:root{
  /* base */
  --bg:#070a14;
  --bg-2:#0d1222;
  --panel:#11172b;
  --panel-2:#161d33;
  --panel-3:#1c2540;

  /* accents */
  --cyan:#5cf0ff;
  --cyan-soft:#9ef5ff;
  --cyan-deep:#3aa7b3;
  --pink:#ff5cc8;
  --pink-soft:#ff9be0;
  --pink-deep:#b03f8a;
  --violet:#8a7bff;
  --violet-soft:#b5a9ff;
  --lime:#a8ff5c;
  --warn:#ffb45c;
  --danger:#ff6680;

  /* text */
  --txt:#e6ebff;
  --txt-2:#9aa3c4;
  --txt-3:#6b7299;

  /* legacy aliases (used in inline styles from admin.js — DO NOT REMOVE) */
  --gold:var(--cyan);
  --gold-soft:var(--cyan-soft);
  --gold-deep:var(--cyan-deep);
  --rose:var(--pink);
  --rose-soft:var(--pink-soft);
  --rose-deep:var(--pink-deep);
  --sage:var(--lime);
  --cream:var(--txt);
  --txt-soft:var(--txt-2);
  --txt-mute:var(--txt-3);
  --ink:var(--bg);
  --ink-2:var(--bg-2);
  --ink-3:var(--panel);
  --ink-4:var(--panel-2);
  --paper:var(--txt);

  /* lines */
  --line:rgba(255,255,255,.06);
  --line-strong:rgba(255,255,255,.12);
  --line-rose:rgba(255,92,200,.22);

  /* shadows */
  --shadow-1:0 1px 0 rgba(255,255,255,.03), 0 12px 32px rgba(0,0,0,.4);
  --shadow-2:0 1px 0 rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.55);
  --soft-glow:0 0 32px rgba(92,240,255,.12);

  --rail-w:240px;
  --radius:18px;
  --radius-s:11px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:.005em;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  background:
    radial-gradient(900px 600px at 15% -10%,rgba(92,240,255,.10),transparent 60%),
    radial-gradient(800px 600px at 90% 10%,rgba(255,92,200,.08),transparent 60%),
    radial-gradient(900px 700px at 50% 110%,rgba(138,123,255,.10),transparent 60%),
    var(--bg);
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;letter-spacing:.005em}
input,select,textarea{font-family:inherit;color:var(--txt)}
a{color:var(--cyan);text-decoration:none;transition:color .18s}
a:hover{color:var(--cyan-soft)}
.hidden{display:none !important}
::selection{background:rgba(92,240,255,.32);color:#fff}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(92,240,255,.16);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(92,240,255,.30);background-clip:padding-box;border:2px solid transparent}

h1,h2,h3,h4{font-family:'Inter','Plus Jakarta Sans',sans-serif;font-weight:700;letter-spacing:-.01em}

/* ═══════════════════════════════════════════════════════════
   WELCOME / INTRO
   ═══════════════════════════════════════════════════════════ */
.welcome{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%,#11182d 0%,#070a14 75%);
}
.welcome-bg{position:absolute;inset:0;pointer-events:none;filter:blur(60px)}
.orb{position:absolute;border-radius:50%;opacity:.45;animation:drift 22s ease-in-out infinite}
.orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(92,240,255,.55) 0%,transparent 70%);top:-160px;left:-140px;animation-delay:0s}
.orb-2{width:480px;height:480px;background:radial-gradient(circle,rgba(255,92,200,.45) 0%,transparent 70%);bottom:-140px;right:-120px;animation-delay:-7s}
.orb-3{width:380px;height:380px;background:radial-gradient(circle,rgba(138,123,255,.42) 0%,transparent 70%);top:50%;right:20%;animation-delay:-14s}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.08)}
  66%{transform:translate(-30px,40px) scale(.95)}
}

.welcome-card{
  position:relative;z-index:2;
  width:min(440px,92vw);
  padding:42px 40px 36px;
  background:linear-gradient(180deg,rgba(22,29,51,.85),rgba(13,18,34,.92));
  border:1px solid var(--line-strong);
  border-radius:22px;
  box-shadow:var(--shadow-2),var(--soft-glow),inset 0 1px 0 rgba(255,255,255,.04);
  animation:welcome-in .85s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes welcome-in{
  from{opacity:0;transform:translateY(24px) scale(.985)}
  to{opacity:1;transform:none}
}

.wc-head{text-align:center;margin-bottom:30px}
.wc-monogram{width:54px;height:54px;margin:0 auto 18px;color:var(--cyan)}
.wc-monogram svg{width:100%;height:100%}
.wc-kicker{font-size:11px;letter-spacing:.32em;color:var(--cyan);text-transform:uppercase;font-weight:600;margin-bottom:8px}
.wc-title{font-size:36px;line-height:1.05;color:#fff;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#fff,#5cf0ff 60%,#ff5cc8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wc-sub{margin-top:14px;font-size:13px;color:var(--txt-2);font-weight:400;line-height:1.55;padding:0 8px}

.login-form{display:flex;flex-direction:column;gap:16px}
.login-field{display:flex;flex-direction:column;gap:6px}
.login-field span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.login-field input{
  width:100%;
  background:rgba(7,10,20,.6);
  border:1px solid var(--line);
  border-radius:11px;
  padding:12px 14px;
  font-size:14px;
  color:var(--txt);
  outline:none;
  transition:.2s;
}
.login-field input:focus{
  border-color:var(--cyan);
  background:rgba(7,10,20,.85);
  box-shadow:0 0 0 3px rgba(92,240,255,.14);
}
.login-err{min-height:1.2em;font-size:13px;color:var(--pink-soft);text-align:center}

.login-btn{
  margin-top:6px;padding:13px 22px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  color:#06091a;
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:11px;
  transition:.2s;
  box-shadow:0 8px 22px rgba(92,240,255,.22), inset 0 1px 0 rgba(255,255,255,.3);
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(92,240,255,.32), inset 0 1px 0 rgba(255,255,255,.3)}
.login-btn:active{transform:translateY(0)}
.login-btn:disabled{opacity:.55;cursor:wait;transform:none}

.login-foot{
  margin-top:14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:11.5px;color:var(--txt-3);
}
.login-foot a{color:var(--cyan)}

/* ═══════════════════════════════════════════════════════════
   DECK
   ═══════════════════════════════════════════════════════════ */
.deck{position:fixed;inset:0;display:grid;grid-template-columns:var(--rail-w) 1fr;animation:deck-in .6s ease both}
@keyframes deck-in{from{opacity:0}to{opacity:1}}

/* — RAIL — */
.deck-rail{
  position:relative;
  background:linear-gradient(180deg,rgba(22,29,51,.55),rgba(13,18,34,.92));
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:22px 0 16px;
  overflow:hidden;
}
.rail-brand{
  display:flex;align-items:center;gap:12px;
  padding:0 22px 22px;
  border:none;background:none;width:100%;text-align:left;cursor:pointer;
  border-bottom:1px solid var(--line);
  color:var(--txt);
  transition:.2s;
}
.rail-brand:hover{color:#fff}
.rail-brand:hover .rb-mark{transform:rotate(-8deg)}
.rb-mark{
  width:38px;height:38px;
  border-radius:11px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  display:grid;place-items:center;
  color:#06091a;
  box-shadow:0 8px 24px rgba(92,240,255,.25);
  transition:transform .3s cubic-bezier(.2,.85,.3,1.05);
}
.rb-mark svg{width:60%;height:60%}
.rb-1{font-size:14px;font-weight:700;color:#fff;letter-spacing:.005em;line-height:1.1}
.rb-2{font-size:10.5px;letter-spacing:.22em;color:var(--txt-3);margin-top:3px;text-transform:uppercase;font-weight:600}

.rail-nav{flex:1;padding:18px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.rn-btn{
  display:grid;grid-template-columns:22px 1fr;align-items:center;gap:11px;
  padding:11px 13px;
  border-radius:11px;
  font-size:13px;color:var(--txt-2);
  text-align:left;transition:.18s;
  font-weight:500;
}
.rn-btn .rn-i{font-size:14px;color:var(--cyan);opacity:.7;transition:.18s;display:grid;place-items:center}
.rn-btn:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.rn-btn:hover .rn-i{opacity:1}
.rn-btn.active{
  background:linear-gradient(135deg,rgba(92,240,255,.18),rgba(138,123,255,.12));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(92,240,255,.22);
}
.rn-btn.active .rn-i{color:var(--cyan);opacity:1}

.rail-foot{
  margin-top:auto;padding:16px 16px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.rf-user{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.rfu-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(168,255,92,.5);flex-shrink:0}
.rfu-name{font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rfu-role{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-top:2px;font-weight:700}
.rf-logout{
  width:34px;height:34px;
  border:1px solid var(--line);border-radius:9px;
  color:var(--danger);font-size:15px;transition:.18s;
  display:grid;place-items:center;
  background:rgba(255,102,128,.08);
}
.rf-logout:hover{background:rgba(255,102,128,.16);border-color:rgba(255,102,128,.4);box-shadow:0 4px 14px rgba(255,102,128,.22)}

/* — MAIN — */
.deck-main{
  position:relative;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.deck-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 36px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(22,29,51,.32),transparent);
  flex-shrink:0;
}
.dt-title{display:flex;flex-direction:column;gap:4px}
.dt-kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.dt-title h2{font-size:26px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.02em}
.dt-clock{
  display:flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono','SFMono-Regular',monospace;
  font-size:12.5px;color:var(--txt-2);
  background:var(--panel);border:1px solid var(--line);
  padding:8px 14px;border-radius:11px;
}
.dtc-l{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3);font-family:inherit}
.lang-toggle{
  min-width:42px;
  height:30px;
  padding:0 10px;
  border:1px solid rgba(92,240,255,.22);
  border-radius:8px;
  background:rgba(92,240,255,.07);
  color:var(--cyan);
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:.18s ease;
}
.lang-toggle:hover{border-color:rgba(92,240,255,.45);background:rgba(92,240,255,.13)}

/* viewport */
.viewport{
  flex:1;
  padding:30px 36px 72px;
  overflow-y:auto;
  animation:vp-in .35s ease both;
}
.viewport > *{max-width:1280px;margin-left:auto;margin-right:auto}
@keyframes vp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════
   HUB (landing) — large centered cards
   ═══════════════════════════════════════════════════════════ */
.viewport-hub{
  display:flex;align-items:center;justify-content:center;
  padding:32px 24px 60px;
}
.viewport-hub > *{margin:0 !important;max-width:none !important}

.hub-stage{
  width:100%;max-width:1180px;
  display:flex;flex-direction:column;align-items:center;gap:36px;
  padding:14px 0;
}

.hub-head{text-align:center;max-width:760px;animation:hub-head-in .7s ease both}
@keyframes hub-head-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.hub-kicker{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--cyan);font-weight:600;margin-bottom:14px;
}
.hub-greeting{
  font-size:clamp(34px,5vw,52px);
  font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.02em;
}
.hub-greeting em{
  font-style:normal;
  background:linear-gradient(135deg,var(--cyan),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hub-lede{
  margin-top:14px;font-size:15px;color:var(--txt-2);
  font-weight:400;line-height:1.6;
}

.hub-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  width:100%;
}
@media (max-width:1100px){.hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hub-grid{grid-template-columns:1fr}}

.hub-card{
  position:relative;
  display:flex;flex-direction:column;gap:12px;
  padding:24px 22px 20px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .18s, box-shadow .18s, background .18s;
  box-shadow:var(--shadow-1);
  color:inherit;
  min-height:170px;
}
.hub-card::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(360px 240px at 100% 0%,rgba(92,240,255,.14),transparent 60%);
  opacity:0;transition:opacity .35s;
  pointer-events:none;
}
.hub-card:hover{
  border-color:rgba(92,240,255,.32);
  box-shadow:var(--shadow-2),0 0 0 1px rgba(92,240,255,.18);
}
.hub-card:hover::after{opacity:1}
.hub-card:hover .hc-arrow{opacity:1;color:var(--cyan)}
.hub-card:active{border-color:var(--cyan)}

.hc-glyph{
  font-size:18px;color:var(--cyan);line-height:1;
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(92,240,255,.22);border-radius:12px;
  background:linear-gradient(135deg,rgba(92,240,255,.18),rgba(138,123,255,.10));
  transition:color .18s, border-color .18s, background .18s;
}
.hub-card:hover .hc-glyph{
  color:#fff;border-color:var(--cyan);
}
.hc-title{
  font-size:18px;font-weight:700;color:#fff;
  line-height:1.2;letter-spacing:-.005em;
}
.hc-desc{
  font-size:12.5px;color:var(--txt-2);
  line-height:1.55;font-weight:400;
  flex:1;
}
.hc-arrow{
  align-self:flex-end;
  font-size:18px;color:var(--cyan);opacity:.55;
  transition:opacity .18s, color .18s;
}

.hub-live-grid{
  width:100%;
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr;
  gap:12px;
}
.hub-live-card{
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(16,24,38,.84),rgba(8,13,22,.92));
  box-shadow:var(--shadow-1);
  padding:16px;
  min-height:230px;
}
.hub-live-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line);
}
.hub-live-kicker{
  color:var(--warn);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.hub-live-head h3{
  margin:0;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hub-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.hub-metric{
  border:1px solid rgba(125,154,196,.22);
  border-radius:8px;
  background:rgba(2,7,13,.34);
  padding:10px;
  min-width:0;
}
.hub-metric span,
.hub-metric small{
  display:block;
  color:var(--txt-3);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hub-metric strong{
  display:block;
  margin:5px 0;
  color:#fff;
  font-size:19px;
  line-height:1;
  font-family:'JetBrains Mono',monospace;
}
.hub-led-grid{
  display:grid;
  gap:6px;
  max-height:208px;
  overflow:auto;
  padding-right:2px;
}
.hub-led-row{
  display:grid;
  grid-template-columns:16px 1fr auto;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:34px;
  padding:7px 8px;
  border:1px solid rgba(125,154,196,.16);
  border-radius:8px;
  background:rgba(2,7,13,.28);
  color:var(--txt);
  text-align:left;
}
.hub-led-row:hover{
  border-color:rgba(255,159,46,.28);
  background:rgba(255,159,46,.06);
}
.hub-led-row span:nth-child(2){
  font-size:12.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hub-led-row code{
  color:var(--txt-3);
  background:transparent;
  padding:0;
  font-size:11px;
}
.hub-led{
  width:9px;
  height:9px;
  border-radius:999px;
  display:inline-block;
  background:#3a4557;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.hub-led.big{width:13px;height:13px;margin-top:4px}
.led-green{
  background:var(--lime);
  box-shadow:0 0 0 1px rgba(98,230,168,.38),0 0 13px rgba(98,230,168,.62);
}
.led-red{
  background:var(--danger);
  box-shadow:0 0 0 1px rgba(255,93,115,.38),0 0 13px rgba(255,93,115,.55);
}
.led-off{
  background:#445064;
  box-shadow:0 0 0 1px rgba(125,154,196,.20);
}
.hub-rank-list{display:grid;gap:7px}
.hub-rank-row{
  display:grid;
  grid-template-columns:30px 1fr auto;
  gap:10px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid rgba(125,154,196,.14);
}
.hub-rank-row:last-child{border-bottom:0}
.hub-rank-pos{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:8px;
  color:var(--warn);
  border:1px solid rgba(255,159,46,.30);
  background:rgba(255,159,46,.08);
  font-weight:800;
  font-size:12px;
  font-family:'JetBrains Mono',monospace;
}
.hub-rank-row strong{
  display:block;
  color:#fff;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hub-rank-row small{
  display:block;
  margin-top:2px;
  color:var(--txt-3);
  font-size:11px;
}
.hub-rank-row b{
  color:var(--cyan);
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
}
.hub-empty{
  padding:16px 0;
  color:var(--txt-3);
  font-size:13px;
}
.hub-summary-card{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(255,159,46,.08),transparent 34%),
    linear-gradient(180deg,rgba(16,24,38,.84),rgba(8,13,22,.92));
  box-shadow:var(--shadow-1);
  padding:16px;
}
.summary-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(125,154,196,.24);
  background:rgba(2,7,13,.38);
  color:var(--txt-2);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.summary-chip.ok{color:var(--lime);border-color:rgba(98,230,168,.34);background:rgba(98,230,168,.08)}
.summary-chip.warn{color:var(--warn);border-color:rgba(255,159,46,.34);background:rgba(255,159,46,.08)}
.summary-chip.bad{color:var(--danger);border-color:rgba(255,93,115,.34);background:rgba(255,93,115,.08)}
.summary-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.summary-item{
  display:grid;
  grid-template-columns:12px 1fr;
  gap:10px;
  min-height:92px;
  padding:12px;
  border:1px solid rgba(125,154,196,.16);
  border-radius:8px;
  background:rgba(2,7,13,.30);
}
.summary-dot{
  width:9px;
  height:9px;
  margin-top:4px;
  border-radius:999px;
  background:#445064;
  box-shadow:0 0 0 1px rgba(125,154,196,.20);
}
.summary-item.ok .summary-dot{
  background:var(--lime);
  box-shadow:0 0 0 1px rgba(98,230,168,.36),0 0 12px rgba(98,230,168,.48);
}
.summary-item.warn .summary-dot{
  background:var(--warn);
  box-shadow:0 0 0 1px rgba(255,159,46,.36),0 0 12px rgba(255,159,46,.45);
}
.summary-item.bad .summary-dot{
  background:var(--danger);
  box-shadow:0 0 0 1px rgba(255,93,115,.36),0 0 12px rgba(255,93,115,.45);
}
.summary-item strong{
  display:block;
  color:#fff;
  font-size:13px;
  line-height:1.25;
}
.summary-item p{
  margin:5px 0 0;
  color:var(--txt-2);
  font-size:12px;
  line-height:1.45;
}

/* toasts */
.toasts{position:fixed;top:94px;right:36px;z-index:50;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  pointer-events:auto;
  background:linear-gradient(180deg,rgba(22,29,51,.96),rgba(13,18,34,.96));
  border:1px solid var(--line-strong);
  border-left:3px solid var(--cyan);
  padding:12px 18px;
  font-size:13px;color:#fff;
  border-radius:11px;
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-1);
  min-width:260px;max-width:380px;
  animation:toast-in .3s cubic-bezier(.2,.85,.3,1.1);
  font-weight:500;
}
.toast.err{border-left-color:var(--danger);color:var(--pink-soft)}
.toast.warn{border-left-color:var(--warn);color:var(--warn)}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════
   PANELS & CARDS
   ═══════════════════════════════════════════════════════════ */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 24px;
  margin-bottom:16px;
  transition:.25s;
  box-shadow:var(--shadow-1);
}
.panel:hover{border-color:var(--line-strong)}

.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.panel-title{
  font-size:18px;font-weight:700;
  color:#fff;letter-spacing:-.01em;
}
.panel-sub{font-size:12.5px;color:var(--txt-3);line-height:1.5;max-width:60%}

.panel-body{}

.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}

/* stat tiles */
.stat{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 20px;
  overflow:hidden;
}
.stat::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(320px 200px at 100% 0%,rgba(92,240,255,.10),transparent 60%);
  pointer-events:none;
}
.stat-lbl{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--txt-3);font-weight:600;margin-bottom:10px;
}
.stat-val{
  font-size:28px;font-weight:700;color:#fff;line-height:1;
  letter-spacing:-.02em;
  font-feature-settings:"lnum","tnum";
}
.stat-val.mint{color:var(--lime)}
.stat-val.magenta{color:var(--pink-soft)}
.stat-val.amber{color:var(--warn)}
.stat-val.danger{color:var(--danger)}
.stat-foot{font-size:12px;color:var(--txt-2);margin-top:10px;font-weight:400;line-height:1.45}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  background:var(--panel-2);
  border:1px solid var(--line-strong);
  font-size:12.5px;font-weight:600;
  color:var(--txt);
  border-radius:10px;
  transition:.2s;
  letter-spacing:.01em;
}
.btn:hover{background:var(--panel-3);color:#fff;border-color:rgba(92,240,255,.32);box-shadow:0 6px 18px rgba(92,240,255,.14)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn.mint{background:linear-gradient(135deg,rgba(168,255,92,.18),rgba(92,240,255,.10));border-color:rgba(168,255,92,.32);color:var(--lime)}
.btn.mint:hover{background:linear-gradient(135deg,rgba(168,255,92,.28),rgba(92,240,255,.14));border-color:var(--lime);color:#fff;box-shadow:0 6px 18px rgba(168,255,92,.18)}
.btn.magenta{background:linear-gradient(135deg,rgba(255,92,200,.18),rgba(138,123,255,.10));border-color:rgba(255,92,200,.28);color:var(--pink-soft)}
.btn.magenta:hover{background:linear-gradient(135deg,rgba(255,92,200,.28),rgba(138,123,255,.14));border-color:var(--pink);color:#fff;box-shadow:0 6px 18px rgba(255,92,200,.18)}
.btn.danger{background:rgba(255,102,128,.10);border-color:rgba(255,102,128,.32);color:#ff95ab}
.btn.danger:hover{background:rgba(255,102,128,.22);border-color:var(--danger);color:#fff;box-shadow:0 6px 18px rgba(255,102,128,.22)}
.btn.amber{background:rgba(255,180,92,.10);border-color:rgba(255,180,92,.32);color:var(--warn)}
.btn.amber:hover{background:rgba(255,180,92,.20);border-color:var(--warn);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* inputs */
.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px}
.field label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3);font-weight:600}
.field input,.field select,.field textarea{
  background:rgba(7,10,20,.55);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;color:var(--txt);
  outline:none;transition:.18s;
  font-feature-settings:"tnum";
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cyan);
  background:rgba(7,10,20,.8);
  box-shadow:0 0 0 3px rgba(92,240,255,.12);
}
.field-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}

/* file picker */
.file-pick{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;
  background:rgba(7,10,20,.55);
  border:1.5px dashed var(--line-strong);
  font-size:12.5px;color:var(--cyan);
  cursor:pointer;border-radius:10px;
  transition:.18s;
}
.file-pick:hover{background:rgba(92,240,255,.08);border-color:var(--cyan);color:#fff}
.file-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:left;padding:11px 14px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-3);border-bottom:1px solid var(--line-strong);
  font-weight:700;
}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--txt);font-feature-settings:"tnum"}
.tbl tr:hover td{background:rgba(255,255,255,.025)}
.tbl .num{text-align:right;color:var(--cyan);font-feature-settings:"tnum","lnum"}
.tbl .dim{color:var(--txt-3)}
.tbl strong{font-weight:700;color:#fff}

/* badges */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;font-size:10.5px;
  letter-spacing:.14em;border-radius:999px;text-transform:uppercase;
  font-weight:700;
}
.badge.on{background:rgba(255,102,128,.14);color:#ff95ab;border:1px solid rgba(255,102,128,.3)}
.badge.off{background:rgba(168,255,92,.14);color:var(--lime);border:1px solid rgba(168,255,92,.32)}
.badge.role-user{background:rgba(154,163,196,.10);color:var(--txt-2);border:1px solid rgba(154,163,196,.22)}
.badge.role-mod_admin{background:rgba(255,180,92,.12);color:var(--warn);border:1px solid rgba(255,180,92,.3)}
.badge.role-admin{background:rgba(255,92,200,.14);color:var(--pink-soft);border:1px solid var(--line-rose)}
.badge.role-super_admin{background:rgba(92,240,255,.16);color:var(--cyan);border:1px solid rgba(92,240,255,.28)}
.badge.warn{background:rgba(255,180,92,.14);color:var(--warn);border:1px solid rgba(255,180,92,.3)}

/* Tracking ranking */
.tracking-board{
  position:relative;
  background:
    linear-gradient(135deg,rgba(92,240,255,.09),rgba(168,255,92,.045) 48%,rgba(255,180,92,.035)),
    var(--panel);
  border:1px solid rgba(92,240,255,.14);
  border-radius:18px;
  padding:24px;
  margin-bottom:16px;
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.tracking-board::after{
  content:"";
  position:absolute;
  inset:auto -80px -140px auto;
  width:360px;
  height:260px;
  background:radial-gradient(circle,rgba(92,240,255,.18),transparent 68%);
  pointer-events:none;
}
.tracking-board-head{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:22px;
}
.tracking-kicker{
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:700;
  margin-bottom:8px;
}
.tracking-title{
  font-size:24px;
  line-height:1.12;
  color:var(--txt);
  letter-spacing:-.02em;
}
.tracking-copy{
  margin-top:9px;
  max-width:66ch;
  color:var(--txt-2);
  line-height:1.5;
}
.tracking-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tracking-summary{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.tracking-metric{
  background:rgba(7,10,20,.38);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 15px;
}
.tracking-metric span,
.tracking-metric small{
  display:block;
  color:var(--txt-3);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}
.tracking-metric strong{
  display:block;
  margin:7px 0 5px;
  font-size:24px;
  line-height:1;
  color:var(--txt);
  font-feature-settings:"tnum","lnum";
}
.tracking-metric.mint strong{color:var(--lime)}
.tracking-metric.warn strong{color:var(--warn)}
.tracking-podium{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.tracking-podium-card{
  min-width:0;
  background:rgba(7,10,20,.45);
  border:1px solid var(--line-strong);
  border-radius:15px;
  padding:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.tracking-podium-card.rank-1{
  border-color:rgba(168,255,92,.34);
  background:linear-gradient(180deg,rgba(168,255,92,.10),rgba(7,10,20,.42));
}
.tracking-place{
  color:var(--warn);
  font-size:11px;
  letter-spacing:.16em;
  font-weight:800;
  margin-bottom:10px;
}
.tracking-player-name{
  color:var(--txt);
  font-weight:800;
  font-size:16px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tracking-player-meta{
  color:var(--txt-3);
  font-size:12px;
  margin-top:4px;
}
.tracking-score{
  margin-top:14px;
  font-size:26px;
  line-height:1;
  color:var(--cyan);
  font-weight:800;
  font-feature-settings:"tnum","lnum";
}
.tracking-bar{
  height:6px;
  background:rgba(255,255,255,.075);
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
}
.tracking-bar i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--cyan);
}
.tracking-bar.good i{background:linear-gradient(90deg,var(--lime),var(--cyan))}
.tracking-bar.weak i{background:linear-gradient(90deg,var(--warn),rgba(255,102,128,.78))}
.tracking-mini{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:var(--txt-3);
  font-size:12px;
  margin-top:12px;
}
.tracking-mini b{color:var(--txt-2);font-weight:700}
.tracking-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  max-width:1280px;
  margin:0 auto 16px;
}
.tracking-player-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tracking-player-row,
.tracking-alliance-row{
  display:grid;
  grid-template-columns:46px minmax(160px,1fr) minmax(130px,.62fr) minmax(190px,.82fr);
  gap:14px;
  align-items:center;
  background:rgba(7,10,20,.32);
  border:1px solid var(--line);
  border-radius:13px;
  padding:11px 13px;
}
.tracking-player-row.good{border-color:rgba(92,240,255,.12)}
.tracking-player-row.weak{border-color:rgba(255,180,92,.16)}
.tracking-alliance-row.good{border-color:rgba(168,255,92,.18)}
.tracking-alliance-row.weak{border-color:rgba(255,102,128,.18)}
.tracking-index{
  color:var(--txt-3);
  font-weight:800;
  font-feature-settings:"tnum","lnum";
}
.tracking-name-block{min-width:0}
.tracking-name-block strong{
  display:block;
  color:var(--txt);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tracking-name-block span{
  display:block;
  color:var(--txt-3);
  font-size:12px;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tracking-row-score b{
  display:block;
  text-align:right;
  color:var(--cyan);
  font-feature-settings:"tnum","lnum";
}
.tracking-row-facts{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  color:var(--txt-3);
  font-size:11.5px;
}
.tracking-row-facts b{
  color:var(--txt-2);
  font-weight:700;
}
.tracking-alliance-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tracking-empty{
  color:var(--txt-3);
  background:rgba(7,10,20,.32);
  border:1px solid var(--line);
  border-radius:13px;
  padding:18px;
}

@media (max-width: 1100px){
  .tracking-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tracking-podium{grid-template-columns:1fr}
  .tracking-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .tracking-board{padding:18px}
  .tracking-board-head{flex-direction:column}
  .tracking-actions{justify-content:flex-start}
  .tracking-summary{grid-template-columns:1fr}
  .tracking-player-row,
  .tracking-alliance-row{
    grid-template-columns:38px minmax(0,1fr);
    gap:9px 12px;
  }
  .tracking-row-score,
  .tracking-row-facts{grid-column:2}
  .tracking-row-facts{justify-content:flex-start}
  .tracking-row-score b{text-align:left}
}

/* maintenance site rows */
.site-row{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(7,10,20,.4);
  margin-bottom:8px;
  transition:.18s;
}
.site-row:hover{border-color:var(--line-strong);background:rgba(255,255,255,.025)}
.site-row.maint{border-color:rgba(255,102,128,.32);background:rgba(255,102,128,.06)}
.site-dom{font-size:14px;color:#fff;font-weight:600;font-feature-settings:"tnum"}

/* danger panel */
.danger-zone{
  border-color:rgba(255,102,128,.3);
  background:linear-gradient(165deg,rgba(50,15,30,.35),rgba(13,18,34,.85));
}
.danger-zone .panel-title{color:#ff95ab}

/* pulse dots */
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(168,255,92,.6);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.pulse-dot.danger{background:var(--danger);box-shadow:0 0 10px rgba(255,102,128,.55)}
.pulse-dot.amber{background:var(--warn);box-shadow:0 0 10px rgba(255,180,92,.55)}

/* code blocks */
code,.code{
  font-family:'JetBrains Mono','SFMono-Regular',monospace;
  font-size:12.5px;
  background:rgba(92,240,255,.10);
  padding:2px 7px;border-radius:5px;
  color:var(--cyan);
}
pre.code{padding:14px 16px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;line-height:1.6;border:1px solid var(--line);background:rgba(7,10,20,.5);font-family:'JetBrains Mono',monospace}

/* scanner control */
.scanner-console{
  position:relative;
  padding:24px;
  margin-bottom:16px;
  border:1px solid rgba(92,240,255,.18);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(92,240,255,.09),transparent 28%),
    radial-gradient(560px 260px at 86% 0%,rgba(255,92,200,.12),transparent 58%),
    rgba(12,18,33,.82);
  box-shadow:var(--shadow-1),0 0 0 1px rgba(92,240,255,.04);
  overflow:hidden;
}
.scanner-console::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(92,240,255,.08) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px,54px 54px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent 74%);
  pointer-events:none;
}
.scanner-console > *{position:relative}
.scanner-console-head{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin-bottom:18px}
.scanner-kicker{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin-bottom:8px}
.scanner-title{font-size:26px;color:#fff;line-height:1.05;letter-spacing:-.02em;margin:0}
.scanner-lede{margin-top:10px;color:var(--txt-2);font-size:13px;line-height:1.55;max-width:760px}
.scanner-readout{
  min-width:170px;
  display:grid;gap:4px;justify-items:end;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(7,10,20,.54);
  font-family:'JetBrains Mono',monospace;
}
.scanner-readout strong{font-size:14px;color:#fff}
.scanner-readout small{font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.12em}
.scanner-command-row{display:flex;flex-wrap:wrap;gap:10px}
.scanner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:16px}
.scanner-card{
  position:relative;
  display:flex;flex-direction:column;gap:12px;
  min-height:245px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(22,29,51,.92),rgba(10,15,28,.94));
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.scanner-card::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:var(--cyan);
  opacity:.8;
}
.scanner-card.accent-violet::before{background:var(--violet)}
.scanner-card.accent-amber::before{background:var(--warn)}
.scanner-card.accent-mint::before{background:var(--lime)}
.scanner-card.accent-pink::before{background:var(--pink)}
.scanner-card.is-online{border-color:rgba(168,255,92,.3);box-shadow:var(--shadow-1),0 0 26px rgba(168,255,92,.08)}
.scanner-card-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.scanner-group{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);font-weight:700;margin-bottom:6px}
.scanner-card h3{font-size:18px;color:#fff;line-height:1.16;margin:0}
.scanner-card p{color:var(--txt-2);font-size:12.5px;line-height:1.5;min-height:38px}
.scanner-state{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:74px;height:26px;
  padding:0 9px;
  border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.12em;
  border:1px solid var(--line-strong);
  color:var(--txt-3);
  background:rgba(255,255,255,.03);
}
.scanner-state.online{color:var(--lime);border-color:rgba(168,255,92,.34);background:rgba(168,255,92,.10)}
.scanner-state.stopped{color:var(--txt-2);border-color:rgba(154,163,196,.18);background:rgba(154,163,196,.06)}
.scanner-state.missing{color:var(--danger);border-color:rgba(255,102,128,.34);background:rgba(255,102,128,.10)}
.scanner-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.scanner-meta span{
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(7,10,20,.42);
  font-size:10px;color:var(--txt-3);
  text-transform:uppercase;letter-spacing:.08em;
}
.scanner-meta b{display:block;margin-top:3px;color:var(--txt);font-size:12px;letter-spacing:0;text-transform:none;font-family:'JetBrains Mono',monospace}
.scanner-actions{display:flex;flex-wrap:wrap;gap:8px}
.scanner-actions .btn{padding:8px 12px;font-size:12px}
.scanner-fullscan-btn{
  border-color:rgba(92,240,255,.38);
  color:var(--cyan);
  background:linear-gradient(135deg,rgba(92,240,255,.15),rgba(168,255,92,.08));
}
.scanner-fullscan-btn:hover{
  border-color:var(--cyan);
  color:#fff;
  box-shadow:0 8px 20px rgba(92,240,255,.16);
}
.scanner-log-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.scanner-log-toolbar label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--txt-3);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.scanner-live-select{
  min-width:210px;
  height:38px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(7,10,20,.72);
  color:var(--txt);
  padding:0 12px;
  font:600 12px 'JetBrains Mono',monospace;
  outline:none;
}
.scanner-live-state{
  margin-left:auto;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(154,163,196,.18);
  background:rgba(154,163,196,.07);
  color:var(--txt-3);
  padding:0 12px;
  font:700 10px 'JetBrains Mono',monospace;
  letter-spacing:.12em;
}
.scanner-live-state.is-live{
  color:var(--lime);
  border-color:rgba(168,255,92,.34);
  background:rgba(168,255,92,.10);
  box-shadow:0 0 18px rgba(168,255,92,.08);
}
.scanner-log{
  min-height:260px;
  max-height:520px;
  overflow:auto;
  word-break:break-word;
  color:#c9f6ff;
  background:
    linear-gradient(180deg,rgba(92,240,255,.055),transparent),
    rgba(4,7,13,.82) !important;
  border-color:rgba(92,240,255,.18) !important;
}

/* form msg */
.msg{
  padding:12px 16px;border-radius:11px;
  font-size:13px;margin:12px 0;
  border:1px solid;line-height:1.5;
}
.msg.ok{background:rgba(168,255,92,.08);border-color:rgba(168,255,92,.28);color:var(--lime)}
.msg.err{background:rgba(255,102,128,.10);border-color:rgba(255,102,128,.32);color:#ff95ab}
.msg.warn{background:rgba(255,180,92,.10);border-color:rgba(255,180,92,.3);color:var(--warn)}

/* loading */
.loading{
  font-size:14px;color:var(--cyan);
  text-align:center;padding:48px 20px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}
.loading::after{content:"…";animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}33%{content:"."}66%{content:".."}100%{content:"…"}}

/* responsive */
@media (max-width:880px){
  .deck{grid-template-columns:64px 1fr}
  .rb-1,.rb-2,.rn-btn span:last-child,.rfu-name,.rfu-role{display:none}
  .rn-btn{grid-template-columns:1fr;justify-items:center;padding:11px 8px}
  .rail-brand{justify-content:center;padding:0 10px 22px}
  .rail-foot{padding:14px 8px;flex-direction:column;gap:8px}
  .deck-top{padding:18px 22px 14px}
  .dt-title h2{font-size:22px}
  .viewport{padding:20px}
  .toasts{right:14px;top:80px}
}

/* ═══════════════════════════════════════════════════════════
   RUNBOOK SKIN · aligned with docs/scanner-vps-anleitung.html
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#070b12;
  --bg-2:#0a101a;
  --panel:rgba(16,24,38,.84);
  --panel-2:rgba(10,17,28,.92);
  --panel-3:rgba(20,31,49,.92);
  --line:rgba(125,154,196,.26);
  --line-strong:rgba(125,154,196,.38);
  --txt:#e7eefb;
  --txt-2:#8ca0bc;
  --txt-3:#667890;
  --cyan:#55d7ff;
  --cyan-soft:#a7ecff;
  --cyan-deep:#2b90ad;
  --pink:#ff7dbd;
  --pink-soft:#ffabd4;
  --violet:#b28cff;
  --lime:#62e6a8;
  --warn:#ff9f2e;
  --danger:#ff5d73;
  --gold:#ff9f2e;
  --gold-soft:#ffd166;
  --gold-deep:#9a5a16;
  --cream:#e7eefb;
  --txt-soft:#8ca0bc;
  --txt-mute:#667890;
  --shadow-1:0 18px 80px rgba(0,0,0,.42);
  --shadow-2:0 24px 96px rgba(0,0,0,.52);
  --soft-glow:0 0 36px rgba(85,215,255,.10);
  --rail-w:270px;
  --radius:8px;
  --radius-s:8px;
}

html,body{
  background:
    radial-gradient(circle at 20% 0%, rgba(85,215,255,.12), transparent 31%),
    radial-gradient(circle at 84% 8%, rgba(255,159,46,.12), transparent 30%),
    linear-gradient(180deg,#05070c 0%,#0a101a 48%,#070b12 100%);
  letter-spacing:0;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,159,46,.07) 0 1px,transparent 1px 100%),
    linear-gradient(0deg,rgba(85,215,255,.045) 0 1px,transparent 1px 100%);
  background-size:96px 100%,100% 42px;
  opacity:.22;
  pointer-events:none;
  z-index:0;
}

.welcome-bg{filter:none}
.orb{display:none}
.welcome{
  background:
    radial-gradient(circle at 20% 0%, rgba(85,215,255,.16), transparent 34%),
    radial-gradient(circle at 84% 12%, rgba(255,159,46,.13), transparent 32%),
    #070b12;
}
.welcome-card{
  width:min(560px,calc(100vw - 36px));
  border-radius:8px;
  padding:30px 32px;
  background:linear-gradient(135deg,rgba(15,24,39,.94),rgba(8,13,22,.82));
  border:1px solid var(--line);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.welcome-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,159,46,.16) 0 2px,transparent 2px 100%),
    linear-gradient(0deg,rgba(85,215,255,.08) 0 1px,transparent 1px 100%);
  background-size:96px 100%,100% 42px;
  opacity:.26;
  pointer-events:none;
}
.welcome-card > *{position:relative}
.wc-monogram{
  width:52px;
  height:52px;
  padding:7px;
  border:1px solid rgba(255,159,46,.32);
  border-radius:8px;
  background:rgba(255,159,46,.08);
}
.wc-kicker,.login-field span,.dt-kicker,.hub-kicker,.scanner-kicker{color:var(--warn)}
.wc-title{
  font-size:clamp(32px,5vw,48px);
  background:none;
  -webkit-text-fill-color:currentColor;
  color:#fff;
}
.wc-sub{color:var(--txt-2)}
.login-field input{
  border-radius:8px;
  background:rgba(7,11,18,.72);
  border-color:var(--line);
}
.login-btn{
  border-radius:8px;
  color:#06101a;
  background:linear-gradient(135deg,var(--warn),#ffd166);
  box-shadow:0 10px 28px rgba(255,159,46,.22), inset 0 1px 0 rgba(255,255,255,.24);
}

.deck{
  grid-template-columns:var(--rail-w) 1fr;
  gap:14px;
  padding:18px;
  background:transparent;
}
.deck-rail{
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(16,24,38,.88),rgba(8,13,22,.9));
  box-shadow:var(--shadow-1);
  padding:0;
}
.rail-brand{
  padding:18px;
  border-bottom:1px solid var(--line);
}
.rb-mark{
  border-radius:8px;
  background:rgba(255,159,46,.10);
  color:var(--warn);
  border:1px solid rgba(255,159,46,.36);
  box-shadow:none;
}
.rb-1{letter-spacing:0;font-size:14px}
.rb-2{color:var(--txt-3)}
.rail-nav{padding:12px;gap:4px}
.rn-btn{
  border:1px solid transparent;
  border-radius:8px;
  padding:11px 12px;
  color:var(--txt-2);
}
.rn-btn .rn-i{color:var(--cyan)}
.rn-btn:hover{
  background:rgba(85,215,255,.07);
  border-color:rgba(85,215,255,.16);
}
.rn-btn.active{
  background:rgba(255,159,46,.10);
  border-color:rgba(255,159,46,.34);
  box-shadow:0 0 22px rgba(255,159,46,.08);
}
.rn-btn.active .rn-i{color:var(--warn)}
.rail-foot{
  border-top:1px solid var(--line);
  padding:14px;
}
.rf-logout{border-radius:8px}

.deck-main{
  position:relative;
  border-radius:8px;
  overflow:hidden;
}
.deck-top{
  position:relative;
  margin:0 0 14px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(15,24,39,.94),rgba(8,13,22,.78));
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.deck-top::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,159,46,.14) 0 2px,transparent 2px 100%),
    linear-gradient(0deg,rgba(85,215,255,.08) 0 1px,transparent 1px 100%);
  background-size:96px 100%,100% 42px;
  opacity:.24;
  pointer-events:none;
}
.dt-title,.dt-clock{position:relative}
.dt-title h2{font-size:28px}
.dt-clock{
  border-radius:8px;
  background:rgba(7,11,18,.64);
  border-color:rgba(125,154,196,.24);
}
.viewport{
  padding:0 0 72px;
}
.viewport > *{
  max-width:min(1280px,calc(100vw - var(--rail-w) - 68px));
}

.viewport-hub{
  align-items:flex-start;
  justify-content:center;
  padding:0 0 72px;
}
.hub-stage{
  max-width:min(1280px,calc(100vw - var(--rail-w) - 68px));
  gap:18px;
}
.hub-head{
  width:100%;
  max-width:none;
  text-align:left;
  padding:24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(15,24,39,.94),rgba(8,13,22,.78));
  box-shadow:var(--shadow-1);
}
.hub-greeting{
  font-size:clamp(32px,4vw,50px);
  max-width:820px;
}
.hub-greeting em{
  background:none;
  color:var(--warn);
}
.hub-lede{max-width:760px}
.hub-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.hub-card{
  min-height:154px;
  padding:18px;
  border-radius:8px;
  background:linear-gradient(180deg,rgba(20,31,49,.82),rgba(9,15,25,.92));
  border-color:rgba(125,154,196,.22);
  box-shadow:var(--shadow-1);
}
.hub-card:hover{
  border-color:rgba(255,159,46,.36);
  box-shadow:var(--shadow-1),0 0 28px rgba(255,159,46,.08);
}
.hub-card::after{
  background:radial-gradient(360px 240px at 100% 0%,rgba(255,159,46,.13),transparent 60%);
}
.hc-glyph{
  border-radius:8px;
  color:var(--warn);
  border-color:rgba(255,159,46,.28);
  background:rgba(255,159,46,.08);
}
.hub-card:hover .hc-glyph{
  border-color:var(--warn);
  color:#fff;
}
.hc-desc{font-size:13px}
.hc-arrow{color:var(--warn)}

.panel,.stat,.site-row,.scanner-console,.scanner-card,.file-pick,.field input,.field select,.field textarea,.btn,.msg,.toast,pre.code{
  border-radius:8px;
}
.panel{
  padding:18px;
  background:linear-gradient(180deg,rgba(16,24,38,.84),rgba(8,13,22,.92));
  border-color:var(--line);
  box-shadow:var(--shadow-1);
}
.panel-head{
  align-items:center;
  padding-bottom:14px;
  margin-bottom:16px;
}
.panel-title{
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.panel-sub{
  font-size:13px;
  max-width:55%;
}
.stat{
  border-color:rgba(125,154,196,.22);
  background:linear-gradient(180deg,rgba(20,31,49,.82),rgba(9,15,25,.92));
}
.stat-lbl{color:var(--txt-3)}
.stat-val{font-size:27px}
.btn{
  justify-content:center;
  min-height:36px;
  border-color:rgba(125,154,196,.26);
  background:rgba(10,17,28,.74);
}
.btn:hover{
  border-color:rgba(255,159,46,.35);
  box-shadow:0 0 24px rgba(255,159,46,.10);
}
.btn.mint{
  background:rgba(98,230,168,.10);
  border-color:rgba(98,230,168,.30);
  color:var(--lime);
}
.btn.amber{
  background:rgba(255,159,46,.10);
  border-color:rgba(255,159,46,.32);
  color:var(--warn);
}
.btn.danger{
  background:rgba(255,93,115,.10);
  border-color:rgba(255,93,115,.32);
  color:#ff9bad;
}
.badge{border-radius:999px}
.tbl th{color:var(--txt-3)}
.tbl .num{color:var(--cyan)}
.scanner-console{
  background:
    linear-gradient(135deg,rgba(15,24,39,.94),rgba(8,13,22,.78));
  border-color:var(--line);
}
.scanner-console::before{
  background:
    linear-gradient(90deg,rgba(255,159,46,.16) 0 2px,transparent 2px 100%),
    linear-gradient(0deg,rgba(85,215,255,.08) 0 1px,transparent 1px 100%);
  background-size:96px 100%,100% 42px;
  mask-image:none;
  opacity:.26;
}
.scanner-card::before{height:2px}
.scanner-log{
  border-radius:8px;
  color:#d7f3ff;
  background:rgba(2,7,13,.72) !important;
}

@media (max-width:1100px){
  .hub-grid,.hub-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-status-card{grid-column:1 / -1}
  .summary-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .viewport > *, .hub-stage{max-width:calc(100vw - var(--rail-w) - 52px)}
}
@media (max-width:880px){
  .deck{grid-template-columns:64px 1fr;padding:10px;gap:10px}
  .viewport > *, .hub-stage{max-width:calc(100vw - 96px)}
  .hub-grid,.hub-live-grid,.hub-metrics,.summary-list{grid-template-columns:1fr}
  .panel-sub{max-width:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 OVERRIDES — Color + Type Cleanup
   ───────────────────────────────────────────────────────────────────────────
   - Pink/Violet/Lime palette folded into Cyan-only + semantic OK-green.
   - Legacy var names kept defined (JS inline-styles work) but re-pointed.
   - Multi-color gradients (cyan→violet, cyan→pink) replaced with single-tone.
   - Hero/H1 display switched to Fraunces.
   - Polish: text-wrap balance, tabular-nums for counters.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Re-map legacy palette → cyan + semantic OK */
:root{
  --pink:#5cf0ff;
  --pink-soft:#9ef5ff;
  --pink-deep:#3aa7b3;
  --violet:#5cf0ff;
  --violet-soft:#9ef5ff;
  --lime:#62e6a8;
  --line-rose:rgba(92,240,255,.22);
}

/* Login button → single-color cyan + glow (no cyan→violet gradient) */
.login-btn{
  background:linear-gradient(135deg,var(--cyan),var(--cyan-soft));
  box-shadow:0 8px 22px rgba(92,240,255,.30), inset 0 1px 0 rgba(255,255,255,.30);
}
.login-btn:hover{
  box-shadow:0 12px 30px rgba(92,240,255,.42), inset 0 1px 0 rgba(255,255,255,.30);
}

/* Brand mark → single-color cyan */
.rb-mark{
  background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));
  box-shadow:0 8px 24px rgba(92,240,255,.30);
}

/* Welcome card title → cyan-only text-clip */
.wc-title{
  background:linear-gradient(135deg,#fff,var(--cyan));
}

/* Hub greeting <em> → cyan-only text-clip */
.hub-greeting em{
  background:linear-gradient(135deg,#fff,var(--cyan));
}

/* Hero display → Fraunces */
.wc-title,
.hub-greeting{
  font-family:'Fraunces','Inter',serif;
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 144;
  font-weight:600;
}

/* Login error → semantic danger */
.login-err{ color:var(--danger); }

/* Toast error → semantic */
.toast.err{ color:var(--danger); }

/* Scanner card accents collapse to cyan + semantic OK */
.scanner-card.accent-violet::before,
.scanner-card.accent-pink::before{ background:var(--cyan); }
.scanner-card.accent-mint::before{ background:var(--lime); }

/* Stat value variants → cyan tier + OK-green */
.stat-val.mint{ color:var(--lime); }
.stat-val.magenta{ color:var(--cyan-soft); }

/* Button variants: collapse mint/magenta to cyan-family + OK */
.btn.mint{
  background:linear-gradient(135deg,rgba(98,230,168,.18),rgba(92,240,255,.10));
  border-color:rgba(98,230,168,.32);
  color:var(--lime);
}
.btn.mint:hover{
  background:linear-gradient(135deg,rgba(98,230,168,.28),rgba(92,240,255,.14));
  border-color:var(--lime);
  color:#fff;
  box-shadow:0 6px 18px rgba(98,230,168,.18);
}
.btn.magenta{
  background:rgba(92,240,255,.10);
  border-color:rgba(92,240,255,.28);
  color:var(--cyan-soft);
}
.btn.magenta:hover{
  background:rgba(92,240,255,.16);
  border-color:var(--cyan);
  color:#fff;
  box-shadow:0 6px 18px rgba(92,240,255,.22);
}

/* Role-admin badge → cyan-tinted (was pink) */
.badge.role-admin{
  background:rgba(92,240,255,.14);
  color:var(--cyan-soft);
  border:1px solid rgba(92,240,255,.22);
}
.badge.off{
  background:rgba(98,230,168,.14);
  color:var(--lime);
  border:1px solid rgba(98,230,168,.32);
}

/* Welcome-card orbs → single-color cyan stack (was cyan+pink+violet) */
.orb-2{
  background:radial-gradient(circle,rgba(92,240,255,.36) 0%,transparent 70%);
  opacity:.32;
}
.orb-3{
  background:radial-gradient(circle,rgba(92,240,255,.28) 0%,transparent 70%);
  opacity:.28;
}

/* Polish (Emil): tabular-nums for mono counters + text-wrap balance for headlines */
.dt-clock,
code, pre, kbd,
.stat-val,
.kpi-val{ font-variant-numeric:tabular-nums; }
h1, h2{ text-wrap:balance; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3 OVERRIDES — Motion Refit
   ───────────────────────────────────────────────────────────────────────────
   Three tiers (atom · transition · ceremony) mapped to base.css tokens:
   --dur-1 (120ms) + --ease-out          → hover/focus/color shifts
   --dur-2 (240ms) + --ease-out/spring   → card-enter, panel-slide
   --dur-3 (480ms) + --ease-glide        → section route, hero reveal

   View-Transitions-API choreography for hub↔section is wired in admin.js;
   CSS below tunes the auto-generated pseudo-elements.
   ═══════════════════════════════════════════════════════════════════════════ */

/* atom-tier (hover/focus/color) */
a,
.rn-btn,
.rn-btn .rn-i,
.rf-logout,
.toast,
.login-field input,
.login-btn,
.rb-mark,
.btn,
.summary-chip,
.scanner-state,
.badge,
.audit-line,
.viewport > *{
  transition-duration: var(--dur-1);
  transition-timing-function: var(--ease-out);
}

/* transition-tier — hub-card lift on hover */
.hub-card{
  transition:
    border-color var(--dur-2) var(--ease-out),
    box-shadow   var(--dur-2) var(--ease-out),
    background   var(--dur-2) var(--ease-out),
    transform    var(--dur-2) var(--ease-spring);
}
.hub-card:hover{
  transform: translateY(-2px);
}
.hub-card::after{
  transition-duration: var(--dur-3);
  transition-timing-function: var(--ease-out);
}

/* ceremony-tier — viewport enter animation re-tuned */
@keyframes vp-in-v2{
  from{ opacity:0; transform: translateY(12px); }
  to  { opacity:1; transform: none; }
}
.viewport{
  animation: vp-in-v2 var(--dur-3) var(--ease-glide) both;
}

/* View-Transitions-API (Chrome 111+, Safari 18+, FF 127+ behind flag) */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: var(--dur-3);
  animation-timing-function: var(--ease-glide);
}

/* Reduced-motion override (atom-tier color/opacity stays functional) */
@media (prefers-reduced-motion: reduce){
  .hub-card:hover{ transform: none; }
  .viewport{ animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration: 1ms; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4d.B — IA Consolidation
   ───────────────────────────────────────────────────────────────────────────
   Section-tabs row injected between .deck-top and .viewport for child
   sections of a parent group (Operations / Members / Data).
   Hidden for hub/dashboard/tracking/system.
   ═══════════════════════════════════════════════════════════════════════════ */

#section-tabs-host{
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: var(--bd-1) solid var(--line);
}
#section-tabs-host.hidden{
  display: none !important;
}

.section-tabs{
  display: flex;
  gap: var(--sp-1);
  padding: 0 36px;
  max-width: 1280px;
  margin: 0 auto;
}
.section-tab{
  font-family: 'Inter', sans-serif;
  font-size: var(--type-sm);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--txt-3);
  text-decoration: none;
  padding: 14px var(--sp-3);
  position: relative;
  transition: color var(--dur-1) var(--ease-out);
  white-space: nowrap;
}
.section-tab:hover{ color: var(--txt-2); }
.section-tab.active{
  color: var(--cyan);
}
.section-tab.active::after{
  content: '';
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: -1px;
  height: 2px;
  background: var(--cyan);
  border-radius: 1px 1px 0 0;
  box-shadow: 0 0 12px rgba(92,240,255,.32);
}

/* Reduce viewport top padding when tabs are present so content sits tight */
#section-tabs-host:not(.hidden) + .viewport{
  padding-top: var(--sp-5);
}

@media (max-width: 820px){
  .section-tabs{ padding: 0 var(--sp-3); }
  .section-tab{ font-size: var(--type-xs); padding: 12px var(--sp-2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6 — Polish Pass
   ───────────────────────────────────────────────────────────────────────────
   - Welcome-orbs reduced: single cyan orb instead of triple-stack
   - Hairline borders @2dppx
   - Focus-ring standardized via :focus-visible
   - Extended text-wrap:balance on h3 + key headlines
   - Empty/Loading/Error state utilities
   ═══════════════════════════════════════════════════════════════════════════ */

/* Single ambient orb (orb-2 + orb-3 hidden, orb-1 stays) */
.orb-2, .orb-3{ display: none !important; }
.orb-1{
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(92,240,255,.42) 0%, transparent 70%);
  opacity: .42;
}

/* Hairline borders on HiDPI displays */
@media (min-resolution: 2dppx){
  :root{
    --bd-1: 0.5px;
  }
  .hub-card,
  .deck-rail,
  .deck-top,
  .stat-cell,
  .panel,
  .scanner-card,
  .audit-line,
  .login-field input,
  .summary-chip,
  .badge{
    border-width: 0.5px;
  }
}

/* Focus-ring — consistent via :focus-visible */
:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.login-field input:focus-visible{
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(92,240,255,.22);
}

/* Extended text-wrap balance */
.hub-card h3,
.hub-card .hc-title,
.scanner-card h3,
.dt-title h2,
.dt-kicker,
.welcome-card h1,
.viewport h2,
.viewport h3,
.section-tab{
  text-wrap: balance;
}

/* ─── Empty / Loading / Error states (admin) ─────────────────────────── */
.admin-empty,
.admin-error{
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--txt-2);
  font-size: var(--type-sm);
  line-height: var(--lh-loose);
  background: rgba(7,10,20,.4);
}
.admin-empty__icon,
.admin-error__icon{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-2xl);
  color: var(--cyan);
  margin-bottom: var(--sp-2);
  opacity: .55;
  font-weight: 500;
}
.admin-empty__title,
.admin-error__title{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--txt);
  font-size: var(--type-md);
  margin-bottom: var(--sp-1);
  letter-spacing: -.005em;
}
.admin-error{
  border-color: rgba(255,102,128,.35);
  background: rgba(40,15,22,.25);
}
.admin-error__icon{ color: var(--danger); }

/* Skeleton shimmer */
@keyframes admin-skel{
  0%   { background-position:  100% 50%; }
  100% { background-position: -100% 50%; }
}
.admin-skel{
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.04) 50%,
      transparent 100%);
  background-size: 200% 100%;
  animation: admin-skel 1.6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOTFIX — Rail nav active state (Phase 2 cyan enforcement)
   ───────────────────────────────────────────────────────────────────────────
   Pre-existing RUNBOOK SKIN block (lines ~1030-1193) overrode active state
   to orange and was not caught by Phase 2 sweep. Cyan-only enforced here.
   ═══════════════════════════════════════════════════════════════════════════ */

.rn-btn{
  color: var(--txt-2);
  border: 1px solid transparent;
}
.rn-btn .rn-i{
  color: var(--cyan);
  opacity: .55;
}
.rn-btn:hover:not(.active){
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}
.rn-btn:hover:not(.active) .rn-i{
  opacity: .85 !important;
  color: var(--cyan) !important;
}

.rn-btn.active{
  background: linear-gradient(135deg, rgba(92,240,255,.22), rgba(92,240,255,.08)) !important;
  border-color: rgba(92,240,255,.48) !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(92,240,255,.20), inset 0 0 0 1px rgba(92,240,255,.30) !important;
}
.rn-btn.active .rn-i{
  color: var(--cyan) !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOTFIX 2 — Rail focus-visible must NOT mimic active glow
   ───────────────────────────────────────────────────────────────────────────
   Phase 6 global :focus-visible{outline:cyan} matches rail-active glow color,
   creating visual confusion (clicked item keeps "glowing" alongside .active).
   Rail-specific override: thin neutral ring instead.
   ═══════════════════════════════════════════════════════════════════════════ */

#rail-nav .rn-btn:focus-visible,
#rail-nav .rn-btn:focus{
  outline: 1px solid rgba(255,255,255,.18) !important;
  outline-offset: -1px !important;
  box-shadow: none;
}
#rail-nav .rn-btn.active:focus-visible,
#rail-nav .rn-btn.active:focus{
  outline: none !important;
  /* active glow already conveys selection */
}

/* Also clear lingering :hover when not the active one (defensive) */
#rail-nav .rn-btn:not(.active):not(:hover){
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Settings Workbench */
.settings-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
  margin-bottom:18px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}
.settings-toolbar .field{
  min-width:260px;
  flex:1 1 320px;
}
.settings-workbench{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.settings-group{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:16px;
}
.settings-group.technical{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:0;
  overflow:hidden;
  background:rgba(7,10,20,.28);
}
.settings-group.technical summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
}
.settings-group.technical summary::-webkit-details-marker{display:none}
.settings-group.technical summary .settings-group-title{margin:0}
.settings-group.technical[open]{
  padding-bottom:14px;
}
.settings-group.technical[open] .settings-group-hint,
.settings-group.technical[open] .settings-grid{
  margin-left:16px;
  margin-right:16px;
}
.settings-group-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  color:var(--cyan);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:5px;
}
.settings-group-title small{
  color:var(--txt-3);
  font-size:10px;
  letter-spacing:.1em;
}
.settings-group-hint{
  margin:0 0 12px;
  color:var(--txt-2);
  font-size:12px;
  line-height:1.5;
}
.settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;
}
.setting-card{
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));
  border-radius:10px;
  padding:14px;
  min-width:0;
  overflow:visible;
}
.setting-card.secret{
  background:linear-gradient(180deg,rgba(255,180,92,.055),rgba(255,255,255,.018));
}
.setting-card.readonly{
  opacity:.68;
}
.setting-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}
.setting-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--txt);
  font-weight:750;
  font-size:14px;
}
.setting-info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(92,240,255,.35);
  background:rgba(92,240,255,.08);
  color:var(--cyan);
  font-size:11px;
  font-family:var(--mono);
  font-weight:800;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
  z-index:4;
}
.setting-info::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  width:min(300px,70vw);
  transform:translate(-50%,6px);
  padding:10px 12px;
  border:1px solid rgba(92,240,255,.24);
  border-radius:8px;
  background:rgba(8,13,22,.98);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  color:var(--txt);
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:0;
  text-align:left;
  text-transform:none;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:.16s ease;
}
.setting-info::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  width:9px;
  height:9px;
  transform:translate(-50%,6px) rotate(45deg);
  background:rgba(8,13,22,.98);
  border-right:1px solid rgba(92,240,255,.24);
  border-bottom:1px solid rgba(92,240,255,.24);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:.16s ease;
}
.setting-info:hover,
.setting-info:focus-visible,
.setting-info.is-open{
  border-color:rgba(92,240,255,.68);
  background:rgba(92,240,255,.16);
}
.setting-info:hover::after,
.setting-info:hover::before,
.setting-info:focus-visible::after,
.setting-info:focus-visible::before,
.setting-info.is-open::after,
.setting-info.is-open::before{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) rotate(0deg);
}
.setting-info:hover::before,
.setting-info:focus-visible::before,
.setting-info.is-open::before{
  transform:translate(-50%,0) rotate(45deg);
}
.setting-card input,
.setting-card textarea{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  min-height:38px;
  border:1px solid rgba(92,240,255,.18);
  border-radius:9px;
  background:rgba(7,10,20,.68);
  color:var(--txt);
  padding:10px 12px;
  outline:none;
  font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.setting-card input::placeholder,
.setting-card textarea::placeholder{
  color:rgba(154,163,196,.62);
}
.setting-card input:focus,
.setting-card textarea:focus{
  border-color:rgba(92,240,255,.62);
  background:rgba(7,10,20,.86);
  box-shadow:0 0 0 3px rgba(92,240,255,.10), inset 0 1px 0 rgba(255,255,255,.05);
}
.setting-card input[type="range"]{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  min-height:auto;
  accent-color:var(--cyan);
}
.setting-number-control{
  display:grid;
  gap:8px;
}
.setting-number-line{
  display:grid;
  grid-template-columns:minmax(90px,130px) auto;
  gap:8px;
  align-items:center;
}
.setting-number-line span{
  color:var(--txt-3);
  font-size:12px;
}
.setting-card textarea{
  resize:vertical;
  font-family:var(--mono);
  line-height:1.4;
}
.switch-line{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--txt-2);
  font-size:13px;
  min-height:38px;
}
.setting-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.toggle-track{
  position:relative;
  width:44px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(154,163,196,.24);
  background:rgba(154,163,196,.12);
  flex:0 0 auto;
  transition:.18s ease;
}
.toggle-track i{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  top:2px;
  left:3px;
  background:rgba(154,163,196,.9);
  transition:.18s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.setting-toggle input:checked + .toggle-track{
  border-color:rgba(168,255,92,.45);
  background:rgba(168,255,92,.18);
}
.setting-toggle input:checked + .toggle-track i{
  left:21px;
  background:var(--lime);
}
.setting-toggle b{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--txt-2);
}
.setting-help,
.setting-unit{
  color:var(--txt-3);
  font-size:11px;
  line-height:1.45;
  margin-top:8px;
}