:root {
  --ink: #17223a;
  --muted: #78839a;
  --line: #e8ecf3;
  --paper: #ffffff;
  --canvas: #f5f7fb;
  --navy: #111a30;
  --navy-2: #1a2540;
  --indigo: #5b5ce2;
  --indigo-deep: #4647c8;
  --violet: #8267e9;
  --teal: #22b5a5;
  --green: #22a879;
  --yellow: #eead3c;
  --orange: #ed8d45;
  --red: #e65f68;
  --pink: #e96e9a;
  --shadow: 0 12px 28px rgba(29, 41, 68, 0.06);
  --shadow-lg: 0 24px 60px rgba(14, 25, 52, 0.16);
  --radius: 16px;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(91, 92, 226, .28);
  outline-offset: 2px;
}

svg { display: block; }

.icon { width: 18px; height: 18px; flex: 0 0 auto; }
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.hide { display: none !important; }

/* App chrome */
.app-shell {
  min-height: 100vh;
  display: flex;
  background: var(--canvas);
}

.sidebar {
  width: 260px;
  min-height: 100vh;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  padding: 25px 14px 16px;
  color: #d5dbef;
  background: var(--navy);
  border-right: 1px solid rgba(255,255,255,.04);
}

.sidebar::after {
  position: absolute;
  content: "";
  width: 300px;
  height: 270px;
  left: -90px;
  bottom: -140px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(102, 91, 239, .23), transparent 66%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 28px;
  color: #fff;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #8f73ee, #5654df 68%);
  border-radius: 10px;
  box-shadow: 0 7px 17px rgba(93, 87, 230, .35);
}

.brand-mark svg { width: 19px; height: 19px; }
.brand-name { display: grid; line-height: 1; letter-spacing: -.05em; }
.brand-name strong { font-size: 21px; font-weight: 800; }
.brand-name span { margin-top: 5px; color: #929bb8; font-size: 8px; font-weight: 700; letter-spacing: .22em; }

.org-switcher {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 14px);
  margin: 0 7px 24px;
  padding: 10px;
  overflow: hidden;
  color: #dce2f5;
  text-align: left;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 11px;
}
.org-switcher:hover { background: rgba(255,255,255,.09); }
.org-avatar {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  background: #fb9b6a;
  border-radius: 8px;
}
.org-copy { min-width: 0; flex: 1; }
.org-copy strong, .org-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-copy strong { font-size: 11px; font-weight: 700; }
.org-copy span { margin-top: 2px; color: #8490b2; font-size: 9px; }
.org-switcher .icon { width: 15px; color: #96a0c0; }

.nav-label {
  padding: 0 13px 8px;
  color: #667391;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sidebar-nav { display: grid; gap: 3px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  color: #99a5c5;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-radius: 9px;
  transition: .18s ease;
}
.nav-item .icon { width: 18px; }
.nav-item:hover { color: #eef1ff; background: rgba(255,255,255,.055); }
.nav-item.active { color: #fff; background: rgba(122, 105, 232, .23); }
.nav-item.active .nav-count { color: #c9c1ff; background: rgba(255,255,255,.11); }
.nav-count {
  min-width: 19px;
  margin-left: auto;
  padding: 2px 5px;
  color: #7e8aa9;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  background: rgba(255,255,255,.05);
  border-radius: 20px;
}
.nav-spacer { flex: 1; min-height: 20px; }
.sidebar-bottom { position: relative; z-index: 1; display: grid; gap: 8px; }
.help-card {
  padding: 13px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 12px;
}
.help-card > div { display: flex; align-items: center; gap: 9px; }
.help-icon { display: grid; width: 26px; height: 26px; place-items: center; color: #bfb5ff; background: rgba(128, 110, 232, .2); border-radius: 8px; }
.help-card strong { display: block; color: #dfe5f8; font-size: 10px; }
.help-card span { display: block; margin-top: 2px; color: #7e89a7; font-size: 9px; }
.help-card button { padding: 0; color: #b6acff; font-size: 10px; font-weight: 700; background: none; border: 0; }

.workspace {
  width: calc(100% - 260px);
  min-height: 100vh;
  margin-left: 260px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 0 36px;
  background: rgba(245,247,251,.88);
  border-bottom: 1px solid rgba(225,230,240,.8);
  backdrop-filter: blur(14px);
}
.mobile-brand, .mobile-menu { display: none; }
.crumb { display: flex; align-items: center; gap: 8px; color: #a0a9bc; font-size: 11px; font-weight: 600; }
.crumb .current { color: var(--ink); }
.crumb .icon { width: 13px; }
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-icon, .avatar-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #606c85;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.topbar-icon:hover, .avatar-button:hover { color: var(--indigo); border-color: #d5d6fb; }
.topbar-icon { position: relative; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; background: var(--red); border: 1.5px solid #fff; border-radius: 50%; }
.topbar-divider { width: 1px; height: 24px; margin: 0 3px; background: var(--line); }
.user-block { display: flex; align-items: center; gap: 8px; padding-left: 2px; }
.user-avatar { display: grid; width: 31px; height: 31px; place-items: center; color: #fff; font-size: 10px; font-weight: 800; background: linear-gradient(135deg, #ffae77, #df6a9a); border-radius: 10px; }
.user-copy { line-height: 1.15; }
.user-copy strong { display: block; color: #34405b; font-size: 10px; }
.user-copy span { display: block; margin-top: 3px; color: #98a2b5; font-size: 9px; }

.page-content { max-width: 1540px; margin: 0 auto; padding: 28px 36px 38px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 5px; color: var(--indigo); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.page-heading h1 { margin: 0; color: #1b263e; font-size: 25px; font-weight: 800; letter-spacing: -.045em; }
.page-heading p { margin: 5px 0 0; color: #8a95aa; font-size: 11px; }
.heading-actions { display: flex; align-items: center; gap: 9px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  color: #536078;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: .18s ease;
}
.button:hover { color: var(--indigo); border-color: #cdcff9; box-shadow: 0 5px 13px rgba(61, 68, 157, .08); }
.button.primary { color: #fff; background: var(--indigo); border-color: var(--indigo); box-shadow: 0 6px 14px rgba(89, 90, 222, .22); }
.button.primary:hover { color: #fff; background: var(--indigo-deep); border-color: var(--indigo-deep); }
.button.ghost { background: transparent; }
.button.danger { color: var(--red); }
.button .icon { width: 15px; }

/* Dashboard */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.metric-card {
  min-height: 120px;
  padding: 17px 18px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 11px rgba(28,42,71,.018);
}
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-label { color: #7d89a0; font-size: 10px; font-weight: 700; }
.metric-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; }
.metric-icon.indigo { color: #6261d9; background: #f0f0ff; }
.metric-icon.green { color: #26a979; background: #e8f8f1; }
.metric-icon.orange { color: #e79045; background: #fff4e8; }
.metric-icon.pink { color: #dd7296; background: #fff0f5; }
.metric-value { margin: 12px 0 8px; color: #1e2b45; font-size: 24px; font-weight: 800; letter-spacing: -.055em; }
.metric-foot { display: flex; align-items: center; gap: 5px; color: #9ca5b7; font-size: 9px; }
.trend { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; }
.trend.up { color: var(--green); }.trend.down { color: var(--red); }.trend.neutral { color: #9ca5b7; }
.trend .icon { width: 11px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(288px, .82fr); gap: 17px; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 11px rgba(28,42,71,.018);
}
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 19px 0; }
.card-title { margin: 0; color: #27334d; font-size: 12px; font-weight: 800; letter-spacing: -.015em; }
.card-subtitle { margin: 4px 0 0; color: #9aa4b6; font-size: 9px; }
.link-button { padding: 0; color: var(--indigo); font-size: 10px; font-weight: 800; background: none; border: 0; }
.tabs { display: flex; align-items: center; gap: 5px; padding: 3px; background: #f7f8fc; border: 1px solid #eef0f5; border-radius: 8px; }
.tab-button { padding: 5px 8px; color: #9aa4b7; font-size: 9px; font-weight: 700; background: transparent; border: 0; border-radius: 5px; }
.tab-button.active { color: #5960d7; background: #fff; box-shadow: 0 1px 4px rgba(31,47,88,.08); }
.chart-wrap { position: relative; min-height: 233px; padding: 13px 18px 15px 8px; }
.chart-legend { display: flex; gap: 14px; padding: 6px 20px 0; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; color: #8e98aa; font-size: 9px; font-weight: 600; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }.legend-dot.indigo { background: var(--indigo); }.legend-dot.teal { background: var(--teal); }
.chart-svg { width: 100%; height: 185px; overflow: visible; }
.chart-gridline { stroke: #edf0f5; stroke-width: 1; }.chart-axis { fill: #aab3c2; font-family: var(--font); font-size: 8px; font-weight: 600; }
.chart-area { fill: url(#areaGradient); }.chart-line { fill: none; stroke: #5c5cdd; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }.chart-line.secondary { stroke: #29b3a8; stroke-width: 1.7; stroke-dasharray: 4 4; }.chart-dot { fill: #fff; stroke: #5c5cdd; stroke-width: 2; }
.chart-tooltip { position: absolute; top: 35px; left: 62%; padding: 7px 9px; color: #fff; font-size: 9px; line-height: 1.55; background: #27334c; border-radius: 7px; box-shadow: 0 6px 18px rgba(18, 27, 48, .22); }.chart-tooltip strong { color: #fff; font-size: 10px; }

.live-list { padding: 10px 12px 12px; }
.live-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 11px 7px; border-bottom: 1px solid #f0f2f7; }
.live-row:last-child { border-bottom: 0; }
.live-avatar { display: grid; width: 27px; height: 27px; place-items: center; color: #5d62d9; font-size: 9px; font-weight: 800; background: #eeeeff; border-radius: 8px; }.live-avatar.green { color: #259d75; background: #e6f7f0; }.live-avatar.orange { color: #d8833a; background: #fff2e4; }.live-avatar.pink { color: #ce6e91; background: #ffedf3; }
.live-main { min-width: 0; }.live-main strong { display: block; overflow: hidden; color: #3b4760; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.live-main span { display: block; overflow: hidden; margin-top: 3px; color: #a0a9b9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.live-result { color: #647088; font-family: var(--mono); font-size: 9px; text-align: right; }.live-result strong { display: block; color: #36a87c; font-size: 10px; font-weight: 500; }.live-result.warn strong { color: #e28c48; }.live-result.bad strong { color: #df626a; }

.alert-list { padding: 9px 12px 12px; }
.alert-row { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 9px; padding: 11px 7px; border-bottom: 1px solid #f0f2f7; }.alert-row:last-child { border-bottom: 0; }
.alert-symbol { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; }.alert-symbol.warning { color: #e59439; background: #fff5e7; }.alert-symbol.danger { color: #dd626b; background: #fff0f2; }.alert-symbol.info { color: #5b5ce2; background: #f0efff; }
.alert-main strong { display: block; color: #3a4660; font-size: 10px; font-weight: 800; }.alert-main p { margin: 3px 0; color: #8893a5; font-size: 9px; line-height: 1.45; }.alert-time { color: #adb5c3; font-size: 8px; font-weight: 700; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(280px, .86fr); gap: 17px; margin-top: 17px; }
.destination-list { padding: 8px 18px 16px; }.destination-row { display: grid; grid-template-columns: 25px minmax(0,1fr) 72px 40px; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #f1f3f7; }.destination-row:last-child { border-bottom: 0; }.destination-icon { display: grid; width: 24px; height: 24px; place-items: center; color: #5b5ce2; background: #f0efff; border-radius: 7px; }.destination-name { min-width: 0; }.destination-name strong { display: block; overflow: hidden; color: #445069; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.destination-name span { color: #9fa8b7; font-size: 8px; }.mini-bar { height: 4px; overflow: hidden; background: #eff1f5; border-radius: 20px; }.mini-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7973e8, #a39af2); border-radius: 20px; }.destination-value { color: #59667d; font-family: var(--mono); font-size: 9px; text-align: right; }
.health-card { padding-bottom: 16px; }.health-main { display: flex; align-items: center; gap: 16px; padding: 13px 20px; }.health-ring { position: relative; display: grid; width: 105px; height: 105px; place-items: center; flex: 0 0 auto; }.health-ring svg { position: absolute; inset: 0; width: 105px; height: 105px; transform: rotate(-90deg); }.health-ring circle { fill: none; stroke-width: 8; }.health-ring .base { stroke: #eef1f5; }.health-ring .value { stroke: url(#ringGradient); stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 29; }.health-ring strong { position: relative; color: #27334c; font-size: 23px; letter-spacing: -.07em; }.health-copy strong { display: block; color: #3b4760; font-size: 11px; }.health-copy p { margin: 5px 0 0; color: #929cad; font-size: 9px; line-height: 1.55; }.health-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 18px; overflow: hidden; background: #edf0f5; border: 1px solid #edf0f5; border-radius: 10px; }.health-meta div { padding: 9px 5px; text-align: center; background: #fff; }.health-meta strong { display: block; color: #3a4760; font-size: 11px; }.health-meta span { display: block; margin-top: 3px; color: #a0a9b8; font-size: 8px; }

/* Data pages */
.page-panel { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid #edf0f5; }.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; }
.search-field { position: relative; min-width: 245px; }.search-field .icon { position: absolute; top: 50%; left: 10px; width: 15px; color: #9ba5b6; transform: translateY(-50%); }.search-field input, .form-field input, .form-field select, .form-field textarea { width: 100%; color: #39455c; font-size: 11px; background: #fff; border: 1px solid #e7ebf2; border-radius: 8px; }.search-field input { height: 33px; padding: 0 10px 0 32px; }.form-field input, .form-field select { height: 37px; padding: 0 10px; }.form-field textarea { min-height: 76px; padding: 10px; resize: vertical; }.search-field input::placeholder { color: #aab2c0; }.search-field input:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #aaaaf0; outline: 3px solid rgba(91,92,226,.09); }
.filter-button { min-height: 33px; padding: 0 10px; color: #718097; font-size: 10px; font-weight: 700; background: #fff; border: 1px solid #e7ebf2; border-radius: 8px; }
.filter-button .icon { display: inline-block; width: 14px; margin-right: 4px; vertical-align: -3px; }
.table-wrap { overflow: auto; }.data-table { width: 100%; min-width: 750px; border-collapse: collapse; text-align: left; }.data-table th { padding: 11px 17px; color: #9aa4b4; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #fbfcfe; border-bottom: 1px solid #edf0f5; }.data-table td { padding: 13px 17px; color: #647087; font-size: 10px; border-bottom: 1px solid #f0f2f6; }.data-table tr:last-child td { border-bottom: 0; }.data-table tbody tr { transition: background .14s; }.data-table tbody tr:hover { background: #fbfbff; }.person-cell { display: flex; align-items: center; gap: 9px; }.table-avatar { display: grid; width: 27px; height: 27px; place-items: center; color: #5b5bce; font-size: 9px; font-weight: 800; background: #eeeeff; border-radius: 8px; }.person-cell strong { display: block; color: #3b4760; font-size: 10px; font-weight: 800; }.person-cell span { display: block; margin-top: 2px; color: #9ca6b6; font-size: 8px; }.status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; font-size: 8px; font-weight: 800; border-radius: 20px; }.status::before { width: 5px; height: 5px; content: ""; border-radius: 50%; }.status.success { color: #278e68; background: #e9f8f1; }.status.success::before { background: #38b987; }.status.warning { color: #bd752e; background: #fff5e7; }.status.warning::before { background: #eea342; }.status.danger { color: #c14e5d; background: #fff0f2; }.status.danger::before { background: #e3636e; }.status.info { color: #5759c7; background: #efefff; }.status.info::before { background: #6769dc; }.latency-good { color: #2ba77a; font-family: var(--mono); font-size: 10px; }.latency-warn { color: #d5853e; font-family: var(--mono); font-size: 10px; }.latency-bad { color: #dc626a; font-family: var(--mono); font-size: 10px; }.row-action { display: grid; width: 26px; height: 26px; place-items: center; color: #9ba5b5; background: transparent; border: 0; border-radius: 7px; }.row-action:hover { color: var(--indigo); background: #eff0ff; }
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; color: #98a2b2; font-size: 9px; border-top: 1px solid #edf0f5; }.page-numbers { display: flex; align-items: center; gap: 4px; }.page-number { display: grid; width: 25px; height: 25px; place-items: center; color: #8994a7; font-size: 9px; font-weight: 700; background: none; border: 0; border-radius: 7px; }.page-number.active { color: #fff; background: var(--indigo); }.page-number:hover:not(.active) { color: var(--indigo); background: #f0efff; }
.client-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }.summary-card { display: flex; align-items: center; gap: 11px; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }.summary-card .metric-icon { flex: 0 0 auto; }.summary-card strong { display: block; color: #33405a; font-size: 16px; font-weight: 800; letter-spacing: -.05em; }.summary-card span { display: block; margin-top: 3px; color: #99a3b4; font-size: 9px; font-weight: 700; }

.test-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }.test-card { position: relative; padding: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 11px rgba(28,42,71,.018); }.test-card::after { position: absolute; width: 120px; height: 120px; top: -62px; right: -45px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(104,95,235,.09), transparent 70%); }.test-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.test-type { display: inline-flex; align-items: center; gap: 5px; color: #625fcf; font-size: 9px; font-weight: 800; }.test-type .type-icon { display: grid; width: 25px; height: 25px; place-items: center; color: #635fdc; background: #f0efff; border-radius: 8px; }.test-card h3 { margin: 17px 0 5px; color: #35415b; font-size: 13px; font-weight: 800; letter-spacing: -.025em; }.test-destination { color: #929cad; font-family: var(--mono); font-size: 9px; }.test-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 17px; padding-top: 13px; border-top: 1px solid #f0f2f5; }.test-meta-row span { color: #929cad; font-size: 9px; }.test-meta-row .status { margin-left: auto; }.switch { position: relative; display: inline-flex; width: 31px; height: 18px; flex: 0 0 auto; padding: 2px; background: #cbd1dd; border: 0; border-radius: 20px; transition: .18s; }.switch i { display: block; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(24,37,62,.25); transition: .18s; }.switch.on { background: #5d5ce2; }.switch.on i { transform: translateX(13px); }.test-card-actions { display: flex; gap: 4px; margin-top: 14px; }.text-button { padding: 0; color: #6c75d5; font-size: 9px; font-weight: 800; background: none; border: 0; }.text-button + .text-button { padding-left: 9px; border-left: 1px solid #e7eaf1; }.test-empty { display: grid; min-height: 210px; place-items: center; color: #929cad; text-align: center; }

.alert-page-list { display: grid; gap: 10px; }.alert-card { display: grid; grid-template-columns: 35px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }.alert-card .alert-symbol { width: 34px; height: 34px; }.alert-card h3 { margin: 0; color: #39455e; font-size: 11px; font-weight: 800; }.alert-card p { margin: 4px 0 0; color: #919bad; font-size: 9px; }.alert-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #a0a9b9; font-size: 8px; }.alert-card-actions { display: flex; align-items: center; gap: 8px; }.alert-card-actions time { color: #a0a9b9; font-size: 8px; white-space: nowrap; }

/* Portal */
.portal-shell { min-height: 100vh; overflow: hidden; color: #d8e1f4; background: #0e1528; }
.portal-shell::before { position: fixed; z-index: 0; width: 900px; height: 500px; top: -270px; right: -200px; content: ""; pointer-events: none; background: radial-gradient(ellipse, rgba(109, 92, 238, .3), transparent 67%); }.portal-shell::after { position: fixed; z-index: 0; width: 650px; height: 500px; bottom: -330px; left: -180px; content: ""; pointer-events: none; background: radial-gradient(ellipse, rgba(18, 171, 164, .16), transparent 67%); }
.portal-nav, .portal-main, .portal-footer { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; }.portal-nav { display: flex; align-items: center; justify-content: space-between; padding: 23px 28px; }.portal-brand { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.045em; }.portal-brand .brand-mark { width: 29px; height: 29px; border-radius: 9px; }.portal-brand .brand-mark svg { width: 17px; height: 17px; }.portal-nav-right { display: flex; align-items: center; gap: 14px; }.portal-status { display: inline-flex; align-items: center; gap: 7px; color: #aeb9d3; font-size: 10px; font-weight: 700; }.pulse-dot { position: relative; display: block; width: 7px; height: 7px; background: #38ce9e; border-radius: 50%; }.pulse-dot::before { position: absolute; inset: -4px; content: ""; border: 1px solid rgba(56,206,158,.45); border-radius: 50%; animation: pulse 2s infinite; }.portal-link { padding: 0; color: #b2bdd5; font-size: 10px; font-weight: 700; background: none; border: 0; }.portal-link:hover { color: #fff; }
.portal-main { padding: 43px 28px 37px; }.portal-hero { max-width: 670px; margin: 0 auto; text-align: center; }.portal-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; color: #c6c1ff; font-size: 9px; font-weight: 800; background: rgba(118,101,235,.15); border: 1px solid rgba(142,126,255,.19); border-radius: 20px; }.portal-hero h1 { max-width: 650px; margin: 16px auto 0; color: #fff; font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; line-height: 1.12; letter-spacing: -.065em; }.portal-hero h1 span { color: #a9a3fb; }.portal-hero p { max-width: 510px; margin: 14px auto 0; color: #94a2be; font-size: 12px; line-height: 1.7; }.diagnostic-card { max-width: 800px; margin: 31px auto 0; overflow: hidden; background: rgba(27,37,63,.8); border: 1px solid rgba(152,163,206,.13); border-radius: 18px; box-shadow: 0 26px 65px rgba(0,0,0,.27); backdrop-filter: blur(10px); }.diagnostic-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid rgba(159,172,210,.1); }.network-context { display: flex; align-items: center; gap: 9px; }.network-context > div:first-child { display: grid; width: 28px; height: 28px; place-items: center; color: #9f98ff; background: rgba(111,100,239,.18); border-radius: 8px; }.network-context strong { display: block; color: #e9edfa; font-size: 10px; }.network-context span { display: block; margin-top: 2px; color: #7785a2; font-family: var(--mono); font-size: 8px; }.secure-context { display: inline-flex; align-items: center; gap: 5px; color: #76849f; font-size: 8px; font-weight: 700; }.secure-context .icon { width: 12px; color: #51caa0; }.diagnostic-body { padding: 22px; }.start-panel { display: grid; grid-template-columns: 1fr 193px; gap: 20px; align-items: center; }.start-copy h2 { margin: 0; color: #f4f6ff; font-size: 17px; letter-spacing: -.035em; }.start-copy p { max-width: 470px; margin: 8px 0 17px; color: #8c9ab5; font-size: 10px; line-height: 1.65; }.destination-select { display: flex; align-items: center; gap: 9px; max-width: 440px; padding: 8px 10px; color: #c7d0e5; font-size: 10px; background: rgba(8,15,32,.47); border: 1px solid rgba(166,178,216,.15); border-radius: 9px; }.destination-select .destination-dot { display: grid; width: 20px; height: 20px; place-items: center; color: #8679f7; background: rgba(124,109,238,.16); border-radius: 6px; }.destination-select select { min-width: 0; flex: 1; color: #cad4ea; font-size: 10px; background: none; border: 0; outline: 0; }.destination-select option { color: #24304b; }.start-button { display: grid; width: 193px; height: 132px; place-items: center; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(135deg, #6963e7, #524dc8); border: 1px solid rgba(187,180,255,.35); border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 12px 28px rgba(65,55,173,.28); transition: .2s; }.start-button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 17px 35px rgba(65,55,173,.36); }.start-button .button-orbit { display: grid; width: 42px; height: 42px; margin-bottom: 7px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }.start-button .button-orbit::after { width: 9px; height: 9px; margin-left: 2px; content: ""; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }.start-button small { display: block; margin-top: 5px; color: #cfcaff; font-size: 8px; font-weight: 600; letter-spacing: normal; text-transform: none; }.diagnostic-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(159,172,210,.1); }.progress-step { position: relative; display: flex; align-items: center; gap: 7px; color: #66738f; font-size: 8px; font-weight: 700; }.progress-step:not(:last-child)::after { position: absolute; width: calc(100% - 20px); height: 1px; top: 10px; left: 20px; content: ""; background: rgba(139,151,188,.23); }.progress-step i { position: relative; z-index: 1; display: grid; width: 20px; height: 20px; place-items: center; color: #74819a; font-style: normal; background: #202a44; border: 1px solid rgba(135,148,187,.2); border-radius: 50%; }.progress-step.active { color: #c9c4ff; }.progress-step.active i { color: #fff; background: #655ee0; border-color: #9c93fb; box-shadow: 0 0 0 4px rgba(105,98,230,.13); }.progress-step.complete { color: #6ecdad; }.progress-step.complete i { color: #b9f5df; background: #217c66; border-color: #43b995; }.progress-step.active:not(:last-child)::after, .progress-step.complete:not(:last-child)::after { background: #5d5cda; }
.portal-results { display: grid; grid-template-columns: 1.15fr .85fr; gap: 15px; max-width: 800px; margin: 16px auto 0; }.portal-panel { overflow: hidden; background: rgba(27,37,63,.72); border: 1px solid rgba(152,163,206,.12); border-radius: 15px; }.portal-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(159,172,210,.09); }.portal-panel-header h2 { margin: 0; color: #e8edfc; font-size: 11px; }.result-qualifier { display: inline-flex; align-items: center; gap: 5px; color: #5fe0b0; font-size: 8px; font-weight: 800; }.result-qualifier::before { width: 6px; height: 6px; content: ""; background: #45c99d; border-radius: 50%; }.stat-results { display: grid; grid-template-columns: repeat(3, 1fr); padding: 11px 5px; }.portal-stat { padding: 6px 11px; border-right: 1px solid rgba(159,172,210,.09); }.portal-stat:last-child { border-right: 0; }.portal-stat span { display: block; color: #7986a2; font-size: 8px; font-weight: 700; }.portal-stat strong { display: block; margin-top: 5px; color: #f1f4ff; font-size: 18px; font-weight: 800; letter-spacing: -.05em; }.portal-stat strong i { color: #a1acc7; font-size: 9px; font-style: normal; letter-spacing: 0; }.portal-stat small { display: block; margin-top: 3px; color: #4dd0a4; font-size: 8px; }.portal-stat.smallwarn small { color: #a3afc6; }.route-list { padding: 8px 16px 13px; }.route-node { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 28px; }.route-node:not(:last-child) .route-point::after { position: absolute; width: 1px; height: 15px; left: 8px; top: 17px; content: ""; background: rgba(135,149,189,.25); }.route-point { position: relative; display: grid; width: 17px; height: 17px; place-items: center; color: #b8b5ff; font-size: 7px; background: rgba(105,98,225,.18); border: 1px solid rgba(137,130,248,.4); border-radius: 50%; }.route-node.good .route-point { color: #93efd0; background: rgba(56,191,145,.15); border-color: rgba(71,198,152,.45); }.route-name { color: #b7c2da; font-size: 9px; font-weight: 700; }.route-name span { margin-left: 5px; color: #6e7c97; font-family: var(--mono); font-size: 7px; font-weight: 400; }.route-latency { color: #75d8b6; font-family: var(--mono); font-size: 8px; }.portal-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px 24px; color: #71809e; font-size: 8px; }.portal-footer span { display: inline-flex; align-items: center; gap: 5px; }.portal-footer .icon { width: 11px; color: #39c79a; }

/* Production portal states */
.portal-brand-caption { color: #808ba8; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.portal-inline-error { display: block; margin-top: 8px; color: #ffad9d; font-size: 9px; line-height: 1.4; }
.button-spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.result-qualifier.normal { color: #b9c8e6; }.result-qualifier.normal::before { background: #92a4c8; }
.portal-result-error { color: #ffad9d; font-size: 8px; font-weight: 800; }.portal-waiting, .portal-mono { color: #78849f; font-family: var(--mono); font-size: 8px; }

/* Full client diagnostic: every active provider target is visible at once. */
.all-targets-start .start-copy { min-width: 0; }.portal-target-count { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: #b8c4de; font-size: 9px; font-weight: 800; }.portal-target-count .icon { width: 13px; color: #978ff7; }.portal-summary-results { grid-template-columns: 1fr 1fr; }.speed-test-panel { min-width: 0; }.speed-results { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 7px 6px; }.speed-results > div { min-width: 0; padding: 5px 10px 9px; border-right: 1px solid rgba(159,172,210,.09); }.speed-results > div:last-child { border-right: 0; }.speed-results span { display: flex; align-items: center; gap: 5px; color: #8390ab; font-size: 8px; font-weight: 700; }.speed-results span .icon { width: 12px; color: #a6a0ff; }.speed-results strong { display: block; margin-top: 6px; overflow: hidden; color: #f1f4ff; font-size: 17px; font-weight: 800; letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }.speed-results strong i { color: #a1acc7; font-size: 8px; font-style: normal; letter-spacing: 0; }.speed-test-detail { min-height: 38px; margin: 0; padding: 6px 16px 12px; color: #7e8ba7; font-size: 8px; line-height: 1.5; }.speed-test-error { margin: -5px 16px 12px; color: #ffad9d; font-size: 8px; line-height: 1.4; }.portal-host-section { max-width: 800px; margin: 16px auto 0; padding: 16px; overflow: hidden; background: rgba(27,37,63,.72); border: 1px solid rgba(152,163,206,.12); border-radius: 15px; }.portal-host-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 0 13px; border-bottom: 1px solid rgba(159,172,210,.09); }.portal-host-header h2 { margin: 0; color: #e8edfc; font-size: 11px; }.portal-host-header p { margin: 4px 0 0; color: #7f8ca7; font-size: 8px; line-height: 1.5; }.host-diagnostic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 13px; }.host-diagnostic-card { min-width: 0; padding: 12px; background: rgba(9,16,33,.42); border: 1px solid rgba(159,172,210,.12); border-radius: 11px; transition: border-color .2s, background .2s, transform .2s; }.host-diagnostic-card.complete { background: rgba(37,132,101,.08); border-color: rgba(74,202,155,.25); }.host-diagnostic-card.failed { background: rgba(208,89,91,.07); border-color: rgba(239,128,127,.25); }.host-diagnostic-card.running { border-color: rgba(154,145,252,.38); box-shadow: inset 0 0 0 1px rgba(126,116,239,.08); }.host-diagnostic-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.host-type, .host-state { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: #8996b2; font-size: 7px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }.host-type .icon { width: 11px; color: #aaa4ff; }.host-state { padding: 4px 6px; color: #9aa8c5; background: rgba(151,164,198,.1); border-radius: 20px; letter-spacing: 0; text-transform: none; }.host-diagnostic-card.complete .host-state { color: #83e1bd; background: rgba(55,194,144,.12); }.host-diagnostic-card.failed .host-state { color: #ffb3a9; background: rgba(230,95,104,.12); }.host-diagnostic-card.running .host-state { color: #cbc6ff; background: rgba(120,108,237,.16); }.host-title { display: block; margin-top: 11px; overflow: hidden; color: #eaf0fd; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.host-address { display: block; margin-top: 3px; overflow: hidden; color: #74829e; font-family: var(--mono); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.host-latency { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 14px; }.host-latency > span { color: #8491ac; font-size: 8px; font-weight: 700; }.host-latency strong { color: #f5f7ff; font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: -.055em; }.host-latency strong i { color: #a4afc7; font-size: 8px; font-style: normal; letter-spacing: 0; }.host-diagnostic-card.complete .host-latency strong { color: #7be0bb; }.host-diagnostic-card.failed .host-latency strong { color: #ffb1a9; }.host-diagnostic-card p { min-height: 12px; margin: 8px 0 0; overflow: hidden; color: #7886a1; font-size: 7px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }.host-diagnostic-card.failed p { color: #e89d9a; }.portal-empty-targets { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 118px; grid-column: 1 / -1; color: #8290aa; font-size: 9px; text-align: center; }.portal-empty-targets .icon { width: 15px; color: #9b95ee; }

/* Operational dashboard data states */
.admin-data-notice { margin: 0 0 16px; padding: 11px 14px; color: #687694; font-size: 10px; background: #f5f7fb; border: 1px solid var(--line); border-radius: 9px; }.admin-data-notice.error { color: #b25045; background: #fff7f5; border-color: #f1c7c1; }
.diagnostic-source-note { display: inline-flex; align-items: center; gap: 6px; color: #7f8aa0; font-size: 9px; line-height: 1.4; }.diagnostic-source-note .icon { width: 13px; color: #7570dc; }.diagnostic-outcome { display: grid; justify-items: start; gap: 4px; min-width: 90px; }.diagnostic-outcome > strong { color: #526078; font-size: 9px; }.diagnostic-outcome small { max-width: 150px; overflow: hidden; color: #a06461; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.client-test-speed { display: grid; grid-template-columns: repeat(3, minmax(68px, 1fr)); gap: 5px; min-width: 234px; }.client-test-speed > span { display: grid; gap: 2px; padding: 6px 7px; background: #f7f8fc; border: 1px solid #edf0f5; border-radius: 7px; }.client-test-speed strong { color: #45526a; font-family: var(--mono); font-size: 9px; white-space: nowrap; }.client-test-speed small, .client-test-host-summary span { color: #929caf; font-size: 8px; }.client-test-host-summary { display: grid; gap: 3px; min-width: 112px; }.client-test-host-summary strong { color: #4c5971; font-size: 9px; }.client-test-speed-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.client-test-speed-detail > div { display: grid; gap: 4px; padding: 10px; background: #f8f9fc; border: 1px solid #eef0f5; border-radius: 9px; }.client-test-speed-detail span { color: #97a1b3; font-size: 8px; font-weight: 700; }.client-test-speed-detail strong { color: #3b4760; font-family: var(--mono); font-size: 11px; letter-spacing: -.04em; }.client-test-detail-note { margin: 8px 0 0; color: #8d98aa; font-size: 8px; line-height: 1.45; }.client-test-host-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.client-test-host-heading h3 { margin-bottom: 0; }.client-test-host-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid #f0f2f5; }.client-test-host-row:last-child { border-bottom: 0; }.client-test-host-copy { min-width: 0; }.client-test-host-copy strong, .client-test-host-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.client-test-host-copy strong { color: #4a566d; font-size: 9px; }.client-test-host-copy span, .client-test-host-metrics > span { margin-top: 2px; color: #a1aab9; font-size: 8px; }.client-test-host-metrics { display: grid; justify-items: end; gap: 2px; text-align: right; }.client-test-host-metrics > strong { color: #259d75; font-family: var(--mono); font-size: 9px; }.client-test-host-metrics .status { margin-top: 3px; }
.activity-bars { display: grid; grid-template-columns: repeat(8, minmax(26px, 1fr)); gap: 10px; align-items: end; min-height: 185px; padding: 22px 26px 18px; }.activity-bar { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; height: 145px; align-items: end; text-align: center; }.activity-bar b { color: #66728a; font-family: var(--mono); font-size: 8px; font-weight: 700; }.activity-bar i { display: block; min-height: 4px; width: 100%; background: linear-gradient(180deg, #8d86f3, #5f5add); border-radius: 5px 5px 2px 2px; box-shadow: 0 5px 12px rgba(94,88,218,.18); }.activity-bar span { color: #8994aa; font-size: 8px; }

.row-actions { display: inline-flex; align-items: center; gap: 2px; }.text-button.danger { color: #c14e5d; }.drawer-actions { display: flex; align-items: center; gap: 6px; }.drawer-action { display: grid; width: 27px; height: 27px; place-items: center; color: #69758b; background: #f5f6fa; border: 0; border-radius: 7px; }.drawer-action:hover { color: #5758ce; background: #efefff; }.drawer-action.danger { color: #c85a66; background: #fff1f3; }.drawer-action.danger:hover { color: #af3f4c; background: #ffe5e9; }.form-help { margin: -2px 0 0; color: #8d98aa; font-size: 8px; line-height: 1.45; }

/* Login */
.login-shell { display: grid; min-height: 100vh; grid-template-columns: 1.05fr .95fr; background: #f7f8fc; }.login-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 37px 48px; overflow: hidden; color: #dfe5f9; background: #101931; }.login-side::before { position: absolute; width: 590px; height: 590px; top: -170px; right: -220px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(121,103,244,.45), transparent 68%); }.login-side::after { position: absolute; width: 500px; height: 500px; bottom: -330px; left: -250px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(26,176,160,.2), transparent 64%); }.login-side .brand { position: relative; z-index: 1; padding: 0; }.login-pitch { position: relative; z-index: 1; max-width: 540px; margin: auto 0; padding: 65px 0; }.login-pitch .eyebrow { color: #aaa4fb; }.login-pitch h1 { margin: 0; color: #fff; font-size: clamp(35px, 4vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -.065em; }.login-pitch h1 span { color: #aea9ff; }.login-pitch p { max-width: 410px; margin: 17px 0 24px; color: #a0adca; font-size: 13px; line-height: 1.75; }.login-points { display: grid; gap: 10px; }.login-point { display: flex; align-items: center; gap: 9px; color: #c8d1e8; font-size: 11px; font-weight: 700; }.login-point i { display: grid; width: 20px; height: 20px; place-items: center; color: #6ce0bb; background: rgba(79,205,161,.12); border-radius: 50%; }.login-point .icon { width: 12px; }.login-quote { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: #8794b4; font-size: 9px; }.login-quote .status { color: #89deb9; background: rgba(68,203,154,.1); }.login-form-side { display: grid; padding: 30px; place-items: center; }.login-form-wrap { width: min(370px, 100%); }.login-form-wrap > .brand { display: none; }.login-form-wrap h2 { margin: 0; color: #26324b; font-size: 24px; font-weight: 800; letter-spacing: -.05em; }.login-form-wrap > p { margin: 7px 0 27px; color: #8f99aa; font-size: 11px; }.login-form { display: grid; gap: 14px; }.form-field { display: grid; gap: 7px; }.form-field label { color: #556179; font-size: 10px; font-weight: 800; }.password-label { display: flex; justify-content: space-between; align-items: center; }.password-label button { padding: 0; color: #6263d8; font-size: 9px; font-weight: 800; background: none; border: 0; }.password-box { position: relative; }.password-box input { padding-right: 34px; }.password-box button { position: absolute; top: 9px; right: 10px; padding: 0; color: #8d98ab; background: none; border: 0; }.password-box .icon { width: 16px; }.login-submit { height: 40px; margin-top: 4px; color: #fff; font-size: 11px; font-weight: 800; background: var(--indigo); border: 0; border-radius: 9px; box-shadow: 0 8px 18px rgba(86,84,218,.2); }.login-submit:hover { background: var(--indigo-deep); }.login-divider { display: flex; align-items: center; gap: 10px; margin: 19px 0; color: #adb5c3; font-size: 9px; }.login-divider::before, .login-divider::after { height: 1px; flex: 1; content: ""; background: #e7eaf0; }.security-note { display: flex; align-items: flex-start; gap: 8px; padding: 11px; color: #94a0b4; font-size: 9px; line-height: 1.55; background: #f4f6fa; border-radius: 8px; }.security-note .icon { width: 14px; flex: 0 0 auto; color: #6870d8; }.login-return { margin-top: 20px; color: #a0a9b9; font-size: 9px; text-align: center; }.login-return button { padding: 0; color: #6366d8; font-size: 9px; font-weight: 800; background: none; border: 0; }

/* Modals, drawers, toaster */
.modal-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; padding: 22px; place-items: center; background: rgba(16,24,45,.44); backdrop-filter: blur(4px); }.modal { width: min(530px, 100%); max-height: calc(100vh - 44px); overflow: auto; background: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 16px; box-shadow: var(--shadow-lg); }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 19px 20px 16px; border-bottom: 1px solid #eef0f4; }.modal-header h2 { margin: 0; color: #303c55; font-size: 15px; font-weight: 800; letter-spacing: -.03em; }.modal-header p { margin: 4px 0 0; color: #909aab; font-size: 9px; }.close-button { display: grid; width: 27px; height: 27px; place-items: center; color: #9aa3b3; background: #f5f6fa; border: 0; border-radius: 7px; }.close-button:hover { color: #d15c68; background: #fff0f2; }.modal-body { padding: 18px 20px; }.modal-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }.modal-form .full { grid-column: 1 / -1; }.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 15px 20px; background: #fbfcfe; border-top: 1px solid #eef0f4; }.drawer-backdrop { position: fixed; z-index: 35; inset: 0; display: flex; justify-content: flex-end; background: rgba(16,24,45,.32); }.drawer { width: min(480px, 100%); min-height: 100%; overflow: auto; background: #fff; box-shadow: -16px 0 50px rgba(18,29,51,.16); }.drawer-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px; border-bottom: 1px solid #edf0f4; }.drawer-client { display: flex; align-items: center; gap: 11px; }.drawer-client .table-avatar { width: 37px; height: 37px; font-size: 11px; border-radius: 11px; }.drawer-client h2 { margin: 0; color: #334058; font-size: 15px; letter-spacing: -.035em; }.drawer-client p { margin: 4px 0 0; color: #939dad; font-size: 9px; }.drawer-body { padding: 18px 22px 28px; }.drawer-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.drawer-stat { padding: 10px; background: #f8f9fc; border: 1px solid #eef0f5; border-radius: 9px; }.drawer-stat span { display: block; color: #97a1b3; font-size: 8px; font-weight: 700; }.drawer-stat strong { display: block; margin-top: 4px; color: #3b4760; font-size: 13px; font-weight: 800; letter-spacing: -.04em; }.drawer-section { margin-top: 22px; }.drawer-section h3 { margin: 0 0 10px; color: #536078; font-size: 10px; font-weight: 800; }.tiny-chart { height: 95px; padding: 5px; overflow: hidden; background: #fbfcff; border: 1px solid #eef0f5; border-radius: 10px; }.tiny-chart svg { width: 100%; height: 100%; }.history-item { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #f0f2f5; }.history-item:last-child { border-bottom: 0; }.history-icon { display: grid; width: 24px; height: 24px; place-items: center; color: #5f5fd7; background: #efefff; border-radius: 7px; }.history-item strong { display: block; color: #4a566d; font-size: 9px; }.history-item span { display: block; margin-top: 2px; color: #a1aab9; font-size: 8px; }.history-value { margin-left: auto; color: #259d75; font-family: var(--mono); font-size: 9px; }
.toast-region { position: fixed; z-index: 70; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(340px, calc(100vw - 40px)); }.toast { display: flex; align-items: flex-start; gap: 9px; padding: 12px; color: #536079; font-size: 10px; background: #fff; border: 1px solid #e6eaf1; border-radius: 10px; box-shadow: 0 13px 30px rgba(21,34,61,.17); animation: toastIn .25s ease; }.toast-icon { display: grid; width: 21px; height: 21px; flex: 0 0 auto; place-items: center; color: #fff; background: var(--green); border-radius: 7px; }.toast.error .toast-icon { background: var(--red); }.toast strong { display: block; color: #36425a; font-size: 10px; }.toast p { margin: 2px 0 0; color: #8e99aa; font-size: 9px; line-height: 1.45; }

/* Dark theme */
body.dark { --ink: #e8edf9; --muted: #8d9ab4; --line: #26324b; --paper: #18223a; --canvas: #101828; --shadow: 0 12px 28px rgba(0,0,0,.18); }
body.dark .topbar { background: rgba(16,24,40,.88); border-color: #26324b; } body.dark .page-heading h1, body.dark .metric-value, body.dark .card-title, body.dark .health-ring strong, body.dark .health-meta strong, body.dark .summary-card strong, body.dark .test-card h3, body.dark .data-table .person-cell strong, body.dark .drawer-client h2, body.dark .modal-header h2 { color: #edf2ff; } body.dark .metric-card, body.dark .card, body.dark .page-panel, body.dark .summary-card, body.dark .test-card, body.dark .alert-card, body.dark .modal, body.dark .drawer { background: #18223a; border-color: #26324b; } body.dark .data-table th, body.dark .pagination, body.dark .modal-footer { background: #141d32; border-color: #26324b; } body.dark .data-table td, body.dark .data-table th, body.dark .data-table tr, body.dark .panel-toolbar, body.dark .modal-header, body.dark .drawer-top { border-color: #26324b; } body.dark .data-table tbody tr:hover { background: #1c2944; } body.dark .topbar-icon, body.dark .avatar-button, body.dark .button:not(.primary), body.dark .filter-button, body.dark .search-field input, body.dark .form-field input, body.dark .form-field select, body.dark .form-field textarea { color: #ccd5e7; background: #18223a; border-color: #33405b; } body.dark .tabs { background: #121a2c; border-color: #2b3853; }.dark .tab-button.active { color: #b6b4ff; background: #263450; }.dark .metric-icon.indigo, .dark .table-avatar, .dark .test-type .type-icon, .dark .history-icon { background: #27274f; }.dark .health-meta { background: #26324b; border-color: #26324b; }.dark .health-meta div, .dark .drawer-stat, .dark .tiny-chart { background: #141d31; border-color: #26324b; }.dark .live-row, .dark .alert-row, .dark .destination-row, .dark .history-item { border-color: #26324b; }.dark .modal-footer { background: #141d31; }.dark .close-button { color: #b9c3d7; background: #26324b; }
body.dark .client-test-speed > span, body.dark .client-test-speed-detail > div { background: #141d31; border-color: #26324b; } body.dark .client-test-speed strong, body.dark .client-test-speed-detail strong, body.dark .client-test-host-summary strong, body.dark .client-test-host-copy strong { color: #dce5f8; } body.dark .client-test-host-row { border-color: #26324b; }

@keyframes pulse { 0%, 100% { opacity: .7; transform: scale(.7); } 50% { opacity: 0; transform: scale(1.45); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) { .portal-summary-results { grid-template-columns: 1fr; }.host-diagnostic-grid { grid-template-columns: 1fr; }.portal-host-section { padding: 14px; }.portal-host-header p { max-width: 220px; }.speed-results strong { font-size: 16px; }.client-test-speed-detail { grid-template-columns: 1fr; }.client-test-host-row { grid-template-columns: 24px minmax(0, 1fr); }.client-test-host-metrics { grid-column: 2; justify-items: start; text-align: left; } }

@media (max-width: 1180px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid { grid-template-columns: 1.35fr .85fr; }.test-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 960px) { .sidebar { width: 219px; }.workspace { width: calc(100% - 219px); margin-left: 219px; }.topbar, .page-content { padding-left: 24px; padding-right: 24px; }.dashboard-grid, .lower-grid { grid-template-columns: 1fr; }.client-summary { grid-template-columns: repeat(2, 1fr); }.portal-results { grid-template-columns: 1fr; }.login-side { padding: 35px; }.login-form-side { padding: 25px; } }
@media (max-width: 720px) { .sidebar { width: 250px; transform: translateX(-102%); transition: transform .25s ease; box-shadow: 14px 0 30px rgba(5,10,25,.15); }.app-shell.menu-open .sidebar { transform: translateX(0); }.workspace { width: 100%; margin-left: 0; }.topbar { min-height: 63px; padding: 0 17px; }.mobile-menu { display: grid; width: 33px; height: 33px; margin-right: 10px; place-items: center; color: #5e6a83; background: #fff; border: 1px solid var(--line); border-radius: 9px; }.mobile-brand { display: flex; align-items: center; gap: 7px; color: #24304a; font-size: 14px; font-weight: 800; letter-spacing: -.04em; }.mobile-brand .brand-mark { width: 25px; height: 25px; border-radius: 7px; }.mobile-brand .brand-mark svg { width: 14px; height: 14px; }.crumb, .user-copy, .topbar-divider { display: none; }.topbar-right { gap: 7px; }.topbar-icon { width: 31px; height: 31px; }.user-block { padding: 0; }.page-content { padding: 22px 16px 30px; }.page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }.page-heading h1 { font-size: 22px; }.heading-actions { width: 100%; }.heading-actions .button { flex: 1; }.metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.metric-card { min-height: 108px; padding: 13px; }.metric-value { margin: 9px 0 6px; font-size: 20px; }.metric-foot { font-size: 8px; }.chart-tooltip { display: none; }.card-header { padding: 15px 14px 0; }.chart-wrap { min-height: 205px; padding-right: 10px; }.chart-svg { height: 165px; }.lower-grid { margin-top: 12px; gap: 12px; }.panel-toolbar { align-items: stretch; flex-direction: column; }.toolbar-left, .toolbar-right { width: 100%; }.search-field { min-width: 0; flex: 1; }.toolbar-right .button { flex: 1; }.client-summary { grid-template-columns: 1fr 1fr; gap: 9px; }.summary-card { padding: 12px; }.test-cards { grid-template-columns: 1fr; }.alert-card { grid-template-columns: 31px minmax(0,1fr); }.alert-card-actions { grid-column: 2; justify-content: space-between; }.modal-backdrop { padding: 10px; }.modal-form { grid-template-columns: 1fr; }.modal-form .full { grid-column: auto; }.drawer { width: 100%; }.portal-nav { padding: 18px; }.portal-status { display: none; }.portal-main { padding: 30px 16px 25px; }.portal-hero h1 { font-size: 32px; }.portal-hero p { font-size: 11px; }.diagnostic-card { margin-top: 24px; }.diagnostic-top { padding: 13px; }.secure-context { display: none; }.diagnostic-body { padding: 15px; }.start-panel { grid-template-columns: 1fr; }.start-button { width: 100%; height: 72px; grid-template-columns: auto auto; gap: 7px; }.start-button .button-orbit { width: 31px; height: 31px; margin: 0; }.start-button small { display: none; }.diagnostic-progress { grid-template-columns: 1fr 1fr; gap: 11px; }.progress-step:nth-child(2)::after { display: none; }.portal-footer { align-items: flex-start; gap: 10px; flex-direction: column; padding: 13px 18px 20px; }.login-shell { display: block; }.login-side { display: none; }.login-form-side { min-height: 100vh; padding: 26px 20px; place-items: center; }.login-form-wrap > .brand { display: flex; margin-bottom: 50px; padding: 0; color: #252f47; }.login-form-wrap > .brand .brand-name strong { color: #252f47; }.login-form-wrap { width: min(370px, 100%); }.login-form-wrap h2 { font-size: 23px; } }
@media (max-width: 380px) { .metric-grid { grid-template-columns: 1fr; }.client-summary { grid-template-columns: 1fr; }.portal-brand { font-size: 15px; }.portal-nav-right { gap: 7px; }.portal-link { font-size: 9px; } }