:root {
  color-scheme: light;
  --ink: #0b1220;
  --ink-2: #182235;
  --muted: #657286;
  --muted-2: #8b97a8;
  --line: #e4eaf0;
  --line-strong: #d5dee8;
  --canvas: #f4f7f9;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --teal: #0d9488;
  --teal-2: #14b8a6;
  --teal-soft: #e7f8f5;
  --amber: #d97706;
  --amber-soft: #fff7e8;
  --red: #dc2626;
  --red-soft: #fff0f0;
  --blue: #2563eb;
  --blue-soft: #eef4ff;
  --shadow-sm: 0 1px 2px rgba(12, 24, 40, .05), 0 5px 16px rgba(12, 24, 40, .035);
  --shadow-md: 0 16px 44px rgba(11, 18, 32, .10), 0 3px 10px rgba(11, 18, 32, .06);
  --radius: 16px;
  --sidebar: 252px;
  --font: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --text-title-l: 20px;
  --text-title-m: 18px;
  --text-title-s: 16px;
  --text-body: 14px;
  --text-helper: 13px;
  --text-caption: 12px;
  --leading-title-l: 28px;
  --leading-title-m: 26px;
  --leading-title-s: 24px;
  --leading-body: 22px;
  --leading-helper: 20px;
  --leading-caption: 18px;
}

/* Typography scale: 20/18/16/14/13/12 only. */
.page-heading h2, .hero-copy h2, .login-form-wrap h2 { font-size: var(--text-title-l) !important; line-height: var(--leading-title-l) !important; }
.card-title h3, .modal-head h3, .form-section-head h4 { font-size: var(--text-title-s) !important; line-height: var(--leading-title-s) !important; }
.topbar-title h1, .brand-copy strong { font-size: var(--text-title-s) !important; line-height: var(--leading-title-s) !important; }
body, button, input, select, textarea { font-size: var(--text-body); line-height: var(--leading-body); }
.btn, .search-box input, .data-table td, .data-table th, .domain-row, .info-row span, .info-row strong, .detail-item span, .detail-item strong { font-size: var(--text-body) !important; }
.btn-sm, .field label, .field-label, .card-title p, .page-heading p, .field .hint, .form-section-head p, .switch-copy span, .small, .tag, .status-pill, .confirm-check, .dns-banner p { font-size: var(--text-helper) !important; line-height: var(--leading-helper) !important; }
.nav-item > span:not(.nav-icon):not(.nav-badge), .sidebar .brand-copy strong { font-size: var(--text-helper) !important; }
.nav-badge, .eyebrow, .hero-tag, .topbar-title p, .sync-state, .sidebar-status, .sidebar-user span, .audit-time, .actor-tag, .quota-unknown, .node-text span, .node-metric span, .progress-label, .flow-node span, .flow-caption, .stat-top, .stat-foot, .stat-value span { font-size: var(--text-caption) !important; line-height: var(--leading-caption) !important; }
.flow-node strong, .toast strong, .toast p, .login-foot, .login-security, .login-error, .fleet-pulse p { font-size: var(--text-caption) !important; line-height: var(--leading-caption) !important; }
.stat-value strong { font-size: var(--text-title-l) !important; line-height: var(--leading-title-l) !important; }
.node-text strong, .audit-copy strong, .mini-check strong { font-size: var(--text-body) !important; line-height: var(--leading-body) !important; }

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-height: 100vh; font-family: var(--font); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { display: block; }
::selection { background: rgba(20, 184, 166, .2); }

.app-root { min-height: 100vh; }
.boot-screen { min-height: 100vh; display: grid; place-content: center; gap: 18px; color: var(--muted); text-align: center; font-size:var(--text-body); letter-spacing: .04em; }
.boot-mark { display: flex; gap: 7px; align-items: center; justify-content: center; }
.boot-mark span { width: 9px; height: 9px; border-radius: 999px; background: var(--teal-2); animation: boot 1s infinite ease-in-out; }
.boot-mark span:nth-child(2) { animation-delay: .12s; }
.boot-mark span:nth-child(3) { animation-delay: .24s; }
@keyframes boot { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-8px); opacity: 1; } }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(460px, 1.2fr) minmax(420px, .8fr); background: var(--surface); }
.login-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 48px 54px; color: #dce9f5; background: radial-gradient(circle at 70% 15%, rgba(20, 184, 166, .2), transparent 32%), radial-gradient(circle at 10% 90%, rgba(37, 99, 235, .18), transparent 36%), #08111f; }
.login-visual::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 84%); }
.login-visual::after { content: ""; position: absolute; width: 540px; height: 540px; border: 1px solid rgba(45, 212, 191, .14); border-radius: 50%; right: -150px; bottom: -260px; box-shadow: 0 0 0 80px rgba(45, 212, 191, .025), 0 0 0 160px rgba(45, 212, 191, .018); }
.brand { position: relative; z-index: 1; display: flex; gap: 12px; align-items: center; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(45, 212, 191, .45); border-radius: 11px; background: rgba(13, 148, 136, .09); color: #5eead4; }
.brand-copy strong { display: block; font-size:var(--text-title-s); letter-spacing: .02em; }
.brand-copy span { display: block; color: #7f91a8; font-size:var(--text-caption); margin-top: 2px; letter-spacing: .12em; text-transform: uppercase; }
.login-hero { position: relative; z-index: 1; max-width: 650px; padding: 44px 0 28px; }
.login-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(94, 234, 212, .2); border-radius: 999px; color: #99f6e4; background: rgba(13, 148, 136, .09); font-size:var(--text-caption); letter-spacing: .06em; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 5px rgba(45, 212, 191, .1); }
.login-hero h1 { margin: 24px 0 18px; font-size: var(--text-title-l); line-height: 1.06; letter-spacing: -.045em; font-weight: 680; color: #f4f8fc; }
.login-hero h1 em { color: #5eead4; font-style: normal; }
.login-hero p { max-width: 560px; margin: 0; color: #91a4ba; line-height: 1.8; font-size:var(--text-body); }
.login-network { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 650px; margin: 26px 0 44px; align-items: center; }
.network-point { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #94a8bd; font-size:var(--text-caption); text-align: center; }
.network-point:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: calc(50% + 24px); width: calc(100% - 48px); height: 1px; background: linear-gradient(90deg, rgba(45,212,191,.5), rgba(45,212,191,.12)); }
.network-icon { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(148, 163, 184, .16); background: rgba(15, 29, 48, .86); color: #b8c7d8; }
.network-point.active .network-icon { color: #5eead4; border-color: rgba(45, 212, 191, .36); box-shadow: 0 0 30px rgba(20, 184, 166, .09); }
.login-foot { position: relative; z-index: 1; color: #61748b; font-size:var(--text-caption); letter-spacing: .04em; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(42px, 7vw, 110px); background: #fbfcfd; }
.login-form-wrap { width: 100%; max-width: 400px; margin: 0 auto; }
.login-form-wrap h2 { margin: 0 0 10px; font-size:var(--text-title-l); letter-spacing: -.035em; }
.login-form-wrap > p { margin: 0 0 34px; color: var(--muted); font-size:var(--text-body); line-height: 1.65; }
.field { display: grid; gap: 8px; align-content: start; margin-bottom: 17px; }
.field label, .field-label { font-size:var(--text-caption); color: var(--ink-2); font-weight: 650; letter-spacing: .015em; }
.field input, .field select, .field textarea, .input { box-sizing: border-box; width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink); padding: 11px 13px; outline: none; transition: border-color .18s, box-shadow .18s; }
.field input, .field select, .input { min-height: 47px; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--teal-2); box-shadow: 0 0 0 3px rgba(20, 184, 166, .12); }
.field .hint { color: var(--muted-2); font-size:var(--text-caption); line-height: 1.5; }
.input-affix { position: relative; }
.input-affix input { padding-right: 44px; }
.input-affix button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); border-radius: 7px; display: grid; place-items: center; }
.input-affix button:hover { background: var(--surface-2); color: var(--ink); }
.login-submit { width: 100%; margin-top: 8px; justify-content: center; height: 45px; }
.login-error { min-height: 20px; margin: 12px 0 0; color: var(--red); font-size:var(--text-caption); text-align: center; }
.login-security { display: flex; justify-content: center; gap: 7px; align-items: center; margin-top: 34px; color: var(--muted-2); font-size:var(--text-caption); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); display: flex; flex-direction: column; padding: 22px 16px 18px; color: #dbe7f3; background: #0a1423; z-index: 20; }
.sidebar .brand { padding: 2px 8px 24px; }
.sidebar .brand-mark { width: 34px; height: 34px; }
.sidebar .brand-copy strong { font-size:var(--text-body); color: #f1f6fb; }
.sidebar .brand-copy span { color: #667a91; font-size:var(--text-caption); }
.fleet-pulse { margin: 0 8px 20px; padding: 14px; border: 1px solid rgba(94, 234, 212, .12); border-radius: 12px; background: linear-gradient(135deg, rgba(13,148,136,.12), rgba(15,29,48,.15)); }
.fleet-pulse-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.fleet-pulse-head span { color: #7f93a9; font-size:var(--text-caption); text-transform: uppercase; letter-spacing: .12em; }
.fleet-pulse-head strong { font-size:var(--text-caption); color: #99f6e4; }
.pulse-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.pulse-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0d9488, #5eead4); box-shadow: 0 0 16px rgba(45,212,191,.35); }
.fleet-pulse p { margin: 9px 0 0; color: #657b91; font-size:var(--text-caption); }
.nav-label { padding: 7px 12px 8px; color: #50647a; font-size:var(--text-caption); letter-spacing: .15em; text-transform: uppercase; }
.nav-list { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: #8fa2b6; text-align: left; transition: .16s; }
.nav-item:hover { color: #dbe7f3; background: rgba(255,255,255,.035); }
.nav-item.active { color: #f0fdfa; background: rgba(13, 148, 136, .18); box-shadow: inset 2px 0 #2dd4bf; }
.nav-item .nav-icon { flex: none; color: #6e8298; }
.nav-item.active .nav-icon { color: #5eead4; }
.nav-item > span:not(.nav-icon):not(.nav-badge) { flex: 1; min-width: 0; font-size:var(--text-helper); font-weight: 540; white-space: nowrap; }
.nav-badge { flex: none; min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.07); color: #91a5b9; font-size:var(--text-caption); line-height: 1.4; text-align: center; white-space: nowrap; }
.nav-item.active .nav-badge { background: rgba(45,212,191,.12); color: #99f6e4; }
.sidebar-bottom { margin-top: auto; }
.sidebar-status { display: flex; align-items: center; gap: 9px; margin: 10px 6px 14px; padding: 11px 10px; border-top: 1px solid rgba(255,255,255,.06); color: #6f8298; font-size:var(--text-caption); }
.status-light { width: 7px; height: 7px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 4px rgba(45,212,191,.08); }
.sidebar-user { display: flex; align-items: center; justify-content: space-between; padding: 9px 8px 3px; }
.sidebar-user span { color: #8598ac; font-size:var(--text-caption); }
.icon-button { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); transition: .16s; }
.icon-button:hover { color: var(--ink); border-color: var(--line); background: var(--surface); }
.sidebar .icon-button { color: #74889d; }
.sidebar .icon-button:hover { color: #e2edf6; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.main-column { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 32px; border-bottom: 1px solid rgba(213, 222, 232, .72); background: rgba(244, 247, 249, .9); backdrop-filter: blur(14px); }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mobile-menu { display: none; }
.topbar-title { min-width: 0; }
.topbar-title h1 { margin: 0; font-size:var(--text-title-s); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title p { margin: 3px 0 0; color: var(--muted-2); font-size:var(--text-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; gap: 9px; align-items: center; }
.sync-state { display: flex; align-items: center; gap: 7px; margin-right: 6px; color: var(--muted-2); font-size:var(--text-caption); }
.sync-state .status-light { width: 6px; height: 6px; background: var(--teal-2); }
.page { max-width: 1560px; padding: 30px 32px 56px; margin: 0 auto; }
.page-enter { animation: pageIn .32s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--ink-2); font-size:var(--text-caption); font-weight: 620; line-height: 1; transition: border-color .16s, background .16s, color .16s, transform .16s, box-shadow .16s; }
.btn:hover { border-color: #bcc9d7; background: #fbfcfd; }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.btn-primary { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 5px 14px rgba(11,18,32,.12); }
.btn-primary:hover { border-color: #17243b; background: #17243b; }
.btn-teal { border-color: var(--teal); background: var(--teal); color: #fff; box-shadow: 0 5px 14px rgba(13,148,136,.16); }
.btn-teal:hover { border-color: #0f766e; background: #0f766e; }
.btn-danger { color: var(--red); border-color: #f0caca; background: #fff; }
.btn-danger:hover { background: var(--red-soft); border-color: #e7acac; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-sm { min-height: 30px; padding: 6px 9px; font-size:var(--text-caption); border-radius: 7px; }
.btn-icon-only { width: 32px; padding: 0; }
.button-spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--teal); font-size:var(--text-caption); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--teal-2); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 23px; }
.page-heading h2 { margin: 0; font-size:var(--text-title-l); line-height: 1.15; letter-spacing: -.04em; }
.page-heading p { max-width: 760px; margin: 8px 0 0; color: var(--muted); font-size:var(--text-helper); line-height: 1.65; }
.heading-actions { display: flex; gap: 8px; flex: none; }
.heading-actions .btn { white-space: nowrap; }
.settings-grid > *, .grid-2 > *, .grid-3 > * { min-width: 0; }
.settings-grid > .stack { display: grid; gap: 18px; align-content: start; }
.card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 21px 16px; }
.card-title { min-width: 0; }
.card-title h3 { margin: 0; font-size:var(--text-body); letter-spacing: -.01em; }
.card-title p { margin: 4px 0 0; color: var(--muted-2); font-size:var(--text-caption); line-height: 1.45; }
.card-body { padding: 0 21px 21px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stack { display: grid; gap: 18px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.small { font-size:var(--text-caption); }
.text-right { text-align: right; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--line); }

.overview-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 30px; padding: 28px 30px; margin-bottom: 18px; border-radius: 20px; color: #e8f4fb; background: radial-gradient(circle at 82% 10%, rgba(45,212,191,.18), transparent 29%), linear-gradient(125deg, #0a1423, #0d1d31 58%, #0a1829); box-shadow: 0 14px 35px rgba(11,18,32,.12); }
.overview-hero::before { content: ""; position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, #000, transparent); }
.hero-copy { position: relative; z-index: 1; }
.hero-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 13px; color: #5eead4; font-size:var(--text-caption); letter-spacing: .12em; text-transform: uppercase; }
.hero-copy h2 { max-width: 680px; margin: 0 0 12px; color: #f2f8fd; font-size: var(--text-title-l); line-height: 1.12; letter-spacing: -.04em; font-weight: 650; }
.hero-copy p { max-width: 650px; margin: 0; color: #8ea3b9; font-size:var(--text-caption); line-height: 1.75; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; color: #7f95ab; font-size:var(--text-caption); }
.hero-meta strong { color: #c7d8e7; font-weight: 600; }
.hero-guide-button { display:inline-flex; align-items:center; gap:5px; margin-left:4px; padding:3px 7px; border:1px solid rgba(94,234,212,.24); border-radius:5px; background:rgba(45,212,191,.07); color:#99f6e4; font-size:var(--text-caption); }
.hero-guide-button:hover { border-color:rgba(94,234,212,.45); background:rgba(45,212,191,.12); }
.hero-flow { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.flow-track { display: flex; align-items: center; gap: 8px; }
.flow-node { flex: 1; min-width: 0; padding: 12px 7px; border: 1px solid rgba(148,163,184,.13); border-radius: 10px; background: rgba(255,255,255,.035); text-align: center; }
.flow-node svg { margin: 0 auto 7px; color: #91a6bb; }
.flow-node strong { display: block; color: #d8e6f2; font-size:var(--text-caption); white-space: nowrap; }
.flow-node span { display: block; margin-top: 3px; color: #62788f; font-size:var(--text-caption); white-space: nowrap; }
.flow-node.accent { border-color: rgba(45,212,191,.25); background: rgba(13,148,136,.09); }
.flow-node.accent svg, .flow-node.accent strong { color: #5eead4; }
.flow-link { width: 22px; flex: none; color: #36536b; }
.flow-caption { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.07); color: #5e748b; font-size:var(--text-caption); }
.flow-caption b { color: #8ca2b8; font-weight: 550; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card { position: relative; overflow: hidden; padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.stat-card::after { content: ""; position: absolute; right: -13px; top: -13px; width: 64px; height: 64px; border-radius: 50%; background: var(--stat-soft, var(--blue-soft)); opacity: .65; }
.stat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: var(--muted); font-size:var(--text-caption); }
.stat-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: var(--stat-soft, var(--blue-soft)); color: var(--stat-color, var(--blue)); }
.stat-value { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 7px; }
.stat-value strong { font-size:var(--text-title-l); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat-value span { color: var(--muted-2); font-size:var(--text-caption); }
.stat-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--muted-2); font-size:var(--text-caption); }
.mini-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-2); }
.dashboard-section { margin-top: 18px; }
.node-mini-list { display: grid; }
.node-mini { display: grid; grid-template-columns: minmax(160px, 1.25fr) minmax(110px, .8fr) minmax(160px, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.node-mini:first-child { border-top: 0; padding-top: 4px; }
.node-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.node-avatar { width: 31px; height: 31px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #f0f5f6; color: var(--teal); }
.node-avatar.vendor { background:linear-gradient(135deg,var(--teal-soft),#edfafa); color:var(--teal); font-size:var(--text-caption); font-weight:750; letter-spacing:-.02em; }
.node-text { min-width: 0; }
.node-text strong { display: block; overflow: hidden; color: var(--ink-2); font-size:var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }
.node-text span { display: block; margin-top: 2px; overflow: hidden; color: var(--muted-2); font-size:var(--text-caption); font-family: var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.node-metric { min-width: 0; }
.node-metric > span { display: block; margin-bottom: 5px; color: var(--muted-2); font-size:var(--text-caption); }
.node-metric strong { display: block; color: var(--ink-2); font-size:var(--text-caption); font-weight: 600; font-variant-numeric: tabular-nums; }
.progress { height: 5px; overflow: hidden; border-radius: 99px; background: #edf1f4; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--teal-2); }
.progress.warn i { background: var(--amber); }
.progress.danger i { background: var(--red); }
.progress-label { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted-2); font-size:var(--text-caption); }
.audit-mini { display: grid; }
.audit-mini-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.audit-mini-row:first-child { border-top: 0; padding-top: 2px; }
.audit-icon { width: 27px; height: 27px; display: grid; place-items: center; flex:none; border-radius: 7px; background: var(--surface-2); color: var(--muted); }
.audit-icon svg { width:13px; height:13px; }
.audit-copy { min-width: 0; }
.audit-copy strong { display: block; color: var(--ink-2); font-size:var(--text-caption); font-weight: 600; }
.audit-copy span { display: block; margin-top: 3px; overflow: hidden; color: var(--muted-2); font-size:var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }
.audit-time { color: var(--muted-2); font-size:var(--text-caption); white-space: nowrap; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 23px; padding: 4px 8px; border: 1px solid transparent; border-radius: 999px; font-size:var(--text-caption); font-weight: 650; white-space: nowrap; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-healthy { color: #0f766e; border-color: #cdeeea; background: #effbf9; }
.status-degraded { color: var(--amber); border-color: #f6e1bd; background: #fff9ed; }
.status-pending { color: #2563eb; border-color: #d8e5ff; background: #f2f6ff; }
.status-offline, .status-quota_exhausted { color: var(--red); border-color: #f3d3d3; background: #fff4f4; }
.status-paused { color: #6b7280; border-color: #e6e9ee; background: #f6f7f9; }
.status-draining { color: var(--amber); border-color: #f6e1bd; background: #fff9ed; }
.status-maintenance { color: #7c3aed; border-color: #e5d8fa; background: #f8f4ff; }
.status-warming { color: #2563eb; border-color: #d8e5ff; background: #f2f6ff; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-size:var(--text-caption); white-space: nowrap; }
.tag.teal { border-color: #cdeeea; background: var(--teal-soft); color: #0f766e; }
.tag.amber { border-color: #f5e0ba; background: var(--amber-soft); color: #a16207; }
.tag.red { border-color: #f3d3d3; background: var(--red-soft); color: var(--red); }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.search-box { position: relative; max-width: 320px; flex: 1; }
.search-box svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }
.search-box input { width: 100%; height: 35px; padding: 7px 12px 7px 34px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); font-size:var(--text-caption); outline: none; }
.search-box input:focus { border-color: var(--teal-2); box-shadow: 0 0 0 3px rgba(20,184,166,.09); }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.segmented button { border: 0; border-radius: 6px; padding: 5px 9px; background: transparent; color: var(--muted); font-size:var(--text-caption); }
.segmented button.active { background: var(--surface-2); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.table-card { overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 11px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfcfd; color: var(--muted-2); font-size:var(--text-caption); font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size:var(--text-caption); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover { background: #fbfcfd; }
.node-table-name { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.node-table-name .node-avatar { width: 34px; height: 34px; }
.table-actions { display: flex; justify-content: flex-end; gap: 3px; }
.table-actions .icon-button { width: 29px; height: 29px; }
.traffic-cell { width: 160px; }
.quota-unknown { color: var(--muted-2); font-size:var(--text-caption); }
.node-ip { display: flex; align-items: center; gap: 5px; color: var(--muted); font-family: var(--mono); font-size:var(--text-caption); }
.copy-inline { border: 0; background: transparent; color: var(--muted-2); padding: 2px; border-radius: 4px; }
.copy-inline:hover { color: var(--teal); background: var(--teal-soft); }
.mobile-node-cards { display: none; }

.dns-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid #dbe6f4; border-radius: 12px; background: linear-gradient(135deg, #f7faff, #fff); color: #33516f; }
.dns-banner.warn { border-color: #f1dfbc; background: linear-gradient(135deg, #fffaf0, #fff); color: #7c5816; }
.dns-banner.ok { border-color: #cdeeea; background: linear-gradient(135deg, #f1fcfa, #fff); color: #17635c; }
.dns-banner-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(37,99,235,.07); }
.dns-banner.warn .dns-banner-icon { background: rgba(217,119,6,.08); }
.dns-banner.ok .dns-banner-icon { background: rgba(13,148,136,.09); }
.dns-banner strong { display: block; color: inherit; font-size:var(--text-caption); }
.dns-banner p { margin: 4px 0 0; color: inherit; opacity: .78; font-size:var(--text-caption); line-height: 1.55; }
.dns-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dns-stat { padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dns-stat span { display: block; color: var(--muted-2); font-size:var(--text-caption); letter-spacing: .04em; }
.dns-stat strong { display: block; margin-top: 6px; color: var(--ink); font-size:var(--text-title-m); letter-spacing: -.03em; }
.dns-pipeline { display:flex; align-items:center; gap:9px; padding:13px 15px; margin-bottom:18px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow-sm); overflow-x:auto; }
.dns-pipeline-step { display:flex; align-items:center; gap:8px; flex:1; min-width:130px; padding:8px 9px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
.dns-pipeline-icon { width:29px; height:29px; flex:none; display:grid; place-items:center; border-radius:8px; background:#fff; color:var(--muted); }
.dns-pipeline-step.ok .dns-pipeline-icon { background:var(--teal-soft); color:var(--teal); }
.dns-pipeline-step.warn .dns-pipeline-icon { background:var(--amber-soft); color:var(--amber); }
.dns-pipeline-step strong { display:block; font-size:var(--text-caption); white-space:nowrap; }
.dns-pipeline-step small { display:block; margin-top:2px; color:var(--muted-2); font-size:var(--text-caption); white-space:nowrap; }
.dns-pipeline-link { flex:none; color:#b4c0cb; }
.dns-pipeline-result { flex:none; min-width:90px; padding:8px 10px; border-radius:8px; background:var(--amber-soft); text-align:center; }
.dns-pipeline-result.ok { background:var(--teal-soft); }
.dns-pipeline-result strong { display:block; color:var(--amber); font-size:var(--text-caption); }
.dns-pipeline-result.ok strong { color:var(--teal); }
.dns-pipeline-result small { display:block; margin-top:2px; color:var(--muted-2); font-size:var(--text-caption); }
.domain-list { display: grid; }
.domain-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.5fr) minmax(180px, .8fr); gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.domain-row:first-child { border-top: 0; }
.domain-name strong { display: block; font-size:var(--text-caption); }
.domain-name span { display: block; margin-top: 3px; color: var(--muted-2); font-family: var(--mono); font-size:var(--text-caption); }
.ip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.ip-chip { padding: 4px 7px; border: 1px solid #d9e2ea; border-radius: 5px; background: #fff; color: var(--muted); font-family: var(--mono); font-size:var(--text-caption); }
.ip-chip.new { border-color: #bcece5; background: var(--teal-soft); color: #0f766e; }
.ip-chip.old { border-color: #f3d3d3; background: var(--red-soft); color: var(--red); text-decoration: line-through; }
.ip-replace { display: inline-flex; align-items: center; gap: 4px; }
.replace-arrow { color: var(--teal); }
.provider-card .dns-stat { background: var(--surface-2); }
.change-count { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
.dns-apply-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dns-apply-copy strong { display: block; font-size:var(--text-caption); }
.dns-apply-copy span { display: block; margin-top: 3px; color: var(--muted-2); font-size:var(--text-caption); }
.confirm-check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size:var(--text-caption); }
.confirm-check input { accent-color: var(--teal); }
.provider-state { display: flex; align-items: center; gap: 8px; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .6fr); gap: 18px; align-items: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 17px; }
.form-grid > .field { margin-bottom: 0; }
.card-actions { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.form-grid .span-2 { grid-column: span 2; }
.form-section + .form-section { margin-top: 22px; padding-top: 21px; border-top: 1px solid var(--line); }
.form-section-head { margin-bottom: 16px; }
.form-section-head h4 { margin: 0; font-size:var(--text-caption); }
.form-section-head p { margin: 4px 0 0; color: var(--muted-2); font-size:var(--text-caption); line-height: 1.5; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; }
.switch-copy strong { display: block; font-size:var(--text-caption); }
.switch-copy span { display: block; margin-top: 3px; color: var(--muted-2); font-size:var(--text-caption); }
.switch { position: relative; width: 38px; height: 21px; flex: none; }
.switch input { position: absolute; opacity: 0; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: #d8e0e8; transition: .18s; }
.switch i::after { content: ""; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: .18s; }
.switch input:checked + i { background: var(--teal); }
.switch input:checked + i::after { transform: translateX(17px); }
.code-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #0b1422; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-bottom: 1px solid rgba(255,255,255,.07); color: #7e93a9; font-size:var(--text-caption); }
.code-head .btn { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #b5c6d7; }
.code-card pre { max-height: 440px; overflow: auto; margin: 0; padding: 15px; color: #b8cce0; font-family: var(--mono); font-size:var(--text-caption); line-height: 1.7; tab-size: 2; }
.info-list { display: grid; gap: 0; }
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.info-row:first-child { border-top: 0; }
.info-row span { color: var(--muted-2); font-size:var(--text-caption); }
.info-row strong { color: var(--ink-2); font-family: var(--mono); font-size:var(--text-caption); font-weight: 550; text-align: right; word-break: break-all; }

.audit-table .audit-action { display: flex; align-items: center; gap: 8px; }
.audit-action-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); color: var(--muted); }
.audit-detail { max-width: 350px; color: var(--muted); font-size:var(--text-caption); line-height: 1.5; }
.actor-tag { display: inline-flex; padding: 3px 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size:var(--text-caption); }

.empty-state { padding: 56px 24px; text-align: center; }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); color: var(--muted-2); }
.empty-state h3 { margin: 0 0 7px; font-size:var(--text-body); }
.empty-state p { max-width: 410px; margin: 0 auto 18px; color: var(--muted); font-size:var(--text-caption); line-height: 1.65; }
.skeleton { position: relative; overflow: hidden; border-radius: 8px; background: #edf1f4; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-line { height: 12px; margin: 8px 0; }
.skeleton-line.w60 { width: 60%; }

.modal { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 17px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 90px rgba(4,12,24,.3); }
.modal.wide { width: min(820px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(5, 14, 27, .55); backdrop-filter: blur(3px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 21px 22px 16px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size:var(--text-title-s); letter-spacing: -.02em; }
.modal-head p { margin: 5px 0 0; color: var(--muted-2); font-size:var(--text-caption); line-height: 1.55; }
.modal-body { max-height: calc(100vh - 210px); overflow: auto; padding: 20px 22px; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--line); background: #fcfdfd; }
.modal .close { margin: -4px -4px 0 0; }
.modal-note { display: flex; gap: 9px; padding: 11px 12px; border: 1px solid #e2e9ef; border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size:var(--text-caption); line-height: 1.6; }
.modal-note.warn { border-color: #f1dfbc; background: var(--amber-soft); color: #805b18; }
.modal-note.teal { border-color: #cdeeea; background: var(--teal-soft); color: #17635c; }
.modal-note svg { flex: none; margin-top: 1px; }
.onboarding-illustration { display:flex; align-items:center; justify-content:center; gap:8px; margin:16px 0; padding:14px 10px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); }
.onboard-step { display:grid; justify-items:center; gap:4px; min-width:0; text-align:center; }
.onboard-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#fff; color:var(--muted); box-shadow:0 3px 9px rgba(11,18,32,.05); }
.onboard-step.accent .onboard-icon { background:var(--teal-soft); color:var(--teal); }
.onboard-step strong { font-size:var(--text-caption); white-space:nowrap; }
.onboard-step small { color:var(--muted-2); font-size:var(--text-caption); white-space:nowrap; }
.onboard-link { flex:none; color:#b4c0cb; }
.command-box { position: relative; margin: 12px 0; border: 1px solid #203248; border-radius: 10px; background: #0b1422; }
.command-box code { display: block; max-height: 150px; overflow: auto; padding: 13px 42px 13px 13px; color: #b9cee3; font-family: var(--mono); font-size:var(--text-caption); line-height: 1.65; white-space: pre-wrap; word-break: break-all; }
.command-box button { position: absolute; right: 7px; top: 7px; }
.step-list { display: grid; gap: 15px; margin: 17px 0; }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.step-num { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: var(--teal-soft); color: var(--teal); font-size:var(--text-caption); font-weight: 700; }
.step strong { display: block; margin-bottom: 4px; font-size:var(--text-caption); }
.step p { margin: 0; color: var(--muted); font-size:var(--text-caption); line-height: 1.55; }
.danger-summary { padding: 13px 14px; border: 1px solid #f3d3d3; border-radius: 9px; background: var(--red-soft); color: #8b2b2b; font-size:var(--text-caption); line-height: 1.65; }
.forecast-list { display:grid; gap:0; }
.forecast-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.forecast-row:first-child { border-top:0; padding-top:2px; }
.forecast-row > strong { font-family:var(--mono); font-size:var(--text-caption); white-space:nowrap; }
.forecast-row > strong small { margin-left:2px; color:var(--muted-2); font-size:var(--text-caption); font-weight:400; }
.alert-feed { display:grid; gap:0; margin-top:12px; border-top:1px solid var(--line); }
.alert-feed-row { display:grid; grid-template-columns:26px minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line); }
.alert-feed-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; background:var(--red-soft); color:var(--red); }
.alert-feed-icon.ok { background:var(--teal-soft); color:var(--teal); }
.alert-feed-row > div { min-width:0; }
.alert-feed-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-caption); }
.alert-feed-row > div span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; color:var(--muted-2); font-size:var(--text-caption); }
.alert-feed-row time { color:var(--muted-2); font-size:var(--text-caption); white-space:nowrap; }
.alert-feed-row em { padding:2px 5px; border-radius:4px; font-size:var(--text-caption); font-style:normal; white-space:nowrap; }
.alert-feed-row em.ok { background:var(--teal-soft); color:var(--teal); }
.alert-feed-row em.fail { background:var(--red-soft); color:var(--red); }
.config-profile { margin-bottom:15px; padding:13px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(135deg,#f8fcfc,#fff); }
.config-profile-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--line); }
.config-profile-head span { color:var(--muted-2); font-size:var(--text-caption); }
.config-profile-head strong { font-size:var(--text-caption); }
.config-profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.config-profile-grid > div { min-width:0; }
.config-profile-grid span { display:block; color:var(--muted-2); font-size:var(--text-caption); }
.config-profile-grid strong { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); font-size:var(--text-caption); }
.config-profile p { margin:10px 0 0; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); font-size:var(--text-caption); line-height:1.5; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-item { padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.detail-item span { display: block; color: var(--muted-2); font-size:var(--text-caption); }
.detail-item strong { display: block; margin-top: 4px; color: var(--ink-2); font-family: var(--mono); font-size:var(--text-caption); font-weight: 550; word-break: break-all; }

.toast-root { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 9px; align-items: start; padding: 12px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow-md); pointer-events: auto; animation: toastIn .24s ease both; }
.toast.success { border-color: #cdeeea; }
.toast.error { border-color: #f1caca; }
.toast-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: var(--teal-soft); color: var(--teal); }
.toast.error .toast-icon { background: var(--red-soft); color: var(--red); }
.toast strong { display: block; font-size:var(--text-caption); }
.toast p { margin: 3px 0 0; color: var(--muted); font-size:var(--text-caption); line-height: 1.45; }
.toast button { border: 0; background: transparent; color: var(--muted-2); padding: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* Visual dashboard */
.visual-grid { display:grid; grid-template-columns: minmax(310px,.7fr) minmax(0,1.3fr); gap:18px; margin-bottom:18px; }
.health-ring-card,.traffic-chart-card { overflow:hidden; }
.health-ring-body { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.health-ring-wrap { display:contents !important; }
.health-ring-shell { grid-area:ring; }
.health-ring-shell { position:relative; width:132px; height:132px; flex:none; }
.health-ring { width:132px; height:132px; transform:rotate(-90deg); }
.health-ring .ring-track { fill:none; stroke:#edf2f5; stroke-width:12; }
.health-ring .ring-value { fill:none; stroke:var(--teal); stroke-width:12; stroke-linecap:round; transition:stroke-dasharray .6s ease; }
.health-ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.health-ring-center strong { font-size:var(--text-title-l); line-height:1; letter-spacing:-.05em; }
.health-ring-center strong small { margin-left:2px; color:var(--muted); font-size:var(--text-caption); font-weight:500; }
.health-ring-center span { margin-top:5px; color:var(--muted-2); font-size:var(--text-caption); }
.health-ring-caption { flex:1 1 190px; min-width:0; }
.health-ring-caption strong { display:block; white-space:nowrap; font-size:var(--text-caption); }
.health-ring-caption span { display:block; margin-top:5px; color:var(--muted-2); font-size:var(--text-caption); line-height:1.5; white-space:normal; }
.health-legend { flex:1 1 100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-top:10px; border-top:1px solid var(--line); }
.health-legend > div { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.health-legend i { width:7px; height:7px; border-radius:50%; }
.health-legend span { color:var(--muted); font-size:var(--text-caption); }
.health-legend strong { font-family:var(--mono); font-size:var(--text-caption); }
.teal-dot { background:var(--teal); }
.amber-dot { background:var(--amber); }
.red-dot { background:var(--red); }
.bar-chart { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:end; min-height:180px; }
.bar-row { display:grid; grid-template-rows:auto 120px auto; gap:8px; min-width:0; }
.bar-label { display:flex; align-items:flex-end; justify-content:space-between; gap:6px; min-width:0; }
.bar-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-caption); }
.bar-label strong { color:var(--teal); font-family:var(--mono); font-size:var(--text-caption); }
.bar-track { display:flex; align-items:flex-end; min-height:120px; padding:0 12%; border-bottom:1px solid var(--line); background:linear-gradient(to top, transparent 24.8%, #f4f7f9 25%, transparent 25.2%, transparent 49.8%, #f4f7f9 50%, transparent 50.2%, transparent 74.8%, #f4f7f9 75%, transparent 75.2%); }
.bar-track i { display:block; width:100%; min-height:8px; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,#5eead4,var(--teal)); box-shadow:0 6px 14px rgba(13,148,136,.16); }
.bar-track i.warn { background:linear-gradient(180deg,#fcd34d,var(--amber)); box-shadow:0 6px 14px rgba(245,158,11,.16); }
.bar-foot { color:var(--muted-2); font-size:var(--text-caption); text-align:center; white-space:nowrap; }
.bar-row.has-quota .bar-track i { position:relative; }
.bar-row.has-quota .bar-track i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); }
.chart-empty { display:grid; place-items:center; gap:8px; min-height:180px; color:var(--muted-2); font-size:var(--text-caption); }
.topology-legend { display:flex; align-items:center; gap:14px; margin-top:12px; color:#6e859c; font-size:var(--text-caption); }
.topology-legend span { display:flex; align-items:center; gap:5px; }
.topology-legend i { width:5px; height:5px; border-radius:50%; }
.topology-live { margin-left:auto; color:#5eead4; }
/* Node preset gallery */
.preset-gallery { margin-bottom:18px; padding:16px 17px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,#fff,#f7fcfb); box-shadow:var(--shadow-sm); }
.preset-gallery-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.preset-gallery-head h3 { margin:0; font-size:var(--text-helper); }
.preset-gallery-head p { margin:4px 0 0; color:var(--muted-2); font-size:var(--text-caption); }
.preset-gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.preset-tile { display:grid; grid-template-columns:31px minmax(0,1fr) 13px; align-items:center; gap:9px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); text-align:left; transition:.16s; }
.preset-tile:hover { border-color:#b9e6e1; background:#fbfffe; transform:translateY(-1px); box-shadow:0 7px 16px rgba(13,148,136,.06); }
.preset-logo { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:var(--teal-soft); color:var(--teal); font-size:var(--text-caption); font-weight:700; }
.preset-tile div { min-width:0; }
.preset-tile strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-caption); }
.preset-tile span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; color:var(--muted-2); font-size:var(--text-caption); }
.preset-tile small { display:block; margin-top:3px; color:var(--muted); font-size:var(--text-caption); }
.preset-tile > svg { color:var(--muted-2); }
/* Fleet configuration */
.fleet-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.fleet-overview-card { display:flex; align-items:center; gap:11px; padding:14px 15px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow-sm); }
.fleet-overview-icon { width:33px; height:33px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--surface-2); color:var(--muted); }
.fleet-overview-card.tone-teal .fleet-overview-icon { background:var(--teal-soft); color:var(--teal); }
.fleet-overview-card.tone-amber .fleet-overview-icon { background:var(--amber-soft); color:var(--amber); }
.fleet-overview-card.tone-blue .fleet-overview-icon { background:var(--blue-soft); color:var(--blue); }
.fleet-overview-card span { display:block; color:var(--muted-2); font-size:var(--text-caption); }
.fleet-overview-card strong { display:block; margin:1px 0; font-size:var(--text-title-l); line-height:1.2; letter-spacing:-.04em; }
.fleet-overview-card small { display:block; color:var(--muted-2); font-size:var(--text-caption); }
.node-source-hint { display:flex; align-items:flex-start; gap:7px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); color:var(--muted-2); font-size:var(--text-caption); line-height:1.5; }
.node-source-hint svg { flex:none; margin-top:1px; color:var(--teal); }
.node-tagline { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.node-tagline em { padding:2px 5px; border:1px solid #e5ebef; border-radius:4px; color:var(--muted); font-size:var(--text-caption); font-style:normal; white-space:nowrap; }
.node-tagline em.muted { border-style:dashed; }
.required { color:var(--red); }
.wizard-steps { display:flex; align-items:center; gap:4px; margin-bottom:16px; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.wizard-steps span { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--muted-2); font-size:var(--text-caption); }
.wizard-steps b { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--muted); font-size:var(--text-caption); }
.wizard-steps .active { color:var(--teal); font-weight:650; }
.wizard-steps .active b { background:var(--teal); color:#fff; }
.preset-preview { display:flex; align-items:center; gap:8px; margin-top:9px; padding:9px 10px; border:1px solid #cdeeea; border-radius:8px; background:var(--teal-soft); }
.preset-preview-dot { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(13,148,136,.1); }
.preset-preview strong { display:block; color:#17635c; font-size:var(--text-caption); }
.preset-preview small { display:block; margin-top:2px; color:#4d8881; font-size:var(--text-caption); }
.wizard-section { margin:16px 0 0; padding:14px; border:1px solid var(--line); border-radius:11px; background:#fbfcfd; }
.wizard-section > .form-grid { margin-top:12px; }
.wizard-section-head { display:flex; align-items:center; gap:9px; }
.wizard-section-num { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--teal-soft); color:var(--teal); font-size:var(--text-caption); font-weight:700; }
.wizard-section-head strong { display:block; font-size:var(--text-caption); }
.wizard-section-head small { display:block; margin-top:2px; color:var(--muted-2); font-size:var(--text-caption); }
.input-with-action { display:flex; align-items:stretch; gap:6px; }
.input-with-action input { min-width:0; flex:1; }
.input-with-action .btn { flex:none; min-height:47px; white-space:nowrap; }
.advanced-settings { margin:4px 0 16px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
.advanced-settings summary { cursor:pointer; color:var(--ink-2); font-size:var(--text-caption); font-weight:600; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.guide-card { padding:14px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.guide-icon { width:31px; height:31px; display:grid; place-items:center; margin-bottom:9px; border-radius:8px; background:var(--surface-2); color:var(--muted); }
.guide-icon.teal { background:var(--teal-soft); color:var(--teal); } .guide-icon.blue { background:var(--blue-soft); color:var(--blue); } .guide-icon.amber { background:var(--amber-soft); color:var(--amber); } .guide-icon.violet { background:#f1eafe; color:#7c5cba; }
.guide-card strong { font-size:var(--text-caption); }
.guide-card p { margin:5px 0 0; color:var(--muted); font-size:var(--text-caption); line-height:1.6; }
.probe-why { display:flex; align-items:flex-start; gap:9px; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
.probe-why-icon { width:23px; height:23px; flex:none; display:grid; place-items:center; border-radius:6px; background:var(--teal-soft); color:var(--teal); }
.probe-why strong { display:block; font-size:var(--text-caption); }
.probe-why p { margin:3px 0 0; color:var(--muted-2); font-size:var(--text-caption); line-height:1.55; }
/* Guided setup */
.setup-card { border-color:#cdeeea; background:linear-gradient(135deg,#f7fdfc,#fff 55%); }
.setup-progress { height:5px; overflow:hidden; margin-bottom:12px; border-radius:99px; background:#e9f1f1; }
.setup-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),#5eead4); }
.setup-steps { display:grid; gap:6px; }
.setup-step { display:grid; grid-template-columns:25px minmax(0,1fr) 14px; align-items:center; gap:9px; width:100%; padding:9px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink-2); text-align:left; }
.setup-step:hover { border-color:var(--line); background:#fff; }
.setup-step-index { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid var(--line); color:var(--muted); font-size:var(--text-caption); }
.setup-step.done .setup-step-index { border-color:#bce9e3; background:var(--teal-soft); color:var(--teal); }
.setup-step strong { display:block; font-size:var(--text-caption); }
.setup-step small { display:block; margin-top:2px; color:var(--muted-2); font-size:var(--text-caption); }
.mini-setup-card .card-body { display:grid; gap:8px; }
.mini-check { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); }
.mini-check:first-child { border-top:0; }
.mini-check > span { width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background:var(--amber-soft); color:var(--amber); }
.mini-check > span.ok { background:var(--teal-soft); color:var(--teal); }
.mini-check strong { display:block; font-size:var(--text-caption); }
.mini-check small { display:block; margin-top:2px; color:var(--muted-2); font-size:var(--text-caption); }
/* Probe explanation */
.probe-guide { padding:14px; border:1px solid #cdeeea; border-radius:11px; background:linear-gradient(135deg,#f4fcfa,#fff); }
.probe-guide-head { display:flex; gap:10px; margin-bottom:12px; }
.probe-guide-icon { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:8px; background:var(--teal-soft); color:var(--teal); }
.probe-guide-head strong { display:block; font-size:var(--text-caption); }
.probe-guide-head p { margin:4px 0 0; color:var(--muted); font-size:var(--text-caption); line-height:1.6; }
.probe-presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.probe-example { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:7px; color:var(--muted-2); font-size:var(--text-caption); }
.probe-example code { padding:2px 5px; border-radius:4px; background:var(--surface-2); font-family:var(--mono); }
.probe-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.probe-card { min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.probe-card.fail { border-color:#f1d0d0; background:#fffafa; }
.probe-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.probe-status { display:flex; align-items:center; gap:5px; color:var(--teal); font-size:var(--text-caption); font-weight:650; }
.probe-status i { width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(13,148,136,.1); }
.probe-card.fail .probe-status { color:var(--red); }
.probe-host { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted-2); font-family:var(--mono); font-size:var(--text-caption); }
.probe-card-main { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:12px; }
.probe-card-main strong { font-size:var(--text-title-l); letter-spacing:-.05em; }
.probe-card-main strong small { color:var(--muted-2); font-size:var(--text-caption); font-weight:500; letter-spacing:0; }
.probe-card-main > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted-2); font-size:var(--text-caption); }
.probe-latency { height:4px; margin-top:8px; overflow:hidden; border-radius:99px; background:#edf2f4; }
.probe-latency i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),#5eead4); }
.probe-card.fail .probe-latency i { background:var(--red); }
.probe-card-foot { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:8px; }
.probe-card-foot .tag { padding:2px 5px; font-size:var(--text-caption); }
.probe-cert { color:var(--muted-2); font-size:var(--text-caption); white-space:nowrap; }
.probe-cert.warn { color:var(--amber); }
.bar-row.unlimited .bar-track i { height:34% !important; opacity:.55; }
@media (max-width: 1180px) { .preset-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .visual-grid { grid-template-columns:1fr; } .fleet-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px) { .preset-gallery-grid { grid-template-columns:1fr; } .health-ring-body { justify-content:center; } .health-ring-caption { flex-basis:100%; text-align:center; } .health-legend { flex-basis:100%; } .probe-card-grid { grid-template-columns:1fr; } .bar-chart { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .bar-row { grid-template-rows:auto 92px auto; } .bar-track { min-height:92px; } .fleet-overview { gap:8px; } .fleet-overview-card { padding:11px; } .fleet-overview-card strong { font-size:var(--text-title-m); } .guide-grid { grid-template-columns:1fr; } }

@media (max-width: 1180px) {
  .login-shell { grid-template-columns: 1fr 420px; }
  .login-visual { padding: 40px; }
  .overview-hero { grid-template-columns: 1fr 340px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .settings-grid { grid-template-columns: 1fr; }
  .domain-row { grid-template-columns: minmax(190px, 1fr) minmax(240px, 1.4fr); }
  .domain-row .change-count { grid-column: span 2; justify-content: flex-start; }
}
@media (max-width: 1400px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .login-visual { display: none; }
  .login-shell { grid-template-columns: 1fr; }
  .login-panel { min-height: 100vh; padding: 40px 24px; background: radial-gradient(circle at 50% 0%, #effaf8, transparent 34%), #fbfcfd; }
  .app-shell { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 20px 0 50px rgba(4,12,24,.18); }
  .sidebar.open { transform: none; }
  .main-column { width: 100%; }
  .topbar { padding: 0 18px; }
  .mobile-menu { display: inline-grid; }
  .page { padding: 22px 18px 42px; }
  .overview-hero { grid-template-columns: 1fr; }
  .hero-flow { padding-top: 6px; }
  .grid-3 { grid-template-columns: 1fr; }
  .data-table .desktop-only { display: none; }
  .node-table-name { min-width: 150px; }
}
@media (max-width: 680px) {
  .topbar { height: 62px; }
  .topbar-title p, .sync-state { display: none; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .page-heading h2 { font-size:var(--text-title-l); }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1; }
  .overview-hero { padding: 22px 20px; }
  .hero-copy h2 { font-size:var(--text-title-l); }
  .flow-track { gap: 3px; }
  .flow-link { width: 12px; }
  .flow-node { padding: 9px 2px; }
  .flow-node strong { font-size:var(--text-caption); }
  .flow-node span { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { padding: 14px; }
  .stat-value strong { font-size:var(--text-title-l); }
  .node-mini { grid-template-columns: minmax(0,1fr) auto; }
  .node-mini .node-metric:nth-of-type(2) { display: none; }
  .dns-summary { grid-template-columns: 1fr 1fr; }
  .dns-summary .dns-stat:last-child { grid-column: span 2; }
  .domain-row { grid-template-columns: 1fr; gap: 10px; }
  .domain-row .change-count { grid-column: auto; }
  .dns-apply-bar { align-items: flex-start; flex-direction: column; }
  .dns-apply-bar .btn { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .card-actions .btn { flex: 1 1 calc(50% - 4px); white-space: nowrap; }
  .table-card { display: none; }
  .audit-table { display: block; overflow-x: auto; }
  .audit-table .data-table { min-width: 680px; }
  .mobile-node-cards { display: grid; gap: 10px; }
  .mobile-node-card { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
  .mobile-node-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
  .mobile-node-card .node-identity { min-width: 0; }
  .mobile-node-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .mobile-node-actions { display: flex; gap: 6px; margin-top: 12px; }
  .mobile-node-actions .btn { flex: 1; }
  .toolbar { flex-wrap: wrap; }
  .search-box { max-width: none; width: 100%; flex-basis: 100%; }
  .modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .modal.wide { width: calc(100vw - 20px); }
  .modal-body { max-height: calc(100vh - 190px); }
  .detail-grid { grid-template-columns: 1fr; }
  .toast-root { right: 10px; bottom: 10px; }
}

/* Typography enforcement: 20 / 18 / 16 / 14 / 13 / 12 only. */
:where(.page-heading h2, .hero-copy h2, .login-form-wrap h2) { font-size: var(--text-title-l) !important; line-height: var(--leading-title-l) !important; }
:where(.card-title h3, .modal-head h3, .form-section-head h4) { font-size: var(--text-title-m) !important; line-height: var(--leading-title-m) !important; }
:where(.topbar-title h1, .brand-copy strong, .login-eyebrow, .hero-tag) { font-size: var(--text-title-s) !important; line-height: var(--leading-title-s) !important; }
:where(body, button, input, select, textarea, .data-table td, .data-table th) { font-size: var(--text-body) !important; line-height: var(--leading-body) !important; }
:where(.page-heading p, .card-title p, .field .hint, .field label, .small, .tag, .status-pill, .btn-sm) { font-size: var(--text-helper) !important; line-height: var(--leading-helper) !important; }
:where(.eyebrow, .sync-state, .sidebar-status, .sidebar-user, .audit-time, .actor-tag, .stat-top, .stat-foot, .stat-value span, .node-text span, .node-metric span, .flow-caption, .preset-tile span, .setup-step small, .probe-host, .probe-cert) { font-size: var(--text-caption) !important; line-height: var(--leading-caption) !important; }
.haproxy-preview { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #0b1220; }
.haproxy-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 15px; color: #dbe7f3; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.09); }
.haproxy-preview-head strong { display: block; font-size: var(--text-body); line-height: var(--leading-body); }
.haproxy-preview-head span { display: block; margin-top: 2px; color: #93a8bc; font-size: var(--text-caption); line-height: var(--leading-caption); }
.haproxy-preview pre { max-height: 340px; margin: 0; padding: 15px; overflow: auto; color: #a7f3d0; font-family: var(--mono); font-size: var(--text-caption); line-height: var(--leading-caption); white-space: pre; }

/* Per-host DNS + probe editor */
.domain-editor-field { padding: 14px; border: 1px solid #cdeeea; border-radius: 11px; background: linear-gradient(135deg, #f4fcfa, #fff); }
.domain-editor { display: grid; gap: 8px; margin-top: 9px; }
.domain-editor-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 7px; }
.domain-editor-index { color: var(--muted-2); font-family: var(--mono); font-size: var(--text-caption); text-align: center; }
.domain-editor-row input { min-width: 0; height: 38px; }
.domain-editor-row .icon-button { width: 32px; height: 32px; color: var(--muted-2); }
.domain-editor-row .icon-button:hover { color: var(--red); background: var(--red-soft); }
.domain-editor-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 11px; }
.probe-domain-list { display: grid; gap: 7px; }
.probe-domain-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.probe-domain-row:hover { border-color: #bce9e3; }
.probe-domain-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.probe-domain-copy strong { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.probe-domain-copy span { overflow: hidden; text-overflow: ellipsis; color: var(--muted-2); font-size: var(--text-caption); }

/* Split configuration pages */
.sidebar { overflow-y: auto; }
.config-subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 18px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.72); box-shadow: var(--shadow-sm); }
.config-subnav-item { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-size: var(--text-helper); line-height: var(--leading-helper); }
.config-subnav-item:hover { border-color: var(--line); background: #fff; color: var(--ink-2); }
.config-subnav-item.active { border-color: #bce9e3; background: var(--teal-soft); color: var(--teal); font-weight: 650; }
.config-subnav-item svg { flex: none; }

/* Keep observability probe cards readable in the narrower settings column. */
.settings-grid .probe-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { .settings-grid .probe-card-grid { grid-template-columns: 1fr; } }

.dns-ip-source-note { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; margin-bottom:12px; padding:10px 12px; border:1px solid #cdeeea; border-radius:9px; color:#17635c; background:var(--teal-soft); font-size:var(--text-helper); line-height:var(--leading-helper); }
.dns-ip-source-note span { display:inline-flex; align-items:center; gap:6px; }
.dns-ip-source-note span:last-child { color:var(--muted); }