/* Homepage widgets follow the shared /root/pan palette and spacing. */
.hx-header-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; color: var(--muted, #6b7280); background: transparent; font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.hx-header-button:hover { color: var(--text, #1f2329); background: #f2f4f8; }
.hx-header-button > span:first-child { font-size: 16px; line-height: 1; }
.hx-theme-control { position: relative; flex: none; }
.hx-theme-menu { position: absolute; z-index: 95; top: calc(100% + 9px); right: 0; width: 146px; padding: 5px; border: 1px solid var(--border, #ecedf1); border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 18px 48px rgba(16, 24, 40, .16); }
.hx-theme-menu[hidden] { display: none; }
.hx-theme-menu button { display: block; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--text, #1f2329); background: transparent; font-size: 12px; text-align: left; cursor: pointer; }
.hx-theme-menu button:hover { background: #f2f4f8; }
.hx-theme-menu button.is-active { color: var(--brand, #2f6bff); background: var(--brand-soft, #eef3ff); font-weight: 700; }
.hx-ads { padding: 11px 0 0; background: #f7f9ff; }
.hx-ad-card { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 8px 12px 8px 15px; border: 1px solid #e4ebfa; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(23, 43, 99, .04); }
.hx-ad-label { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 22px; padding: 2px 7px; flex: none; border-radius: 7px; color: var(--brand, #2f6bff); background: var(--brand-soft, #eef3ff); font-size: 11px; font-weight: 750; }
.hx-ad-copy { min-width: 0; flex: 1; color: #4b5870; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.hx-ad-copy a:hover { color: var(--brand, #2f6bff); text-decoration: underline; }
.hx-ad-controls { display: inline-flex; align-items: center; gap: 4px; flex: none; color: #9aa1ab; font-size: 10px; white-space: nowrap; }
.hx-ad-controls[hidden] { display: none; }
.hx-ad-controls button { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 8px; color: #6b7280; background: #f6f7f9; font-size: 20px; line-height: 1; cursor: pointer; }
.hx-ad-controls button:hover { color: var(--brand, #2f6bff); background: var(--brand-soft, #eef3ff); }
.hx-outlet { padding: 24px 0 20px; background: #fff; }
.hx-outlet-card { overflow: hidden; border: 1px solid var(--border, #ecedf1); border-radius: 18px; background: #fff; box-shadow: 0 6px 24px rgba(16, 24, 40, .05); }
.hx-outlet-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 22px 24px 17px; }
.hx-kicker { color: var(--brand, #2f6bff); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.hx-outlet-heading h2 { margin: 3px 0 4px; color: var(--text, #1f2329); font-size: 18px; letter-spacing: -.02em; }
.hx-outlet-heading p { margin: 0; color: var(--muted, #6b7280); font-size: 12px; line-height: 1.6; }
.hx-refresh { min-height: 34px; padding: 0 13px; flex: none; border: 1px solid #dfe7f4; border-radius: 999px; color: var(--brand, #2f6bff); background: #fff; font-size: 11px; font-weight: 650; cursor: pointer; }
.hx-refresh:hover { background: var(--brand-soft, #eef3ff); }
.hx-refresh:disabled { opacity: .55; cursor: default; }
.hx-outlet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border, #ecedf1); border-bottom: 1px solid var(--border, #ecedf1); }
.hx-outlet-grid > div { min-width: 0; padding: 16px 22px; }
.hx-outlet-grid > div + div { border-left: 1px solid var(--border, #ecedf1); }
.hx-outlet-grid span { display: block; color: var(--subtle, #9aa1ab); font-size: 11px; }
.hx-outlet-grid strong { display: block; margin-top: 5px; color: var(--text, #1f2329); font-size: clamp(13px, 1.5vw, 17px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hx-outlet-note { margin: 0; padding: 12px 24px; color: var(--subtle, #9aa1ab); font-size: 11px; line-height: 1.6; }
.announcements { padding: 28px 0; background: #fafbfd; }
.announcements-head { margin-bottom: 16px; }
.announcements-head h2 { margin: 3px 0 0; font-size: 23px; letter-spacing: -.025em; }
.announcement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.announcement-card { min-width: 0; padding: 19px 20px; border: 1px solid var(--border, #ecedf1); border-radius: 16px; background: var(--surface, #fff); box-shadow: 0 3px 18px rgba(16, 24, 40, .04); }
.announcement-card > span { color: var(--brand, #2f6bff); font-size: 11px; font-weight: 750; }
.announcement-card h3 { margin: 7px 0; font-size: 15px; line-height: 1.4; }
.announcement-card p { display: -webkit-box; margin: 0 0 8px; color: var(--muted, #6b7280); font-size: 12px; line-height: 1.6; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hx-popup-backdrop { position: fixed; z-index: 160; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(15, 25, 42, .55); backdrop-filter: blur(4px); }
.hx-popup { width: min(100%, 480px); max-height: calc(100dvh - 36px); overflow: auto; padding: 23px; border: 1px solid var(--border, #ecedf1); border-radius: 18px; color: var(--text, #1f2329); background: var(--surface, #fff); box-shadow: 0 28px 75px rgba(10, 20, 40, .28); }
.hx-popup-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hx-popup-kicker { color: var(--brand, #2f6bff); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.hx-popup-close { width: 30px; height: 30px; border: 0; border-radius: 8px; color: var(--muted, #6b7280); background: #f6f7f9; font-size: 22px; line-height: 1; cursor: pointer; }
.hx-popup h2 { margin: 12px 0 9px; font-size: 21px; line-height: 1.35; }
.hx-popup p { max-height: 46vh; overflow: auto; margin: 0; color: var(--muted, #6b7280); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.hx-popup-action { display: block; min-height: 38px; margin: 22px 0 0 auto; padding: 0 17px; border: 0; border-radius: 999px; color: #fff; background: var(--brand, #2f6bff); font-size: 12px; font-weight: 650; cursor: pointer; }
.hx-consent-open { overflow: hidden; }
.hx-consent-backdrop { position: fixed; z-index: 260; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(12, 21, 38, .66); backdrop-filter: blur(7px); }
.hx-consent { width: min(100%, 510px); max-height: calc(100dvh - 36px); overflow: auto; padding: 29px; border: 1px solid #e3e9f4; border-radius: 20px; color: var(--text, #1f2329); background: var(--surface, #fff); box-shadow: 0 35px 100px rgba(9, 19, 39, .3); }
.hx-consent-kicker { color: var(--brand, #2f6bff); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.hx-consent h2 { margin: 9px 0 12px; font-size: 27px; line-height: 1.25; letter-spacing: -.035em; }
.hx-consent p { margin: 0 0 18px; color: var(--muted, #6b7280); font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.hx-consent-check { display: flex; align-items: start; gap: 10px; padding: 14px 15px; border: 1px solid var(--border, #ecedf1); border-radius: 12px; background: #f8faff; cursor: pointer; }
.hx-consent-check input { width: 17px; height: 17px; flex: none; margin: 1px 0 0; accent-color: var(--brand, #2f6bff); }
.hx-consent-check span { font-size: 12px; line-height: 1.5; font-weight: 650; }
.hx-consent-links { display: flex; gap: 18px; margin: 11px 0 23px; padding-left: 3px; font-size: 12px; }
.hx-consent-links a { color: var(--brand, #2f6bff); text-decoration: underline; text-underline-offset: 2px; }
.hx-consent-accept { width: 100%; min-height: 43px; border: 0; border-radius: 999px; color: #fff; background: var(--brand, #2f6bff); font-size: 13px; font-weight: 700; cursor: pointer; }
.hx-consent-accept:hover:not(:disabled) { background: var(--brand-hover, #1f57e6); }
.hx-consent-accept:disabled { color: #9aa7ba; background: #e6eaf0; cursor: not-allowed; }
.hx-consent :focus-visible { outline: 3px solid rgba(47, 107, 255, .35); outline-offset: 2px; }
.hx-screen-open { overflow: hidden; }
.hx-screen-overlay { position: fixed; z-index: 200; inset: 0; color: #d9e2f0; background: radial-gradient(ellipse at 50% 38%, #172439, #0a101b 70%); }
.hx-screen-content { display: grid; grid-template-rows: auto 1fr auto auto; width: min(100%, 1100px); height: 100%; margin: 0 auto; padding: 28px clamp(20px, 5vw, 56px) 24px; }
.hx-screen-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.hx-screen-brand { color: #718199; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.hx-screen-close { min-height: 34px; padding: 0 13px; border: 1px solid #344153; border-radius: 999px; color: #a9b8ca; background: rgba(255, 255, 255, .035); font-size: 12px; cursor: pointer; }
.hx-screen-close:hover { color: #fff; border-color: #53647a; }
.hx-screen-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; text-align: center; }
.hx-screen-clock { color: #e6edf7; font-size: clamp(58px, 12vw, 130px); font-weight: 450; line-height: 1.1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.hx-screen-date { margin-top: 6px; color: #8190a5; font-size: 14px; }
.hx-screen-state { margin-top: 18px; padding: 6px 12px; border: 1px solid #293b55; border-radius: 999px; color: #7da7ff; background: rgba(47, 107, 255, .08); font-size: 11px; }
.hx-screen-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.hx-screen-stats > div { min-width: 0; padding: 20px 22px; border: 1px solid #243147; border-radius: 16px; background: rgba(255, 255, 255, .025); }
.hx-screen-stats span { display: block; color: #72829a; font-size: 11px; }
.hx-screen-stats strong { display: block; margin-top: 8px; color: #e6edf7; font-size: clamp(22px, 3vw, 35px); font-weight: 550; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hx-screen-hint { margin: 16px 0 0; color: #55677f; font-size: 11px; text-align: center; }

/* The dark theme covers the existing home shell as well as these widgets. */
html.netscope-theme-dark { color-scheme: dark; --bg: #0b1220; --surface: #111d2f; --text: #e7ecf5; --muted: #9baac0; --subtle: #718198; --border: #29364b; }
html.netscope-theme-dark body, html.netscope-theme-dark .site-shell { color: var(--text); background: #0b1220; }
html.netscope-theme-dark .topbar { background: rgba(14, 23, 38, .93); border-bottom-color: #28364b; }
html.netscope-theme-dark .topnav a:hover, html.netscope-theme-dark .menu-button:hover, html.netscope-theme-dark .hx-header-button:hover { color: #fff; background: #1c2b40; }
html.netscope-theme-dark .hero { background: linear-gradient(180deg, #101d33, #0b1220 86%); }
html.netscope-theme-dark .hero h1, html.netscope-theme-dark .speed-number, html.netscope-theme-dark .diag-card .value { color: #e9f0fb; }
html.netscope-theme-dark .eyebrow, html.netscope-theme-dark .speed-window, html.netscope-theme-dark .console, html.netscope-theme-dark .feature-card, html.netscope-theme-dark .diag-card, html.netscope-theme-dark .faq-item, html.netscope-theme-dark .hx-outlet-card, html.netscope-theme-dark .hx-ad-card { color: var(--text); background: #111d2f; border-color: #29364b; }
html.netscope-theme-dark .window-bar, html.netscope-theme-dark .metric-card, html.netscope-theme-dark .input, html.netscope-theme-dark .select, html.netscope-theme-dark .textarea { color: var(--text); background: #17243a; border-color: #29364b; }
html.netscope-theme-dark .chart-wrap, html.netscope-theme-dark .section-soft, html.netscope-theme-dark .band, html.netscope-theme-dark .footer, html.netscope-theme-dark .hx-outlet, html.netscope-theme-dark .hx-ads { background: #0d1727; border-color: #29364b; }
html.netscope-theme-dark .announcements { background: #0d1727; }
html.netscope-theme-dark .announcement-card { background: #111d2f; border-color: #29364b; }
html.netscope-theme-dark .band-grid > div + div, html.netscope-theme-dark .footer-bottom, html.netscope-theme-dark .console-controls, html.netscope-theme-dark .hx-outlet-grid, html.netscope-theme-dark .hx-outlet-grid > div + div { border-color: #29364b; }
html.netscope-theme-dark .metric-card strong, html.netscope-theme-dark .hx-outlet-grid strong, html.netscope-theme-dark .hx-outlet-heading h2 { color: #e7ecf5; }
html.netscope-theme-dark .btn-outline, html.netscope-theme-dark .btn-quiet, html.netscope-theme-dark .hx-refresh { color: #b6c5de; background: #15243a; border-color: #33435c; }
html.netscope-theme-dark .btn-outline:hover, html.netscope-theme-dark .btn-quiet:hover, html.netscope-theme-dark .hx-refresh:hover { color: #fff; background: #20314a; }
html.netscope-theme-dark .hx-ad-copy, html.netscope-theme-dark .hx-popup p { color: #a9b8cb; }
html.netscope-theme-dark .hx-ad-controls button, html.netscope-theme-dark .hx-popup-close { color: #a9b8cb; background: #1d2c41; }
html.netscope-theme-dark .hx-theme-menu button:hover { background: #1d2c41; }
html.netscope-theme-dark .hx-theme-menu button.is-active { background: #1d3158; }
html.netscope-theme-dark .hx-outlet-grid, html.netscope-theme-dark .hx-popup { border-color: #29364b; }
html.netscope-theme-dark .hx-popup { background: #111d2f; }
html.netscope-theme-dark .hx-popup h2 { color: #e7ecf5; }
html.netscope-theme-dark .hx-consent { color: #e7ecf5; background: #111d2f; border-color: #33435c; }
html.netscope-theme-dark .hx-consent-check { background: #17243a; border-color: #33435c; }
html.netscope-theme-dark .hx-consent-accept:disabled { color: #8190a5; background: #334156; }

/* Public network, content, account, and administrator pages share the mode. */
html.netscope-theme-dark .np-page { --np-ink: #e7ecf5; --np-muted: #9baac0; --np-light: #718198; --np-line: #29364b; --np-blue-soft: #1d3158; color: var(--text); background: linear-gradient(180deg, #101d33, #0b1220 650px); }
html.netscope-theme-dark .np-heading h1, html.netscope-theme-dark .np-address-card strong { color: #e7ecf5; }
html.netscope-theme-dark .np-card, html.netscope-theme-dark .np-button:not(.np-button-primary), html.netscope-theme-dark .np-faq-grid details { color: #e7ecf5; background: #111d2f; border-color: #29364b; }
html.netscope-theme-dark .np-button:not(.np-button-primary):hover { background: #20314a; }
html.netscope-theme-dark .np-intro, html.netscope-theme-dark .np-assessment, html.netscope-theme-dark .np-privacy-note, html.netscope-theme-dark .np-nat-evidence span { color: #a9b8cb; background: #172741; border-color: #2b4164; }
html.netscope-theme-dark .np-source-icon { background: #1d3158; }
html.netscope-theme-dark .np-source-list, html.netscope-theme-dark .np-candidate-list, html.netscope-theme-dark .np-latency-list, html.netscope-theme-dark .np-probe-list, html.netscope-theme-dark .np-cross-check { border-color: #29364b; }
html.netscope-theme-dark .np-source-row + .np-source-row, html.netscope-theme-dark .np-candidate-row + .np-candidate-row, html.netscope-theme-dark .np-latency-row + .np-latency-row, html.netscope-theme-dark .np-probe-row + .np-probe-row, html.netscope-theme-dark .np-cross-check > div + div, html.netscope-theme-dark .np-nat-metrics, html.netscope-theme-dark .np-nat-evidence { border-color: #29364b; }
html.netscope-theme-dark .np-source-result button, html.netscope-theme-dark .np-candidate-row button, html.netscope-theme-dark .np-cross-check strong { color: #dce6f5; }
html.netscope-theme-dark .np-status-muted { color: #9baac0; background: #203047; }
html.netscope-theme-dark .np-status-ok { color: #73d7a5; background: #123a2c; }
html.netscope-theme-dark .np-status-warn { color: #f3c276; background: #3c2b18; }
html.netscope-theme-dark .np-status-pending { color: #8fb3ff; background: #1d3158; }
html.netscope-theme-dark .np-toggle-row input { background: #3d4b60; }
html.netscope-theme-dark .np-toggle-row input:checked { background: var(--brand); }

html.netscope-theme-dark .sub-hero, html.netscope-theme-dark .ac-hero { background: radial-gradient(520px 310px at 75% 5%, rgba(47, 107, 255, .17), transparent 70%), linear-gradient(180deg, #101d33, #0b1220); }
html.netscope-theme-dark .sub-section, html.netscope-theme-dark .ac-page { color: var(--text); background: #0b1220; }
html.netscope-theme-dark .sub-block, html.netscope-theme-dark .link-card, html.netscope-theme-dark .empty-card, html.netscope-theme-dark .support-list a { color: var(--text); background: #111d2f; border-color: #29364b; }
html.netscope-theme-dark .sub-extra, html.netscope-theme-dark .ac-soft, html.netscope-theme-dark .ac-checkin { background: linear-gradient(120deg, #172844, #111d2f); }
html.netscope-theme-dark .link-mark { background: #1d3158; }
html.netscope-theme-dark .ac-outline { color: #e7ecf5 !important; background: #17243a; border-color: #33435c; }
html.netscope-theme-dark .ac-outline:hover { background: #20314a; }
html.netscope-theme-dark .ac-card, html.netscope-theme-dark .ac-profile, html.netscope-theme-dark .ac-stat, html.netscope-theme-dark .ac-node-card, html.netscope-theme-dark .ac-table-scroll { color: var(--text); background: #111d2f; border-color: #29364b; }
html.netscope-theme-dark .ac-auth-aside { color: var(--text); background: linear-gradient(145deg, #1b3053, #14243c); border-color: #344969; }
html.netscope-theme-dark .ac-auth-aside p, html.netscope-theme-dark .ac-auth-aside ul, html.netscope-theme-dark .ac-field, html.netscope-theme-dark .ac-node-enabled, html.netscope-theme-dark .ac-table td { color: #a9b8cb; }
html.netscope-theme-dark .ac-aside-icon, html.netscope-theme-dark .ac-auth-tabs button.active { background: #223859; }
html.netscope-theme-dark .ac-auth-tabs, html.netscope-theme-dark .ac-rank-number { background: #1b2b42; }
html.netscope-theme-dark .ac-field input, html.netscope-theme-dark .ac-rank-filters select { color: var(--text); background: #17243a; border-color: #33435c; }
html.netscope-theme-dark .ac-table th { color: #9baac0; background: #17243a; border-color: #29364b; }
html.netscope-theme-dark .ac-table td { border-color: #29364b; }
html.netscope-theme-dark .ac-table tbody tr:hover { background: #17243a; }
html.netscope-theme-dark .ac-count { background: #1d3158; }

html.netscope-theme-dark .admin-login-shell, html.netscope-theme-dark .admin-login-form, html.netscope-theme-dark .admin-app { color: var(--text); background: #0b1220; }
html.netscope-theme-dark .admin-header, html.netscope-theme-dark .admin-sidebar, html.netscope-theme-dark .admin-panel, html.netscope-theme-dark .admin-stat, html.netscope-theme-dark .modal { color: var(--text); background: #111d2f; border-color: #29364b; }
html.netscope-theme-dark .editor-item, html.netscope-theme-dark .login-card, html.netscope-theme-dark .access-table th { color: var(--text); background: #17243a; border-color: #29364b; }
html.netscope-theme-dark .admin-tabs button:hover { color: #fff; background: #20314a; }
html.netscope-theme-dark .admin-tabs button.active { background: #1d3158; }
html.netscope-theme-dark .input, html.netscope-theme-dark .select, html.netscope-theme-dark .textarea { color: var(--text); background: #17243a; border-color: #33435c; }
html.netscope-theme-dark .inline-alert { background: #44212a; color: #f5a5aa; }
html.netscope-theme-dark .inline-success { background: #153b2b; color: #8fe0b2; }

@media (max-width: 960px) {
  .hx-header-label { display: none; }
  .hx-header-button { width: 36px; padding: 0; }
  .hx-outlet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .announcement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-outlet-grid > div:nth-child(3) { border-top: 1px solid var(--border, #ecedf1); border-left: 0; }
  .hx-outlet-grid > div:nth-child(4) { border-top: 1px solid var(--border, #ecedf1); }
}
@media (max-width: 600px) {
  .hx-consent { padding: 23px 20px; }
  .hx-consent h2 { font-size: 24px; }
  .announcement-grid { grid-template-columns: 1fr; }
  .hx-ad-card { align-items: start; gap: 8px; }
  .hx-ad-copy { font-size: 11px; }
  .hx-ad-controls { align-self: center; }
  .hx-ad-controls button { width: 22px; height: 22px; }
  .hx-outlet { padding: 18px 0; }
  .hx-outlet-heading { padding: 18px 17px 14px; }
  .hx-outlet-heading h2 { font-size: 16px; }
  .hx-outlet-grid > div { padding: 13px 17px; }
  .hx-outlet-note { padding: 10px 17px; }
  .hx-screen-content { padding: 18px 17px; }
  .hx-screen-clock { font-size: clamp(55px, 14vw, 80px); }
  .hx-screen-stats { grid-template-columns: 1fr; gap: 8px; }
  .hx-screen-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; }
  .hx-screen-stats strong { margin: 0; font-size: 20px; text-align: right; }
  .hx-screen-hint { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-header-button, .hx-screen-overlay *, .hx-ad-card * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}