:root {
  color-scheme: dark;
  --bg: #050a0f;
  --bg-elevated: #071019;
  --surface: #0a121a;
  --surface-2: #0d1721;
  --surface-3: #111e29;
  --surface-hover: #13232f;
  --surface-active: #102a35;
  --line: rgba(140, 180, 198, .14);
  --line-strong: rgba(72, 211, 233, .28);
  --line-soft: rgba(140, 180, 198, .08);
  --text: #ecf7fa;
  --text-soft: #c6d8df;
  --muted: #7f96a4;
  --muted-2: #596f7c;
  --cyan: #45d7ea;
  --cyan-2: #18b7d2;
  --cyan-soft: rgba(69, 215, 234, .10);
  --teal: #2dd4bf;
  --green: #48e0a4;
  --green-soft: rgba(72, 224, 164, .11);
  --amber: #f2c364;
  --amber-soft: rgba(242, 195, 100, .11);
  --red: #ff687d;
  --red-soft: rgba(255, 104, 125, .11);
  --blue: #55a7ff;
  --violet: #9787ff;
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, .16);
  --shadow-md: 0 20px 58px rgba(0, 0, 0, .24);
  --glow-cyan: 0 0 0 1px rgba(69, 215, 234, .05), 0 0 32px rgba(69, 215, 234, .07);
  --sidebar: 252px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  background:
    radial-gradient(circle at 78% -12%, rgba(30, 138, 164, .12), transparent 35%),
    radial-gradient(circle at 18% 90%, rgba(41, 102, 146, .06), transparent 30%),
    var(--bg);
  color: var(--text);
  font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(69, 215, 234, .24); color: var(--text); }
* { scrollbar-width: thin; scrollbar-color: #263b47 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #263b47; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 16px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(14, 25, 34, .96), rgba(6, 12, 18, .98)),
    var(--surface);
  box-shadow: 18px 0 55px rgba(0, 0, 0, .13);
  z-index: 30;
}
.nav-unavailable { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--muted-2); cursor: not-allowed; }
.nav-unavailable small { margin-left: auto; font-size: 10px; white-space: nowrap; }
.brand-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 20px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.logo, .login-mark {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103, 226, 242, .35);
  border-radius: 12px;
  background: linear-gradient(145deg, #0e4958, #13283b 62%, #172b4b);
  color: #dfffff;
  font-weight: 900;
  letter-spacing: -.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 26px rgba(38, 203, 226, .13);
}
.logo::after, .login-mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 2px solid #0c151d;
  background: var(--green);
  box-shadow: 0 0 10px rgba(72, 224, 164, .65);
}
.brand { color: var(--text); font-size: 15px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.sub { margin-top: 4px; color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.sidebar nav { display: grid; gap: 4px; padding: 8px 0; overflow-y: auto; }
.sidebar nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 10px 11px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #8ea4b1;
  text-decoration: none;
  font-size: 12px;
  font-weight: 620;
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.sidebar nav a span {
  width: 21px;
  display: inline-grid;
  place-items: center;
  color: #607d8b;
  font-size: 16px;
  transition: color .16s var(--ease), filter .16s var(--ease);
}
.sidebar nav a:hover { color: #d8e9ee; background: rgba(92, 150, 173, .07); border-color: rgba(127, 169, 185, .09); transform: translateX(1px); }
.sidebar nav a:hover span { color: var(--cyan); }
.sidebar nav a.active {
  color: #eafcff;
  border-color: rgba(69, 215, 234, .19);
  background: linear-gradient(90deg, rgba(27, 165, 190, .17), rgba(30, 78, 98, .08));
  box-shadow: inset 3px 0 0 var(--cyan), 0 8px 22px rgba(0, 0, 0, .10);
}
.sidebar nav a.active span { color: var(--cyan); filter: drop-shadow(0 0 7px rgba(69, 215, 234, .38)); }
.side-status {
  margin-top: auto;
  padding: 13px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(17, 32, 42, .76), rgba(10, 18, 25, .80));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.side-status > div { display: flex; align-items: center; gap: 8px; }
.side-status b { font-size: 10px; letter-spacing: .08em; color: #cde4e9; }
.side-status small { display: block; margin-top: 6px; color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.dot, .live-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(242, 195, 100, .08), 0 0 10px rgba(242, 195, 100, .36);
}
.dot.ok, .live-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(72,224,164,.08), 0 0 12px rgba(72,224,164,.55); }
.dot.bad { background: var(--red); box-shadow: 0 0 0 3px rgba(255,104,125,.08), 0 0 12px rgba(255,104,125,.48); }

/* Main / headers */
main { min-width: 0; padding: 25px 30px 52px; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  margin: 0 auto 20px;
}
.topbar h1 { margin: 2px 0 0; color: #f1fbfd; font-size: clamp(24px, 2.1vw, 31px); line-height: 1.12; letter-spacing: -.035em; font-weight: 780; }
.topbar p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.eyebrow { display: block; color: var(--cyan); font-size: 9px; line-height: 1.25; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.domain, .userbox {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(12, 22, 30, .78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.domain { display: grid; gap: 1px; padding: 7px 12px; }
.domain span { color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .10em; }
.domain b { color: var(--text-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.userbox { padding: 5px 5px 5px 11px; }
.userbox b { color: #d8eaef; font-size: 10px; }
.userbox small { color: var(--muted-2); font-size: 9px; }

button, .button-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(132, 169, 186, .18);
  border-radius: 9px;
  outline: none;
  background: linear-gradient(180deg, rgba(22, 36, 47, .95), rgba(13, 23, 31, .95));
  color: #b9cdd5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  cursor: pointer;
  text-decoration: none;
  font-size: 11px;
  font-weight: 690;
  transition: transform .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease);
}
button:hover, .button-link:hover { transform: translateY(-1px); border-color: rgba(69, 215, 234, .32); background: linear-gradient(180deg, rgba(27, 48, 62, .98), rgba(14, 28, 37, .98)); color: #e7fbff; }
button:focus-visible, .button-link:focus-visible, input:focus-visible, select:focus-visible { box-shadow: 0 0 0 3px rgba(69, 215, 234, .12); border-color: rgba(69, 215, 234, .55); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.primary { border-color: rgba(69, 215, 234, .55); background: linear-gradient(135deg, #119bb4, #167087); color: #f2fdff; box-shadow: 0 8px 24px rgba(17, 155, 180, .14); }
.primary:hover { border-color: #59e0f0; background: linear-gradient(135deg, #18abc5, #197b92); color: #fff; }
.ghost { background: transparent !important; }
.danger, .actions .danger { border-color: rgba(255,104,125,.24) !important; background: rgba(255,104,125,.055) !important; color: #ff94a3 !important; }
.danger:hover, .actions .danger:hover { border-color: rgba(255,104,125,.48) !important; background: rgba(255,104,125,.11) !important; }

.error { display: none; margin: 0 0 14px; padding: 11px 13px; border: 1px solid rgba(255,104,125,.28); border-radius: 10px; background: rgba(93, 19, 33, .22); color: #ff9cab; white-space: pre-wrap; font-size: 11px; }
.error:not(:empty) { display: block; }

/* Shared surface system */
.panel, .metric-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 24, 33, .94), rgba(8, 16, 23, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022), var(--shadow-sm);
}
.panel { margin-bottom: 16px; padding: 19px; border-radius: var(--radius-lg); }
.panel.compact { padding-bottom: 15px; }
.cards { display: grid; gap: 12px; margin-bottom: 16px; }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card {
  position: relative;
  min-width: 0;
  padding: 16px 17px;
  overflow: hidden;
  border-radius: 15px;
  transition: border-color .16s var(--ease), transform .16s var(--ease), background .16s var(--ease);
}
.metric-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -55px;
  top: -55px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69,215,234,.07), transparent 65%);
  pointer-events: none;
}
.metric-card:hover { transform: translateY(-1px); border-color: rgba(69,215,234,.20); background: linear-gradient(180deg, rgba(15, 28, 38, .98), rgba(9, 18, 25, .98)); }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; color: #718996; font-size: 9px; font-weight: 800; letter-spacing: .075em; }
.metric-head i { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(69,215,234,.13); border-radius: 9px; background: var(--cyan-soft); color: var(--cyan); font-style: normal; font-size: 13px; }
.metric-card > strong { display: block; margin: 8px 0 3px; color: #f0fbfd; font-size: 25px; line-height: 1.1; letter-spacing: -.03em; font-weight: 760; font-variant-numeric: tabular-nums; }
.metric-card small { color: var(--muted); font-size: 10px; }
.dual-rate { display: grid !important; grid-template-columns: 1fr; gap: 2px; font-size: 13px !important; letter-spacing: 0 !important; }
.dual-rate span { color: var(--muted); }
.dual-rate b { color: #eaf7fa; font-variant-numeric: tabular-nums; }

.hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 15px 17px;
  overflow: hidden;
  border: 1px solid rgba(69, 215, 234, .18);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(18, 91, 108, .14), rgba(10, 20, 29, .92) 55%, rgba(39, 63, 96, .09));
  box-shadow: var(--glow-cyan);
}
.hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--cyan), var(--teal)); box-shadow: 0 0 16px rgba(69,215,234,.45); }
.hero b { color: #def4f8; font-size: 12px; }
.hero p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.pill, .badge, .map-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(69,215,234,.20);
  border-radius: 999px;
  background: rgba(69,215,234,.07);
  color: #78dcea;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .035em;
}
.pill.green, .badge { border-color: rgba(72,224,164,.22); background: var(--green-soft); color: #75e7b7; }
.badge.off { border-color: rgba(140,180,198,.14); background: rgba(140,180,198,.05); color: #8599a4; }
.badge.expired { border-color: rgba(255,104,125,.22); background: var(--red-soft); color: #ff93a2; }

.section-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.section-title h2 { margin: 0; color: #e9f6f9; font-size: 15px; line-height: 1.25; letter-spacing: -.018em; font-weight: 730; }
.section-title p { max-width: 830px; margin: 5px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.55; }
.status-strip { display: flex; align-items: center; justify-content: flex-end; gap: 9px; color: var(--muted); font-size: 10px; flex-wrap: wrap; }

/* Network alert */
.network-alert { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.network-alert[hidden] { display: none; }
.network-alert p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.network-alert-value { min-width: 145px; text-align: right; }
.network-alert-value strong { display: block; color: #eaf7fa; font-size: 18px; font-variant-numeric: tabular-nums; }
.network-alert-value small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.network-alert.warning { border-color: rgba(242,195,100,.27); background: rgba(78,56,15,.18); }
.network-alert.warning strong { color: var(--amber); }
.network-alert.critical, .network-alert.saturated { border-color: rgba(255,104,125,.32); background: rgba(84,22,34,.20); box-shadow: 0 0 30px rgba(255,104,125,.05); }
.network-alert.critical strong, .network-alert.saturated strong { color: var(--red); }

/* Global Traffic Intelligence */
.geo-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(69, 215, 234, .20);
  background:
    radial-gradient(circle at 48% 44%, rgba(32, 132, 155, .11), transparent 34%),
    linear-gradient(180deg, rgba(10, 24, 33, .98), rgba(5, 13, 20, .99));
  box-shadow: var(--glow-cyan), var(--shadow-md);
}
.geo-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image: linear-gradient(rgba(86,164,184,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(86,164,184,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 82%);
}
.geo-panel > * { position: relative; z-index: 1; }
.geo-head { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; flex-wrap: wrap; }
.map-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.map-badge.ok { border-color: rgba(72,224,164,.24); background: rgba(72,224,164,.08); color: #68dfae; }
.map-badge.warn { border-color: rgba(242,195,100,.24); background: rgba(242,195,100,.08); color: #e9bd66; }
.geo-layout { display: grid; grid-template-columns: minmax(0, 2.35fr) minmax(260px, .72fr); gap: 13px; }
.map-shell {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(84, 177, 197, .16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgba(31, 143, 165, .13), transparent 26%),
    radial-gradient(circle at 50% 50%, #0b1b26, #060e15 64%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.25);
}
.topology-backdrop { position: absolute; inset: 0; pointer-events: none; opacity: .72; background: radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(66, 176, 198, .035) 22.2% 22.45%, transparent 22.7% 39%, rgba(66, 176, 198, .035) 39.2% 39.45%, transparent 39.7%); }
.traffic-topology, .world-map { display: block; width: 100%; height: 470px; }
.topology-grid { stroke: rgba(81, 151, 169, .085); stroke-width: 1; fill: none; }
.topology-ring { fill: none; stroke: rgba(67, 174, 196, .12); stroke-width: 1; stroke-dasharray: 3 8; }
.topology-link {
  fill: none;
  stroke: url(#routeGradient);
  stroke-linecap: round;
  stroke-dasharray: 8 13;
  opacity: .48;
  animation: topologyFlow 3s linear infinite;
  animation-delay: var(--delay);
  filter: url(#softGlow);
}
.topology-link.hot { opacity: .82; }
.topology-source-halo { fill: rgba(69,215,234,.05); stroke: rgba(69,215,234,.20); stroke-width: 1; }
.topology-source { fill: #63dfef; stroke: #c8f8ff; stroke-width: 1; filter: url(#nodeGlow); }
.topology-label { fill: #a9c4ce; font-size: 10px; font-weight: 700; letter-spacing: .015em; paint-order: stroke; stroke: #061018; stroke-width: 3px; }
.topology-sub { fill: #617c8a; font-size: 8px; paint-order: stroke; stroke: #061018; stroke-width: 2px; }
.gateway-orbit { fill: none; stroke: rgba(72,224,164,.16); stroke-width: 1; stroke-dasharray: 4 8; animation: orbitSpin 18s linear infinite; transform-origin: 500px 280px; }
.gateway-halo { fill: rgba(72,224,164,.055); stroke: rgba(72,224,164,.18); stroke-width: 1; transform-origin: 500px 280px; animation: gatewayPulse 2.8s ease-out infinite; }
.gateway-core { fill: url(#gatewayCore); stroke: #bdffe3; stroke-width: 1.5; filter: url(#gatewayGlow); }
.gateway-marker { fill: #54e5ad; stroke: #e1fff1; stroke-width: 1.5; }
.gateway-label { fill: #e4fff2; font-size: 14px; font-weight: 820; letter-spacing: -.01em; text-anchor: middle; paint-order: stroke; stroke: #061018; stroke-width: 4px; }
.gateway-sub { fill: #76aa9a; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; }
.topology-kpis { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; gap: 7px; flex-wrap: wrap; max-width: calc(100% - 24px); }
.topology-kpi { min-width: 92px; padding: 7px 9px; border: 1px solid rgba(103,176,193,.12); border-radius: 9px; background: rgba(5,13,20,.68); backdrop-filter: blur(8px); }
.topology-kpi span { display: block; color: #5f7886; font-size: 7.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.topology-kpi b { display: block; margin-top: 1px; color: #d7edf1; font-size: 11px; font-variant-numeric: tabular-nums; }
.map-legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 12px; max-width: calc(100% - 24px); padding: 7px 9px; border: 1px solid rgba(103,176,193,.10); border-radius: 8px; background: rgba(5,13,20,.66); color: #617b89; font-size: 8px; backdrop-filter: blur(7px); }
.legend-dot { width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; }
.legend-dot.source { background: var(--cyan); box-shadow: 0 0 8px rgba(69,215,234,.7); }
.legend-dot.gateway { background: var(--green); box-shadow: 0 0 8px rgba(72,224,164,.7); }
.map-note { margin: 8px 4px 0; color: #627b88; font-size: 9px; line-height: 1.55; }
.geo-ranking { overflow: hidden; min-height: 470px; border: 1px solid rgba(103,176,193,.13); border-radius: 16px; background: rgba(7, 16, 23, .78); }
.geo-ranking-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px; border-bottom: 1px solid var(--line-soft); background: rgba(15,29,39,.56); }
.geo-ranking-title b { color: #dbecef; font-size: 11px; }
.geo-ranking-title span { color: var(--muted-2); font-size: 8px; }
.geo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); transition: background .14s var(--ease); }
.geo-row:hover { background: rgba(69,215,234,.035); }
.geo-row:last-child { border-bottom: 0; }
.geo-row > div { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 1px 7px; }
.geo-row > div:last-child { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.geo-row b { max-width: 145px; overflow: hidden; color: #cce0e6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.geo-row small { color: #607987; font-size: 8px; }
.country-code { grid-row: 1 / 3; width: 29px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(69,215,234,.16); border-radius: 7px; background: rgba(69,215,234,.06); color: #70dbe8; font-size: 8px; font-weight: 850; }
.geo-empty { padding: 22px 13px; color: var(--muted); font-size: 10px; line-height: 1.55; }
@keyframes topologyFlow { to { stroke-dashoffset: -42; } }
@keyframes gatewayPulse { 0%,100% { opacity: .8; transform: scale(.88); } 50% { opacity: .22; transform: scale(1.16); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* Attack / runtime cards */
.attack-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.attack-card { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(13, 24, 33, .66); }
.attack-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-height: 30px; }
.attack-title b { color: #cfe1e6; font-size: 10px; }
.attack-title span { padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; color: #708795; font-size: 8px; white-space: nowrap; }
.attack-card strong { display: block; margin: 7px 0; font-size: 19px; font-variant-numeric: tabular-nums; }
.attack-card p { margin: 0; color: #667f8c; font-size: 9px; line-height: 1.5; }
.green-num { color: var(--green); } .amber-num { color: var(--amber); } .blue-num { color: var(--blue); } .violet-num { color: var(--violet); } .red-num { color: var(--red); }
.runtime-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.runtime-grid > div { min-width: 0; display: grid; align-content: center; gap: 3px; min-height: 72px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(180deg, rgba(17,31,41,.82), rgba(10,20,28,.82)); }
.runtime-grid span { color: #687f8d; font-size: 8px; font-weight: 780; letter-spacing: .065em; text-transform: uppercase; }
.runtime-grid b { overflow: hidden; color: #d9e9ed; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.runtime-grid > div small { color: #596f7b; font-size: 8.5px; }
.network-analyzer .analyzer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.network-analyzer .runtime-grid > div { min-height: 78px; }
.v3-summary { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 12px; }
.v3-visibility { border-color: rgba(79, 164, 188, .17); }
.v3-visibility .runtime-grid > div b { font-size: 14px; }
.pill.net-normal { border-color: rgba(72,224,164,.22); background: var(--green-soft); color: #75e7b7; }
.pill.net-warning { border-color: rgba(242,195,100,.22); background: var(--amber-soft); color: var(--amber); }
.pill.net-critical, .pill.net-saturated { border-color: rgba(255,104,125,.24); background: var(--red-soft); color: #ff8fa0; }
.sig-ok { color: var(--green); } .sig-warn { color: var(--amber); } .sig-bad { color: var(--red); }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
.form-grid label, .policy-editor label, .edit-grid label, .rule-form label, .channel-form label, .live-controls label { color: #78909e; font-size: 9px; font-weight: 680; }
input, select, textarea {
  width: 100%;
  min-height: 37px;
  display: block;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(137, 175, 192, .17);
  border-radius: 9px;
  outline: none;
  background: #09131b;
  color: #d9e8ec;
  caret-color: var(--cyan);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
input::placeholder, textarea::placeholder { color: #465d69; }
input:hover, select:hover, textarea:hover { border-color: rgba(137,175,192,.28); }
input:focus, select:focus, textarea:focus { border-color: rgba(69,215,234,.46); background: #0a1720; box-shadow: 0 0 0 3px rgba(69,215,234,.08); }
select { color-scheme: dark; }
.form-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.policy-editor { display: grid; grid-template-columns: 1.25fr repeat(4,minmax(95px,.7fr)) 1fr 1fr auto; gap: 9px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.policy-title { align-self: center; }
.policy-title span { display: block; margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.check { display: flex !important; align-items: center; gap: 7px; }
.check input { width: 14px !important; height: 14px; min-height: 0; margin: 0 !important; accent-color: var(--cyan-2); }

/* Tables */
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; min-width: 920px; border-collapse: collapse; }
th, td { padding: 10px 9px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
th { color: #617986; font-size: 8px; font-weight: 820; letter-spacing: .075em; text-transform: uppercase; }
td { color: #a9bec7; font-size: 10px; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(69,215,234,.023); }
td code { color: #82dce8; font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.num-cell, .traffic-cell, .rate-live { font-variant-numeric: tabular-nums; }
.table-wrap .empty-cell { height: 120px; color: #5e7683; text-align: center; }

/* Managed servers as card-like table rows */
.managed-wrap { overflow-x: auto; contain: layout paint; }
.managed-table { min-width: 1250px; table-layout: fixed; border-collapse: separate; border-spacing: 0 7px; }
.managed-table thead th { border-bottom: 0; padding-top: 2px; padding-bottom: 4px; }
.managed-table tbody tr { height: 61px; background: transparent; }
.managed-table tbody td { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(12, 23, 31, .78); }
.managed-table tbody td:first-child { border-left: 1px solid var(--line); border-radius: 11px 0 0 11px; }
.managed-table tbody td:last-child { border-right: 1px solid var(--line); border-radius: 0 11px 11px 0; }
.managed-table tbody tr:hover td { border-color: rgba(69,215,234,.18); background: rgba(14, 29, 39, .92); }
.managed-table .c-server{width:120px}.managed-table .c-public{width:180px}.managed-table .c-backend{width:160px}.managed-table .c-state{width:86px}.managed-table .c-conn{width:105px}.managed-table .c-traffic{width:190px}.managed-table .c-limit{width:84px}.managed-table .c-lease{width:92px}.managed-table .c-actions{width:330px}
.managed-table td,.managed-table th{overflow:hidden;text-overflow:ellipsis}.server-cell b,.server-cell small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.server-cell b{color:#dbe9ed;font-size:11px}.server-cell small{margin-top:2px;color:#536a77;font-size:8px}.mono-endpoint{white-space:nowrap;color:#9db5be;font-variant-numeric:tabular-nums}.traffic-cell b,.traffic-cell small{display:block;white-space:nowrap}.traffic-cell b{color:#d4e7eb}.traffic-cell small{margin-top:2px;color:#617986}.limit-chip{display:inline-flex;min-width:46px;justify-content:center;padding:4px 7px;border:1px solid rgba(69,215,234,.15);border-radius:999px;background:rgba(69,215,234,.055);color:#9fdde5;font-size:9px;font-variant-numeric:tabular-nums}.actions{display:flex;gap:5px;flex-wrap:wrap}.actions button{min-height:27px;padding:5px 7px;font-size:8.5px;border-radius:7px}.nowrap-actions{flex-wrap:nowrap;white-space:nowrap}.inspect-btn{border-color:rgba(69,215,234,.24)!important;color:#79dbe8!important;background:rgba(69,215,234,.065)!important}.edit-btn{border-color:rgba(85,167,255,.22)!important;color:#93c8ff!important;background:rgba(85,167,255,.055)!important}

/* Embedded connection control */
.connection-panel { overflow: hidden; }
.conn-live-head { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.connection-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 12px; min-height: 420px; }
.proxy-selector, .proxy-picker { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(6, 15, 22, .68); }
.proxy-selector-title { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); color: #637d8b; font-size: 8px; font-weight: 820; letter-spacing: .08em; }
.proxy-control-list { display: flex; flex-direction: column; gap: 5px; max-height: 550px; padding: 7px; overflow: auto; }
.proxy-control-item, .proxy-server-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #a9bec7;
  text-align: left;
  transition: background .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease);
}
.proxy-control-item:hover, .proxy-server-card:hover { transform: none; border-color: rgba(108,165,184,.13); background: rgba(19, 36, 47, .68); }
.proxy-control-item.active, .proxy-server-card.active { border-color: rgba(69,215,234,.26); background: linear-gradient(90deg, rgba(17,116,136,.17), rgba(13,31,41,.86)); box-shadow: inset 3px 0 0 var(--cyan); }
.proxy-control-item > span:first-child { min-width: 0; }
.proxy-control-item b, .proxy-control-item small, .proxy-card-main b, .proxy-card-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proxy-control-item b, .proxy-card-main b { color: #cfe2e7; font-size: 10px; }
.proxy-control-item small, .proxy-card-main small { margin-top: 2px; color: #5f7784; font-size: 8px; }
.proxy-control-meta, .proxy-card-meta { flex: 0 0 auto; text-align: right; }
.proxy-control-meta b, .proxy-card-meta b { display: block; color: #dff2f5; font-size: 12px; font-variant-numeric: tabular-nums; }
.proxy-control-meta small, .proxy-card-meta small { color: #607987; font-size: 8px; }
.proxy-control-empty, .proxy-empty { padding: 20px 12px; color: #617987; font-size: 10px; text-align: center; }
.connection-detail { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(6, 15, 22, .67); }
.connection-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 15px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(15,28,38,.72), rgba(8,18,25,.45)); }
.connection-detail-head h2, .connection-detail-head h3 { margin: 2px 0 3px; color: #e3f1f4; font-size: 16px; letter-spacing: -.02em; }
.connection-detail-head p { margin: 0; color: #667e8b; font-size: 9px; }
.connection-summary { display: grid; grid-template-columns: repeat(3, minmax(82px,1fr)); gap: 7px; }
.connection-summary > div { min-width: 84px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(12, 25, 34, .77); }
.connection-summary span { display: block; color: #5f7886; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.connection-summary b { display: block; margin-top: 2px; color: #e2f2f5; font-size: 13px; font-variant-numeric: tabular-nums; }
.ip-detail-wrap { max-height: 500px; overflow: auto; }
.ip-detail-table { min-width: 760px; table-layout: fixed; }
.ip-detail-table thead th, .connection-table thead th { position: sticky; top: 0; z-index: 4; background: rgba(7, 16, 23, .96); backdrop-filter: blur(8px); }
.ip-detail-table td { height: 45px; }
.rate-live { white-space: nowrap; color: #c9e1e6; font-weight: 680; }

/* Dedicated connection page */
.connections-page .connection-summary.cards { margin-bottom: 14px; }
.connections-page > .connection-layout { grid-template-columns: minmax(280px, 340px) minmax(0,1fr); min-height: 620px; }
.connections-page .proxy-picker { padding: 0; }
.connections-page .proxy-picker .section-title { margin: 0; padding: 14px 14px 10px; border-bottom: 1px solid var(--line-soft); }
.proxy-list { display: grid; gap: 6px; max-height: 650px; padding: 8px; overflow: auto; }
.proxy-server-card { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; min-height: 60px; }
.proxy-state { width: 7px; height: 7px; border-radius: 50%; background: #536671; box-shadow: 0 0 0 3px rgba(83,102,113,.08); }
.proxy-state.on { background: var(--green); box-shadow: 0 0 0 3px rgba(72,224,164,.07), 0 0 9px rgba(72,224,164,.45); }
.connections-page .connection-detail { padding: 0; }
.live-controls { display: flex; align-items: center; gap: 11px; }
.live-controls label { min-width: 118px; }
.live-controls select { min-height: 31px; margin-top: 2px; padding: 5px 8px; }
.live-indicator { display: inline-flex; align-items: center; gap: 6px; color: #75e7b7; font-size: 8px; font-weight: 830; letter-spacing: .08em; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(72,224,164,.65); animation: livePulse 1.4s ease-in-out infinite; }
.connection-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); color: #5f7683; font-size: 8px; }
.search-box { min-width: 210px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: #08131b; }
.search-box > span { color: #5e7885; }
.search-box input { min-height: 32px; margin: 0; padding: 5px 0; border: 0; background: transparent; box-shadow: none !important; }
.search-box button { margin-right: -4px; }
.connection-table-wrap { max-height: 580px; }
.connection-table { min-width: 900px; }
.connection-table td { height: 47px; }
.ip-main { display: flex; align-items: center; gap: 8px; }
.ip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(69,215,234,.55); }

/* Live runtime */
.traffic-live { display: flex; justify-content: flex-end; align-items: center; gap: 7px; margin-top: 9px; color: #607987; font-size: 8px; }
.live-dot { animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .35; transform: scale(.82); } }
#trafficIn,#trafficOut,#trafficInTotal,#trafficOutTotal,[id^="route-inrate-"],[id^="route-outrate-"],[id^="route-inwin-"],[id^="route-outwin-"] { font-variant-numeric: tabular-nums; will-change: contents; }
.ip-route-list { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ip-route-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(15,28,38,.68); white-space: nowrap; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(1,5,9,.76); backdrop-filter: blur(10px); }
.modal.show { display: flex; }
.modal-card { width: min(800px, 96vw); overflow: hidden; border: 1px solid rgba(114,158,176,.21); border-radius: 18px; background: #09131a; box-shadow: 0 30px 100px rgba(0,0,0,.58); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(135deg, rgba(17,43,54,.55), rgba(8,18,25,.9)); }
.modal-head h3 { margin: 2px 0 4px; color: #edf8fa; font-size: 20px; letter-spacing: -.025em; }
.modal-head p { margin: 0; color: #627b88; font-size: 10px; }
.modal-x { width: 34px; height: 34px; padding: 0; font-size: 20px; }
.edit-section { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.edit-section-title { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.edit-section-title b { color: #dbecef; font-size: 11px; }
.edit-section-title span { color: #607986; font-size: 8px; }
.edit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.edit-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.edit-grid .wide { grid-column: span 2; }
.edit-grid small { color: #526a77; font-size: 8px; }
.edit-error { min-height: 16px; padding: 7px 20px 0; color: #ff8999; font-size: 9px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 17px; }

/* Ops page shared styling */
.node-meta-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -7px 0 13px; padding: 8px 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(10,20,28,.58); color: var(--muted); font-size: 9px; }
.node-meta-bar b { color: #bcd2d9; }
.alert-stack { display: grid; gap: 8px; margin-bottom: 12px; }
.attack-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 12px; }
.attack-summary-grid article { min-height: 92px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(12,24,33,.72); }
.attack-summary-grid small { color: #607987; font-size: 8px; font-weight: 800; letter-spacing: .07em; }
.attack-summary-grid strong { overflow: hidden; color: #dcecef; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.attack-summary-grid span { color: #647d8a; font-size: 8.5px; }
.attack-state.safe { border-color: rgba(72,224,164,.19); background: rgba(72,224,164,.045); }
.attack-state.safe strong { color: var(--green); }
.timeline-chart { width: 100%; min-height: 240px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(4,12,18,.5); }
.chart-legend { display: flex; gap: 12px; margin: -5px 0 9px; color: #617987; font-size: 8px; }
.rule-form, .channel-form { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; align-items: end; margin-bottom: 13px; }
.span-2 { grid-column: span 2; }
.event-filters, .log-controls, .report-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.event-filters input, .event-filters select, .log-controls input, .log-controls select { width: auto; min-width: 120px; margin: 0; }
.ip-detail-empty { min-height: 90px; display: grid; place-items: center; border: 1px dashed rgba(128,169,185,.15); border-radius: 10px; color: #5f7683; font-size: 10px; }
.channel-list { display: grid; gap: 8px; }
.log-view { max-height: 520px; overflow: auto; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #040a0f; color: #9fc2ca; font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Login */
.login-body { display: block; min-height: 100vh; background: radial-gradient(circle at 50% 20%, rgba(27,141,165,.14), transparent 35%), #050a0f; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(410px, 100%); padding: 30px; border: 1px solid rgba(111,164,183,.18); border-radius: 19px; background: linear-gradient(180deg, rgba(14,27,36,.97), rgba(7,15,21,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.42), var(--glow-cyan); }
.login-mark { width: 46px; height: 46px; }
.login-card h1 { margin: 18px 0 4px; color: #eff9fb; font-size: 24px; letter-spacing: -.03em; }
.login-card > p { margin: 0 0 22px; color: var(--muted); font-size: 11px; }
.login-card form { display: grid; gap: 12px; }
.login-card label { color: #8298a5; font-size: 10px; font-weight: 680; }
.login-btn { width: 100%; margin-top: 2px; }
.login-error { min-height: 17px; color: #ff8fa0; font-size: 9px; }
.login-card small { display: block; margin-top: 15px; color: #5d7481; font-size: 9px; line-height: 1.5; }

/* Responsive */
@media (max-width: 1450px) {
  .policy-editor { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .policy-title { grid-column: 1 / -1; }
  .attack-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1250px) {
  :root { --sidebar: 230px; }
  main { padding: 22px 22px 46px; }
  .cards.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .runtime-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .v3-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .geo-layout { grid-template-columns: 1fr; }
  .geo-ranking { min-height: auto; }
  .geo-ranking #geoList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .geo-row:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .attack-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .attack-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rule-form, .channel-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1080px) {
  .connection-layout, .connections-page > .connection-layout { grid-template-columns: 1fr; }
  .proxy-control-list, .proxy-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; }
  .connection-detail-head { align-items: flex-start; flex-direction: column; }
  .connection-summary { width: 100%; }
  .network-analyzer .analyzer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  main { padding: 16px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; justify-content: flex-start; }
  .form-grid, .policy-editor, .edit-grid.three { grid-template-columns: 1fr; }
  .edit-grid .wide { grid-column: auto; }
  .runtime-grid, .v3-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rule-form, .channel-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .cards.four, .attack-grid, .runtime-grid, .v3-summary, .network-analyzer .analyzer-grid, .attack-summary-grid { grid-template-columns: 1fr; }
  .proxy-control-list, .proxy-list, .geo-ranking #geoList { grid-template-columns: 1fr; }
  .geo-row:nth-child(odd) { border-right: 0; }
  .connection-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .section-title { align-items: flex-start; flex-direction: column; }
  .geo-head { justify-content: flex-start; }
  .traffic-topology, .world-map { height: 400px; }
  .map-shell { min-height: 400px; }
  .topology-kpis { right: 10px; }
  .topology-kpi { min-width: 78px; }
  .rule-form, .channel-form { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}