/* ============================================================
   Probe Panel — Unified Stylesheet  v20260828h
   Breakpoints: ≤768px mobile | ≤480px xs
   All transitions/animations defined here; JS only toggles classes.
   ============================================================ */

/* ── Reset & Box Model ─────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg:      #0f0f1a;
  --bg2:     #1a1a2e;
  --bg3:     #16213e;
  --card:    #1e2a3a;
  --border:  #2a3a4e;
  --text:    #e0e0e0;
  --text2:   #8892a0;
  --accent:  #4fc3f7;
  --green:   #66bb6a;
  --red:     #ef5350;
  --yellow:  #ffa726;
  --purple:  #ab47bc;

  --sidebar-w:      220px;
  --topbar-h:       52px;
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      12px;
  --gap:            12px;
  --pad:            20px;
  --pad-sm:         10px;
  --transition:     .15s ease;
  --transition-slide: .2s ease;

  /* Typography matrix: one source of truth for every Web page. */
  --font-ui: "Inter Variable", Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display: "Inter Variable", Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
  --type-display: clamp(2.75rem, 6vw, 4.5rem);
  --type-hero: clamp(2rem, 4vw, 3rem);
  --type-page-title: clamp(1.625rem, 2.2vw, 2rem);
  --type-section-title: 1.125rem;
  --type-card-title: 1rem;
  --type-body: .9375rem;
  --type-compact: .875rem;
  --type-caption: .8125rem;
  --type-label: .75rem;
  --type-metric: clamp(1.5rem, 2vw, 2.25rem);
  --leading-tight: 1.12;
  --leading-heading: 1.3;
  --leading-body: 1.6;
  --leading-caption: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* ── Base ───────────────────────────────────────────────────── */
html {
  height: 100%;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--leading-heading);
  font-weight: var(--weight-bold);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

a {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

/* ── Form Elements ─────────────────────────────────────────── */
/*
  width:100% only inside containers that expect it (modal, login, filter bar).
  Global default is auto so topbar selects don't stretch.
*/
input,
select,
textarea {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size:var(--type-body);
  outline: none;
  transition: border-color var(--transition);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

/* Full-width inputs inside modal and login */
.modal input,
.modal select,
.modal textarea,
.login-box input {
  width: 100%;
}

/* ── Buttons ───────────────────────────────────────────────── */
button {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size:var(--type-body);
  font-weight:var(--weight-semibold);
  cursor: pointer;
  transition: opacity var(--transition);
  white-space: nowrap;
}

button:hover    { opacity: .85; }
button:disabled { opacity: .4; cursor: not-allowed; }

.btn-sm      { padding: 4px 10px; font-size:var(--type-compact); }
.btn-danger  { background: var(--red);   color: #fff; }
.btn-success { background: var(--green); color: #000; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ── Tags / Badges ─────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size:var(--type-caption);
  margin: 1px 2px;
  background: var(--bg3);
  color: var(--text2);
}
.tag.ban  { background: rgba(239,83,80,.15);   color: var(--red);   }
.tag.up   { background: rgba(102,187,106,.15); color: var(--green); }
.tag.down { background: rgba(239,83,80,.15);   color: var(--red);   }

/* ── Utility ────────────────────────────────────────────────── */
.err { color: var(--red); font-size:var(--type-body); margin-top: 8px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--pad-sm);
}

.login-box {
  background: var(--card);
  padding: 40px;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.login-box h1 {
  color: var(--accent);
  margin-bottom: 24px;
  font-size: 28px;
}

.login-box input  { margin-bottom: 12px; }
.login-box button { width: 100%; padding: 10px; }

/* ============================================================
   LAYOUT — Sidebar + Main
   ============================================================ */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform var(--transition-slide);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-header {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.logo {
  font-size: 20px;
  font-weight:var(--weight-bold);
  color: var(--accent);
}

.sidebar-header .hamburger {
  display: none; /* shown only on mobile via media query */
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--text2);
  font-size:var(--type-body);
  border-left: 3px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
  flex-shrink: 0;
}

.sidebar a:hover  { background: var(--bg3); color: var(--text); }

.sidebar a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(79,195,247,.08);
}

.nav-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.user-tag {
  font-size:var(--type-body);
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* ── Main area ─────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--pad);
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.topbar h2 {
  font-size: 16px;
  font-weight:var(--weight-semibold);
  white-space: nowrap;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-width: 0;
}

/* Hamburger button — used in topbar (mobile) and sidebar (close) */
.hamburger {
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  padding: 4px 6px;
  cursor: pointer;
  line-height: 1;
  font-weight:var(--weight-regular);
  flex-shrink: 0;
}

.hamburger:hover { opacity: .75; }

/* Hidden on desktop; shown via media query */
.mobile-only { display: none; }

/* ── Content ───────────────────────────────────────────────── */
.content {
  padding: var(--pad);
  flex: 1;
  min-width: 0;
}

/* ── Overlay (mobile sidebar backdrop) ─────────────────────── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 90;
}

/* ============================================================
   REFRESH CONTROL
   ============================================================ */
.refresh-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.rf-label {
  font-size:var(--type-compact);
  color: var(--text2);
  white-space: nowrap;
}

/* Toggle switch */
.rf-toggle {
  position: relative;
  width: 32px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.rf-toggle input { display: none; }

.rf-slider {
  position: absolute;
  inset: 0;
  background: var(--bg3);
  border-radius: 9px;
  transition: background var(--transition);
}

.rf-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: var(--text2);
  border-radius: 50%;
  transition: transform var(--transition), background var(--transition);
}

.rf-toggle input:checked + .rf-slider          { background: var(--green); }
.rf-toggle input:checked + .rf-slider::before  { transform: translateX(14px); background: #fff; }

/* Interval select — auto width, not full-width */
.refresh-ctrl select {
  width: auto;
  padding: 3px 6px;
  font-size:var(--type-compact);
  border-radius: 4px;
}

/* Refresh-now button — ghost style, overrides global button */
.rf-now {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 2px 7px;
  font-size:var(--type-body);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  font-weight:var(--weight-regular);
  flex-shrink: 0;
}

.rf-now:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

@keyframes rf-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.rf-now.rf-spin { animation: rf-rotate .6s linear; }

.rf-ago {
  font-size:var(--type-caption);
  color: var(--text2);
  white-space: nowrap;
  min-width: 40px;
  text-align: right;
}

/* ============================================================
   STAT CARDS GRID
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--gap);
  margin-bottom: 16px;
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 16px;
  min-width: 0;
}

.stat-card .label {
  font-size:var(--type-compact);
  color: var(--text2);
  margin-bottom: 4px;
}

.stat-card .value {
  font-size: 24px;
  font-weight:var(--weight-bold);
  word-break: break-word;
}

.stat-card .sub {
  font-size:var(--type-compact);
  color: var(--text2);
  margin-top: 4px;
}

/* ============================================================
   SECTION
   ============================================================ */
.section { margin-bottom: 20px; }

.section-title {
  font-size:var(--type-body);
  font-weight:var(--weight-semibold);
  margin-bottom: 10px;
  color: var(--text2);
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 关键：grid/flex 子元素必须显式声明 min-width:0，
     否则内容会撑开父容器而不触发滚动条 */
  min-width: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size:var(--type-body);
}

th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--text2);
  font-weight:var(--weight-semibold);
  font-size:var(--type-compact);
  text-transform: uppercase;
  background: var(--bg2);
  position: sticky;
  top: 0;
  white-space: nowrap;
}

tr:hover td { background: rgba(79,195,247,.04); }

/* ============================================================
   CHARTS
   ============================================================ */
.chart-box {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
  min-width: 0;
  /* Prevent ECharts canvas from overflowing */
  overflow: hidden;
}

.chart-box .chart-title {
  font-size:var(--type-body);
  color: var(--text2);
  margin-bottom: 8px;
}

.chart-el {
  width: 100%;
  height: 260px;
}

/* ============================================================
   DASHBOARD — two-column chart row + tables
   ============================================================ */
.chart-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-bottom: 16px;
}

.chart-row-2col .chart-box { margin-bottom: 0; }

.dash-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: var(--gap);
}

/* grid 子元素防撑破 */
.dash-tables > *,
.dns-cols > *,
.chart-row > *,
.chart-row-2col > * {
  min-width: 0;
}

/* ============================================================
   DNS — two-column stats layout
   ============================================================ */
.dns-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-bottom: 16px;
}

/* ============================================================
   HOST PANELS (System page)
   ============================================================ */
.host-panel {
  background: var(--bg2);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--border);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.host-panel.panel-router   { border-left-color: var(--accent);  }
.host-panel.panel-wifi     { border-left-color: var(--green);   }
.host-panel.panel-windows  { border-left-color: var(--purple);  }
.host-panel.panel-services { border-left-color: var(--yellow);  }
.host-panel.panel-mobile-release { border-left-color: var(--purple); }

.panel-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.panel-title { font-size: 15px; font-weight:var(--weight-bold); }

.panel-ip {
  font-size:var(--type-compact);
  color: var(--text2);
  font-family: var(--font-mono);
  background: var(--bg3);
  padding: 2px 8px;
  border-radius: 4px;
}

.panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.host-panel .cards { margin-bottom: 14px; }
.release-state{margin-left:auto;padding:5px 9px;border-radius:999px;font-size:var(--type-label)}.release-state.verified{color:#78e6c9;background:rgba(45,212,191,.1)}.release-state.attention{color:#fbd38d;background:rgba(245,158,11,.1)}
.release-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}.release-summary article{padding:15px;background:rgba(9,26,43,.62);border:1px solid var(--border);border-radius:15px}.release-summary span,.release-summary small{display:block;color:var(--text3);font-size:var(--type-label)}.release-summary strong{display:block;margin:7px 0 5px;color:var(--text);font-size:18px;letter-spacing:-.03em}.release-attention{display:flex;align-items:flex-start;gap:8px;margin-top:13px;padding:12px 14px;border:1px solid rgba(245,158,11,.16);border-radius:13px;background:rgba(245,158,11,.055);color:#d6b878;font-size:var(--type-label);line-height:1.55}.release-attention strong{color:#f2d28d}.release-attention span{color:var(--text2)}.release-evidence{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.release-evidence span{padding:7px 10px;color:#79d9c1;background:rgba(45,212,191,.065);border-radius:9px;font-size:var(--type-label)}.release-help{margin:7px 0 13px;color:var(--text3);font-size:var(--type-label);line-height:1.55}.release-form{display:grid;grid-template-columns:minmax(110px,145px) minmax(0,1fr);align-items:center;gap:10px 14px}.release-form>label:not(.release-check){color:var(--text2);font-size:var(--type-caption)}.release-form input,.release-form textarea{width:100%;min-width:0}.release-form textarea{resize:vertical;min-height:78px}.release-hash-input{font-family:var(--font-mono);font-size:var(--type-label)!important}.release-check{display:flex!important;align-items:center;gap:9px;color:var(--text2)!important}.release-check input{width:auto!important}.release-check.danger{color:#f0a0ae!important}.release-actions{display:flex;align-items:center;gap:10px;margin-top:12px}.release-actions span{color:var(--text3);font-size:var(--type-label)}
.system-traffic-top{display:flex;min-height:260px;flex-direction:column}.system-traffic-top-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.system-traffic-top-heading h3{margin-top:3px;color:var(--text);font-size:var(--type-body);letter-spacing:-.02em}.system-traffic-top-heading .coverage-badge{padding:5px 8px}.coverage-badge.info{color:#a8dfff;background:var(--accent-soft);border-color:rgba(88,185,255,.18)}.coverage-badge.danger{color:#ffabb8;background:var(--red-soft);border-color:rgba(251,113,133,.2)}.system-traffic-top-summary{margin:5px 0 7px;color:var(--text3);font-size:var(--type-label);line-height:1.45}.system-traffic-top-list{display:flex;flex:1;flex-direction:column}.system-traffic-top-list article{display:grid;grid-template-columns:21px 30px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:38px;border-top:1px solid rgba(139,178,207,.08)}.system-traffic-rank{color:var(--text3);font-size:var(--type-label);font-weight:var(--weight-semibold);text-align:center}.system-traffic-device{min-width:0}.system-traffic-device strong{display:block;overflow:hidden;color:var(--text);font-size:var(--type-caption);text-overflow:ellipsis;white-space:nowrap}.system-traffic-device small{display:block;margin-top:1px;color:var(--text3);font-size:var(--type-label)}.system-traffic-device .top-meter{margin-top:3px}.system-traffic-top-list article>b{color:#c8dbea;font-size:var(--type-caption);font-weight:var(--weight-semibold);white-space:nowrap}.system-traffic-top-empty{display:flex;flex:1;align-items:center;justify-content:center;gap:12px;min-height:156px;text-align:left}.system-traffic-top-empty>span{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;color:#fbd38d;background:var(--yellow-soft);border-radius:13px}.system-traffic-top-empty.danger>span{color:#ff9aaa;background:var(--red-soft)}.system-traffic-top-empty svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}.system-traffic-top-empty strong{display:block;color:var(--text);font-size:var(--type-caption)}.system-traffic-top-empty p{max-width:290px;margin-top:4px;color:var(--text3);font-size:var(--type-label);line-height:1.55}

/* Two-column chart row inside host panels */
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.chart-row:last-child  { margin-bottom: 0; }
.chart-row .chart-box  { margin-bottom: 0; }

/* Disk bars */
.disk-bar-wrap {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-top: 4px;
}

.disk-bar {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  flex: 1 1 140px;
  min-width: 120px;
}

.disk-label { color: var(--text2); font-size:var(--type-compact); margin-bottom: 4px; }
.disk-val   { font-size: 20px; font-weight:var(--weight-semibold); }

.disk-track {
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  margin-top: 6px;
}

.disk-fill { height: 100%; border-radius: 2px; }

/* ============================================================
   SERVICE GRID
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.svc-item {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.svc-dot      { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.svc-dot.up   { background: var(--green); }
.svc-dot.down { background: var(--red);   }

/* ============================================================
   APP LIST
   ============================================================ */
.app-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

/* Search input — fixed width on desktop, full-width on xs */
.app-search-input { width: 200px; }

.app-category { margin-bottom: 16px; }

.app-category-title {
  font-size:var(--type-body);
  font-weight:var(--weight-semibold);
  margin-bottom: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}

.app-item {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size:var(--type-body);
  gap: 8px;
  min-width: 0;
}

.app-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quota section spacing */
.quota-section { margin-top: 20px; }

/* Quota threshold row: number input + unit select side by side */
.quota-threshold-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.quota-num-input   { flex: 1; min-width: 0; }
.quota-unit-select { width: 80px !important; flex-shrink: 0; }
.quota-modal-hint {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(66,165,245,.08);
  color: var(--text2);
  font-size:var(--type-compact);
  line-height: 1.55;
}
.quota-modal-hint strong { color: var(--text); }

/* ── App toggle switch ─────────────────────────────────────── */
.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle input { display: none; }

.toggle .slider {
  position: absolute;
  inset: 0;
  background: var(--bg3);
  border-radius: 10px;
  transition: background var(--transition);
}

.toggle .slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: var(--text2);
  border-radius: 50%;
  transition: transform var(--transition), background var(--transition);
}

.toggle input:checked + .slider          { background: var(--red); }
.toggle input:checked + .slider::before  { transform: translateX(16px); background: #fff; }

/* ============================================================
   DEVICES — detail back bar
   ============================================================ */
.device-back-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--pad-sm);
}

.modal {
  background: var(--bg2);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
}

.modal h3 { margin-bottom: 16px; }

.modal label {
  display: block;
  font-size:var(--type-body);
  color: var(--text2);
  margin: 10px 0 4px;
}

.modal .actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ============================================================
   LOG LIST
   ============================================================ */
.log-list {
  max-height: 500px;
  overflow-y: auto;
}

.log-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size:var(--type-body);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.log-item .time {
  color: var(--text2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   BAN CARDS (Alerts page)
   ============================================================ */
.ban-active-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gap);
}

.ban-active-card {
  background: var(--card);
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  min-width: 0;
}

.ban-active-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.ban-active-name {
  font-size: 16px;
  font-weight:var(--weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ban-active-body { display: flex; flex-direction: column; gap: 5px; }

.ban-detail {
  display: flex;
  gap: 8px;
  font-size:var(--type-body);
  align-items: baseline;
  flex-wrap: wrap;
}

.ban-lbl {
  color: var(--text2);
  min-width: 65px;
  flex-shrink: 0;
}

.ban-quota-info span:last-child { color: var(--yellow); }

.ban-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--green);
  font-size: 15px;
}

.ban-empty span { display: block; margin-bottom: 8px; }

.row-active-ban { background: rgba(239,83,80,.06); }

/* ============================================================
   RESPONSIVE — Tablet  768px ~ 1024px
   两列卡片，图表双列保留
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
  .cards {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ============================================================
   RESPONSIVE — Mobile  ≤768px
   所有多列布局全部折成单列，防止任何撑破
   ============================================================ */
@media (max-width: 768px) {

  /* ── Sidebar: off-canvas drawer ── */
  .sidebar {
    transform: translateX(-100%);
    width: min(var(--sidebar-w), 80vw);
  }
  .sidebar.open                    { transform: translateX(0); }
  .sidebar-header .hamburger       { display: block; }

  /* ── Layout ── */
  .main                            { margin-left: 0; }
  .mobile-only                     { display: flex; }
  .overlay                         { display: block; }

  /* ── Topbar compact ── */
  .topbar                          { padding: 0 var(--pad-sm); gap: 6px; }
  .topbar h2                       { font-size:var(--type-body); font-weight:var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }

  /* ── Refresh control compact ── */
  .refresh-ctrl                    { gap: 4px; }
  .rf-label                        { display: none; }
  .rf-ago                          { display: none; }
  .refresh-ctrl select             { padding: 2px 4px; font-size:var(--type-caption); }
  .rf-now                          { padding: 2px 5px; font-size:var(--type-compact); }

  /* ── Content ── */
  .content                         { padding: var(--pad-sm); }

  /* ── Stat cards: 单列，防止任何溢出 ── */
  .cards {
    grid-template-columns: 1fr;
  }
  .stat-card                       { min-width: 0; }
  .stat-card .value                { font-size: 20px; word-break: break-all; }

  /* ── Charts ── */
  .chart-el                        { height: 200px; }

  /* ── Host panel ── */
  .host-panel                      { padding: 10px; }

  /* ── 所有双列 grid 全部折成单列 ── */
  .chart-row,
  .chart-row-2col,
  .dash-tables,
  .dns-cols                        { grid-template-columns: 1fr; }

  /* ── App / service / ban 网格单列 ── */
  .app-grid                        { grid-template-columns: 1fr; }
  .svc-grid                        { grid-template-columns: repeat(2, 1fr); }
  .ban-active-list                 { grid-template-columns: 1fr; }

  /* ── Modal ── */
  .modal                           { padding: 16px; }

  /* ── Login ── */
  .login-box                       { padding: 24px 16px; }

  /* ── Sidebar footer ── */
  .sidebar-footer                  { flex-wrap: wrap; }

  /* ── App filter ── */
  .app-search-input                { width: 100%; }
  .app-filter-bar                  { flex-direction: column; align-items: stretch; }
  .app-filter-bar select,
  .app-filter-bar button           { width: 100%; }

  /* ── Quota threshold ── */
  .quota-unit-select               { width: 72px !important; }

  /* ── 表格：强制横向滚动，不撑破 ── */
  /* table-wrap 已有 overflow-x:auto + min-width:0，这里不强制 table 最小宽，
     让各表格按内容自然宽度横滚即可 */
  .table-wrap                      { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }

  /* ── disk bar 单列 ── */
  .disk-bar-wrap                   { flex-direction: column; }
  .disk-bar                        { flex: none; width: 100%; }
}

/* ============================================================
   非布局辅助类（不受断点影响）
   ============================================================ */

/* Lift ban button alignment inside ban card */
.ban-lift-action   { margin-top: 8px; text-align: right; }

/* Inline lift button in history table */
.btn-lift-inline   { margin-left: 6px; padding: 2px 8px; font-size:var(--type-caption); }

/* Alert log item highlight */
.log-item-alert    { background: rgba(239,83,80,.08); }

/* ── Protected app indicator ─────────────────────────────── */
.shield-btn {
  cursor: pointer;
  font-size: 16px;
  margin-right: 6px;
  transition: all 0.2s;
  user-select: none;
}
.shield-btn.shield-on {
  filter: drop-shadow(0 0 4px rgba(255,193,7,.6));
}
.shield-btn.shield-off {
  opacity: 0;
  font-size:var(--type-body);
}
.app-item:hover .shield-btn.shield-off {
  opacity: 0.4;
}
.shield-btn.shield-off:hover {
  opacity: 0.8 !important;
}
.toggle.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}


/* ── Security pages ──────────────────────────────────────── */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
}
.policy-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(255,255,255,.05);
}
.policy-card h4 { margin: 0 0 8px; color: var(--text); }
.policy-card p { font-size:var(--type-body); color: var(--text2); margin: 4px 0; }
.policy-card ul { font-size:var(--type-compact); color: var(--text2); margin: 8px 0; padding-left: 20px; }
.policy-card .btn-sm { margin-top: 12px; display: inline-block; text-decoration: none; }
.notice { line-height: 1.6; }

/* ============================================================
   NewProbe Human UI — 2026-08-27
   The rules below deliberately override the legacy panel shell while
   preserving class compatibility for pages that will migrate later.
   ============================================================ */
:root {
  --bg: #06101c;
  --bg2: #0a1727;
  --bg3: #10243a;
  --card: rgba(14, 31, 50, .84);
  --card-solid: #0e1f32;
  --border: rgba(139, 178, 207, .14);
  --border-strong: rgba(139, 193, 232, .25);
  --text: #edf7ff;
  --text2: #91a8bb;
  /* Secondary text stays above 4.5:1 on the lightest panel surface. */
  --text3: #7892a6;
  --accent: #58b9ff;
  --accent-soft: rgba(88, 185, 255, .12);
  --green: #2dd4bf;
  --green-soft: rgba(45, 212, 191, .12);
  --red: #fb7185;
  --red-soft: rgba(251, 113, 133, .12);
  --yellow: #fbbf24;
  --yellow-soft: rgba(251, 191, 36, .12);
  --purple: #a78bfa;
  --sidebar-w: 252px;
  --topbar-h: 72px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius: 16px;
  --gap: 16px;
  --pad: clamp(20px, 3vw, 38px);
  --shadow-soft: 0 18px 60px rgba(0, 0, 0, .22);
}

html { background: var(--bg); }
body {
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 78% -20%, rgba(45, 212, 191, .09), transparent 35%),
    radial-gradient(circle at 32% 5%, rgba(88, 185, 255, .08), transparent 28%),
    var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

::selection { background: rgba(88,185,255,.3); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.session-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 50% 42%,rgba(34,125,177,.16),transparent 34%),var(--bg);color:var(--text);text-align:center}.session-loading .brand-mark{width:52px;height:52px;margin-bottom:16px;border-radius:17px}.session-loading .brand-mark svg{width:25px;height:25px;animation:sessionPulse 1.2s ease-in-out infinite}.session-loading strong{font-size:var(--type-body)}.session-loading p{margin-top:5px;color:var(--text3);font-size:var(--type-label)}.session-loading-delayed .brand-mark svg{animation:none}.session-retry{margin-top:18px;padding:9px 18px;border:1px solid var(--line-strong);border-radius:11px;background:var(--panel2);color:var(--text);font:inherit;cursor:pointer}.session-retry:hover{border-color:var(--cyan);background:var(--cyan-dim)}@keyframes sessionPulse{50%{opacity:.45;transform:scale(.92)}}
svg { display: block; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #76a8c9;
  font-size:var(--type-caption);
  font-weight:var(--weight-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mono { font-family: var(--font-mono); }
.type-display { font-family: var(--font-display); font-size: var(--type-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -.05em; }
.type-page-title { font-family: var(--font-display); font-size: var(--type-page-title); font-weight: var(--weight-bold); line-height: var(--leading-heading); letter-spacing: -.035em; }
.type-section-title { font-family: var(--font-display); font-size: var(--type-section-title); font-weight: var(--weight-bold); line-height: var(--leading-heading); letter-spacing: -.02em; }
.type-card-title { font-size: var(--type-card-title); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.type-body { font-size: var(--type-body); line-height: var(--leading-body); }
.type-compact { font-size: var(--type-compact); line-height: var(--leading-body); }
.type-caption { font-size: var(--type-caption); line-height: var(--leading-caption); }
.type-label { font-size: var(--type-label); font-weight: var(--weight-semibold); line-height: var(--leading-caption); }
.type-metric { font-size: var(--type-metric); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.muted { color: var(--text3) !important; }

button {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 11px;
  background: linear-gradient(135deg, #68c4ff, #46a8f1);
  color: #03101a;
  box-shadow: 0 8px 24px rgba(56, 163, 238, .12);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
}
button:hover { opacity: 1; filter: brightness(1.08); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:disabled { transform: none; filter: none; }
.btn-outline {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow: none;
}
.btn-danger { background: linear-gradient(135deg, #fb7185, #e84d68); color: #fff; }
.btn-danger-soft, .btn-success-soft {
  min-height: 38px;
  padding: 8px 14px;
  box-shadow: none;
}
.btn-danger-soft { color: #ff9aaa; background: var(--red-soft); border: 1px solid rgba(251,113,133,.22); }
.btn-success-soft { color: #61e7d2; background: var(--green-soft); border: 1px solid rgba(45,212,191,.22); }
.icon-button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 9px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--text2);
  border: 1px solid transparent;
  border-radius: 11px;
  box-shadow: none;
}
.icon-button:hover { color: var(--text); background: rgba(255,255,255,.04); border-color: var(--border); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-only { display: none; }

input, select, textarea {
  background: rgba(7, 19, 33, .72);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  min-height: 42px;
}
input::placeholder { color: var(--text3); }
input:focus, select:focus, textarea:focus { border-color: rgba(88,185,255,.65); box-shadow: 0 0 0 3px rgba(88,185,255,.09); }

/* Login */
.login-wrap {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vw, 72px);
  background:
    radial-gradient(circle at 12% 18%, rgba(88,185,255,.13), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(45,212,191,.1), transparent 25%),
    linear-gradient(145deg, #050c16 0%, #071625 58%, #07121e 100%);
}
.login-wrap::before, .login-wrap::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(111, 190, 242, .09);
  border-radius: 50%;
  pointer-events: none;
}
.login-wrap::before { width: 760px; height: 760px; left: -350px; top: -420px; }
.login-wrap::after { width: 520px; height: 520px; right: -250px; bottom: -300px; }
.login-aurora {
  position: absolute;
  width: 480px;
  height: 480px;
  left: 48%;
  top: -330px;
  border-radius: 50%;
  background: rgba(88,185,255,.17);
  filter: blur(100px);
  pointer-events: none;
}
.login-shell {
  width: min(1120px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: clamp(48px, 9vw, 120px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.login-story { min-width: 0; }
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-lockup > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.brand-lockup strong { font-size: 17px; letter-spacing: -.02em; }
.brand-lockup small { color: var(--text3); font-size:var(--type-label); letter-spacing: .12em; }
.brand-lockup-large strong { font-size: 21px; }
.brand-lockup-large small { font-size:var(--type-caption); }
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #b9e7ff;
  background: linear-gradient(145deg, rgba(88,185,255,.24), rgba(45,212,191,.11));
  border: 1px solid rgba(130,208,255,.25);
  border-radius: 13px;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(23,125,190,.16);
}
.brand-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.brand-lockup-large .brand-mark { width: 46px; height: 46px; border-radius: 16px; }
.login-copy { margin-top: clamp(80px, 16vh, 150px); max-width: 650px; }
.login-copy h1 {
  margin-top: 19px;
  font-size: clamp(43px, 6vw, 72px);
  line-height: 1.08;
  letter-spacing: -.055em;
  font-weight:var(--weight-bold);
}
.login-copy h1 em { color: #78c9ff; font-style: normal; text-shadow: 0 14px 50px rgba(62,170,239,.16); }
.login-copy > p { margin-top: 23px; max-width: 540px; color: #8fa8bc; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.8; }
.login-feature-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 52px; color: #7793a9; font-size:var(--type-compact); }
.login-feature-row span { display: flex; align-items: center; gap: 7px; }
.login-feature-row svg { width: 16px; height: 16px; fill: none; stroke: #5fabc9; stroke-width: 1.7; }
.login-card {
  position: relative;
  width: 100%;
  padding: clamp(28px, 4vw, 42px);
  background: linear-gradient(155deg, rgba(17,38,61,.88), rgba(9,23,39,.94));
  border: 1px solid rgba(126, 181, 220, .18);
  border-radius: 28px;
  box-shadow: 0 34px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(24px);
}
.login-card-head { display: flex; align-items: center; gap: 15px; padding-right: 92px; }
.login-card-icon, .modal-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(88,185,255,.17);
}
.login-card-icon svg, .modal-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-card h2 { font-size: 26px; margin-top: 3px; letter-spacing: -.03em; }
.login-hint { color: var(--text2); margin: 18px 0 28px; font-size:var(--type-body); }
.login-card form > label, .modal > label { display: block; margin: 14px 0 8px; color: #a9bccb; font-size:var(--type-compact); font-weight:var(--weight-semibold); }
.input-shell { position: relative; }
.input-shell > svg { position: absolute; left: 14px; top: 14px; width: 17px; height: 17px; fill: none; stroke: #607b91; stroke-width: 1.8; pointer-events: none; }
.input-shell input { width: 100%; height: 48px; padding-left: 43px; }
.login-submit { width: 100%; height: 49px; margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.login-submit svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.form-message { margin-top: 13px; padding: 10px 12px; border-radius: 10px; font-size:var(--type-compact); line-height: 1.5; }
.form-message.error { color: #ff9bab; background: var(--red-soft); border: 1px solid rgba(251,113,133,.18); }
.login-private { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--text3); font-size:var(--type-caption); }
.login-private svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Shell */
.sidebar {
  background: linear-gradient(180deg, rgba(10,23,39,.98), rgba(7,18,31,.99));
  border-right: 1px solid var(--border);
  box-shadow: 16px 0 50px rgba(0,0,0,.1);
  padding: 0 12px;
}
.sidebar-header { min-height: 86px; padding: 18px 10px; }
.sidebar-close { display: none; }
.sidebar-nav { padding: 8px 0 20px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-group-label { margin: 0 12px 7px; color: var(--text3); font-size:var(--type-label); font-weight:var(--weight-bold); letter-spacing: .18em; }
.sidebar a {
  min-height: 44px;
  margin: 3px 0;
  padding: 10px 12px;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #7e95a8;
  font-size:var(--type-body);
}
.sidebar a:hover { background: rgba(255,255,255,.028); color: #bfd2df; }
.sidebar a.active { color: #cdeeff; border-color: rgba(88,185,255,.16); background: linear-gradient(90deg, rgba(88,185,255,.14), rgba(88,185,255,.055)); box-shadow: inset 3px 0 #58b9ff; }
.nav-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-chevron { width: 13px; height: 13px; margin-left: auto; opacity: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.sidebar a.active .nav-chevron { opacity: .75; }
.sidebar-footer { margin: auto 0 10px; padding: 14px 6px 4px; gap: 8px; border-top-color: var(--border); }
.user-avatar, .device-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #bfeaff;
  background: linear-gradient(145deg, rgba(88,185,255,.2), rgba(45,212,191,.1));
  border: 1px solid rgba(114,190,235,.2);
  font-size:var(--type-caption);
  font-weight:var(--weight-bold);
}
.user-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.user-copy strong { overflow: hidden; text-overflow: ellipsis; font-size:var(--type-compact); }
.user-copy span { color: var(--text3); font-size:var(--type-label); margin-top: 2px; }
.main { background: transparent; }
.topbar {
  height: var(--topbar-h);
  padding: 0 var(--pad);
  background: rgba(6,16,28,.82);
  border-bottom-color: var(--border);
  backdrop-filter: blur(20px);
}
.page-heading { display: flex; flex-direction: column; gap: 2px; }
.page-heading > span { color: var(--text3); font-size:var(--type-label); font-weight:var(--weight-bold); letter-spacing: .14em; }
.page-heading h2 { font-size: 17px; letter-spacing: -.02em; }
.connection-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #7fbcae; background: rgba(45,212,191,.06); border: 1px solid rgba(45,212,191,.12); border-radius: 999px; font-size:var(--type-caption); }
.connection-pill i, .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(45,212,191,.8); }
.language-switch{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 11px;color:#b8d8e9;background:rgba(88,185,255,.07);border:1px solid rgba(104,195,255,.19);border-radius:999px;font:inherit;font-size:var(--type-caption);font-weight:var(--weight-semibold);cursor:pointer;white-space:nowrap;transition:border-color .18s ease,background .18s ease,color .18s ease}
.language-switch:hover{color:#e7f7ff;background:rgba(88,185,255,.13);border-color:rgba(104,195,255,.35)}
.language-switch:focus-visible{outline:2px solid rgba(88,185,255,.65);outline-offset:2px}
.language-switch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-language-switch{position:absolute;top:20px;right:20px}
.refresh-ctrl { gap: 7px; color: var(--text3); }
.rf-label, .rf-ago { font-size:var(--type-caption); }
.refresh-ctrl select { min-height: 31px; height: 31px; padding: 3px 24px 3px 8px; font-size:var(--type-caption); border-radius: 9px; }
.rf-toggle { width: 32px; height: 18px; }
.rf-slider { border-radius: 10px; }
.rf-slider::before { width: 12px; height: 12px; left: 3px; bottom: 3px; }
.rf-toggle input:checked + .rf-slider::before { transform: translateX(14px); }
.rf-now { width: 32px; height: 32px; min-height: 32px; padding: 7px; }
.content { padding: var(--pad); max-width: 1600px; width: 100%; margin: 0 auto; }
.mobile-dock { display: none; }

/* Shared content */
.surface, .chart-box, .stat-card, .host-panel, .policy-card {
  background: linear-gradient(155deg, rgba(16,36,57,.82), rgba(10,25,42,.9));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 50px rgba(0,0,0,.08);
}
.surface { border-radius: var(--radius-lg); padding: 22px; min-width: 0; }
.surface-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.surface-heading h2, .section-heading-row h2 { margin-top: 5px; font-size: 20px; letter-spacing: -.03em; }
.surface-heading p, .section-heading-row p { color: var(--text2); font-size:var(--type-compact); }
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; margin: 32px 0 15px; }
.section-heading-row > div > p { margin-top: 7px; }
.text-link { display: inline-flex; align-items: center; gap: 3px; color: #78bde8; font-size:var(--type-caption); white-space: nowrap; }
.text-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.state-banner { display: flex; align-items: center; gap: 13px; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 15px; background: rgba(88,185,255,.07); color: #bfe7ff; }
.state-banner.danger { background: var(--red-soft); border-color: rgba(251,113,133,.2); color: #ffb0bd; }
.state-banner.success { background: var(--green-soft); border-color: rgba(45,212,191,.2); color: #7ce9d8; }
.state-banner.info { background: var(--accent-soft); border-color: rgba(88,185,255,.2); }
.state-banner.warn { background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.22); color: #fbd38d; }
.state-banner-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,255,255,.05); border-radius: 11px; }
.state-banner-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.state-banner > div { flex: 1; }
.state-banner strong { display: block; font-size:var(--type-compact); }
.state-banner p { margin-top: 3px; color: currentColor; opacity: .7; font-size:var(--type-caption); line-height: 1.5; }
.state-banner button { min-height: 34px; }
.empty-state { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text2); border: 1px dashed var(--border-strong); border-radius: 20px; }
.empty-state > span, .empty-state > svg { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 16px; color: #5d8ba8; }
.empty-state svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.empty-state h2 { color: var(--text); font-size: 17px; }
.empty-state p { margin-top: 8px; font-size:var(--type-compact); }
.empty-state.compact { min-height: 150px; }
.empty-state.compact > svg { margin: 0 0 10px; }

/* Dashboard */
.network-hero {
  min-height: 250px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(112,187,230,.16);
  border-radius: 28px;
  background:
    radial-gradient(circle at 83% 45%, rgba(45,212,191,.14), transparent 26%),
    linear-gradient(115deg, rgba(15,41,65,.96), rgba(7,26,44,.92) 55%, rgba(8,37,51,.9));
  box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.035);
}
.network-hero::after { content:""; position:absolute; inset:0; opacity:.22; background-image: radial-gradient(rgba(255,255,255,.4) .6px, transparent .6px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent, #000); }
.hero-copy { width: min(650px, 67%); position: relative; z-index: 2; }
.hero-copy h1 { margin: 14px 0 10px; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: -.055em; }
.hero-copy > p { max-width: 610px; color: #9bb2c4; font-size:var(--type-body); line-height: 1.7; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; color: #718da2; font-size:var(--type-caption); }
.hero-meta span { display: flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tone-warn .status-dot { background: var(--yellow); box-shadow: 0 0 10px rgba(251,191,36,.8); }
.tone-danger .status-dot { background: var(--red); box-shadow: 0 0 10px rgba(251,113,133,.8); }
.tone-unknown .status-dot { background: #64748b; box-shadow: none; }
.network-orbit { position: absolute; right: clamp(30px, 8vw, 120px); top: 50%; width: 180px; height: 180px; transform: translateY(-50%); z-index: 1; }
.orbit-ring { position: absolute; inset: 0; border: 1px solid rgba(113,202,237,.13); border-radius: 50%; }
.orbit-ring-two { inset: 25px; border-color: rgba(45,212,191,.16); }
.orbit-core { position: absolute; inset: 56px; display: grid; place-items: center; border-radius: 50%; color: #b8efff; background: radial-gradient(circle at 35% 30%, #2083ae, #0a4c63); box-shadow: 0 0 0 9px rgba(62,181,215,.06), 0 18px 45px rgba(0,0,0,.3); }
.orbit-core svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.orbit-node { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #6ee7d4; box-shadow: 0 0 15px rgba(45,212,191,.8); }
.node-one { top: 20px; left: 35px; }.node-two { right: 2px; top: 82px; }.node-three { bottom: 17px; left: 58px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); margin: var(--gap) 0; }
.metric-card,
.metric-card.metric-primary {
  min-height: 118px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px;
  border: 1px solid rgba(88,185,255,.16);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(23,57,85,.92), rgba(11,30,48,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 14px 36px rgba(0,0,0,.08);
}
.metric-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: #7fcdff; background: var(--accent-soft); border-radius: 14px; }
.metric-icon.down { color:#5ee4d1; background:var(--green-soft); }.metric-icon.up { color:#85aefc; background:rgba(96,165,250,.11); }.metric-icon.shield { color:#d0baff; background:rgba(167,139,250,.11); }
.metric-icon svg { width: 21px; height: 21px; fill:none; stroke:currentColor; stroke-width:1.7; }
.metric-card p { color: var(--text2); font-size:var(--type-caption); }
.metric-card strong { display: block; margin: 4px 0 3px; font-size: clamp(18px, 2vw, 25px); letter-spacing: -.035em; }
.metric-card > div > span { color: var(--text3); font-size:var(--type-label); }
.dashboard-split { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: var(--gap); }
.calm-badge { width: 42px; height: 42px; display:grid; place-items:center; color:#56ddc8; background:var(--green-soft); border-radius:14px; }
.calm-badge.warn { color:#ffd36b; background:var(--yellow-soft); }
.calm-badge svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; }
.calm-state { min-height: 100px; display:flex; align-items:center; gap:20px; color:var(--text2); font-size:var(--type-compact); }
.calm-illustration { position:relative; width:100px; height:65px; flex:0 0 auto; border-bottom:1px solid rgba(45,212,191,.2); }
.calm-illustration::before, .calm-illustration::after, .calm-illustration span { content:""; position:absolute; bottom:0; border-radius:50% 50% 0 0; background:linear-gradient(180deg,rgba(45,212,191,.2),rgba(45,212,191,.04)); }
.calm-illustration::before { left:8px;width:48px;height:43px; }.calm-illustration::after { right:3px;width:52px;height:58px; }.calm-illustration span { left:42px;width:38px;height:30px; }
.calm-illustration i, .calm-illustration b { position:absolute; width:4px; height:4px; border-radius:50%; background:#5be0cc; box-shadow:0 0 9px #2dd4bf; }
.calm-illustration i { top:15px;left:18px; }.calm-illustration b { top:4px;right:12px; }
.attention-list { list-style:none; display:flex; flex-direction:column; gap:11px; }
.attention-list li { display:flex; align-items:flex-start; gap:11px; padding:11px 12px; background:rgba(255,255,255,.022); border-radius:12px; }
.severity { width:7px;height:7px;margin-top:4px;border-radius:50%;background:var(--yellow);box-shadow:0 0 8px rgba(251,191,36,.5); }.severity.danger{background:var(--red);box-shadow:0 0 8px rgba(251,113,133,.5)}
.attention-list strong { font-size:var(--type-caption); }.attention-list p{margin-top:3px;color:var(--text2);font-size:var(--type-caption);line-height:1.5}
.wifi-glyph { width:48px;height:48px;display:grid;place-items:center;border-radius:16px;color:#62dfcc;background:var(--green-soft); }
.wifi-glyph svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6}
.quality-row { display:flex;align-items:center;gap:18px;margin:28px 0 24px; }
.quality-score strong { display:block;font-size:34px;letter-spacing:-.05em; }.quality-score span{color:var(--text3);font-size:var(--type-label)}
.quality-track{height:8px;flex:1;background:rgba(255,255,255,.055);border-radius:10px;overflow:hidden}.quality-track i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#4aa9ec,#2dd4bf);box-shadow:0 0 14px rgba(45,212,191,.3)}
.wifi-facts{display:flex;gap:8px}.wifi-facts span{flex:1;padding:10px;background:rgba(255,255,255,.025);border-radius:10px;color:var(--text3);font-size:var(--type-label)}.wifi-facts strong{display:block;color:var(--text);font-size:var(--type-body);margin-bottom:3px}
.traffic-insight-grid{margin-top:var(--gap);grid-template-columns:minmax(0,1fr) minmax(320px,.72fr)}
.traffic-period-card .surface-heading p{max-width:560px;margin-top:7px;line-height:1.6}.coverage-badge{flex:0 0 auto;padding:7px 10px;color:#ffd36b;background:var(--yellow-soft);border:1px solid rgba(251,191,36,.14);border-radius:999px;font-size:var(--type-label);white-space:nowrap}.coverage-badge.complete{color:#66dfcd;background:var(--green-soft);border-color:rgba(45,212,191,.15)}
.period-total-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.period-total-row>div{display:flex;align-items:center;gap:11px;padding:13px;background:rgba(255,255,255,.025);border-radius:13px}.period-direction{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;color:#58dec9;background:var(--green-soft);border-radius:11px}.period-direction.up{color:#91b3ff;background:rgba(96,165,250,.1)}.period-direction svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}.period-total-row p{color:var(--text3);font-size:var(--type-label)}.period-total-row strong{display:block;margin-top:4px;color:var(--text);font-size:15px;letter-spacing:-.025em}.coverage-track{height:6px;margin-top:15px;overflow:hidden;background:rgba(255,255,255,.05);border-radius:8px}.coverage-track i{display:block;height:100%;min-width:3%;background:linear-gradient(90deg,#58b9ff,#2dd4bf);border-radius:8px;transition:width .25s ease}
.traffic-top-list{display:flex;flex-direction:column}.traffic-top-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid rgba(139,178,207,.08)}.traffic-top-row:last-child{border:0}.device-avatar.small{width:30px;height:30px;border-radius:10px;font-size:var(--type-label)}.traffic-top-row>div{min-width:0}.traffic-top-row strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--type-caption)}.traffic-top-row b{font-size:var(--type-caption)}.top-meter{display:block;height:4px;margin-top:6px;overflow:hidden;background:rgba(255,255,255,.045);border-radius:6px}.top-meter i{display:block;height:100%;background:linear-gradient(90deg,rgba(88,185,255,.75),rgba(45,212,191,.75));border-radius:6px}
.human-charts .chart-box { min-height:350px;border-radius:22px;padding:20px; }.chart-box .chart-title{color:#b3c6d5;font-size:var(--type-compact);font-weight:var(--weight-bold)}.human-charts .chart-el{height:285px}
.lower-grid { grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); }
.active-device-list{display:flex;flex-direction:column}.active-device-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid rgba(139,178,207,.08)}.active-device-row:last-child{border:0}
.device-name{min-width:0;flex:1;display:flex;flex-direction:column}.device-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--type-caption)}.device-name span,.device-rate span{color:var(--text3);font-size:var(--type-label);margin-top:3px}.device-rate{text-align:right}.device-rate strong{display:block;font-size:var(--type-caption)}.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(45,212,191,.7)}.activity-dot.quiet{background:#4b6479;box-shadow:none}
.resource-list{display:flex;flex-direction:column;gap:15px}.resource-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(80px,1fr) 42px;align-items:center;gap:10px}.resource-row>div:first-child{display:flex;flex-direction:column}.resource-row strong{font-size:var(--type-caption)}.resource-row span{color:var(--text3);font-size:var(--type-label);margin-top:3px}.resource-row b{font-size:var(--type-caption);text-align:right}.resource-meter{height:6px;background:rgba(255,255,255,.055);border-radius:8px;overflow:hidden}.resource-meter i{display:block;height:100%;background:var(--green);border-radius:8px}.resource-meter i.warn{background:var(--yellow)}.resource-meter i.danger{background:var(--red)}
.uptime-note{display:flex;align-items:center;gap:7px;margin-top:20px;padding-top:14px;border-top:1px solid var(--border);color:var(--text3);font-size:var(--type-label)}.uptime-note svg{width:14px;height:14px;fill:none;stroke:#5eaac9;stroke-width:1.8}

/* Devices */
.page-intro-row { display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:24px }.page-intro-row h1,.device-detail-hero h1{margin:6px 0 7px;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.05em}.page-intro-row p,.device-detail-hero p{color:var(--text2);font-size:var(--type-compact);line-height:1.6}
.search-shell{width:min(340px,100%);position:relative}.search-shell svg{position:absolute;left:14px;top:13px;width:18px;height:18px;fill:none;stroke:#668196;stroke-width:1.8}.search-shell input{width:100%;padding-left:42px}
.device-summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:20px;background:var(--border);border:1px solid var(--border);border-radius:18px;overflow:hidden}.device-summary-strip>div{min-width:0;display:flex;align-items:center;gap:11px;padding:14px 17px;background:rgba(11,27,45,.96)}.summary-icon{width:32px;height:32px;display:grid;place-items:center;color:#75caff;background:var(--accent-soft);border-radius:10px}.summary-icon.active,.summary-icon.down{color:#56ddc8;background:var(--green-soft)}.summary-icon.up{color:#9cb9ff;background:rgba(96,165,250,.1)}.summary-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}.device-summary-strip p{min-width:0;color:var(--text3);font-size:var(--type-label)}.device-summary-strip strong{display:block;margin-top:3px;color:var(--text);font-size:var(--type-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}.device-card{min-width:0;padding:18px;background:linear-gradient(155deg,rgba(16,36,57,.82),rgba(10,25,42,.9));border:1px solid var(--border);border-radius:20px;box-shadow:inset 0 1px rgba(255,255,255,.025);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.device-card:hover{transform:translateY(-3px);border-color:rgba(88,185,255,.28);box-shadow:0 18px 45px rgba(0,0,0,.16)}
.device-card-head{display:flex;align-items:center;gap:11px}.device-avatar.large{width:43px;height:43px;border-radius:14px}.device-identity{min-width:0;flex:1}.device-identity h2{font-size:var(--type-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-identity p{margin-top:3px;color:var(--text3);font-size:var(--type-label)}.presence-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;color:#61ddc9;background:var(--green-soft);border:1px solid rgba(45,212,191,.13);border-radius:999px;font-size:var(--type-label);white-space:nowrap}.presence-pill i{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}.presence-pill.quiet{color:#7590a5;background:rgba(117,144,165,.08);border-color:rgba(117,144,165,.11)}.presence-pill.quiet i{box-shadow:none}
.device-speed-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 14px}.device-speed-pair>div{display:grid;grid-template-columns:16px 1fr;gap:1px 6px;padding:10px;background:rgba(255,255,255,.023);border-radius:11px}.device-speed-pair svg{grid-row:1/3;width:14px;height:14px;fill:none;stroke:#618298;stroke-width:1.8}.device-speed-pair span{color:var(--text3);font-size:var(--type-label)}.device-speed-pair strong{font-size:var(--type-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-app-preview{min-height:26px;display:flex;align-items:flex-start;flex-wrap:wrap;gap:5px}.device-app-preview span{max-width:110px;padding:4px 7px;background:rgba(88,185,255,.07);border-radius:7px;color:#81b5d3;font-size:var(--type-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-open{width:100%;min-height:36px;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.025);color:#81bfe8;border:1px solid var(--border);box-shadow:none;font-size:var(--type-caption)}.device-open svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.back-link{min-height:auto;padding:0;margin-bottom:18px;display:inline-flex;align-items:center;gap:7px;background:none;color:#79acd0;box-shadow:none;font-size:var(--type-caption)}.back-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.device-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 27px;margin-bottom:var(--gap);background:linear-gradient(120deg,rgba(17,43,68,.9),rgba(8,29,46,.92));border:1px solid rgba(106,183,226,.16);border-radius:24px}.device-detail-id{display:flex;align-items:center;gap:17px}.hero-avatar{width:62px;height:62px;border-radius:20px;font-size:16px}.presence-pill.detail{padding:8px 11px;font-size:var(--type-label)}
.detail-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-bottom:var(--gap)}.detail-metric-grid article{display:flex;align-items:center;gap:12px;padding:15px;background:rgba(13,31,50,.8);border:1px solid var(--border);border-radius:16px}.detail-metric-grid article>span{width:34px;height:34px;display:grid;place-items:center;color:#70c6f5;background:var(--accent-soft);border-radius:11px}.detail-metric-grid svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}.detail-metric-grid p{color:var(--text3);font-size:var(--type-label)}.detail-metric-grid strong{display:block;margin-top:4px;font-size:var(--type-body)}
.detail-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:var(--gap)}.detail-traffic .chart-box{margin:0;padding:0;border:0;background:transparent;box-shadow:none}.detail-help{display:flex;flex-direction:column}.detail-help-icon{width:46px;height:46px;display:grid;place-items:center;margin-bottom:24px;color:#73dfcf;background:var(--green-soft);border-radius:15px}.detail-help-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7}.detail-help h2{margin:7px 0 10px;font-size:19px;letter-spacing:-.03em}.detail-help>p{color:var(--text2);font-size:var(--type-caption);line-height:1.7}.detail-help ul{list-style:none;margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:9px}.detail-help li{display:flex;align-items:center;gap:8px;color:#7791a5;font-size:var(--type-label)}.detail-help li svg{width:13px;height:13px;fill:none;stroke:#47cdb8;stroke-width:2}
.apps-heading{margin-top:30px}.detected-app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.detected-app-card{display:flex;align-items:center;gap:12px;padding:15px 16px;background:rgba(13,31,50,.72);border:1px solid var(--border);border-radius:16px}.detected-app-card.paused{border-color:rgba(251,113,133,.16);background:linear-gradient(120deg,rgba(66,27,42,.25),rgba(13,31,50,.72))}.app-avatar{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;color:#b6e7ff;background:var(--accent-soft);border-radius:12px;font-size:var(--type-caption);font-weight:var(--weight-bold)}.app-card-copy{min-width:0;flex:1}.app-card-copy h3{font-size:var(--type-compact);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-card-copy p{margin-top:4px;color:var(--text3);font-size:var(--type-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.paused-label{display:flex;align-items:center;gap:5px;margin-top:5px;color:#ff91a3;font-size:var(--type-label)}.paused-label i{width:5px;height:5px;border-radius:50%;background:currentColor}
.paused-label.partial,.paused-label.drifted{color:#fbd38d}.paused-label.unknown{color:#9eb1c3}.detected-app-card button:disabled{opacity:.55;cursor:not-allowed}

/* Apps */
.apps-page{display:flex;flex-direction:column;gap:18px}.apps-intro{margin-bottom:0}.app-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;background:var(--border);border:1px solid var(--border);border-radius:19px}.app-summary-strip article{min-width:0;display:flex;align-items:center;gap:12px;padding:15px 17px;background:rgba(11,27,45,.96)}.app-summary-strip article.attention{background:linear-gradient(135deg,rgba(69,42,19,.35),rgba(11,27,45,.96))}.app-summary-strip p{min-width:0;color:var(--text3);font-size:var(--type-label)}.app-summary-strip strong{display:block;margin:3px 0 2px;color:var(--text);font-size:21px}.app-summary-strip small{display:block;overflow:hidden;color:var(--text3);font-size:var(--type-label);text-overflow:ellipsis;white-space:nowrap}.summary-icon.safe{color:#5eead4;background:var(--green-soft)}
.app-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px}.app-filter-tabs{min-width:0;display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none}.app-filter-tabs::-webkit-scrollbar{display:none}.app-filter-tabs button{min-height:34px;padding:7px 11px;flex:0 0 auto;border:0;border-radius:9px;background:transparent;box-shadow:none;color:var(--text3);font-size:var(--type-label)}.app-filter-tabs button.active{color:#bfeaff;background:var(--accent-soft)}.quota-open{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}.quota-open svg,.app-control-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.app-group-heading{margin:8px 0 -7px}.app-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.app-control-card{min-width:0;padding:16px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(16,38,60,.9),rgba(9,25,42,.82));box-shadow:0 12px 28px rgba(0,0,0,.08);transition:transform .2s ease,border-color .2s ease}.app-control-card:hover{transform:translateY(-2px);border-color:rgba(88,185,255,.24)}.app-control-card.paused{border-color:rgba(251,113,133,.2);background:linear-gradient(145deg,rgba(69,27,40,.32),rgba(9,25,42,.84))}.app-control-card.protected:not(.paused){border-color:rgba(45,212,191,.16)}.app-control-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px}.app-control-head>div{min-width:0}.app-control-head h3{overflow:hidden;font-size:var(--type-body);text-overflow:ellipsis;white-space:nowrap}.app-control-head p{margin-top:4px;overflow:hidden;color:var(--text3);font-size:var(--type-label);text-overflow:ellipsis;white-space:nowrap}.app-protect-button{min-height:29px;display:flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid transparent;border-radius:9px;background:rgba(255,255,255,.025);box-shadow:none;color:#6f889b;font-size:var(--type-label)}.app-protect-button:hover{color:#9edfff;border-color:var(--border)}.app-protect-button.on{color:#5eead4;background:var(--green-soft);border-color:rgba(45,212,191,.12)}.app-protect-button.static{cursor:default}.app-protect-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9}.app-control-status{min-height:55px;margin:15px 0 12px;padding:11px;background:rgba(255,255,255,.023);border-radius:11px}.app-control-status .paused-label{margin:0;font-size:var(--type-label)}.app-available{display:flex;align-items:center;gap:6px;color:#62dcc9;font-size:var(--type-label)}.app-available i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.device-scope-note{display:block;margin-top:7px;color:#7fa5bf;font-size:var(--type-label)}.app-control-actions{display:grid;grid-template-columns:1.15fr .85fr;gap:7px}.app-control-actions button{min-height:36px;padding:8px 9px;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:var(--type-label)}.app-control-actions button:disabled{opacity:.48;cursor:not-allowed}
.app-quota-panel{margin-top:8px}.app-quota-panel .surface-heading p{margin-top:5px;color:var(--text3);font-size:var(--type-label)}.quota-safety-note{display:flex;align-items:flex-start;gap:8px;margin-top:13px;padding:10px 12px;color:#83b7d2;background:rgba(88,185,255,.055);border:1px solid rgba(88,185,255,.1);border-radius:11px;font-size:var(--type-label);line-height:1.55}.quota-safety-note svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:#5eead4;stroke-width:1.8}.quota-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.quota-human-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px;background:linear-gradient(145deg,rgba(17,40,61,.82),rgba(9,26,43,.76));border:1px solid var(--border);border-radius:15px}.quota-human-card.exceeded{border-color:rgba(245,158,11,.24);background:linear-gradient(145deg,rgba(68,48,17,.3),rgba(9,26,43,.78))}.quota-human-card.unavailable{border-style:dashed}.quota-device-icon{width:38px;height:38px;display:grid;place-items:center;color:#74c9ff;background:var(--accent-soft);border-radius:12px}.quota-device-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.quota-card-copy{min-width:0}.quota-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.quota-card-title h3{min-width:0;overflow:hidden;font-size:var(--type-caption);text-overflow:ellipsis;white-space:nowrap}.quota-card-title strong{color:#bce8ff;font-size:var(--type-caption)}.quota-human-card.exceeded .quota-card-title strong{color:#fbd38d}.quota-human-card p{margin-top:5px;color:var(--text2);font-size:var(--type-label);line-height:1.5}.quota-human-card .quota-card-copy>span{display:block;margin-top:6px;color:var(--text3);font-size:var(--type-label)}.quota-progress-track{height:5px;margin-top:9px;overflow:hidden;background:rgba(255,255,255,.06);border-radius:999px}.quota-progress-track i{display:block;height:100%;background:linear-gradient(90deg,#58b9ff,#2dd4bf);border-radius:inherit;transition:width .25s ease}.quota-human-card.exceeded .quota-progress-track i{background:linear-gradient(90deg,#f59e0b,#fb7185)}.icon-button.danger{color:#ff91a3}
.device-app-picker{width:min(520px,calc(100vw - 28px))}.device-picker-list{max-height:52vh;display:flex;flex-direction:column;gap:7px;overflow-y:auto}.device-picker-list>button{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;min-height:56px;padding:9px 11px;text-align:left;background:rgba(255,255,255,.025);border:1px solid var(--border);box-shadow:none}.device-picker-list>button:hover:not(:disabled){border-color:rgba(88,185,255,.26);background:var(--accent-soft)}.device-picker-list>button:disabled{opacity:.5;cursor:not-allowed}.device-picker-list>button>span:nth-child(2){min-width:0}.device-picker-list strong,.device-picker-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-picker-list strong{font-size:var(--type-caption)}.device-picker-list small{margin-top:3px;color:var(--text3);font-size:var(--type-label)}.device-picker-list em{padding:5px 7px;border-radius:8px;color:#8fd5ff;background:var(--accent-soft);font-size:var(--type-label);font-style:normal;white-space:nowrap}.device-picker-list em.active{color:#ff9aaa;background:var(--red-soft)}.device-picker-list em.partial,.device-picker-list em.drifted{color:#fbd38d;background:var(--yellow-soft)}.device-picker-list em.unknown{color:#9eb1c3;background:rgba(255,255,255,.04)}.device-picker-list>button>svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}.scope-overlap-note{display:flex;align-items:flex-start;gap:9px;margin-bottom:13px;padding:11px;color:#fbd38d;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.17);border-radius:11px;font-size:var(--type-label);line-height:1.55}.scope-overlap-note svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8}

@media (max-width:1180px){.app-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-summary-strip{grid-template-columns:1fr 1fr}.quota-card-grid{grid-template-columns:1fr}}
@media (max-width:760px){.app-summary-strip article{padding:12px}.app-summary-strip small{display:none}.app-toolbar{align-items:stretch;flex-direction:column}.app-filter-tabs{width:100%}.quota-open{width:100%;justify-content:center}.app-control-grid{grid-template-columns:1fr}.app-control-card{padding:14px}.app-quota-panel .surface-heading{align-items:stretch;flex-direction:column}.app-quota-panel .surface-heading button{width:100%}.device-app-picker{padding:19px}.device-picker-list>button{grid-template-columns:auto minmax(0,1fr) auto}.device-picker-list>button>svg{display:none}}
@media (max-width:430px){.app-control-actions{grid-template-columns:1fr}.app-control-head{grid-template-columns:auto minmax(0,1fr)}.app-protect-button{grid-column:2;justify-self:start}.quota-human-card{align-items:flex-start}.quota-device-icon{display:none}}
@media (max-width:900px){.release-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.release-summary{grid-template-columns:1fr}.release-attention{flex-direction:column}.release-form{grid-template-columns:1fr;gap:6px}.release-form>label:not(.release-check){margin-top:7px}.release-actions{align-items:stretch;flex-direction:column}.release-actions button{width:100%}}
@media (max-width:600px){.system-traffic-top{min-height:0}.system-traffic-top-heading{align-items:flex-start}.system-traffic-top-heading h3{font-size:var(--type-compact)}.system-traffic-top-list article{grid-template-columns:18px 30px minmax(0,1fr) auto;gap:7px}.system-traffic-device small{display:none}.system-traffic-top-summary{margin-bottom:9px}}

/* Human DNS safety */
.dns-safety-page{display:flex;flex-direction:column;gap:16px}.dns-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.dns-heading h2{margin:3px 0 5px;font-size:25px}.dns-heading>div>p:last-child{max-width:650px;color:var(--text2);font-size:var(--type-caption);line-height:1.6}.dns-refresh{flex:0 0 auto}.dns-human-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.dns-human-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;min-height:142px;padding:18px;border:1px solid var(--border);border-radius:19px;background:linear-gradient(145deg,rgba(16,39,61,.92),rgba(8,24,40,.82));box-shadow:0 14px 32px rgba(0,0,0,.09)}.dns-human-card.success{border-color:rgba(45,212,191,.17)}.dns-human-card.danger{border-color:rgba(251,113,133,.2)}.dns-human-card.warning{border-color:rgba(245,158,11,.2)}.dns-card-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#64e5d1;background:rgba(45,212,191,.1)}.dns-human-card.danger .dns-card-icon{color:#ff9aaa;background:rgba(251,113,133,.1)}.dns-human-card.warning .dns-card-icon{color:#fbd38d;background:rgba(245,158,11,.1)}.dns-card-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.dns-human-card small{display:block;color:var(--text3);font-size:var(--type-label)}.dns-human-card strong{display:block;margin:5px 0 8px;color:var(--text);font-size:18px;letter-spacing:-.025em}.dns-human-card p{color:var(--text2);font-size:var(--type-label);line-height:1.65}.dns-managed-panel{padding:20px}.dns-managed-panel .surface-heading{margin-bottom:13px}.dns-managed-panel .surface-heading>div>p:last-child{max-width:680px;color:var(--text2);font-size:var(--type-label);line-height:1.6}.dns-track-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dns-track-list article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px 13px;border:1px solid rgba(148,183,214,.08);border-radius:13px;background:rgba(7,23,38,.45)}.dns-track-list article>div{min-width:0}.dns-track-list strong{display:block;font-size:var(--type-caption)}.dns-track-list p{margin-top:3px;color:var(--text3);font-size:var(--type-label);line-height:1.45}.dns-track-list article>span:last-child{color:var(--text3);font-size:var(--type-label);white-space:nowrap}.dns-track-dot{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#9eafbf;background:rgba(148,163,184,.08);font-size:var(--type-caption)}.dns-track-dot.success{color:#5eead4;background:rgba(45,212,191,.1)}.dns-track-dot.warn{color:#fbd38d;background:rgba(245,158,11,.1)}.dns-overlap-note{display:flex;align-items:flex-start;gap:9px;margin-top:11px;padding:12px 14px;border:1px solid rgba(88,185,255,.13);border-radius:13px;background:rgba(88,185,255,.055);font-size:var(--type-label);line-height:1.55}.dns-overlap-note strong{color:#a8dfff;white-space:nowrap}.dns-overlap-note span{color:var(--text2)}.dns-actions{display:flex;align-items:center;gap:11px;margin-top:13px;padding-top:13px;border-top:1px solid rgba(148,183,214,.08)}.dns-actions span{color:var(--text3);font-size:var(--type-label)}.dns-limit-note{display:flex;align-items:flex-start;gap:10px;margin:0;padding:14px 16px}.dns-limit-note strong{color:#f2d28d;white-space:nowrap}.dns-limit-note span{color:var(--text2);line-height:1.6}.authority-banner.warning{border-color:rgba(245,158,11,.18);background:rgba(245,158,11,.06)}
@media (max-width:980px){.dns-human-grid{grid-template-columns:1fr}.dns-human-card{min-height:0}.dns-track-list{grid-template-columns:1fr}}
@media (max-width:600px){.dns-heading{align-items:stretch;flex-direction:column}.dns-refresh{width:100%}.dns-managed-panel{padding:15px}.dns-track-list article{grid-template-columns:auto minmax(0,1fr)}.dns-track-list article>span:last-child{grid-column:2}.dns-overlap-note,.dns-limit-note{flex-direction:column}.dns-overlap-note strong,.dns-limit-note strong{white-space:normal}.dns-actions{align-items:stretch;flex-direction:column}.dns-actions button{width:100%}}

/* Control center */
.control-center-page{display:flex;flex-direction:column;gap:18px}.control-center-intro{margin-bottom:0}.control-recheck{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:122px}.control-recheck svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}.control-recheck svg.spinning{animation:spin .8s linear infinite}.control-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.control-summary-grid article{display:flex;align-items:center;gap:13px;min-height:94px;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(17,42,65,.92),rgba(10,28,46,.78))}.control-summary-grid article.attention{border-color:rgba(245,158,11,.2);background:linear-gradient(145deg,rgba(65,48,17,.34),rgba(10,28,46,.78))}.control-summary-grid p{color:var(--text3);font-size:var(--type-label)}.control-summary-grid strong{display:block;margin:2px 0;color:var(--text);font-size:27px;line-height:1}.control-summary-grid small{display:block;color:var(--text3);font-size:var(--type-label)}.summary-icon.warn{color:#fbbf6a;background:rgba(245,158,11,.12)}.authority-banner{margin:0}.control-section-heading{margin:6px 0 0}.active-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.active-control-card{padding:17px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(16,38,60,.92),rgba(9,25,42,.82));box-shadow:0 12px 28px rgba(0,0,0,.08)}.active-control-card.warn{border-color:rgba(245,158,11,.22)}.active-control-card.danger{border-color:rgba(251,113,133,.24)}.active-control-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px}.control-type-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;color:#5eead4;background:rgba(45,212,191,.11)}.control-type-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}.control-scope{display:block;margin-bottom:3px;color:var(--text3);font-size:var(--type-label)}.active-control-card h3{font-size:var(--type-body);line-height:1.3}.control-state-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:var(--type-label);white-space:nowrap;background:rgba(255,255,255,.04);color:#9eb1c3}.control-state-pill i{width:5px;height:5px;border-radius:50%;background:currentColor}.control-state-pill.success{color:#62e9d5;background:rgba(45,212,191,.09)}.control-state-pill.warn{color:#fbd38d;background:rgba(245,158,11,.09)}.control-state-pill.danger{color:#ff9aaa;background:rgba(251,113,133,.09)}.control-impact{min-height:36px;margin:14px 0;color:var(--text2);font-size:var(--type-caption);line-height:1.65}.control-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid rgba(148,183,214,.08);color:var(--text3);font-size:var(--type-label)}.control-card-foot button{padding:8px 12px}.control-permission-note{padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.035)}.control-empty{min-height:210px;border:1px solid var(--border);border-radius:18px;background:rgba(12,31,50,.58)}.control-empty.unknown span{color:#fbd38d;background:rgba(245,158,11,.1)}.operation-center,.control-alert-section,.control-history-section{padding:19px}.operation-heading{align-items:flex-end;gap:20px}.operation-filters{display:flex;gap:5px;padding:4px;border:1px solid var(--border);border-radius:12px;background:rgba(4,18,31,.45)}.operation-filters button{padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--text3);font-size:var(--type-label)}.operation-filters button.active{background:var(--accent-soft);color:#bfeaff}.operation-list{display:flex;flex-direction:column;margin-top:14px}.operation-row{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:13px 4px;border-top:1px solid rgba(148,183,214,.08)}.operation-row:first-child{border-top:0}.operation-dot{width:25px;height:25px;display:grid;place-items:center;border-radius:9px;background:rgba(148,163,184,.09);color:#9eb1c3}.operation-dot i{width:7px;height:7px;border-radius:50%;background:currentColor}.operation-dot.success{color:#52dcc8;background:rgba(45,212,191,.1)}.operation-dot.warn{color:#fbd38d;background:rgba(245,158,11,.1)}.operation-dot.danger{color:#ff8fa2;background:rgba(251,113,133,.1)}.operation-dot.info{color:#74c9ff;background:rgba(88,185,255,.1)}.operation-main>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.operation-main strong{font-size:var(--type-caption)}.operation-main>p{margin-top:4px;color:var(--text3);font-size:var(--type-label)}.operation-state{padding:3px 6px;border-radius:6px;color:#9eb1c3;background:rgba(255,255,255,.04);font-size:var(--type-label)}.operation-state.success{color:#61e7d2;background:rgba(45,212,191,.08)}.operation-state.warn{color:#fbd38d;background:rgba(245,158,11,.08)}.operation-state.danger{color:#ff9aaa;background:rgba(251,113,133,.08)}.operation-state.info{color:#8dd5ff;background:rgba(88,185,255,.08)}.operation-main details{margin-top:8px;color:var(--text3);font-size:var(--type-label)}.operation-main summary{cursor:pointer;color:#a8dfff}.operation-main details span{display:block;margin-top:5px;line-height:1.5}.control-alert-list,.control-history-list{display:flex;flex-direction:column;margin-top:12px}.control-alert-list article,.control-history-list article{display:flex;align-items:center;gap:11px;padding:12px 3px;border-top:1px solid rgba(148,183,214,.08)}.control-alert-list article:first-child,.control-history-list article:first-child{border-top:0}.control-alert-list article>span,.history-action{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;color:#fbd38d;background:rgba(245,158,11,.09)}.control-alert-list svg,.history-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}.control-alert-list article>div,.control-history-list article>div{min-width:0;flex:1}.control-alert-list strong,.control-history-list strong{font-size:var(--type-caption)}.control-alert-list p,.control-history-list p{margin-top:3px;color:var(--text3);font-size:var(--type-label)}.history-action.resolved{color:#62e9d5;background:rgba(45,212,191,.09)}.history-action.active{color:#ff9aaa;background:rgba(251,113,133,.09)}.control-history-list article>span:last-child{color:var(--text3);font-size:var(--type-label)}.control-center-page .impact-card .control-type-icon{width:38px;height:38px}

@media (max-width: 760px){.control-center-intro{align-items:stretch}.control-recheck{width:100%}.control-summary-grid{grid-template-columns:1fr 1fr}.control-summary-grid article:last-child{grid-column:1/-1}.active-control-grid{grid-template-columns:1fr}.active-control-head{grid-template-columns:auto minmax(0,1fr)}.control-state-pill{grid-column:2;justify-self:start}.control-impact{min-height:0}.operation-heading{align-items:stretch;flex-direction:column}.operation-filters{align-self:flex-start}.control-history-list article{align-items:flex-start;flex-wrap:wrap}.control-history-list article>span:last-child{margin-left:43px}.control-card-foot{align-items:flex-start;flex-direction:column}.control-card-foot button{width:100%}}
.modal-bg{background:rgba(1,7,14,.72);backdrop-filter:blur(10px)}.modal{width:min(440px,calc(100vw - 28px));max-width:none;padding:26px;background:linear-gradient(155deg,#10263d,#0a1a2c);border:1px solid var(--border-strong);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.5)}.modal-heading{display:flex;align-items:center;gap:13px;margin-bottom:22px}.modal-heading h3{margin-top:3px;font-size:19px}.modal-icon.warn{color:#ff9caf;background:var(--red-soft);border-color:rgba(251,113,133,.17)}.modal-icon.good{color:#65dfcd;background:var(--green-soft);border-color:rgba(45,212,191,.17)}.impact-card{display:flex;align-items:center;gap:12px;padding:13px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:13px}.impact-card strong{font-size:var(--type-caption)}.impact-card p{margin-top:3px;color:var(--text2);font-size:var(--type-label);line-height:1.5}.confirm-note{margin:15px 2px;color:var(--text2);font-size:var(--type-caption);line-height:1.7}.actions{gap:9px}.actions button{flex:1}.success-state{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.success-state svg{width:34px;height:34px;margin-bottom:12px;fill:none;stroke:var(--green);stroke-width:2}.success-state strong{font-size:15px}.success-state span{margin-top:6px;color:var(--text2);font-size:var(--type-caption)}

/* Legacy pages inherit the new surface language. */
.cards{gap:var(--gap)}.stat-card{border-radius:17px}.section-title{color:#a9bdcc}.table-wrap{border:1px solid var(--border);border-radius:15px;background:rgba(10,25,42,.58)}th{background:rgba(12,29,47,.96);color:#7d96aa;border-bottom-color:var(--border)}td{border-bottom-color:rgba(139,178,207,.09)}tr:hover td{background:rgba(88,185,255,.035)}.tag{background:rgba(88,185,255,.08);color:#7eafd0}.host-panel{border-left-width:1px;border-radius:20px}.app-item,.ban-card,.quota-card{border-color:var(--border)!important}

@media (max-width: 1180px) {
  .device-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 768px) {
  :root{--topbar-h:62px;--pad:14px}
  body{padding-bottom:74px}
  .sidebar{width:min(290px,88vw);padding:0 12px}.sidebar-header .sidebar-close{display:grid}.overlay{background:rgba(0,6,13,.72);backdrop-filter:blur(4px)}
  .topbar{padding:0 12px;gap:9px}.topbar .mobile-only{display:grid}.page-heading>span{display:none}.page-heading h2{max-width:110px;font-size:var(--type-body)}.connection-pill,.rf-label,.rf-ago,.refresh-ctrl select{display:none}.topbar-right{gap:5px}.topbar .language-switch{min-width:36px;padding:7px}.topbar .language-switch span{display:none}.rf-now{display:grid}.refresh-ctrl{gap:5px}
  .content{padding:14px 12px 20px}.mobile-dock{position:fixed;z-index:80;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));height:62px;display:grid;grid-template-columns:repeat(5,1fr);padding:5px 6px;background:rgba(10,24,40,.94);border:1px solid var(--border-strong);border-radius:19px;box-shadow:0 16px 50px rgba(0,0,0,.45);backdrop-filter:blur(22px)}.mobile-dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#617b90;font-size:var(--type-label);border-radius:13px}.mobile-dock a.active{color:#a9e0ff;background:rgba(88,185,255,.1)}.mobile-dock svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
  .login-wrap{padding:20px;align-items:flex-start}.login-shell{grid-template-columns:1fr;gap:30px}.login-story{padding-top:4px}.login-copy{margin-top:58px}.login-copy h1{font-size:42px}.login-copy>p{font-size:var(--type-body)}.login-feature-row{margin-top:30px;gap:16px}.login-card{padding:25px 20px;border-radius:23px}
  .network-hero{min-height:245px;padding:27px 22px;align-items:flex-start}.hero-copy{width:100%;z-index:3}.hero-copy h1{font-size:31px}.hero-copy>p{font-size:var(--type-compact);padding-right:20px}.hero-meta{max-width:65%;gap:8px;flex-direction:column}.network-orbit{width:124px;height:124px;right:-16px;top:auto;bottom:-25px;transform:none;opacity:.8}.orbit-ring-two{inset:18px}.orbit-core{inset:39px}.orbit-core svg{width:24px;height:24px}.node-one{top:13px;left:24px}.node-two{top:57px}.node-three{bottom:10px;left:40px}
  .metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric-card{min-height:133px;padding:14px;gap:10px;align-items:flex-start;flex-direction:column}.metric-icon{width:34px;height:34px;border-radius:11px}.metric-icon svg{width:17px;height:17px}.metric-card strong{font-size:18px}.metric-card>div>span{display:none}
  .dashboard-split,.lower-grid,.detail-layout{grid-template-columns:1fr}.surface{padding:18px;border-radius:20px}.surface-heading h2,.section-heading-row h2{font-size:17px}.section-heading-row{margin-top:27px}.calm-state{flex-direction:column;align-items:flex-start}.wifi-card{min-height:240px}.human-charts{grid-template-columns:1fr}.human-charts .chart-box{min-height:300px;padding:14px}.human-charts .chart-el{height:235px!important}.resource-row{grid-template-columns:minmax(110px,1fr) 80px 36px}
  .page-intro-row{align-items:stretch;flex-direction:column;gap:18px}.page-intro-row h1,.device-detail-hero h1{font-size:29px}.search-shell{width:100%}.device-summary-strip{grid-template-columns:1fr 1fr}.device-summary-strip>div{padding:12px}.device-card-grid{grid-template-columns:1fr}.device-card{padding:16px}.device-detail-hero{align-items:flex-start;flex-direction:column;padding:21px}.hero-avatar{width:52px;height:52px;border-radius:17px}.device-detail-hero .presence-pill{margin-left:69px}.detail-metric-grid{grid-template-columns:1fr 1fr;gap:9px}.detail-metric-grid article{padding:12px}.detected-app-grid{grid-template-columns:1fr}.detected-app-card{padding:13px}.detected-app-card button{padding:8px 10px}.detail-help ul{margin-top:14px}.state-banner{align-items:flex-start;flex-wrap:wrap}.state-banner>button:not(.icon-button){margin-left:47px}
  .modal{padding:21px}.actions{flex-direction:row}.table-wrap{border-radius:12px}
}

@media (max-width: 430px) {
  .login-copy h1{font-size:36px}.login-feature-row span:nth-child(2){display:none}
  .device-card-head{align-items:flex-start}.presence-pill{position:absolute;right:16px;top:16px}.device-card{position:relative}.device-identity{padding-right:62px}.wifi-facts{flex-direction:column}.device-detail-id{align-items:flex-start}.device-detail-hero .presence-pill{position:static;margin-left:69px;margin-top:-10px}.detail-metric-grid article{flex-direction:column;align-items:flex-start}.app-card-copy p{max-width:145px}
}

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

/* Device access boundaries */
.isolation-page{display:flex;flex-direction:column;gap:16px}.isolation-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.isolation-heading h2{margin:3px 0 5px;font-size:25px}.isolation-heading>div:first-child>p:last-child{max-width:680px;color:var(--text2);font-size:var(--type-caption);line-height:1.65}.isolation-heading-actions{display:flex;flex:0 0 auto;gap:8px}.isolation-heading-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px}.isolation-heading-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}.isolation-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.isolation-summary-grid article{display:flex;align-items:center;gap:13px;min-height:94px;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(17,42,65,.92),rgba(10,28,46,.78))}.isolation-summary-grid article.attention{border-color:rgba(245,158,11,.2);background:linear-gradient(145deg,rgba(65,48,17,.3),rgba(10,28,46,.78))}.isolation-summary-grid p{color:var(--text3);font-size:var(--type-label)}.isolation-summary-grid strong{display:block;margin:2px 0;color:var(--text);font-size:27px;line-height:1}.isolation-summary-grid small{display:block;color:var(--text3);font-size:var(--type-label)}.summary-icon.safe{color:#5eead4;background:rgba(45,212,191,.1)}
.isolation-zone-panel{padding:20px}.isolation-zone-panel .surface-heading>div>p:last-child{max-width:660px;margin-top:5px;color:var(--text2);font-size:var(--type-label);line-height:1.6}.isolation-zone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:15px}.isolation-zone-card{padding:17px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(16,38,60,.92),rgba(9,25,42,.82));box-shadow:0 12px 28px rgba(0,0,0,.08)}.isolation-zone-card.success{border-color:rgba(45,212,191,.17)}.isolation-zone-card.warning{border-color:rgba(245,158,11,.22)}.isolation-zone-card.unknown{border-style:dashed}.isolation-zone-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px}.isolation-device-icon{width:42px;height:42px;display:grid;place-items:center;color:#69dfcf;background:rgba(45,212,191,.1);border-radius:13px}.isolation-device-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}.isolation-zone-head>div{min-width:0}.isolation-zone-head small{display:block;color:var(--text3);font-size:var(--type-label)}.isolation-zone-head h3{margin:2px 0;font-size:var(--type-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.isolation-zone-head p{color:var(--text3);font-family:var(--font-mono);font-size:var(--type-label)}.isolation-destination-copy{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:16px 0 9px}.isolation-destination-copy strong{font-size:var(--type-caption)}.isolation-destination-copy span{max-width:62%;color:var(--text3);font-size:var(--type-label);text-align:right;line-height:1.45}.domain-chip-row{min-height:34px;display:flex;align-content:flex-start;flex-wrap:wrap;gap:5px;padding:8px;background:rgba(3,16,28,.35);border-radius:11px}.domain-chip-row span{max-width:100%;padding:4px 7px;color:#9cdcff;background:rgba(88,185,255,.08);border-radius:7px;font-size:var(--type-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.domain-chip-row.muted span{color:var(--text3);background:rgba(255,255,255,.03)}.identity-row{display:flex;gap:7px;margin-top:10px}.identity-row span{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;color:#8ea3b5;background:rgba(255,255,255,.035);border-radius:8px;font-size:var(--type-label)}.identity-row span.good{color:#62dfcc;background:rgba(45,212,191,.08)}.identity-row span.warn{color:#fbd38d;background:rgba(245,158,11,.08)}.identity-row svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}.isolation-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(148,183,214,.08)}.isolation-card-foot>span{color:var(--text3);font-size:var(--type-label)}.isolation-card-foot button{padding:8px 11px}.isolation-empty{min-height:225px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:14px;padding:24px;border:1px solid var(--border);border-radius:18px;background:rgba(8,25,42,.48);text-align:center}.isolation-empty>span{width:52px;height:52px;display:grid;place-items:center;margin-bottom:14px;color:#65decc;background:rgba(45,212,191,.1);border-radius:17px}.isolation-empty.unknown>span{color:#fbd38d;background:rgba(245,158,11,.1)}.isolation-empty svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8}.isolation-empty strong{font-size:15px}.isolation-empty p{max-width:520px;margin:7px 0 15px;color:var(--text2);font-size:var(--type-label);line-height:1.65}
.isolation-boundary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.isolation-boundary-grid article{display:flex;align-items:flex-start;gap:11px;padding:15px;border:1px solid var(--border);border-radius:16px;background:rgba(10,28,46,.65)}.isolation-boundary-grid article>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;color:#8fd5ff;background:rgba(88,185,255,.09);border-radius:11px}.isolation-boundary-grid svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}.isolation-boundary-grid strong{font-size:var(--type-caption)}.isolation-boundary-grid p{margin-top:5px;color:var(--text3);font-size:var(--type-label);line-height:1.6}.isolation-setup-modal{width:min(560px,calc(100vw - 28px))}.isolation-setup-modal textarea{resize:vertical;min-height:105px;line-height:1.6}.isolation-form-help{margin-top:7px;color:var(--text3);font-size:var(--type-label);line-height:1.55}.isolation-preflight-button{width:100%;margin-top:14px}.preflight-result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;margin-top:12px;padding:13px;border:1px solid;border-radius:13px}.preflight-result>span{width:31px;height:31px;display:grid;place-items:center;border-radius:10px}.preflight-result svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}.preflight-result.ready{border-color:rgba(45,212,191,.17);background:rgba(45,212,191,.06)}.preflight-result.ready>span{color:#5eead4;background:rgba(45,212,191,.1)}.preflight-result.blocked{border-color:rgba(245,158,11,.2);background:rgba(245,158,11,.06)}.preflight-result.blocked>span{color:#fbd38d;background:rgba(245,158,11,.1)}.preflight-result strong{font-size:var(--type-caption)}.preflight-result p,.preflight-result li{margin-top:4px;color:var(--text2);font-size:var(--type-label);line-height:1.55}.preflight-result ul{margin:4px 0 0 15px}.isolation-setup-modal .actions{margin-top:17px}
.isolation-boundary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.isolation-boundary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.isolation-summary-grid{grid-template-columns:1fr}.isolation-zone-grid{grid-template-columns:1fr}}
@media (max-width:700px){.isolation-boundary-grid{grid-template-columns:1fr}}
@media (max-width:600px){.isolation-heading{align-items:stretch;flex-direction:column}.isolation-heading-actions{display:grid;grid-template-columns:1fr 1fr}.isolation-heading-actions button{width:100%}.isolation-zone-panel{padding:15px}.isolation-zone-panel .surface-heading{align-items:flex-start;flex-direction:column}.isolation-zone-head{grid-template-columns:auto minmax(0,1fr)}.isolation-zone-head>.control-state-pill{grid-column:2;justify-self:start}.isolation-destination-copy{align-items:flex-start;flex-direction:column}.isolation-destination-copy span{max-width:none;text-align:left}.identity-row{align-items:flex-start;flex-direction:column}.isolation-card-foot{align-items:stretch;flex-direction:column}.isolation-card-foot button{width:100%}.isolation-boundary-grid article{padding:13px}.isolation-setup-modal{padding:19px}}

/* Human-first service destination scope */
.domain-scope-page{display:flex;flex-direction:column;gap:16px}.domain-scope-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:3px 1px 6px}.domain-scope-hero h2{margin:4px 0 6px;font-size:27px;letter-spacing:-.04em}.domain-scope-hero>div:first-child>p:last-child{max-width:720px;color:var(--text2);font-size:var(--type-caption);line-height:1.7}.domain-scope-hero button{display:inline-flex;align-items:center;gap:7px}.domain-scope-hero button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}.domain-scope-page>.status-banner{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid rgba(88,185,255,.16);border-radius:14px;background:rgba(88,185,255,.055)}.domain-scope-page>.status-banner.danger{border-color:rgba(251,113,133,.18);background:rgba(251,113,133,.055)}.domain-scope-page>.status-banner>svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:#75cfff;stroke-width:1.8}.domain-scope-page>.status-banner.danger>svg{stroke:#ff9caf}.domain-scope-page>.status-banner strong{display:block;font-size:var(--type-caption)}.domain-scope-page>.status-banner span{display:block;margin-top:4px;color:var(--text2);font-size:var(--type-label);line-height:1.55}.domain-scope-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.domain-scope-stats article{min-width:0;display:flex;align-items:center;gap:12px;min-height:96px;padding:16px 17px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(17,42,65,.92),rgba(9,26,43,.82));box-shadow:inset 0 1px rgba(255,255,255,.025)}.domain-stat-icon{width:39px;height:39px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px}.domain-stat-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}.domain-stat-icon.teal{color:#5eead4;background:rgba(45,212,191,.1)}.domain-stat-icon.blue{color:#81cbff;background:rgba(88,185,255,.1)}.domain-stat-icon.amber{color:#fbd38d;background:rgba(245,158,11,.1)}.domain-stat-icon.purple{color:#c4b5fd;background:rgba(167,139,250,.1)}.domain-scope-stats small{color:var(--text3);font-size:var(--type-label)}.domain-scope-stats strong{display:block;margin:2px 0;color:var(--text);font-size:25px;letter-spacing:-.04em}.domain-scope-stats p{color:var(--text3);font-size:var(--type-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.domain-scope-explainer{padding:19px}.domain-explain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}.domain-explain-grid>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;padding:13px;border:1px solid rgba(135,175,207,.1);border-radius:14px;background:rgba(255,255,255,.022)}.domain-explain-grid>div>span{grid-row:1/3;width:27px;height:27px;display:grid;place-items:center;color:#75dccc;background:rgba(45,212,191,.09);border-radius:9px;font-size:var(--type-label);font-weight:var(--weight-bold)}.domain-explain-grid strong{font-size:var(--type-caption)}.domain-explain-grid p{color:var(--text3);font-size:var(--type-label);line-height:1.55}.domain-scope-catalog{padding:20px}.domain-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.domain-toolbar h3{margin-top:3px;font-size:18px}.domain-search{position:relative;width:min(360px,100%)}.domain-search svg{position:absolute;left:13px;top:12px;width:16px;height:16px;fill:none;stroke:#69869b;stroke-width:1.8}.domain-search input{width:100%;padding-left:38px}.domain-filter-row{display:flex;align-items:center;gap:5px;margin:15px 0;overflow-x:auto;scrollbar-width:none}.domain-filter-row::-webkit-scrollbar{display:none}.domain-filter-row button{min-height:31px;padding:6px 10px;flex:0 0 auto;border:0;background:rgba(255,255,255,.025);box-shadow:none;color:var(--text3);border-radius:9px;font-size:var(--type-label)}.domain-filter-row button.active{color:#c3ecff;background:rgba(88,185,255,.11)}.domain-family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.domain-family-card{min-width:0;padding:15px;border:1px solid var(--border);border-radius:17px;background:linear-gradient(145deg,rgba(16,38,60,.9),rgba(8,24,40,.83));box-shadow:0 11px 26px rgba(0,0,0,.08)}.domain-family-card.attention{border-color:rgba(245,158,11,.18)}.domain-family-card.active{box-shadow:inset 0 0 0 1px rgba(167,139,250,.12),0 11px 26px rgba(0,0,0,.08)}.domain-family-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.domain-family-head>div{min-width:0}.domain-family-head h4{margin:6px 0 2px;font-size:var(--type-compact);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.domain-family-head small{color:var(--text3);font-size:var(--type-label)}.source-pill,.active-pill{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:var(--type-label)}.source-pill.registry{color:#63dfcb;background:rgba(45,212,191,.09)}.source-pill.feature_fallback{color:#8bcfff;background:rgba(88,185,255,.09)}.active-pill{flex:0 0 auto;color:#d2c4ff;background:rgba(167,139,250,.1)}.domain-family-counts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:13px 0 8px}.domain-family-counts span{padding:8px;color:var(--text3);background:rgba(255,255,255,.025);border-radius:9px;font-size:var(--type-label)}.domain-family-counts strong{color:var(--text);font-size:var(--type-caption)}.domain-family-card .domain-chip-row{height:56px;overflow:hidden}.domain-family-card .domain-chip-row span.muted{color:var(--text3)}.domain-attention-copy,.domain-calm-copy{min-height:27px;display:flex;align-items:flex-start;gap:6px;margin-top:9px;font-size:var(--type-label);line-height:1.5}.domain-attention-copy{color:#e8c77d}.domain-calm-copy{color:#68bba9}.domain-attention-copy svg,.domain-calm-copy svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2}.domain-detail-button{width:100%;margin-top:8px}.domain-more{display:block;margin:14px auto 0}.domain-scope-modal{width:min(720px,calc(100vw - 28px));max-height:calc(100vh - 32px);overflow-y:auto}.domain-scope-modal .modal-heading{align-items:flex-start}.domain-scope-modal .modal-heading h3{margin-bottom:2px}.domain-scope-modal .modal-heading p:last-child{color:var(--text3);font-size:var(--type-label)}.domain-scope-modal textarea{min-height:120px;resize:vertical;line-height:1.6}.domain-current-summary,.domain-impact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:15px}.domain-current-summary>div,.domain-impact-grid>div{padding:10px;background:rgba(255,255,255,.026);border-radius:11px}.domain-current-summary small,.domain-impact-grid small{display:block;color:var(--text3);font-size:var(--type-label)}.domain-current-summary strong,.domain-impact-grid strong{display:block;margin-top:3px;font-size:15px}.domain-preview-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}.domain-impact-result{margin-top:15px;padding-top:15px;border-top:1px solid var(--border)}.domain-impact-banner{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px;padding:11px;border:1px solid rgba(88,185,255,.14);background:rgba(88,185,255,.05);border-radius:12px}.domain-impact-banner.danger{border-color:rgba(251,113,133,.18);background:rgba(251,113,133,.05)}.domain-impact-banner>svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:#81cfff;stroke-width:2}.domain-impact-banner.danger>svg{stroke:#ff9caf}.domain-impact-banner strong{display:block;font-size:var(--type-caption)}.domain-impact-banner span{display:block;margin-top:3px;color:var(--text3);font-size:var(--type-label)}.domain-impact-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.domain-risk-list{list-style:none;display:flex;flex-direction:column;gap:6px}.domain-risk-list li{padding:9px 10px;background:rgba(245,158,11,.05);border-radius:10px}.domain-risk-list strong{display:block;color:#e9c779;font-size:var(--type-label)}.domain-risk-list span{display:block;margin-top:3px;color:var(--text3);font-size:var(--type-label);line-height:1.45;word-break:break-all}.domain-no-risk{display:flex;align-items:center;gap:7px;color:#61c9b5;font-size:var(--type-label)}.domain-no-risk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}.domain-runtime-note{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding:10px;background:rgba(255,255,255,.025);border-radius:10px}.domain-runtime-note strong{font-size:var(--type-label)}.domain-runtime-note span{color:var(--text3);font-size:var(--type-label);line-height:1.5}.domain-scope-modal>.actions{margin-top:16px}
@media (max-width:1100px){.domain-scope-stats{grid-template-columns:1fr 1fr}.domain-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.domain-scope-hero,.domain-toolbar{align-items:stretch;flex-direction:column}.domain-scope-hero button,.domain-search{width:100%}.domain-explain-grid,.domain-family-grid{grid-template-columns:1fr}.domain-impact-grid{grid-template-columns:1fr 1fr}.domain-scope-modal{padding:19px}}
@media (max-width:520px){.domain-scope-stats{grid-template-columns:1fr}.domain-scope-stats article{min-height:82px}.domain-current-summary{grid-template-columns:1fr 1fr}.domain-current-summary>div:last-child{grid-column:1/-1}.domain-preview-actions{flex-direction:column}.domain-preview-actions button{width:100%}.domain-impact-grid{grid-template-columns:1fr 1fr}}

/* Domain family v2 migration readiness */
.domain-migration-card{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);align-items:center;gap:22px;overflow:hidden;padding:21px;border-color:rgba(45,212,191,.16);background:linear-gradient(130deg,rgba(11,38,55,.96),rgba(10,29,47,.92))}.domain-migration-card:after{content:"";position:absolute;right:-70px;top:-105px;width:260px;height:260px;border:1px solid rgba(45,212,191,.08);border-radius:50%;box-shadow:0 0 0 38px rgba(45,212,191,.025),0 0 0 76px rgba(88,185,255,.018);pointer-events:none}.domain-migration-card.blocked{border-color:rgba(251,113,133,.18)}.domain-migration-copy,.domain-migration-side{position:relative;z-index:1}.domain-migration-copy h3{margin:4px 0 6px;font-size:19px;letter-spacing:-.025em}.domain-migration-copy>p:last-of-type{max-width:680px;color:var(--text2);font-size:var(--type-label);line-height:1.65}.domain-migration-trust{display:flex;align-items:flex-start;gap:7px;margin-top:12px;color:#73cabb;font-size:var(--type-label);line-height:1.55}.domain-migration-trust svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9}.domain-migration-side{display:flex;flex-direction:column;gap:11px}.domain-migration-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.domain-migration-metrics>div{padding:11px 9px;border:1px solid rgba(255,255,255,.045);border-radius:12px;background:rgba(255,255,255,.026)}.domain-migration-metrics strong{display:block;font-size:18px;letter-spacing:-.03em}.domain-migration-metrics span{display:block;margin-top:2px;color:var(--text3);font-size:var(--type-label)}.domain-migration-metrics .danger strong{color:#ff9caf}.domain-migration-side button{width:100%}.domain-migration-modal{width:min(790px,calc(100vw - 28px));max-height:calc(100vh - 32px);overflow-y:auto}.domain-migration-modal .modal-heading{align-items:flex-start}.domain-migration-modal .modal-heading p:last-child{color:var(--text3);font-size:var(--type-label)}.domain-migration-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 10px}.domain-migration-summary>div{padding:12px;border-radius:12px;background:rgba(255,255,255,.027)}.domain-migration-summary small{display:block;color:var(--text3);font-size:var(--type-label)}.domain-migration-summary strong{display:block;margin-top:3px;font-size:18px}.domain-migration-explain{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border:1px solid rgba(88,185,255,.12);border-radius:12px;background:rgba(88,185,255,.04)}.domain-migration-explain>svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:#75cfff;stroke-width:1.8}.domain-migration-explain strong{display:block;font-size:var(--type-label)}.domain-migration-explain span{display:block;margin-top:3px;color:var(--text3);font-size:var(--type-label);line-height:1.55}.domain-migration-list{display:flex;flex-direction:column;gap:7px;max-height:480px;margin-top:12px;overflow-y:auto;padding-right:3px}.domain-migration-list>article{display:grid;grid-template-columns:minmax(170px,.75fr) minmax(0,1.25fr);align-items:center;gap:13px;padding:11px 12px;border:1px solid rgba(135,175,207,.1);border-radius:12px;background:rgba(255,255,255,.022)}.domain-migration-list>article.blocked{border-color:rgba(251,113,133,.16)}.domain-migration-list>article.narrows_scope{border-color:rgba(45,212,191,.13)}.domain-migration-list h4{display:inline;margin-left:7px;font-size:var(--type-caption)}.domain-migration-list small{display:block;margin:4px 0 0 1px;color:var(--text3);font-size:var(--type-label)}.migration-status-pill{display:inline-flex;padding:4px 7px;border-radius:999px;color:#69dac5;background:rgba(45,212,191,.09);font-size:var(--type-label)}.blocked .migration-status-pill{color:#ff9caf;background:rgba(251,113,133,.09)}.unchanged .migration-status-pill{color:#9ab0bf;background:rgba(148,163,184,.08)}.migration-family-result strong{display:block;font-size:var(--type-label)}.migration-family-result span{display:block;margin-top:3px;color:var(--text3);font-size:var(--type-label);line-height:1.5;word-break:break-all}.domain-migration-lock{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 11px;color:#c3b9ea;background:rgba(167,139,250,.055);border-radius:11px;font-size:var(--type-label);line-height:1.55}.domain-migration-lock svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9}.domain-migration-modal>.actions{margin-top:14px}
@media (max-width:900px){.domain-migration-card{grid-template-columns:1fr}.domain-migration-side{max-width:520px}}
@media (max-width:640px){.domain-migration-card{padding:17px}.domain-migration-metrics,.domain-migration-summary{grid-template-columns:1fr 1fr}.domain-migration-metrics>div:last-child,.domain-migration-summary>div:last-child{grid-column:1/-1}.domain-migration-list>article{grid-template-columns:1fr}.domain-migration-modal{padding:19px}}

/* Domain family v2 validation stages */
body:has(.modal-bg){overflow:hidden}
.domain-migration-readiness{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.domain-migration-readiness>div{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid rgba(135,175,207,.1);border-radius:12px;background:rgba(255,255,255,.022)}.domain-migration-readiness>div>span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;color:#9ab0bf;background:rgba(148,163,184,.09);font-size:var(--type-label);font-weight:var(--weight-bold)}.domain-migration-readiness small,.domain-migration-readiness strong{display:block}.domain-migration-readiness small{color:var(--text3);font-size:var(--type-label)}.domain-migration-readiness strong{margin-top:2px;font-size:var(--type-label)}.domain-migration-readiness .done{border-color:rgba(45,212,191,.14)}.domain-migration-readiness .done>span{color:#69dac5;background:rgba(45,212,191,.1)}.domain-migration-readiness .waiting{border-color:rgba(251,191,36,.15)}.domain-migration-readiness .waiting>span{color:#ffd76a;background:rgba(251,191,36,.09)}.domain-migration-readiness .blocked,.domain-migration-readiness .locked{border-color:rgba(251,113,133,.14)}.domain-migration-readiness .blocked>span,.domain-migration-readiness .locked>span{color:#ff9caf;background:rgba(251,113,133,.09)}
.domain-shadow-guard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:10px;padding:12px;border:1px solid rgba(45,212,191,.13);border-radius:13px;background:linear-gradient(90deg,rgba(45,212,191,.045),rgba(88,185,255,.035))}.domain-shadow-guard>div{display:flex;align-items:flex-start;gap:9px}.domain-shadow-guard>svg{width:20px;height:20px;fill:none;stroke:#6e9cb9;stroke-width:1.7}.domain-shadow-guard p strong,.domain-shadow-guard p small{display:block}.domain-shadow-guard p strong{font-size:var(--type-label)}.domain-shadow-guard p small{margin-top:3px;color:var(--text3);font-size:var(--type-label);line-height:1.45}.shadow-live-dot,.shadow-check-dot{width:10px;height:10px;flex:0 0 auto;margin-top:2px;border-radius:50%;box-shadow:0 0 0 4px rgba(45,212,191,.07)}.shadow-live-dot{background:#5eead4}.shadow-check-dot{background:#7cc8ff;box-shadow:0 0 0 4px rgba(88,185,255,.07)}.shadow-active-note{color:#d6bc75!important}.shadow-calm-note{color:#65c9b7!important}.domain-decision-guide{grid-column:1/-1;margin-top:2px;padding-top:11px;border-top:1px solid rgba(251,113,133,.1)}.decision-guide-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 8px}.decision-guide-head>span{padding:4px 7px;color:#ffabc0;background:rgba(251,113,133,.08);border-radius:999px;font-size:var(--type-label)}.decision-guide-head>strong{font-size:var(--type-label);word-break:break-all}.decision-guide-head>small{grid-column:1/-1}.decision-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}.decision-option-grid>article{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px;padding:10px;border:1px solid rgba(135,175,207,.1);border-radius:11px;background:rgba(3,16,28,.3)}.decision-option-grid>article>span{width:22px;height:22px;display:grid;place-items:center;color:#9cdcff;background:rgba(88,185,255,.09);border-radius:7px;font-size:var(--type-label);font-weight:var(--weight-bold)}.decision-option-grid strong{font-size:var(--type-label)}.decision-option-grid p{margin-top:3px;color:var(--text2);font-size:var(--type-label);line-height:1.5}.decision-option-grid small{margin-top:6px!important;color:#8ca6b8!important;line-height:1.45}
@media (max-width:640px){.domain-migration-readiness{grid-template-columns:1fr}.domain-migration-list{max-height:none;overflow:visible;padding-right:0}}
@media (max-width:640px){.domain-shadow-guard{grid-template-columns:1fr}.domain-shadow-guard>svg{transform:rotate(90deg);justify-self:center}.decision-option-grid{grid-template-columns:1fr}}

/* ============================================================
   Web typography matrix enforcement — v20260828h
   Semantic roles override legacy page-local values. Text below 12px is
   intentionally unsupported: dense data may wrap, but it must stay readable.
   ============================================================ */
.login-copy h1 {
  font-size: var(--type-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.hero-copy h1,
.domain-scope-hero h2 {
  font-size: var(--type-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.surface-heading h2,
.section-heading-row h2,
.domain-toolbar h3,
.domain-migration-copy h3 {
  font-size: var(--type-section-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.page-heading h2,
.login-card h2,
.empty-state h2,
.section-title,
.domain-family-head h4,
.isolation-zone-head h3,
.domain-migration-list h4 {
  font-family: var(--font-display);
  font-size: var(--type-card-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}

.metric-card strong,
.quality-score strong,
.domain-scope-stats strong {
  font-size: var(--type-metric);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.metric-card strong {
  white-space: nowrap;
}

table {
  font-size: var(--type-body);
  line-height: var(--leading-caption);
}

th,
button,
input,
select,
textarea,
.sidebar a {
  font-size: var(--type-compact);
}

th,
button,
.sidebar a,
.tag,
.source-pill,
.active-pill,
.migration-status-pill {
  font-weight: var(--weight-semibold);
}

.mono,
.release-hash-input,
.isolation-zone-head p {
  font-family: var(--font-mono);
}

.release-hash-input {
  font-size: var(--type-caption) !important;
}

/* Readability guardrails for dark, button-shaped list rows. */
.device-picker-list > button {
  color: var(--text);
}

.device-picker-list strong {
  color: var(--text);
  font-size: var(--type-compact);
  font-weight: var(--weight-semibold);
}

.device-picker-list small {
  color: var(--text3);
  font-weight: var(--weight-medium);
}

.mobile-dock a,
.app-protect-button {
  color: var(--text3);
}

@media (max-width: 768px) {
  :root {
    --type-display: clamp(2.35rem, 12vw, 3.35rem);
    --type-hero: clamp(1.85rem, 8.5vw, 2.5rem);
    --type-page-title: 1.5rem;
  }

  .page-heading h2 {
    max-width: 130px;
    font-size: var(--type-card-title);
  }

  th,
  td {
    padding: 10px;
  }
}