:root {
  --bg: #ececef;
  --bg-2: #f5f5f7;
  --ink: #23232a;
  --ink-2: #4f505b;
  --ink-3: #6b6c78;
  --pink: #f6a6c1;
  --pink-strong: #ee7fa5;
  --pink-deep: #d95f8a;
  --pink-soft: #ffe5ee;
  --pink-mist: rgba(238, 127, 165, 0.14);
  --good: #3fb98a;
  --warn: #e5a03a;
  --bad: #dd6679;
  --line: rgba(255, 255, 255, 0.78);
  --hairline: rgba(35, 35, 50, 0.08);
  --hairline-2: rgba(35, 35, 50, 0.13);
  --glass-tint: rgba(255, 255, 255, 0.36);
  --glass-strong: rgba(250, 250, 253, 0.9);
  --shadow: 0 24px 60px rgba(78, 78, 105, 0.16), 0 2px 8px rgba(78, 78, 105, 0.06);
  --shadow-soft: 0 10px 30px rgba(78, 78, 105, 0.1);
  --radius: 26px;
  --radius-sm: 16px;
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Cascadia Code", "SF Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: rgba(238, 127, 165, 0.28); }

/* ---------------------------------------------------------------- ambient */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(1100px 780px at 8% -8%, #f7eef2 0%, transparent 58%),
    radial-gradient(900px 700px at 96% 4%, #e6e7ee 0%, transparent 55%),
    radial-gradient(1000px 800px at 48% 112%, #f3e8ed 0%, transparent 62%),
    var(--bg);
}
.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.68;
  will-change: transform;
}
.blob-a {
  width: 44vw; height: 44vw; left: -10vw; top: -16vw;
  background: radial-gradient(circle at 40% 40%, #ffb7d0, transparent 68%);
  animation: drift-a 28s ease-in-out infinite alternate;
}
.blob-b {
  width: 38vw; height: 38vw; right: -8vw; top: 4vh;
  background: radial-gradient(circle at 60% 40%, #cfd2df, transparent 68%);
  animation: drift-b 34s ease-in-out infinite alternate;
}
.blob-c {
  width: 50vw; height: 38vw; left: 30vw; bottom: -22vw;
  background: radial-gradient(circle at 50% 50%, #ffc9db, transparent 66%);
  opacity: 0.5;
  animation: drift-c 40s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(5vw, 4vh, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-4vw, 6vh, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(3vw, -5vh, 0) scale(1.05); } }
.grain {
  position: absolute; inset: 0; opacity: 0.025; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.lg-defs, .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- glass */
.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(150% 110% at 8% -12%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 55%),
    radial-gradient(120% 90% at 100% 112%, rgba(255, 187, 211, 0.24), rgba(255, 255, 255, 0) 58%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 52%, rgba(255, 240, 246, 0.3)),
    rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 46px rgba(255, 255, 255, 0.16),
    0 26px 60px rgba(78, 78, 105, 0.14),
    0 6px 18px rgba(217, 95, 138, 0.07);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms, border-color 260ms;
}
.glass-backdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(22px) saturate(200%) brightness(1.03);
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(1.03);
}
.glass-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  padding: 7px;
  pointer-events: none;
  opacity: 0.85;
  backdrop-filter: blur(1.5px) saturate(230%) brightness(1.14);
  -webkit-backdrop-filter: blur(1.5px) saturate(230%) brightness(1.14);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.55), inset 0 0 2px rgba(255, 255, 255, 0.9);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.glass-noise {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.9;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 174, 202, 0.38) 30%,
    rgba(255, 255, 255, 0.2) 48%,
    rgba(178, 226, 255, 0.32) 64%,
    rgba(255, 255, 255, 0.96)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  mix-blend-mode: screen;
}
.glass > :not(.glass-shine):not(.glass-backdrop):not(.glass-edge):not(.glass-noise) { position: relative; z-index: 2; }
.glass-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.16) 38%,
    transparent 68%
  );
  mix-blend-mode: screen;
}
.glass:hover .glass-shine { opacity: 0.75; }
.glass-over {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
    var(--glass-tint);
}
body[data-solid="true"] .glass {
  background: var(--glass-strong);
  box-shadow: 0 14px 36px rgba(78, 78, 105, 0.13);
}
body[data-solid="true"] .glass-backdrop,
body[data-solid="true"] .glass-edge,
body[data-solid="true"] .glass-noise { display: none; }
body[data-solid="true"] .blob { animation: none; opacity: 0.28; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: sticky;
  top: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(1280px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: 10px 14px;
  border-radius: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.2px; }
.brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 13px;
  color: var(--pink-deep);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 214, 228, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(217, 95, 138, 0.18), inset 0 1px 0 #fff;
}
.brand-text { font-size: 16px; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 12px;
  color: var(--ink-2); font-size: 13.5px;
  transition: background 180ms, color 180ms;
}
.nav a .icon { width: 17px; height: 17px; }
.nav a:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.nav a.active { color: var(--pink-deep); background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  font-size: 12px; color: #2b8d6a;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(63, 185, 138, 0.25);
}
.live-pill i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--good);
  animation: pulse 2.4s ease-out infinite;
}
.live-pill.offline { color: var(--bad); border-color: rgba(221, 102, 121, 0.3); }
.live-pill.offline i { background: var(--bad); animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 185, 138, 0.4); }
  70% { box-shadow: 0 0 0 7px rgba(63, 185, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 185, 138, 0); }
}
.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 13px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(78, 78, 105, 0.06);
  transition: transform 160ms, background 160ms, color 160ms, box-shadow 160ms;
}
.icon-btn:hover { color: var(--pink-deep); background: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217, 95, 138, 0.14); }
.icon-btn:active { transform: translateY(0) scale(0.96); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 11px; }
.icon-btn.sm .icon { width: 15px; height: 15px; }
.icon-btn.pink {
  color: #fff;
  background: linear-gradient(145deg, #f7a9c4, #ee7fa5 55%, #e56f97);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 22px rgba(217, 95, 138, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.icon-btn.pink:hover { color: #fff; background: linear-gradient(145deg, #f9b6ce, #f085aa 55%, #e2688f); }

/* ---------------------------------------------------------------- layout */
.app { width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 90px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 6px 0 24px; }
.eyebrow { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.page-head h1 { margin: 8px 0 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 650; letter-spacing: -1.2px; }
.page-head p { margin: 9px 0 0; color: var(--ink-2); font-size: 13.5px; }
.head-actions { display: flex; align-items: center; gap: 9px; }
.muted { color: var(--ink-2); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- stats */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat { padding: 18px 18px 14px; border-radius: var(--radius-sm); min-height: 124px; overflow: hidden; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px;
  color: var(--pink-deep);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 220, 233, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(217, 95, 138, 0.12);
}
.stat-label { color: var(--ink-3); font-size: 12px; font-weight: 550; }
.stat-value { margin-top: 12px; font-size: clamp(26px, 2.5vw, 34px); font-weight: 650; letter-spacing: -1.1px; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 13px; color: var(--ink-3); font-weight: 550; margin-left: 4px; letter-spacing: 0; }
.stat-sub { margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }
.spark { display: block; width: 100%; height: 32px; margin-top: 7px; }

/* ---------------------------------------------------------------- node cards */
.nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.node-card { display: block; padding: 18px; border-radius: var(--radius); }
.node-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.98); }
.node-top { display: flex; align-items: center; gap: 9px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.on { background: var(--good); box-shadow: 0 0 0 4px rgba(63, 185, 138, 0.13); }
.node-name { font-weight: 650; font-size: 15.5px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-chip {
  margin-left: auto; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  color: #2b8d6a; background: rgba(63, 185, 138, 0.11); border: 1px solid rgba(63, 185, 138, 0.2);
}
.status-chip.off { color: var(--bad); background: rgba(221, 102, 121, 0.09); border-color: rgba(221, 102, 121, 0.2); }
.node-meta { margin-top: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 12px; }
.gauge { display: grid; justify-items: center; gap: 7px; }
.ring {
  --p: 0; --c: var(--pink-strong);
  width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(35, 35, 50, 0.075) 0);
  display: grid; place-items: center; position: relative;
  transition: background 420ms ease;
}
.ring::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(250, 244, 246, 0.88));
  box-shadow: inset 0 1px 0 #fff, 0 1px 4px rgba(78, 78, 105, 0.08);
}
.ring b { position: relative; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.gauge-label { font-size: 11px; color: var(--ink-3); font-weight: 550; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 10px; }
.mini { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border-radius: 11px; background: rgba(255, 255, 255, 0.46); border: 1px solid rgba(255, 255, 255, 0.7); }
.mini span { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.mini b { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.net-row { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--ink-2); }
.net-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { font-size: 10.5px; padding: 3px 8px; border-radius: 999px; color: var(--ink-2); background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.8); }
.empty { grid-column: 1 / -1; padding: 74px 20px; text-align: center; color: var(--ink-2); border-radius: var(--radius); }
.empty h3 { margin: 0 0 8px; font-weight: 650; color: var(--ink); }
.empty .icon { width: 34px; height: 34px; margin: 0 auto 14px; color: var(--pink-deep); }

/* ---------------------------------------------------------------- detail */
.detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.back-btn { width: 42px; height: 42px; border-radius: 14px; }
.title-wrap h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.8px; }
.title-wrap p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.range-label { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; padding: 5px; width: fit-content; border-radius: 16px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.7); }
.tab-btn {
  display: grid; place-items: center; width: 44px; height: 38px; border-radius: 12px;
  border: 0; background: transparent; color: var(--ink-3);
  transition: background 160ms, color 160ms, box-shadow 160ms;
}
.tab-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.65); }
.tab-btn.active { color: var(--pink-deep); background: #fff; box-shadow: 0 4px 12px rgba(217, 95, 138, 0.16); }
.detail-grid { display: grid; grid-template-columns: 330px 1fr; gap: 16px; align-items: start; }
.panel { padding: 18px; border-radius: var(--radius); }
.panel-title { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.panel-title .icon { color: var(--pink-deep); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; font-size: 12.5px; }
.kv span { color: var(--ink-3); }
.kv b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; word-break: break-all; }
.big-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 16px; }
.bm { padding: 11px 12px; border-radius: 13px; background: rgba(255, 255, 255, 0.46); border: 1px solid rgba(255, 255, 255, 0.72); }
.bm .l { font-size: 10.5px; color: var(--ink-3); }
.bm .v { margin-top: 4px; font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.chart-panel { padding: 15px 16px 8px; border-radius: var(--radius); margin-bottom: 14px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.chart-head h3 { margin: 0; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.legend { display: flex; gap: 13px; font-size: 11px; color: var(--ink-3); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; }
.chart { width: 100%; height: 190px; display: block; overflow: visible; }
.chart .grid-line { stroke: rgba(35, 35, 50, 0.08); stroke-width: 1; }
.chart .axis { fill: var(--ink-3); font-size: 10px; }
.chart path, .chart line { vector-effect: non-scaling-stroke; }
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 74px 1fr 52px; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-2); }
.bar-track { height: 8px; border-radius: 99px; background: rgba(35, 35, 50, 0.07); overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f7aac5, #ee7fa5); transition: width 380ms ease; }
.bar-fill.warn { background: linear-gradient(90deg, #f3c281, #e5a03a); }
.bar-fill.bad { background: linear-gradient(90deg, #ee93a1, #dd6679); }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.core-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.core { padding: 8px 9px; border-radius: 11px; background: rgba(255, 255, 255, 0.46); border: 1px solid rgba(255, 255, 255, 0.7); }
.core .top { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-bottom: 5px; }
.core b { font-size: 11px; font-weight: 650; color: var(--ink); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow: auto; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.34); }
table { width: 100%; border-collapse: collapse; font-size: 12.2px; }
th, td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
th { color: var(--ink-3); font-weight: 600; background: rgba(255, 255, 255, 0.45); font-size: 11px; letter-spacing: 0.02em; }
tr:last-child td { border-bottom: 0; }
td input { padding: 6px 8px; border-radius: 9px; font-size: 12px; }
td .icon-btn { margin-right: 3px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(35, 35, 50, 0.06); color: var(--ink-2); }
.pill.on { color: #2b8d6a; background: rgba(63, 185, 138, 0.11); }
.pill.off { color: var(--bad); background: rgba(221, 102, 121, 0.09); }
.table-wrap table { min-width: 760px; }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; font-size: 11.5px; color: var(--ink-3); font-weight: 550; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--ink); outline: none;
  box-shadow: inset 0 1px 2px rgba(35, 35, 50, 0.04);
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
}
input:focus, select:focus, textarea:focus { background: #fff; border-color: rgba(238, 127, 165, 0.6); box-shadow: 0 0 0 4px rgba(238, 127, 165, 0.14); }
input::placeholder { color: #b0b1bc; }
select[multiple] { min-height: 96px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.check input { width: 16px; height: 16px; accent-color: var(--pink-strong); box-shadow: none; }
.err { color: var(--bad); font-size: 12px; min-height: 15px; }
.hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.code-input { font-family: var(--mono); font-size: 22px; letter-spacing: 0.3em; text-align: center; }

/* ---------------------------------------------------------------- admin */
.tabs-admin { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; padding: 5px; width: fit-content; border-radius: 16px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.7); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.section-title h2 { margin: 0; font-size: 15px; font-weight: 650; }
.section-title p { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3); }
.token-box { padding: 13px; border-radius: 13px; background: rgba(255, 238, 244, 0.72); border: 1px dashed rgba(238, 127, 165, 0.5); word-break: break-all; font-family: var(--mono); font-size: 12px; }
.login-wrap { width: min(460px, 100%); margin: 40px auto 0; }
.login-card { padding: 26px; border-radius: var(--radius); }
.login-card h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.6px; }
.login-card p { margin: 0 0 20px; font-size: 12.5px; color: var(--ink-2); }
.qr-box { display: grid; place-items: center; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); }
.qr-box svg { width: 220px; height: 220px; }
.secret { font-family: var(--mono); font-size: 12px; word-break: break-all; padding: 10px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.85); }
.recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.recovery-grid code { font-family: var(--mono); font-size: 12px; padding: 7px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(255, 255, 255, 0.9); text-align: center; }

/* ---------------------------------------------------------------- modal / toast */
dialog.modal {
  width: min(600px, calc(100% - 30px));
  padding: 0;
  color: var(--ink);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
}
dialog.modal::backdrop { background: rgba(60, 60, 80, 0.24); backdrop-filter: blur(8px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.modal-body { padding: 16px 20px 22px; display: grid; gap: 14px; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 18px);
  z-index: 80; padding: 11px 16px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 40px rgba(78, 78, 105, 0.18); font-size: 12.5px; color: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity 200ms, transform 200ms;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: rgba(221, 102, 121, 0.4); color: var(--bad); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .topbar { top: 8px; margin-top: 8px; padding: 8px 10px; gap: 8px; border-radius: 18px; }
  .brand-text { display: none; }
  .nav a { padding: 8px 9px; }
  .nav a span { display: none; }
  .live-pill span { display: none; }
  .app { width: calc(100% - 22px); padding-top: 20px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .nodes { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px; min-height: 108px; }
  .stat-value { font-size: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .detail-head { gap: 10px; }
  .detail-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
  .chart { height: 160px; }
  .big-metrics { grid-template-columns: 1fr 1fr; }
  .bar-row { grid-template-columns: 62px 1fr 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .blob { animation: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: #3f4049; --ink-3: #62636e; --hairline: rgba(35, 35, 50, 0.18); }
}

/* liquid-glass-react layers */
.glass { overflow: hidden; }
.glass > .lg-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.18);
  background: linear-gradient(
    var(--lg-angle, 135deg),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, var(--lg-a, 0.12)) var(--lg-pos1, 33%),
    rgba(255, 255, 255, var(--lg-b, 0.4)) var(--lg-pos2, 66%),
    rgba(255, 255, 255, 0) 100%
  );
}
.lg-border.one { mix-blend-mode: screen; opacity: 0.2; }
.lg-border.two { mix-blend-mode: overlay; }
.glass > .lg-hover {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%);
  mix-blend-mode: overlay;
}
.glass:hover > .lg-hover { opacity: 0.55; }
.glass:active > .lg-hover { opacity: 0.8; }
body[data-theme="dark"] .glass > .lg-border {
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), inset 0 1px 3px rgba(255, 255, 255, 0.12);
}
body[data-theme="dark"] .glass > .lg-hover {
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 60%);
}
.lg-no-filter .glass-refract { filter: none; opacity: 0.4; }
.glass > :not(.lg-hover):not(.lg-border):not(.glass-backdrop):not(.glass-refract):not(.glass-wash):not(.glass-noise):not(.glass-shine) { position: relative; z-index: 2; }
.nc-status .icon { transform: rotate(-45deg); }
.nc-meter-detail { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: -1px; }


/* ---------------------------------------------------------------- v3 */
:root {
  --scene:
    radial-gradient(950px 720px at 7% -8%, rgba(255, 181, 210, 0.62), transparent 62%),
    radial-gradient(900px 680px at 95% 2%, rgba(188, 197, 226, 0.55), transparent 58%),
    radial-gradient(1000px 760px at 48% 112%, rgba(255, 198, 222, 0.52), transparent 64%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0) 0 150px, rgba(255, 255, 255, 0.34) 150px 300px),
    linear-gradient(135deg, #ebebef, #f8eef4 46%, #e8e9f0);
}
body[data-theme="dark"] {
  --bg: #0c0d12;
  --ink: #f3f4f9;
  --ink-2: #b9bac6;
  --ink-3: #878995;
  --line: rgba(255, 255, 255, 0.12);
  --hairline: rgba(255, 255, 255, 0.08);
  --glass-tint: rgba(24, 25, 34, 0.4);
  --glass-strong: rgba(18, 19, 27, 0.94);
  --shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.35);
  --scene:
    radial-gradient(950px 720px at 7% -8%, rgba(176, 62, 106, 0.3), transparent 62%),
    radial-gradient(900px 680px at 95% 2%, rgba(70, 86, 134, 0.28), transparent 58%),
    radial-gradient(1000px 760px at 48% 112%, rgba(160, 55, 100, 0.24), transparent 64%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0) 0 150px, rgba(255, 255, 255, 0.04) 150px 300px),
    linear-gradient(135deg, #0c0d12, #151019 48%, #0b1018);
}
.ambient { background: var(--scene); }
body[data-theme="dark"] .grain { opacity: 0.06; }

/* glass, no borders, real refraction */
.glass {
  border: 0;
  background: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.42),
    inset 0 0 46px rgba(255, 255, 255, 0.18),
    0 30px 68px rgba(68, 58, 84, 0.16),
    0 7px 20px rgba(217, 95, 138, 0.08);
}
.glass::after { content: none; }
.glass-backdrop {
  z-index: -1;
  backdrop-filter: blur(22px) saturate(210%) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(210%) brightness(1.04);
  filter: none;
}
.glass-refract {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background: var(--scene);
  background-attachment: fixed;
  background-size: cover;
  filter: url(#lg-refract);
  opacity: 0.92;
}
.glass-wash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12) 55%, rgba(255, 236, 243, 0.22));
}
body[data-theme="dark"] .glass-wash {
  background: linear-gradient(160deg, rgba(24, 25, 35, 0.5), rgba(18, 19, 28, 0.26) 55%, rgba(42, 25, 38, 0.3));
}
body[data-theme="dark"] .glass {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 50px rgba(255, 255, 255, 0.04),
    0 34px 80px rgba(0, 0, 0, 0.6),
    0 8px 22px rgba(0, 0, 0, 0.35);
}
.glass-edge {
  z-index: 3;
  opacity: 0.52;
  backdrop-filter: blur(1.2px) saturate(240%) brightness(1.16);
  -webkit-backdrop-filter: blur(1.2px) saturate(240%) brightness(1.16);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.7);
}
body[data-theme="dark"] .glass-edge { box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.16); }
.glass-shine { z-index: 1; }
.glass-noise { z-index: 1; }
.glass > :not(.glass-shine):not(.glass-backdrop):not(.glass-edge):not(.glass-noise):not(.glass-refract):not(.glass-wash) { position: relative; z-index: 2; }

/* topbar: no capsule, only brand + two icons */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 2px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: -20px -40px -18px;
  z-index: -1;
  pointer-events: none;
  background: transparent;
}
.brand-mark {
  border: 0;
  box-shadow: 0 4px 14px rgba(217, 95, 138, 0.2), inset 0 1px 0 #fff;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav, .live-pill { display: none; }

/* buttons / inputs / tables: shadows, no lines */
.icon-btn, .tag, .pill, .status-chip, .tabs, .tabs-admin, .table-wrap, .bm, .core, .mini,
input, select, textarea, .token-box, .secret, .qr-box, .login-card, .stat-icon, .brand-mark {
  border: 0 !important;
}
.icon-btn {
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 14px rgba(68, 58, 84, 0.1);
}
.icon-btn:hover { box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(217, 95, 138, 0.2); }
input, select, textarea {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(35, 35, 50, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.8);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(238, 127, 165, 0.16), inset 0 1px 2px rgba(35, 35, 50, 0.04);
}
.tabs, .tabs-admin {
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(68, 58, 84, 0.06);
}
.table-wrap {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(68, 58, 84, 0.06);
}
table th, table td { border: 0 !important; }
table th { background: rgba(255, 255, 255, 0.3); }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.22); }
tbody tr:hover { background: rgba(238, 127, 165, 0.07); }
.token-box { background: rgba(255, 238, 244, 0.7); box-shadow: inset 0 1px 0 #fff; border: 0; }
.qr-box { box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(68, 58, 84, 0.08); }

body[data-theme="dark"] .icon-btn { background: rgba(30, 31, 42, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.4); }
body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea { background: rgba(20, 21, 30, 0.72); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
body[data-theme="dark"] .tabs, body[data-theme="dark"] .tabs-admin { background: rgba(25, 26, 36, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
body[data-theme="dark"] .table-wrap { background: rgba(20, 21, 30, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
body[data-theme="dark"] table th { background: rgba(30, 31, 42, 0.5); }
body[data-theme="dark"] tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
body[data-theme="dark"] tbody tr:hover { background: rgba(238, 127, 165, 0.1); }
body[data-theme="dark"] .brand-mark { background: linear-gradient(145deg, rgba(60, 40, 52, 0.9), rgba(40, 26, 36, 0.7)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.5); }
body[data-theme="dark"] .brand { color: var(--ink); }
body[data-theme="dark"] .stat-icon { background: linear-gradient(145deg, rgba(60, 42, 54, 0.9), rgba(40, 28, 38, 0.7)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
body[data-theme="dark"] .chart .grid-line { stroke: rgba(255, 255, 255, 0.1); }
body[data-theme="dark"] .track { background: rgba(255, 255, 255, 0.1); }

/* dense node cards */
.nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.node-card { display: block; padding: 17px 18px 15px; border-radius: 22px; }
.node-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 46px rgba(255,255,255,.2), 0 38px 80px rgba(68,58,84,.2), 0 10px 26px rgba(217,95,138,.12); }
.nc-head { display: flex; align-items: center; gap: 8px; }
.nc-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nc-name { font-size: 16px; font-weight: 700; letter-spacing: -0.35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-status { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #2b8d6a; white-space: nowrap; }
.nc-status .icon { width: 13px; height: 13px; }
.nc-status.off { color: var(--bad); }
.nc-sub { margin: 5px 0 11px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: var(--ink-3); font-size: 10.5px; }
.nc-rows { display: grid; gap: 8px; }
.nc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--ink-2); }
.nc-row b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.nc-meter { display: grid; gap: 4px; }
.nc-meter-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-2); }
.nc-meter-head span { font-weight: 550; }
.nc-meter-head b { margin-left: auto; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.nc-meter-head small { font-size: 10px; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.track { height: 5px; border-radius: 99px; background: rgba(35, 35, 50, 0.08); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8adcbb, #3fb98a); transition: width 0.45s ease; }
.track i.good { background: linear-gradient(90deg, #8adcbb, #3fb98a); }
.track i.warn { background: linear-gradient(90deg, #f4c983, #e5a03a); }
.track i.bad { background: linear-gradient(90deg, #f09aa7, #dd6679); }
.nc-foot { margin-top: 9px; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-3); font-size: 10px; box-shadow: inset 0 1px 0 rgba(35, 35, 50, 0.06); }
.nc-foot b { color: var(--ink-2); font-weight: 600; }
body[data-theme="dark"] .nc-foot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }

@media (max-width: 1020px) { .nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .topbar { padding: 14px 2px 8px; }
  .nodes { grid-template-columns: 1fr; }
}

/* final: no visible border lines, soft shadows only */
.lg-border { display: none !important; }
.toast, .btn, .recovery-grid code, dialog.modal { border: 0 !important; }
.toast { box-shadow: 0 18px 50px rgba(68, 58, 84, 0.2); }
.glass-wash { background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.08) 55%, rgba(255,236,243,.16)); }
body[data-theme="dark"] .glass-wash { background: linear-gradient(160deg, rgba(24,25,35,.42), rgba(18,19,28,.2) 55%, rgba(42,25,38,.24)); }
.modal-body { max-height: 72vh; overflow: auto; }
.glass { box-shadow: inset 0 2px 6px rgba(255,255,255,.55), inset 0 -10px 30px rgba(255,255,255,.08), 0 30px 68px rgba(68,58,84,.16), 0 7px 20px rgba(217,95,138,.08); }
body[data-theme="dark"] .glass { box-shadow: inset 0 1px 4px rgba(255,255,255,.1), 0 34px 80px rgba(0,0,0,.6), 0 8px 22px rgba(0,0,0,.35); }

/* photographic scene background (fixed for refraction alignment) */
:root {
  --scene:
    url("/background.jpg") center / cover no-repeat fixed,
    linear-gradient(135deg, #eef0f4, #f8eef4 48%, #e9eaf1);
}
body[data-theme="dark"] {
  --scene:
    url("/background.jpg") center / cover no-repeat fixed,
    linear-gradient(135deg, #0c0d12, #15101a 48%, #0b1018);
}
.page-head h1 { text-shadow: 0 2px 22px rgba(255, 255, 255, 0.75); }
.page-head p, .page-head .eyebrow { text-shadow: 0 1px 10px rgba(255, 255, 255, 0.7); }
body[data-theme="dark"] .page-head h1 { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.75); }
body[data-theme="dark"] .page-head p, body[data-theme="dark"] .page-head .eyebrow { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.topbar::before { background: transparent; }
body[data-theme="dark"] .topbar::before { background: transparent; }

/* legibility over the photographic scene */
.glass-backdrop { backdrop-filter: blur(30px) saturate(185%) brightness(1.03); -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.03); }
.glass-refract { filter: url(#lg-refract) blur(4px) saturate(185%); opacity: 0.8; }
.glass-wash { background: linear-gradient(160deg, rgba(255,255,255,.47), rgba(255,255,255,.28) 55%, rgba(255,236,243,.36)); }
body[data-theme="dark"] .glass-wash { background: linear-gradient(160deg, rgba(24,25,35,.6), rgba(18,19,28,.4) 55%, rgba(42,25,38,.46)); }
.nc-name, .nc-row, .nc-meter-head, .nc-meter-detail, .nc-foot, .stat-label, .stat-sub, .stat-value, .kv, .page-head { text-shadow: none; }
body[data-theme="dark"] .nc-name, body[data-theme="dark"] .nc-row, body[data-theme="dark"] .nc-meter-head, body[data-theme="dark"] .nc-meter-detail, body[data-theme="dark"] .nc-foot, body[data-theme="dark"] .stat-label, body[data-theme="dark"] .stat-sub, body[data-theme="dark"] .stat-value, body[data-theme="dark"] .kv, body[data-theme="dark"] .page-head { text-shadow: 0 1px 3px rgba(0,0,0,.65); }
.page-head { position: relative; }
.page-head::before { content: ""; position: absolute; inset: -24px -30px; z-index: -1; pointer-events: none; background: radial-gradient(90% 160% at 2% 50%, rgba(255,255,255,.86), transparent 72%); }
body[data-theme="dark"] .page-head::before { background: radial-gradient(90% 160% at 2% 50%, rgba(8,8,12,.6), transparent 72%); }
.topbar { text-shadow: 0 1px 2px rgba(255,255,255,.6); }
body[data-theme="dark"] .topbar { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.glass > .glass-refract,
.glass > .glass-wash,
.glass > .lg-hover {
  position: absolute !important;
  inset: 0 !important;
}
.glass > .glass-refract { z-index: 0 !important; }
.glass > .glass-wash { z-index: 0 !important; }
.glass > .lg-hover { z-index: 2 !important; }

/* original liquid-glass-react component host */
.lg-host { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 0; }
.lg-panel {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  display: block !important;
  box-sizing: border-box;
}
.lg-panel .glass {
  display: block !important;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.lg-panel .glass > div { height: 100%; background: transparent !important; }

.lg-host > .lg-content { position: relative; z-index: 2; width: 100%; height: 100%; }

/* component content layers must not get dark panel backgrounds */
.lg-panel .glass > div.lg-content { background: transparent !important; }
.lg-panel .lg-content, .lg-content { background: transparent !important; }

/* original component is used as the optical layer; content stays above it */
.lg-host { z-index: 0; }
.lg-panel { z-index: 0; }
.lg-panel .glass { pointer-events: none; }
.glass > :not(.lg-host) { position: relative; z-index: 3; }

/* original component renders only the glass edge optics */
.lg-host {
  padding: 7px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: inherit;
}
.lg-host .lg-panel { width: 100% !important; height: 100% !important; }

/* DOM-mounted liquid glass using the original filter + displacement map */
.glass { background: transparent; overflow: hidden; }
.lg-backdrop {
  position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  backdrop-filter: url(#lg-filter) blur(20px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter: url(#lg-filter) blur(20px) saturate(180%) brightness(1.06);
}
.lg-refract {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: var(--scene); background-attachment: fixed; background-size: cover;
  filter: url(#lg-filter); opacity: 0.35;
}
.lg-wash {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.08) 55%, rgba(255,236,243,.2));
}
body[data-theme="dark"] .lg-wash { background: linear-gradient(145deg, rgba(24,25,35,.3), rgba(18,19,28,.14) 55%, rgba(42,25,38,.24)); }
.lg-noise { position: absolute; inset: 0; border-radius: inherit; z-index: 1; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.glass > .lg-border {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background: linear-gradient(var(--lg-angle, 135deg), rgba(255,255,255,0) 0%, rgba(255,255,255,var(--lg-a,.12)) var(--lg-pos1,33%), rgba(255,255,255,var(--lg-b,.4)) var(--lg-pos2,66%), rgba(255,255,255,0) 100%);
}
.lg-border.one { mix-blend-mode: screen; opacity: .22; }
.lg-border.two { mix-blend-mode: overlay; }
.lg-hover { position: absolute; inset: 0; border-radius: inherit; z-index: 2; opacity: 0; transition: opacity .2s; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.55), transparent 60%); mix-blend-mode: overlay; }
.glass:hover > .lg-hover { opacity: .6; }
.glass > :not(.lg-backdrop):not(.lg-refract):not(.lg-wash):not(.lg-noise):not(.lg-border):not(.lg-hover) { position: relative; z-index: 2; }
body[data-theme="dark"] .glass > .lg-border { box-shadow: none; }

/* legible frosted surface above the refraction */
.lg-wash {
  background: linear-gradient(160deg, rgba(255,255,255,.68), rgba(255,255,255,.42) 55%, rgba(255,236,243,.56));
}
body[data-theme="dark"] .lg-wash {
  background: linear-gradient(160deg, rgba(24,25,35,.7), rgba(18,19,28,.48) 55%, rgba(42,25,38,.52));
}

/* readable glass: translucent surface + edge optics from the reference filter */
.glass {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.24) 55%, rgba(255, 240, 246, 0.38)),
    rgba(255, 255, 255, 0.16);
}
body[data-theme="dark"] .glass {
  background: linear-gradient(160deg, rgba(28, 28, 38, 0.6), rgba(18, 18, 26, 0.38) 55%, rgba(44, 26, 40, 0.42));
}
.lg-backdrop {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.lg-refract { opacity: 0.14; filter: url(#lg-filter); }

/* original component optical layer; content stays above */
.lg-content { position: relative; z-index: 2; width: 100%; height: 100%; background: transparent !important; }
.lg-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lg-panel { z-index: 0 !important; }
.lg-panel .glass { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.glass > .lg-content { background: transparent !important; }

/* real SVG backdrop refraction; content is not filtered */
.glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 54px rgba(75, 62, 92, 0.16), inset 0 1px 2px rgba(255,255,255,.8);
  backdrop-filter: url(#lg-filter) blur(18px) saturate(150%);
  -webkit-backdrop-filter: url(#lg-filter) blur(18px) saturate(150%);
}
.glass::after { content: none; }
.glass > :not(.lg-backdrop) { position: relative; z-index: 2; }
.glass > .lg-backdrop {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 60%);
}
.lg-content { background: transparent !important; }
body[data-theme="dark"] .glass {
  background: rgba(20, 20, 28, 0.34);
  box-shadow: 0 24px 54px rgba(0,0,0,.36), inset 0 1px 2px rgba(255,255,255,.16);
}

/* final glass contrast: keep text legible, preserve refraction at the edges */
.glass { background: rgba(248, 248, 252, 0.68); }
body[data-theme="dark"] .glass { background: rgba(18, 19, 27, 0.68); }
.glass > .lg-backdrop {
  background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 70%);
}
.glass::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 22px rgba(255,255,255,.55);
}
body[data-theme="dark"] .glass::before { box-shadow: inset 0 0 22px rgba(255,255,255,.12); }
.lg-highlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.8;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.55), transparent 65%);
  mix-blend-mode: overlay;
}
.glass:hover .lg-highlight { opacity: 1; }

/* Reference-style two-column metric cards */
.nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.node-card { padding: 20px 24px 16px; border-radius: 24px; }
.card-title { display: flex; align-items: center; gap: 10px; }
.card-title .nc-name { font-size: 23px; font-weight: 750; letter-spacing: -0.55px; }
.card-status { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; color: #2b8d6a; }
.card-status.off { color: var(--bad); }
.card-status .icon { width: 13px; height: 13px; transform: rotate(-45deg); }
.card-subtitle { display: flex; align-items: center; gap: 12px; margin: 8px 0 22px; color: var(--ink-2); font-size: 13px; }
.metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); }
.metric-head > span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.metric-head .icon { width: 17px; height: 17px; color: var(--pink-deep); }
.metric-head b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.metric .track { height: 5px; margin-top: 10px; background: rgba(35,35,50,.12); border-radius: 99px; overflow: hidden; }
.metric .track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8adcbb, #3fb98a); transition: width .45s ease; }
.metric .track i.good { background: linear-gradient(90deg, #8adcbb, #3fb98a); }
.metric .track i.warn { background: linear-gradient(90deg, #f4c983, #e5a03a); }
.metric .track i.bad { background: linear-gradient(90deg, #f09aa7, #dd6679); }
.metric small { display: block; margin-top: 8px; color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.network-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 24px; }
.network-item { display: grid; gap: 7px; color: var(--ink-2); font-size: 13px; }
.network-item b { font-weight: 600; color: var(--ink); }
.network-item span:first-child { color: var(--pink-deep); }
.ping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 25px; }
.ping-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.ping-head b { font-size: 14px; color: var(--ink); font-weight: 650; }
.ping-strips { height: 30px; display: flex; align-items: flex-end; gap: 2px; margin-top: 8px; }
.ping-strips i { flex: 1; min-width: 3px; border-radius: 2px; background: #c6a461; height: 100%; }
.ping-strips.loss i { background: #d0a075; }
.card-bottom { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-top: 10px; color: var(--ink-3); font-size: 11px; box-shadow: inset 0 1px 0 rgba(35,35,50,.06); }
body[data-theme="dark"] .card-subtitle, body[data-theme="dark"] .metric small, body[data-theme="dark"] .network-item, body[data-theme="dark"] .ping-head { color: var(--ink-2); }
body[data-theme="dark"] .card-bottom { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
@media (max-width: 1050px) { .nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .node-card { padding: 17px 18px 14px; } .card-title .nc-name { font-size: 18px; } .metric-head > span { font-size: 13px; } .metric-head b { font-size: 15px; } .metrics-grid { gap: 16px 18px; } }
@media (max-width: 680px) { .nodes { grid-template-columns: 1fr; } .node-card { padding: 17px 18px 14px; } .card-title .nc-name { font-size: 19px; } .metrics-grid { gap: 16px 18px; } .metric-head > span { font-size: 13px; } .metric-head b { font-size: 15px; } }

/* Reference-panel dashboard layout */
.ref-hero { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 24px; align-items: center; margin: 4px 0 26px; }
.ref-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ref-stat { padding: 14px 16px; min-height: 78px; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ref-stat span { font-size: 11px; color: var(--ink-2); }
.ref-stat b { font-size: 24px; font-weight: 650; letter-spacing: -0.7px; font-variant-numeric: tabular-nums; }
.ref-stat b small { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 3px; }
.ref-globe { position: relative; min-height: 350px; border-radius: 22px; overflow: hidden; display: grid; place-items: center; }
.globe-core { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #b5e3ff, #2a80c4 36%, #124979 64%, #0b2b54 100%); box-shadow: inset -25px -18px 45px rgba(0,0,0,.35), 0 18px 45px rgba(28,83,130,.24); position: relative; }
.globe-core::before { content:""; position:absolute; inset:0; border-radius:50%; opacity:.6; background: repeating-linear-gradient(145deg, transparent 0 16px, rgba(108,174,116,.55) 17px 28px, transparent 29px 50px); mix-blend-mode: screen; }
.globe-orbit { position:absolute; width:260px; height:110px; border:2px solid rgba(255,255,255,.6); border-radius:50%; transform:rotate(-20deg); box-shadow:0 0 20px rgba(255,255,255,.2); }
.globe-orbit.two { transform:rotate(70deg); width:100px; height:240px; opacity:.45; }
.globe-pin { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--pink-strong); box-shadow:0 0 0 5px rgba(238,127,165,.2),0 0 18px rgba(238,127,165,.7); }
.globe-pin.a { left:35%; top:38%; } .globe-pin.b { left:62%; top:52%; } .globe-pin.c { left:48%; top:67%; }
.ref-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; flex-wrap:wrap; }
.ref-filters { display:flex; gap:7px; flex-wrap:wrap; }
.filter-chip { padding:6px 10px; border-radius:10px; color:var(--ink-2); font-size:12px; background:rgba(255,255,255,.42); box-shadow:0 3px 12px rgba(75,62,92,.05); }
.filter-chip.active { color:var(--pink-deep); background:rgba(255,255,255,.75); }
.ref-tools { display:flex; align-items:center; gap:8px; }
.search-box { display:flex; align-items:center; gap:6px; }
.search-box input { width:230px; padding:8px 12px; border-radius:12px; font-size:12px; background:rgba(255,255,255,.6); }
.search-box span { margin-left:-29px; color:var(--ink-3); pointer-events:none; }
.search-box .icon { width:14px; height:14px; }
.panel-footer { display:flex; align-items:center; justify-content:center; gap:18px; margin:34px 0 12px; color:var(--ink-2); font-size:12px; }
.panel-footer b { color:var(--ink); font-weight:650; }
@media (max-width:1020px) { .ref-hero { grid-template-columns:1fr 270px; gap:14px; } .ref-globe { min-height:290px; } .globe-core { width:150px; height:150px; } .ref-stat b { font-size:20px; } }
@media (max-width:680px) { .ref-hero { grid-template-columns:1fr; } .ref-globe { display:none; } .ref-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .ref-stat { padding:11px 12px; min-height:68px; } .ref-stat b { font-size:19px; } .search-box input { width:180px; } }

/* Reference proportions */
.ref-hero { grid-template-columns: 650px 1fr; gap: 24px; min-height: 360px; }
.ref-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ref-stat { padding: 8px 12px; min-height: 58px; }
.ref-stat span { font-size: 11px; }
.ref-stat b { font-size: 22px; }
.ref-globe { min-height: 350px; height: 350px; }
.globe-core { width: 240px; height: 240px; }
.ref-stat-grid .ref-stat:nth-child(1), .ref-stat-grid .ref-stat:nth-child(2) { grid-column: auto; }
@media (max-width:1020px) { .ref-hero { grid-template-columns:1fr; min-height:0; } .ref-globe { min-height:270px; height:270px; } }
.node-country { width: 18px; height: 14px; object-fit: cover; border-radius: 3px; margin-left: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.card-bottom em { font-style: normal; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.4); margin-right: 5px; }

/* Compact reference cards */
.nodes { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.node-card { padding: 14px 16px 10px; border-radius: 18px; }
.card-title .nc-name { font-size: 17px; }
.card-subtitle { margin: 5px 0 12px; font-size: 11px; gap: 8px; }
.metrics-grid { gap: 12px 16px; }
.metric-head > span { font-size: 12px; gap: 5px; }
.metric-head b { font-size: 13px; }
.metric-head .icon { width: 13px; height: 13px; }
.metric .track { height: 4px; margin-top: 6px; }
.metric small { margin-top: 5px; font-size: 10px; }
.network-grid { margin-top: 13px; gap: 16px; }
.network-item { gap: 4px; font-size: 11px; }
.ping-grid { margin-top: 14px; gap: 16px; }
.ping-head { font-size: 11px; }
.ping-head b { font-size: 12px; }
.ping-strips { height: 23px; margin-top: 5px; gap: 1px; }
.ping-strips i { min-width: 2px; }
.card-bottom { margin-top: 9px; padding-top: 7px; font-size: 10px; gap: 4px 9px; }
.card-status { display: none !important; }
.node-country { width: 20px; height: 15px; margin-left: 0; }
.os-icon { width: 17px; height: 17px; object-fit: contain; margin-right: 2px; }
/* Icons are bare SVG buttons; no box or border */
.icon-btn, .icon-btn.sm, .icon-btn.pink, .icon-btn:hover, .icon-btn:focus, .icon-btn:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 30px;
  min-height: 30px;
  border-radius: 8px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { color: var(--pink-deep); background: rgba(255,255,255,.18) !important; }
.icon-btn .icon { width: 19px; height: 19px; }
.icon-btn.sm .icon { width: 16px; height: 16px; }
@media (max-width:1050px) { .nodes { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) { .nodes { grid-template-columns: 1fr; } }

/* Fine ping strips and top-right icons */
.ping-strips { height: 9px; margin-top: 4px; gap: 1px; align-items: flex-end; }
.ping-strips i { width: 1.5px; flex: 0 0 1.5px; min-width: 1.5px; max-width: 1.5px; border-radius: 1px; background: var(--good); }
.ping-strips i.good { background: var(--good); }
.ping-strips i.warn { background: var(--warn); }
.ping-strips i.bad { background: var(--bad); }
.ping-strips i[style*="height"] { align-self: flex-end; }
.ping-grid { align-items: start; }
.os-icon { position: absolute; right: 45px; top: 13px; width: 15px; height: 15px; }
.node-country { position: absolute; right: 17px; top: 13px; width: 20px; height: 15px; }
.card-title { position: relative; }
.card-title .nc-name { max-width: calc(100% - 70px); }
@media (max-width:680px) { .os-icon { right: 42px; top: 12px; } .node-country { right: 14px; top: 12px; } }

/* Three-carrier route labels at card bottom */
.route-list { display: grid; gap: 3px; margin-top: 9px; padding-top: 7px; box-shadow: inset 0 1px 0 var(--hairline); }
.route-row { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--ink-2); min-width: 0; }
.route-tag { flex: 0 0 auto; padding: 1px 6px; border-radius: 5px; font-size: 9.5px; font-weight: 650; background: rgba(255, 255, 255, 0.5); }
.route-tag.cm { color: #2f7fbf; }
.route-tag.cu { color: #b5453f; }
.route-tag.ct { color: #2c8a66; }
.route-path { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-path em { font-style: normal; color: var(--ink-3); margin-right: 3px; font-size: 9px; }
body[data-theme="dark"] .route-tag { background: rgba(255, 255, 255, 0.08); }
body[data-theme="dark"] .route-list { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }

/* ============================================================
   Komari-style layout (glass skin)
   ============================================================ */
.km-home { width: 100%; max-width: 1280px; margin: 0 auto; padding: 16px; }
.km-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 8px; align-items: stretch; min-height: 452px; margin-bottom: 8px; }
.km-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
.km-stat { padding: 12px; border-radius: 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 108px; }
.km-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.km-stat-label { font-size: 12px; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-stat-icon { color: var(--ink-3); opacity: .75; line-height: 0; }
.km-stat-icon .icon { width: 16px; height: 16px; }
.km-stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-stat-value small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.km-globe { position: relative; border-radius: 16px; overflow: hidden; min-height: 300px; }
.km-globe canvas { display: block; width: 100%; height: 100%; }
.km-globe-tag { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-2); letter-spacing: .03em; }
.km-globe-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(63,185,138,.18); }

.km-nodes { display: flex; flex-direction: column; gap: 14px; }
.km-tabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.km-tab-list { display: flex; align-items: center; gap: 2px; }
.km-tab { padding: 6px 12px; border: 0; background: transparent; border-radius: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.km-tab b { font-weight: 600; font-variant-numeric: tabular-nums; }
.km-tab.active { background: rgba(255,255,255,.55); color: var(--ink); box-shadow: 0 2px 10px rgba(75,62,92,.06); }
body[data-theme="dark"] .km-tab.active { background: rgba(255,255,255,.09); }
.km-tools { display: flex; align-items: center; gap: 6px; }

.km-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .km-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .km-grid { grid-template-columns: 1fr; } }

.km-card { display: flex; flex-direction: column; border-radius: 14px; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.km-card:hover { transform: translateY(-2px); }
.km-card-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; min-width: 0; }
.km-name { font-size: 14px; font-weight: 700; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-badges { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.km-os { width: 16px; height: 16px; display: block; }
.km-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 3px; display: block; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.km-card-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.km-chips { display: flex; align-items: center; gap: 6px; height: 19px; overflow: hidden; }
.km-chip { font-size: 11px; line-height: 1.35; padding: 1px 8px; border-radius: 999px; background: rgba(148,163,184,.14); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-theme="dark"] .km-chip { background: rgba(255,255,255,.08); }
.km-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.km-metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.km-metric-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.km-metric-head > span { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); min-width: 0; }
.km-metric-head .icon { width: 13px; height: 13px; }
.km-metric-head b { font-weight: 600; font-variant-numeric: tabular-nums; }
.km-bar { height: 4px; border-radius: 999px; background: rgba(148,163,184,.22); overflow: hidden; }
.km-bar i { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.km-bar i.good { background: linear-gradient(90deg, #8adcbb, #3fb98a); }
.km-bar i.warn { background: linear-gradient(90deg, #f4c983, #e5a03a); }
.km-bar i.bad { background: linear-gradient(90deg, #f09aa7, #dd6679); }
.km-metric small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.km-mini > div { background: rgba(148,163,184,.10); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-theme="dark"] .km-mini > div,
body[data-theme="dark"] .km-ping > div { background: rgba(255,255,255,.06); }
.km-mini span { font-size: 11px; display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-mini .icon { width: 11px; height: 11px; flex: 0 0 auto; }
.km-ping { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.km-ping > div { background: rgba(148,163,184,.10); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; height: 48px; min-width: 0; }
.km-ping-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; line-height: 1; color: var(--ink-2); }
.km-ping-head b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.km-bars { display: flex; align-items: flex-end; gap: 1px; flex: 1; min-height: 0; overflow: hidden; }
.km-bars i { display: block; flex: 1 1 0; min-width: 0; border-radius: 1px; background: var(--good); }
.km-bars i.good { background: var(--good); }
.km-bars i.warn { background: var(--warn); }
.km-bars i.bad { background: var(--bad); }
.km-bars i.na { background: rgba(148,163,184,.35); }
.km-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.km-tags span { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(148,163,184,.14); color: var(--ink-2); }
.km-routes { border-top: 1px solid rgba(148,163,184,.20); padding-top: 8px; display: grid; gap: 3px; }
body[data-theme="dark"] .km-routes { border-top-color: rgba(255,255,255,.08); }

@media (max-width: 1020px) {
  .km-top { grid-template-columns: 1fr; min-height: 0; }
  .km-globe { display: none; }
  .km-stat-value { font-size: 22px; }
}
@media (max-width: 640px) {
  .km-home { padding: 10px; }
  .km-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-stat { min-height: 88px; }
}

/* ---------- Komari-style instance page ---------- */
.km-inst { max-width: 1280px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.km-inst-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.km-inst-head h1 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.km-flag.lg { width: 24px; height: 17px; }
.km-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: rgba(63,185,138,.14); color: #2b8d6a; }
.km-status.off { background: rgba(221,102,121,.14); color: var(--bad); }
.km-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.km-inst-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.km-inst-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.km-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.km-tile { padding: 12px 14px; border-radius: 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 96px; }
.km-tile-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.km-tile-label .icon { width: 14px; height: 14px; }
.km-tile-value { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.km-tile-value small { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }

.km-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.km-info { border-radius: 14px; overflow: hidden; }
.km-info-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 650; }
.km-info-head .icon { width: 15px; height: 15px; color: var(--pink-deep); }
.km-info-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.km-info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 12px; color: var(--ink-2); }
.km-info-row > span { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.km-info-row b { color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }

.km-charts { display: flex; flex-direction: column; gap: 10px; }
.km-range { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.km-range-btn { padding: 5px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 12px; cursor: pointer; }
.km-range-btn.active { background: rgba(255,255,255,.6); color: var(--ink); box-shadow: 0 2px 10px rgba(75,62,92,.06); }
body[data-theme="dark"] .km-range-btn.active { background: rgba(255,255,255,.1); }
.km-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.km-chart-card { border-radius: 14px; padding-bottom: 6px; overflow: hidden; }
.km-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 6px; font-size: 12px; }
.km-chart-head > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink); }
.km-chart-head > span .icon { width: 14px; height: 14px; color: var(--pink-deep); }
.km-chart-head b { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.km-chart-body { padding: 0 8px; }
.km-chart-svg { display: block; width: 100%; height: 168px; vector-effect: non-scaling-stroke; }
.km-chart-svg .grid-line { stroke: rgba(35,35,50,.07); stroke-width: 1; }
.km-chart-svg .axis { fill: var(--ink-3); font-size: 10px; }
.km-chart-svg path, .km-chart-svg line { vector-effect: non-scaling-stroke; }
body[data-theme="dark"] .km-chart-svg .grid-line { stroke: rgba(255,255,255,.09); }
.km-chart-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 14px 0; font-size: 10px; color: var(--ink-3); }
.km-chart-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.km-chart-empty { padding: 52px 0; text-align: center; font-size: 12px; color: var(--ink-3); }

.km-ping-sec { display: flex; flex-direction: column; gap: 10px; }
.km-ping-head-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 650; }
.km-ping-head-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.km-ping-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.km-ping-card { border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.km-ping-card.active { box-shadow: 0 0 0 2px rgba(238,127,165,.35); }
.km-ping-card-head { font-size: 11px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-ping-card-head i { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.km-ping-card-vals { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.km-ping-card-vals .warn { color: var(--warn); }
.km-ping-card-sub { font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1100px) {
  .km-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .km-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .km-inst { padding: 10px; }
  .km-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-info-grid { grid-template-columns: 1fr; }
  .km-chart-grid { grid-template-columns: 1fr; }
}

/* instance header / range polish */
.km-inst-head { gap: 12px; }
.km-inst-head .icon-btn.sm { margin-right: 2px; }
.km-range { padding: 4px 6px; border-radius: 12px; background: rgba(148,163,184,.12); align-self: flex-start; }
body[data-theme="dark"] .km-range { background: rgba(255,255,255,.06); }
.km-range-btn { color: var(--ink-2); }
.km-range-btn:hover { color: var(--ink); }