/* Keep the appearance menu outside the horizontally scrolling navigation. */
.site-header.has-theme-switch { display: flex; align-items: center; gap: 5px; }
.site-header.has-theme-switch #sidebar-nav { flex: 1; min-width: 0; margin: 0; padding: 0; }
.theme-switch { position: relative; flex: 0 0 auto; margin: 0 2px 0 0; }
.theme-switch > summary { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 9px; border: 1px solid transparent; border-radius: 50%; color: #64748b; cursor: pointer; list-style: none; }
.theme-switch > summary::-webkit-details-marker { display: none; }
.theme-switch > summary:hover, .theme-switch[open] > summary { color: #3166ff; background: #eef3ff; }
.theme-switch > summary:focus-visible { outline: 3px solid #a4bcff; outline-offset: 2px; }
.theme-menu { position: absolute; z-index: 50; top: calc(100% + 13px); right: 0; width: 172px; padding: 6px; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; box-shadow: 0 12px 35px #17213b1c; }
.theme-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border: 0; border-radius: 9px; background: transparent; color: #475569; font-size: 13px; text-align: left; }
.theme-menu button:hover, .theme-menu button:focus-visible { color: #2354e7; background: #f0f5ff; }
.theme-menu button[aria-checked="true"] { color: #3166ff; background: #eef3ff; }
.theme-choice-check { margin-left: auto; opacity: 0; }
.theme-menu button[aria-checked="true"] .theme-choice-check { opacity: 1; }
.theme-menu .ui-icon { width: 17px; height: 17px; }

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101722; --surface: #182231; --surface-soft: #1e2a3b;
  --ink: #edf2fb; --text: #c4cfdf; --muted: #9cacc2;
  --line: #2c394d; --line-strong: #3b4d66;
  --blue: #87adff; --blue-hover: #a5c2ff; --blue-soft: #243b61;
  --green: #87adff; --green-hover: #a5c2ff; --green-soft: #243b61;
  --success: #79d6b0; --danger: #f3a5a5; --amber: #e7c087;
  --shadow: 0 4px 24px #00000018;
  background: var(--canvas);
}
html[data-theme="dark"] body { color: var(--text); background: radial-gradient(ellipse 750px 500px at 88% 3%, #1a2a4666, transparent), var(--canvas); }
html[data-theme="dark"] ::selection { color: #fff; background: #375c97; }
html[data-theme="dark"] .site-header { background: #182231f5; border-color: var(--line); box-shadow: 0 5px 25px #00000015; }
html[data-theme="dark"] .nav-item { color: #aebdd2; }
html[data-theme="dark"] .nav-item:hover { color: #c5d7ff; background: #263b5d; }
html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .nav-item[aria-current="page"] { color: #fff; background: #356ae1; }
html[data-theme="dark"] .nav-count { color: #bed3ff; background: #2c4267; }
html[data-theme="dark"] .nav-item.active .nav-count { color: #fff; background: #ffffff26; }
html[data-theme="dark"] .theme-switch > summary { color: #b9c9df; }
html[data-theme="dark"] .theme-switch > summary:hover, html[data-theme="dark"] .theme-switch[open] > summary { color: #d2e0ff; background: #263b5d; }
html[data-theme="dark"] .theme-menu { color: var(--text); background: #1b2738; border-color: #3b4d66; box-shadow: 0 12px 35px #00000055; }
html[data-theme="dark"] .theme-menu button { color: #c3d0e3; }
html[data-theme="dark"] .theme-menu button:hover, html[data-theme="dark"] .theme-menu button:focus-visible, html[data-theme="dark"] .theme-menu button[aria-checked="true"] { color: #c7d9ff; background: #29426a; }
html[data-theme="dark"] #view :is(.panel, .home-panel, .home-controls, .home-connectivity, .stat-card, .cdn-card, .multi-progress, .egress-item, .reference-table, .probe-card) { color: var(--text); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme="dark"] #view .stat-card:first-child { background: linear-gradient(125deg, #1d3150, #1c293d); }
html[data-theme="dark"] #view :is(.toolbar, .panel-header, .protocol-section, .route-group, .route-sample, .home-routing-note, .connectivity-group, .egress-sources, .cdn-value, .home-switches, td, th) { border-color: var(--line); }
html[data-theme="dark"] #view :is(.home-routing-note, .table-footer, .dns-errors, .egress-groups, .egress-card, .probe-card, .result-detail dl, .result-detail pre) { color: var(--text); background: #1c293b; border-color: var(--line); }
html[data-theme="dark"] #view :is(h1, h2, h3, strong, .network-facts dd, .detail-list dd, .egress-heading strong, .reference-site strong) { color: var(--ink); }
html[data-theme="dark"] #view :is(p, .network-facts dt, .home-source, .sample-location, .sample-network, .home-redacted, .page-footnote, .run-state, #run-caption, .privacy-toggle, .connectivity-title small, .egress-count, .egress-heading small, .egress-sources .mono, .cdn-cache, .cdn-card > small, .result-detail, .result-detail dt, .result-detail dd, .muted, .dim, .domain) { color: var(--muted); }
html[data-theme="dark"] #view :is(.home-ip, .sample-ip, .ip-link, .stat-value, .cdn-value, .metric-value, .route-more, .home-source a, .row-action, .text-link, .result-detail summary) { color: #9dbfff; }
html[data-theme="dark"] #view :is(.hero p, .reference-heading p, .home-heading p, .stat-label, .stat-card > p:first-child, .stat-card > small, .stat-hint, .probe-card small, .field label, .field small, .section-note) { color: var(--muted); }
html[data-theme="dark"] #view :is(thead, th) { color: #c5d1e4; background: #202d40; }
html[data-theme="dark"] #view td { color: #c0ccdd; }
html[data-theme="dark"] #view td :is(small, .domain, .mono) { color: #a4b6cf; }
html[data-theme="dark"] #view tbody tr:nth-child(even) { background: #1b2739; }
html[data-theme="dark"] #view tbody tr:hover { background: #24344c; }
html[data-theme="dark"] .table-wrap { scrollbar-color: #475d7c transparent; }
html[data-theme="dark"] :is(.button, button.primary) { color: #fff; background: #356ae1; border-color: #4b7deb; }
html[data-theme="dark"] :is(.button, button.primary):hover { color: #fff; background: #467bef; }
html[data-theme="dark"] :is(.button.secondary, button.secondary, a.secondary, .icon-button) { color: #b2c5e4; background: #202e42; border-color: #3b4d66; }
html[data-theme="dark"] :is(.button.secondary, button.secondary, a.secondary, .icon-button):hover { color: #d3e2ff; background: #2b4163; border-color: #5c7dab; }
html[data-theme="dark"] #view :is(input:not([type="checkbox"]), select, textarea) { color: #e1e9f6; background: #152030; border-color: #425674; }
html[data-theme="dark"] #view :is(input, textarea)::placeholder { color: #8e9fb8; }
html[data-theme="dark"] #view :is(input, select, textarea):focus { border-color: #88afff; }
html[data-theme="dark"] .privacy-toggle { color: #acbdd4; }
html[data-theme="dark"] .switch-track { background: #3a4b63; border-color: #516580; }
html[data-theme="dark"] .privacy-toggle input:checked + .switch-track { background: #4b80f2; border-color: #7ba4fb; }
html[data-theme="dark"] #view :is(.scope-tag, .category-label, .category-tag, .badge, .chip, .count) { color: #afc6eb; background: #26374f; border-color: #3b4e6a; }
html[data-theme="dark"] #view :is(.scope-tag.international, .badge.success, .chip.success) { color: #89dfbd; background: #173e36; border-color: #2a5a4c; }
html[data-theme="dark"] #view :is(.badge.warning, .chip.warning, .notice.warning) { color: #f0cc96; background: #3b3020; border-color: #655033; }
html[data-theme="dark"] #view :is(.badge.error, .chip.error, .notice.error) { color: #f2b0b0; background: #422b32; border-color: #69414b; }
html[data-theme="dark"] #view :is(.badge.loading, .badge.running, .badge.pending) { color: #b1ccff; background: #253d63; border-color: #3c5883; }
html[data-theme="dark"] #view :is(.success, .success-text) { color: #79d6b0; }
html[data-theme="dark"] #view :is(.error, .form-error) { color: #f3a5a5; }
html[data-theme="dark"] #view :is(.home-error, .warning) { color: #e7c087; }
html[data-theme="dark"] #view .notice { color: #b6ccef; background: #203552; border-color: #365176; }
html[data-theme="dark"] #view .notice strong { color: #d3e2fb; }
html[data-theme="dark"] #view :is(.row-action, .result-detail summary):hover { background: #2b4163; }
html[data-theme="dark"] #view .progress { background: #293a54; }
html[data-theme="dark"] #view .progress > div { background: #719df4; }
html[data-theme="dark"] #view .skeleton { background: linear-gradient(90deg, #26364d, #3c506d, #26364d); background-size: 200%; }
html[data-theme="dark"] #view .protocol-unavailable-overlay { background: rgba(23, 35, 52, .4); }
html[data-theme="dark"] #view .protocol-unavailable-overlay p { color: var(--text); }
html[data-theme="dark"] #view .protocol-retry { color: #b2c5e4; background: #202e42; border-color: #3b4d66; }
html[data-theme="dark"] #view .protocol-retry:hover:not(:disabled) { color: #d3e2ff; background: #2b4163; border-color: #5c7dab; }
html[data-theme="dark"] :is(.page-footer, .footer-year, .brand-copy > span, .header-tag, .global-status, .breadcrumb) { color: #94a7c2; }
html[data-theme="dark"] .footer-emblem { color: #bdd2ff; background: #263e64; }
/* Keep original dark brand lettering legible without recoloring or cropping logos. */
html[data-theme="dark"] .site-logo { object-fit: contain; padding: 3px; border-radius: 5px; background: #f5f7fb; }
html[data-theme="dark"] .country-flag { object-fit: contain; box-shadow: 0 0 0 1px #ffffff26; }
@media (max-width: 740px) {
  .site-header.has-theme-switch { gap: 3px; }
  .theme-switch { margin-right: 0; }
  .theme-switch > summary { width: 35px; height: 35px; }
  .theme-menu { top: calc(100% + 11px); }
}