:root {
  --bg: #0b1220;
  --bg-deep: #0a101c;
  --panel: #111b2e;
  --panel-raised: #15223a;
  --panel-soft: #0f192b;
  --border: #253653;
  --border-soft: rgba(75, 100, 140, .24);
  --text: #eef3ff;
  --text-soft: #9aaaca;
  --text-faint: #6c7b9c;
  --blue: #6d80ff;
  --blue-bright: #88a0ff;
  --cyan: #41d6c3;
  --green: #57d48e;
  --orange: #f3b866;
  --red: #f17988;
  --violet: #ab8aff;
  --shadow: 0 18px 50px rgba(0, 0, 0, .18);
  --radius-lg: 16px;
  --radius-md: 12px;
  --sidebar-width: 258px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
 [hidden] { display: none !important; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 72% -5%, rgba(67, 90, 170, .16), transparent 30%), var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-muted { color: var(--text-faint); width: 15px; height: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.is-booting .app-shell { visibility: hidden; }
.boot-screen { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; align-content: center; gap: 9px; color: #d9e2f6; background: radial-gradient(circle at 50% 40%, rgba(82, 106, 211, .18), transparent 30%), var(--bg); }
.boot-screen[hidden] { display: none; }
.boot-mark { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 4px; color: #f8fbff; background: linear-gradient(145deg, #7184ff, #5666de); border-radius: 14px; box-shadow: 0 10px 28px rgba(93, 111, 255, .24); }
.boot-mark .icon { width: 25px; height: 25px; }
.boot-screen strong { font-size: 15px; letter-spacing: .02em; }
.boot-screen span { color: #7786a5; font-size: 10px; }
.auth-screen { position: fixed; z-index: 35; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% -10%, rgba(82, 106, 211, .18), transparent 38%), var(--bg); }
.auth-screen[hidden] { display: none; }
.auth-card { width: min(100%, 390px); padding: 32px; background: linear-gradient(145deg, rgba(21, 34, 58, .98), rgba(14, 25, 44, .98)); border: 1px solid rgba(108, 132, 181, .28); border-radius: 17px; box-shadow: 0 28px 90px rgba(0, 0, 0, .3); }
.auth-brand { margin-bottom: 22px; }
.auth-card h1 { margin-bottom: 9px; font-size: 25px; }
.auth-subtitle { margin: 0 0 24px; color: var(--text-soft); font-size: 11px; line-height: 1.65; }
.auth-form .text-input { margin-bottom: 15px; }
.auth-submit { width: 100%; height: 40px; margin-top: 3px; }
.auth-error { min-height: 16px; margin: -2px 0 10px; color: #f0929b; font-size: 10px; }
.auth-footnote { display: block; margin-top: 21px; color: #61708c; font-size: 9px; text-align: center; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); display: flex; flex-direction: column; padding: 28px 16px 18px; background: linear-gradient(180deg, rgba(16, 27, 48, .97), rgba(10, 17, 31, .98)); border-right: 1px solid var(--border-soft); }
.brand-lockup { display: flex; align-items: center; gap: 11px; margin: 0 10px 29px; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; background: linear-gradient(145deg, #7184ff, #5666de); border-radius: 12px; color: white; box-shadow: 0 8px 24px rgba(93, 111, 255, .25); }
.brand-mark .icon { width: 22px; height: 22px; }
.brand-lockup strong { display: block; font-size: 14px; letter-spacing: -.01em; }
.brand-lockup span { display: block; margin-top: 3px; color: var(--text-faint); font-size: 10px; letter-spacing: .06em; }
.workspace-switcher { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: var(--text); background: rgba(42, 59, 91, .38); border: 1px solid rgba(100, 126, 176, .16); border-radius: 11px; text-align: left; }
.workspace-switcher:hover { background: rgba(57, 77, 117, .48); }
.workspace-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #28447f; color: #aebfff; font-size: 12px; font-weight: 700; }
.workspace-copy { flex: 1; min-width: 0; }
.workspace-copy b, .workspace-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-copy b { font-size: 12px; font-weight: 600; }
.workspace-copy small { margin-top: 3px; color: var(--text-faint); font-size: 10px; }
.nav-label { padding: 0 13px; margin: 30px 0 9px; color: #657596; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.nav-label-spaced { margin-top: 28px; }
.primary-nav, .secondary-nav { display: grid; gap: 4px; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; color: var(--text-soft); background: transparent; border-radius: 10px; text-align: left; transition: color .2s, background .2s, transform .2s; }
.nav-item:hover { color: var(--text); background: rgba(55, 76, 114, .28); }
.nav-item.is-active { color: #e5e9ff; background: linear-gradient(90deg, rgba(98, 116, 255, .23), rgba(98, 116, 255, .08)); box-shadow: inset 3px 0 0 #7c8aff; }
.nav-item.is-active .icon { color: #a8b3ff; }
.nav-item span:not(.nav-badge):not(.nav-count):not(.status-dot) { font-size: 12px; font-weight: 540; }
.nav-item .icon { width: 17px; height: 17px; color: #8291af; }
.nav-badge, .nav-count { margin-left: auto; font-size: 10px; font-weight: 700; }
.nav-badge { padding: 3px 6px; color: #a7b4ff; background: rgba(103, 120, 255, .18); border-radius: 6px; }
.nav-count { color: #71809f; }
.status-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(87, 212, 142, .09); }
.sidebar-spacer { flex: 1; min-height: 35px; }
.plan-card { margin: 0 4px 15px; padding: 13px 13px 12px; background: linear-gradient(145deg, rgba(39, 58, 99, .75), rgba(23, 34, 59, .72)); border: 1px solid rgba(115, 136, 202, .18); border-radius: 12px; }
.plan-card-head, .plan-card-foot { display: flex; align-items: center; justify-content: space-between; }
.plan-card-head { color: #b9c5ff; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.plan-status { padding: 3px 6px; color: #69dca6; background: rgba(74, 209, 139, .1); border-radius: 5px; font-size: 9px; letter-spacing: 0; }
.plan-card p { margin: 13px 0 10px; color: var(--text-soft); font-size: 10px; line-height: 1.5; }
.plan-card p strong { color: var(--text); font-size: 11px; }
.progress-track { height: 4px; overflow: hidden; background: rgba(119, 142, 204, .16); border-radius: 4px; }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg, #6c7fff, #9caaff); border-radius: inherit; }
.plan-card-foot { margin-top: 9px; color: #7080a0; font-size: 9px; }
.plan-card-foot button { padding: 0; color: #aab6ff; background: none; font-size: 10px; font-weight: 700; }
.user-card { display: flex; align-items: center; gap: 9px; padding: 10px 8px 0; border-top: 1px solid var(--border-soft); }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.avatar-blue { color: #b7c5ff; background: #2d4378; }
.avatar-amber { color: #ffdda9; background: #715638; }
.user-meta { flex: 1; min-width: 0; }
.user-meta b, .user-meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta b { color: #dce4f7; font-size: 11px; font-weight: 600; }
.user-meta span { margin-top: 3px; color: #6f7e9b; font-size: 9px; }
.user-logout { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 7px; color: #8292b1; background: transparent; border-radius: 7px; font-size: 10px; transition: color .2s, background .2s; }
.user-logout:hover { color: #e4eaff; background: rgba(78, 100, 142, .22); }
.user-logout:disabled { cursor: wait; opacity: .55; }
.user-logout .icon { width: 15px; height: 15px; }

.main-content { flex: 1; min-width: 0; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid rgba(69, 92, 129, .18); }
.breadcrumbs, .topbar-actions, .last-sync { display: flex; align-items: center; }
.breadcrumbs { gap: 10px; color: #7180a0; font-size: 11px; }
.breadcrumbs .icon { width: 13px; height: 13px; color: #4d5c78; }
.breadcrumbs strong { color: #c7d1e8; font-size: 11px; font-weight: 600; }
.topbar-actions { gap: 16px; }
.public-download-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; color: #aab6ff; background: rgba(103, 120, 255, .1); border: 1px solid rgba(111, 128, 255, .18); border-radius: 7px; font-size: 10px; font-weight: 650; transition: color .2s, background .2s, border-color .2s; }
.public-download-link:hover { color: #e2e6ff; background: rgba(103, 120, 255, .18); border-color: rgba(131, 145, 255, .34); }
.public-download-link .icon { width: 12px; height: 12px; }
.last-sync { gap: 7px; color: #7180a0; font-size: 10px; }
.last-sync b { color: #aebbd6; font-weight: 600; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(87, 212, 142, .1); }
.icon-btn { width: 30px; height: 30px; display: inline-grid; place-items: center; color: #8392b0; background: transparent; border-radius: 8px; transition: background .2s, color .2s; }
.icon-btn:hover { color: var(--text); background: rgba(78, 100, 142, .22); }
.icon-btn .icon { width: 17px; height: 17px; }
.has-notification { position: relative; }
.has-notification > span { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border: 1px solid var(--bg); border-radius: 50%; background: var(--orange); }
.topbar-divider { height: 22px; width: 1px; background: var(--border-soft); }
.page-wrap { max-width: 1500px; margin: 0 auto; padding: 33px 42px 55px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 29px; }
.eyebrow { margin: 0 0 9px; color: #7181a4; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 9px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
.page-subtitle { margin: 0; color: var(--text-soft); font-size: 12px; }
.heading-actions, .table-actions { display: flex; align-items: center; gap: 9px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; color: #d9e0f1; border-radius: 8px; font-size: 11px; font-weight: 650; transition: transform .2s, background .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn .icon { width: 15px; height: 15px; }
.btn-primary { color: #fff; background: linear-gradient(135deg, #6879f5, #5c6de3); box-shadow: 0 7px 18px rgba(81, 97, 221, .24); }
.btn-primary:hover { background: linear-gradient(135deg, #7787ff, #6475ed); }
.btn-secondary { background: rgba(44, 62, 97, .7); border: 1px solid rgba(103, 126, 176, .24); }
.btn-secondary:hover, .btn-ghost:hover { background: rgba(62, 83, 127, .55); }
.btn-ghost { height: 30px; padding: 0 10px; color: #98a6c2; background: rgba(27, 42, 68, .58); border: 1px solid var(--border-soft); font-size: 10px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.kpi-card, .panel { background: linear-gradient(145deg, rgba(20, 32, 55, .92), rgba(15, 26, 45, .92)); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: 0 8px 34px rgba(1, 5, 14, .08); }
.kpi-card { min-height: 126px; padding: 18px 19px 15px; }
.kpi-card-top, .kpi-value-row { display: flex; align-items: center; }
.kpi-card-top { justify-content: space-between; }
.kpi-label { color: #8190af; font-size: 11px; }
.kpi-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; }
.kpi-icon .icon { width: 15px; height: 15px; }
.kpi-icon-blue { color: #9cabff; background: rgba(106, 124, 255, .13); }
.kpi-icon-green { color: #70ddaa; background: rgba(70, 210, 141, .13); }
.kpi-icon-violet { color: #c0a8ff; background: rgba(166, 131, 255, .13); }
.kpi-icon-orange { color: #f4bf7b; background: rgba(242, 174, 89, .13); }
.kpi-value-row { gap: 5px; margin-top: 15px; }
.kpi-value-row strong { font-size: 25px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.kpi-unit { color: #71809e; font-size: 12px; }
.trend { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.trend .icon { width: 12px; height: 12px; }
.trend-up { color: #65d89e; }
.trend-down { color: #ee8b94; }
.kpi-value-row .trend { margin-left: auto; align-self: center; }
.kpi-status-label { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #6bd89e; font-size: 10px; }
.kpi-note { margin: 8px 0 0; color: #657493; font-size: 10px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .83fr); gap: 17px; margin-bottom: 17px; }
.panel { padding: 20px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-header h2 { margin: 0; color: #dce4f5; font-size: 14px; letter-spacing: -.01em; }
.panel-header p { margin: 6px 0 0; color: #71809e; font-size: 10px; }
.segmented-control { display: flex; padding: 3px; background: rgba(7, 14, 27, .46); border: 1px solid rgba(76, 103, 146, .15); border-radius: 8px; }
.segmented-control button { padding: 5px 9px; color: #71809d; background: transparent; border-radius: 5px; font-size: 9px; }
.segmented-control button.is-active { color: #cdd6ff; background: rgba(103, 121, 255, .2); }
.chart-summary { display: flex; align-items: baseline; gap: 10px; margin: 27px 0 10px 46px; }
.chart-summary strong { color: #f1f4ff; font-size: 26px; letter-spacing: -.04em; }
.summary-muted { color: #657594; font-size: 10px; }
.chart-wrap { position: relative; height: 217px; padding: 0 13px 20px 47px; }
.chart-y-axis { position: absolute; top: -1px; left: 0; bottom: 23px; display: flex; flex-direction: column; justify-content: space-between; color: #5c6b88; font-size: 9px; }
.line-chart { display: block; width: 100%; height: 191px; overflow: visible; }
.chart-grid line { stroke: rgba(102, 126, 170, .13); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-area { fill: url(#areaGradient); }
.chart-line { fill: none; stroke: #7586ff; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 4px 5px rgba(94, 111, 255, .18)); }
.chart-marker circle:first-child { fill: #7888ff; stroke: #1c2a4b; stroke-width: 4; }
.chart-marker circle:last-child { fill: none; stroke: #7c8cff; stroke-width: 1; opacity: .3; }
.chart-x-axis { position: absolute; right: 13px; bottom: 0; left: 47px; display: flex; justify-content: space-between; color: #5c6b88; font-size: 9px; }
.protection-panel { min-width: 0; }
.protection-ring-wrap { display: grid; place-items: center; margin: 27px 0 22px; }
.protection-ring { position: relative; width: 146px; height: 146px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0deg 318deg, var(--orange) 318deg 347deg, rgba(93, 113, 147, .22) 347deg 360deg); }
.protection-ring::after { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: #111d31; box-shadow: inset 0 0 20px rgba(0, 0, 0, .12); }
.ring-center { position: relative; z-index: 1; display: grid; place-items: center; }
.ring-center .icon { width: 24px; height: 24px; margin-bottom: 7px; color: #6ee1a6; }
.ring-center strong { font-size: 14px; }
.ring-center span { margin-top: 4px; color: #6f809d; font-size: 10px; }
.protection-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 17px; border-top: 1px solid var(--border-soft); }
.protection-stats > div { display: grid; grid-template-columns: 7px 1fr; column-gap: 5px; align-items: center; }
.protection-stats span:not(.stat-dot) { color: #72819e; font-size: 9px; white-space: nowrap; }
.protection-stats strong { grid-column: 2; margin-top: 4px; color: #e8efff; font-size: 13px; font-variant-numeric: tabular-nums; }
.stat-dot { width: 6px; height: 6px; grid-row: span 2; border-radius: 50%; }
.stat-dot-green { background: var(--green); }
.stat-dot-orange { background: var(--orange); }
.stat-dot-red { background: var(--red); }
.text-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: #98a6ff; background: transparent; font-size: 10px; font-weight: 650; }
.text-link:hover { color: #c0c8ff; }
.text-link .icon { width: 13px; height: 13px; }
.protection-panel > .text-link { margin-top: 20px; }

.domains-panel { padding: 20px 0 0; overflow: hidden; margin-bottom: 17px; }
.domains-panel .panel-header { padding: 0 20px; }
.table-actions { gap: 7px; }
.search-box { display: flex; align-items: center; gap: 6px; width: 148px; height: 30px; padding: 0 9px; background: rgba(8, 15, 28, .34); border: 1px solid rgba(76, 103, 146, .2); border-radius: 7px; }
.search-box .icon { width: 14px; height: 14px; color: #6d7e9c; }
.search-box input { min-width: 0; width: 100%; padding: 0; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 10px; }
.search-box input::placeholder { color: #61708d; }
.filter-strip { display: flex; align-items: center; gap: 6px; padding: 17px 20px 12px; }
.filter-chip { display: inline-flex; gap: 5px; align-items: center; padding: 5px 8px; color: #7f8eac; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 10px; }
.filter-chip span { color: #5f6f8b; font-variant-numeric: tabular-nums; }
.filter-chip:hover { color: #bdc9e5; }
.filter-chip.is-active { color: #d1d8ff; background: rgba(103, 120, 255, .13); border-color: rgba(111, 128, 255, .2); }
.filter-chip.is-active span { color: #9eacff; }
.table-scroll { overflow-x: auto; }
.filter-strip.is-collapsed { display: none; }
.empty-cell { padding: 34px 20px !important; color: #7483a0 !important; text-align: center !important; }
.spinning { animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.domains-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.domains-table th, .domains-table td { padding: 12px 20px; text-align: left; border-bottom: 1px solid rgba(74, 98, 136, .13); }
.domains-table th { color: #637391; background: rgba(8, 15, 28, .2); font-size: 9px; font-weight: 600; letter-spacing: .05em; }
.domains-table th:nth-child(1) { width: 28%; }
.domains-table th:nth-child(2) { width: 16%; }
.domains-table th:nth-child(3) { width: 19%; }
.domains-table th:nth-child(4) { width: 14%; }
.domains-table th:nth-child(5) { width: 16%; }
.domains-table th:nth-child(6) { width: 7%; }
.domains-table td { color: #b9c5dd; font-size: 10px; }
.domains-table tbody tr { transition: background .18s; }
.domains-table tbody tr:hover { background: rgba(70, 94, 139, .11); }
.domain-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.domain-favicon { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #a9b7ff; background: rgba(99, 117, 255, .13); font-size: 9px; font-weight: 750; }
.domain-cell b { display: block; overflow: hidden; color: #dce5f7; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.domain-cell span { display: block; margin-top: 3px; color: #667694; font-size: 9px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 6px; font-size: 9px; white-space: nowrap; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.status-healthy { color: #69dca0; background: rgba(66, 202, 133, .09); }
.status-healthy::before { background: var(--green); }
.status-watching { color: #f2c179; background: rgba(241, 179, 88, .1); }
.status-watching::before { background: var(--orange); }
.status-paused { color: #ef8c96; background: rgba(238, 114, 132, .09); }
.status-paused::before { background: var(--red); }
.status-unknown { color: #99a6be; background: rgba(137, 153, 181, .1); }
.status-unknown::before { background: #93a1ba; }
.route-cell { display: flex; align-items: center; gap: 6px; color: #8e9dbb; }
.route-cell .icon { width: 13px; height: 13px; color: #637391; }
.latency { color: #c5d1e8; font-variant-numeric: tabular-nums; }
.latency em { margin-left: 3px; color: #647493; font-size: 9px; font-style: normal; }
.latency-slow { color: #efbd78; }
.checked-time { color: #7584a0; font-variant-numeric: tabular-nums; }
.table-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px 16px; color: #647391; font-size: 9px; }
.pagination { display: flex; align-items: center; gap: 4px; }
.pagination-btn, .pagination-next { min-width: 25px; height: 25px; display: inline-grid; place-items: center; padding: 0 6px; color: #71809e; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 9px; }
.pagination-btn:hover, .pagination-next:hover { background: rgba(67, 89, 130, .23); }
.pagination-btn.is-active { color: #bdc7ff; background: rgba(103, 120, 255, .16); border-color: rgba(111, 128, 255, .18); }
.pagination-next .icon { width: 13px; height: 13px; }

.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 17px; }
.strategy-panel, .activity-panel { min-height: 235px; }
.strategy-list { margin-top: 20px; }
.empty-panel-note { padding: 24px 0 8px; color: #667693; font-size: 10px; line-height: 1.6; }
.strategy-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(74, 98, 136, .13); }
.strategy-order { width: 18px; color: #546480; font-size: 9px; font-variant-numeric: tabular-nums; }
.strategy-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; }
.strategy-icon .icon { width: 15px; height: 15px; }
.strategy-icon-blue { color: #9baaFF; background: rgba(104, 123, 255, .13); }
.strategy-icon-violet { color: #c0a3ff; background: rgba(170, 132, 255, .13); }
.strategy-icon-orange { color: #f3c081; background: rgba(242, 176, 90, .13); }
.strategy-copy { flex: 1; min-width: 0; }
.strategy-copy b, .strategy-copy span { display: block; }
.strategy-copy b { color: #cbd5eb; font-size: 10px; font-weight: 600; }
.strategy-copy span { margin-top: 4px; color: #697895; font-size: 9px; }
.strategy-switch { position: relative; width: 28px; height: 16px; display: inline-flex; align-items: center; padding: 2px; border-radius: 10px; background: #273650; }
.strategy-switch i { width: 12px; height: 12px; border-radius: 50%; background: #70809f; transition: transform .2s; }
.strategy-switch.is-on { background: rgba(87, 212, 142, .28); }
.strategy-switch.is-on i { background: var(--green); transform: translateX(12px); }
.activity-list { margin-top: 15px; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(74, 98, 136, .13); }
.activity-icon { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; }
.activity-icon .icon { width: 13px; height: 13px; }
.activity-icon-green { color: #6edda4; background: rgba(82, 211, 143, .12); }
.activity-icon-blue { color: #9aaaff; background: rgba(103, 122, 255, .12); }
.activity-icon-orange { color: #f1bf7e; background: rgba(243, 181, 94, .12); }
.activity-item > div:nth-child(2) { flex: 1; min-width: 0; }
.activity-item b { display: block; color: #cad5eb; font-size: 10px; font-weight: 600; }
.activity-item p { margin: 4px 0 0; color: #697894; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-item time { color: #60708d; font-size: 9px; white-space: nowrap; }

.alternate-view { min-height: 420px; display: grid; place-items: center; align-content: center; text-align: center; }
.alternate-view[hidden] { display: none !important; }
.alternate-view.is-content { display: block; min-height: 520px; padding: 24px; text-align: left; }
.alternate-content-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--border-soft); }
.alternate-content-head h2 { margin: 0; color: #e5ebfb; font-size: 20px; }
.alternate-content-head p:not(.eyebrow) { margin: 7px 0 0; color: var(--text-soft); font-size: 11px; }
.alternate-content-actions { display: flex; gap: 8px; }
.alternate-content-body { padding-top: 20px; }
.alternate-domain-list, .alternate-run-list, .log-list { overflow: hidden; border: 1px solid var(--border-soft); border-radius: 12px; }
.alternate-domain-row, .alternate-run-row, .log-row { display: grid; align-items: center; gap: 15px; min-height: 62px; padding: 10px 15px; border-bottom: 1px solid rgba(74, 98, 136, .13); }
.alternate-domain-row:last-child, .alternate-run-row:last-child, .log-row:last-child { border-bottom: 0; }
.alternate-domain-row { grid-template-columns: minmax(210px, 1fr) 100px 80px 30px; }
.alternate-run-row { grid-template-columns: 78px minmax(160px, .7fr) 1fr; }
.alternate-run-row > span:last-child { color: #7585a2; font-size: 10px; }
.alternate-latency { color: #bdc9e1; font-size: 10px; font-variant-numeric: tabular-nums; }
.alternate-empty { min-height: 270px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 30px; color: #71809d; text-align: center; border: 1px dashed rgba(88, 111, 151, .28); border-radius: 12px; }
.alternate-empty .icon { width: 27px; height: 27px; margin-bottom: 3px; color: #91a1ff; }
.alternate-empty strong { color: #cbd5eb; font-size: 13px; }
.alternate-empty span { max-width: 330px; color: #71809d; font-size: 10px; line-height: 1.6; }
.alternate-empty .btn { margin-top: 5px; }
.alternate-empty.compact { min-height: 180px; border: 0; }
.health-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.health-summary-card { min-height: 115px; padding: 17px; background: rgba(14, 25, 44, .72); border: 1px solid var(--border-soft); border-radius: 12px; }
.health-summary-card span, .health-summary-card small { display: block; color: #7282a0; font-size: 10px; }
.health-summary-card strong { display: block; margin: 14px 0 5px; color: #e4ebfb; font-size: 18px; text-transform: capitalize; }
.health-summary-card small { color: #8e9db9; }
.policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.policy-card { min-height: 170px; padding: 16px; background: rgba(14, 25, 44, .72); border: 1px solid var(--border-soft); border-radius: 12px; }
.policy-card-head { display: flex; align-items: center; justify-content: space-between; }
.policy-card-actions { display: flex; align-items: center; gap: 7px; }
.policy-delete { width: 25px; height: 25px; display: inline-grid; place-items: center; color: #8a6e7e; background: transparent; border-radius: 7px; }
.policy-delete:hover { color: #f08f9d; background: rgba(241, 121, 136, .12); }
.policy-delete:disabled { cursor: wait; opacity: .5; }
.policy-delete .icon { width: 14px; height: 14px; }
.policy-card h3 { margin: 18px 0 7px; color: #dce5f7; font-size: 13px; }
.policy-card p, .policy-card small { display: block; margin: 0; color: #7b8aa6; font-size: 10px; line-height: 1.6; }
.policy-card small { margin-top: 8px; color: #627391; }
.log-row { grid-template-columns: 180px 190px 1fr; }
.log-row time, .log-row span { color: #7483a1; font-size: 10px; }
.log-row b { color: #cfd9ee; font-size: 10px; font-weight: 600; }
.settings-form { max-width: 760px; padding: 20px; background: rgba(14, 25, 44, .72); border: 1px solid var(--border-soft); border-radius: 12px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.modal-settings-grid { gap: 10px; margin-top: 2px; }
.settings-form .field-label { color: #8492ad; }
.settings-form .text-input { display: block; margin-top: 8px; margin-bottom: 0; }
.settings-section { margin-top: 24px; padding-top: 21px; border-top: 1px solid rgba(74, 98, 136, .16); }
.settings-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.settings-section-head h3 { margin: 0; color: #dce5f7; font-size: 13px; }
.settings-section-head .eyebrow { margin: 0 0 5px; }
.settings-section-head > span { color: #6d7d9b; font-size: 9px; }
.settings-field-wide { grid-column: 1 / -1; }
.settings-textarea { min-height: 72px; height: auto; padding: 10px 11px; resize: vertical; line-height: 1.55; }
.settings-inline-link { color: #aab6ff; }
.settings-inline-link:hover { color: #d2d8ff; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--border-soft); }
.settings-actions span { color: #647492; font-size: 10px; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.help-grid article { min-height: 150px; padding: 18px; background: rgba(14, 25, 44, .72); border: 1px solid var(--border-soft); border-radius: 12px; }
.help-grid article > .icon { width: 22px; height: 22px; color: #99a8ff; }
.help-grid h3 { margin: 18px 0 8px; color: #dce5f7; font-size: 12px; }
.help-grid p { margin: 0; color: #7585a3; font-size: 10px; line-height: 1.7; }
.alternate-icon { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 18px; color: #a3afff; background: rgba(105, 123, 255, .12); border-radius: 18px; }
.alternate-icon .icon { width: 28px; height: 28px; }
.alternate-view h2 { margin: 0; font-size: 20px; }
.alternate-view p { max-width: 360px; margin: 8px 0 20px; color: var(--text-soft); font-size: 11px; line-height: 1.7; }

.toast { position: fixed; z-index: 20; right: 27px; bottom: 28px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; color: #e7f6ed; background: #173428; border: 1px solid rgba(100, 221, 158, .28); border-radius: 9px; box-shadow: var(--shadow); font-size: 11px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast-icon { width: 20px; height: 20px; display: grid; place-items: center; color: #78e2a9; background: rgba(87, 212, 142, .14); border-radius: 6px; }
.toast-icon .icon { width: 13px; height: 13px; }
.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4, 8, 16, .72); backdrop-filter: blur(6px); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(100%, 430px); padding: 23px; background: #131f35; border: 1px solid rgba(108, 132, 181, .3); border-radius: 16px; box-shadow: 0 28px 80px rgba(0, 0, 0, .38); animation: modal-in .22s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 21px; }
.modal-head h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.field-label { display: block; margin: 0 0 7px; color: #91a0bd; font-size: 10px; }
.text-input { width: 100%; height: 38px; margin-bottom: 16px; padding: 0 11px; color: #e6edfc; background: rgba(7, 14, 27, .36); border: 1px solid rgba(91, 117, 161, .32); border-radius: 8px; outline: 0; font-size: 11px; }
.text-input:focus { border-color: #7383f7; box-shadow: 0 0 0 3px rgba(115, 131, 247, .12); }
select.text-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8090b1 50%), linear-gradient(135deg, #8090b1 50%, transparent 50%); background-position: calc(100% - 15px) 16px, calc(100% - 11px) 16px; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.modal-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; margin: 2px 0 20px; color: #7e90b0; background: rgba(95, 113, 215, .08); border: 1px solid rgba(106, 123, 226, .13); border-radius: 8px; font-size: 10px; line-height: 1.55; }
.field-hint { margin: -10px 0 16px; color: #647492; font-size: 9px; line-height: 1.45; }
.modal-note .icon { width: 15px; height: 15px; flex: 0 0 auto; color: #94a4ff; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 1160px) {
  :root { --sidebar-width: 220px; }
  .topbar, .page-wrap { padding-left: 28px; padding-right: 28px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .8fr); }
  .last-sync { display: none; }
}

@media (max-width: 820px) {
  .sidebar { width: 70px; flex-basis: 70px; padding: 22px 10px 14px; }
  .brand-lockup { justify-content: center; margin: 0 0 26px; }
  .brand-lockup > div:last-child, .workspace-switcher .workspace-copy, .workspace-switcher .icon-muted, .nav-label, .nav-item span, .plan-card, .user-meta, .user-logout span { display: none; }
  .workspace-switcher { justify-content: center; padding: 8px; }
  .primary-nav, .secondary-nav { justify-items: center; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item.is-active { box-shadow: inset 0 -3px 0 #7c8aff; }
  .nav-item .icon { width: 18px; height: 18px; }
  .nav-badge, .nav-count, .status-dot { position: absolute; top: 5px; right: 12px; margin: 0; }
  .user-card { justify-content: center; padding-top: 12px; }
  .user-logout { padding: 0; }
  .topbar, .page-wrap { padding-left: 22px; padding-right: 22px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1; }
  .dashboard-grid, .bottom-grid { grid-template-columns: 1fr; }
  .alternate-content-head { align-items: flex-start; flex-direction: column; }
  .health-overview, .policy-grid { grid-template-columns: 1fr; }
  .alternate-domain-row { grid-template-columns: minmax(170px, 1fr) 90px 65px 30px; gap: 8px; }
  .log-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .log-row span { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .sidebar { position: fixed; z-index: 10; top: 0; bottom: 0; left: 0; width: 56px; flex-basis: 56px; }
  .main-content { padding-left: 56px; }
  .topbar { height: 61px; padding: 0 16px; }
  .page-wrap { padding: 25px 16px 40px; }
  .breadcrumbs span, .breadcrumbs .icon { display: none; }
  .topbar-divider, .topbar-actions > .icon-btn, .public-download-link { display: none; }
  .page-heading { margin-bottom: 23px; }
  h1 { font-size: 24px; }
  .page-subtitle { font-size: 11px; line-height: 1.6; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .kpi-card { min-height: 112px; padding: 13px; }
  .kpi-value-row { margin-top: 12px; }
  .kpi-value-row strong { font-size: 21px; }
  .kpi-value-row .trend { display: none; }
  .kpi-note { font-size: 9px; line-height: 1.4; }
  .panel { border-radius: 13px; }
  .panel-chart, .protection-panel, .strategy-panel, .activity-panel { padding: 16px; }
  .alternate-view.is-content { padding: 16px; }
  .alternate-content-actions { width: 100%; }
  .alternate-content-actions .btn { flex: 1; }
  .alternate-domain-row { grid-template-columns: 1fr 75px 28px; }
  .alternate-domain-row .alternate-latency { display: none; }
  .settings-grid, .help-grid { grid-template-columns: 1fr; }
  .modal-settings-grid { grid-template-columns: 1fr; }
  .settings-actions { align-items: flex-start; flex-direction: column; }
  .panel-header { gap: 10px; }
  .panel-header p { line-height: 1.45; }
  .segmented-control button { padding: 5px 6px; }
  .chart-summary { margin-left: 34px; }
  .chart-wrap { padding-left: 34px; }
  .chart-x-axis { left: 34px; }
  .domains-panel .panel-header { display: block; }
  .table-actions { margin-top: 14px; flex-wrap: wrap; }
  .search-box { flex: 1 1 100%; width: auto; }
  .filter-strip { padding: 13px 15px 9px; overflow-x: auto; }
  .domains-table th, .domains-table td { padding-left: 15px; padding-right: 15px; }
  .table-footer { padding-left: 15px; padding-right: 15px; }
  .table-footer > span { display: none; }
  .pagination { margin-left: auto; }
  .protection-stats span:not(.stat-dot) { font-size: 8px; }
  .protection-stats strong { font-size: 12px; }
}