/* Shared light/dark appearance. Business logic and status labels are unchanged. */
:root { --muted: #52627a; --line: #cbd6e5; }
.theme-toggle { display: inline-flex; flex: 0 0 42px; width: 42px; height: 42px; padding: 9px; align-items: center; justify-content: center; color: #254d83; background: #fff; border: 1px solid #b9c9df; border-radius: 10px; cursor: pointer; }
.theme-toggle:focus-visible { outline: 3px solid #76a8ff; outline-offset: 3px; }
.theme-toggle:hover { background: #edf4ff; }
.theme-toggle .theme-icon-sun { display: none; }
.header-inner { gap: 22px; }
.header-inner > .theme-toggle { margin-left: auto; }
.header-inner > .header-actions + .theme-toggle { margin-left: 0; }
.admin-topbar-actions { display: flex; align-items: center; gap: 16px; }
.theme-header-actions { margin-left: auto; }
html[data-theme="dark"] { color-scheme: dark; --ink: #e7edf7; --muted: #a8b8ce; --line: #33465f; --canvas: #0b1220; --blue: #80adff; --blue-soft: #203655; }
html[data-theme="dark"] body,
html[data-theme="dark"] :is(.site-header, .admin-topbar, .mobile-nav) { background: #101c2e; color: #a8b8ce; border-color: #33465f; }
html[data-theme="dark"] :is(.brand, .header-login, .main-nav, .mobile-nav a, .admin-topbar a, .admin-topbar, .account-greeting, .admin-page-title h1) { color: #e7edf7; }
html[data-theme="dark"] .brand-dot { color: #80adff; }
html[data-theme="dark"] .auth-aside .brand { color: white; }
html[data-theme="dark"] :is(.app-footer, .site-footer) { background: #101c2e; color: #a8b8ce; border-color: #33465f; }
html[data-theme="dark"] .theme-toggle { color: #f4d382; background: #142238; border-color: #536783; }
html[data-theme="dark"] .theme-toggle:hover { background: #203655; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
html[data-theme="dark"] :is(.content-card, .stat-card, .auth-card, .plan-card, .feature-card, .step-card, .plans-empty, .maintenance-card,
 .subscription-link-card, .connection-list, .connection-row, .account-activity, .client-guides, .client-guide-card,
 .subscription-app-card, .subscription-announcement-rule, .out-provision-launcher, .out-setup-hub, .out-setup-method, .sync-dashboard, .support-card) {
  background: #142238; color: #e7edf7; border-color: #33465f; box-shadow: 0 6px 20px #0002;
}
html[data-theme="dark"] .faq-list details { background: #142238; color: #e7edf7; border-color: #33465f; }
html[data-theme="dark"] .faq-list summary { color: #e7edf7; }
html[data-theme="dark"] .faq-list p { color: #a8b8ce; }
html[data-theme="dark"] :is(.plans-section, .support-section, .how-section) { background: #0f1a2b; border-color: #33465f; }
html[data-theme="dark"] .hero::before { background: radial-gradient(ellipse at center, #20365588, transparent 70%); }
html[data-theme="dark"] :is(.eyebrow, .network-node, .security-card, .guide-security, .guide-steps li, .subscription-setting,
 .subscription-routing-panel, .registration-account-summary, .queue-note, .subscription-app-panel, .plan-choice, .endpoint-list-head) {
  background: #192b45; color: #c3d0e3; border-color: #33465f;
}
html[data-theme="dark"] :is(.security-card b, .guide-security strong, .guide-steps strong, .guide-download strong, .plan-details b,
 .server-name-line h3, .admin-section-head h2, .sync-report-title, .sync-report-detail b, .plan-choice strong, .metric strong, .stat-card strong) { color: #e7edf7; }
html[data-theme="dark"] :is(.field label, .field-label, .consent-list legend, .subscription-rule-heading label) { color: #d3def0; }
html[data-theme="dark"] :is(.field input, .field select, .field textarea, .select-control, .copy-row input,
 .subscription-announcement-rule textarea, .assignment-add select, .assignment-add input) { background: #0e1a2c; color: #e7edf7; border-color: #536783; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #95a7c0; opacity: 1; }
html[data-theme="dark"] :is(input, select, textarea):focus-visible { outline: 2px solid #80adff; outline-offset: 1px; }
html[data-theme="dark"] :is(.field-hint, .table-secondary, .stat-card span, .stat-foot, .sync-report-meta, .sync-summary-main small,
 .dialog-help, .node-state, .account-email, .connection-explainer, .plan-duration, .consent-item, .auth-card-plans .plan-choice small,
 .out-provision-launcher span, .out-setup-header p, .out-setup-manual-summary small, .server-admin-head .table-secondary, .subscription-import-notes, .subscription-import-intro) { color: #a8b8ce; }
html[data-theme="dark"] .out-setup-methods .server-create-tools > summary { background: #192b45; border-color: #33465f; }
html[data-theme="dark"] .account-overview { background: #12332d; border-color: #326c58; }
html[data-theme="dark"] .subscription-state strong { color: #65dbab; }
html[data-theme="dark"] .metric { border-color: #326c58; }
html[data-theme="dark"] :is(.progress-track, .guide-tabs, .subscription-app-tabs, .admin-subtabs) { background: #20304a; border-color: #33465f; }
html[data-theme="dark"] :is(.guide-tab, .subscription-app-tab, .admin-subtabs a) { color: #b8c9e1; }
html[data-theme="dark"] :is(.guide-tab[aria-selected="true"], .subscription-app-tab.is-active, .admin-subtabs a.active) { background: #1767f5; color: #fff; border-color: #4384eb; }
html[data-theme="dark"] :is(.guide-download, .announce-variable, .activity-icon, .feature-icon, .guide-platform-icon, .plan-badge, .admin-avatar) { color: #9dbfff; background: #203655; border-color: #3d5b83; }
html[data-theme="dark"] .guide-download span { color: #9dbfff; }
html[data-theme="dark"] :is(.button-outline, .small-button) { background: #1d3150; color: #b5ceff; border-color: #536d94; }
html[data-theme="dark"] :is(.button-outline, .small-button):hover { background: #29456d; }
html[data-theme="dark"] .button-primary { color: #fff; }
html[data-theme="dark"] .small-button-danger { color: #ffc0c7; background: #482331; border-color: #9b4d61; }
/* Preserve the approved white application import buttons in both themes. */
html[data-theme="dark"] .subscription-import-actions .subscription-app-happ { background: #fff; color: #292929; border-color: #a8b8ce; }
html[data-theme="dark"] .subscription-import-actions .subscription-app-incy { background: #fff; color: #00552d; border-color: #14b84a; }
html[data-theme="dark"] .admin-page .table-wrap { background: #142238; border-color: #33465f; }
html[data-theme="dark"] .admin-page .admin-table { color: #e7edf7; }
html[data-theme="dark"] .admin-page .admin-table th { color: #d3def0; background: #1d304b; border-color: #425573; }
html[data-theme="dark"] .admin-page .admin-table td { border-color: #33465f; }
html[data-theme="dark"] .admin-page .admin-table tbody tr { background: #142238; }
html[data-theme="dark"] .admin-page .admin-table tbody tr:nth-child(even) { background: #192a42; }
html[data-theme="dark"] .admin-page .admin-table tbody tr:hover { background: #203655; }
html[data-theme="dark"] :is(.admin-dialog, .subscription-dialog) { color: #e7edf7; background: #142238; border-color: #536783; }
html[data-theme="dark"] :is(.admin-dialog, .subscription-dialog)::backdrop { background: #000a; }
html[data-theme="dark"] :is(.dialog-x, .dialog-close) { color: #c3d0e3; background: #203655; border-color: #425573; }
html[data-theme="dark"] :is(.badge, .badge-gray) { color: #c3d0e3; background: #2a394f; border-color: #536783; }
html[data-theme="dark"] .badge-green { color: #86e4bb; background: #183f34; border-color: #397d61; }
html[data-theme="dark"] .badge-red { color: #ffb2bf; background: #482331; border-color: #9b4d61; }
html[data-theme="dark"] .badge-amber { color: #ffd88a; background: #49361d; border-color: #9b783c; }
html[data-theme="dark"] .badge-blue { color: #b5ceff; background: #203c68; border-color: #536d94; }
html[data-theme="dark"] .notice-warning { color: #ffdf9f; background: #382d1c; border-color: #896b38; }
html[data-theme="dark"] .notice-error { color: #ffbec7; background: #3c202b; border-color: #9b4d61; }
html[data-theme="dark"] .notice-success { color: #9eeac9; background: #18382f; border-color: #397d61; }
html[data-theme="dark"] :is(.sync-report-row, .details-row, .balancer-row, .endpoint-row, .connection-row, .plan-details, .guide-security, .subscription-import-notes) { border-color: #33465f; }
html[data-theme="dark"] .sync-report-columns { color: #d3def0; background: #1d304b; }
html[data-theme="dark"] :is(.ssh-fingerprint-help code, .out-provision-card, .subscription-rule-heading .announce-counter) { color: #c3d0e3; background: #192b45; border-color: #425573; }
@media (max-width: 760px) {
  .site-header .header-inner { gap: 10px; }
  .site-header .theme-toggle { display: inline-flex; margin-left: auto; flex-basis: 38px; width: 38px; height: 38px; padding: 8px; }
  .site-header .menu-toggle { margin-left: 0; }
  .admin-topbar-actions { gap: 10px; }
  .admin-topbar-actions .theme-toggle { flex-basis: 36px; width: 36px; height: 36px; padding: 7px; }
}

html[data-theme="dark"] .empty-state { background: #142238; color: #a8b8ce; border-color: #33465f; }
html[data-theme="dark"] .subscription-settings .subscription-settings-section,
html[data-theme="dark"] .subscription-settings > .subscription-app-panel[data-app-panel],
html[data-theme="dark"] .subscription-settings .subscription-routing-details { background: #142238; border-color: #33465f; }
html[data-theme="dark"] .subscription-settings .subscription-common-panel { background: transparent; }
html[data-theme="dark"] .subscription-settings .subscription-app-panel > .subscription-app-panel-head { background: transparent; border-color: #33465f; }
html[data-theme="dark"] .subscription-settings .subscription-settings-intro { color: #a8b8ce; background: #192b45; border-color: #33465f; }
html[data-theme="dark"] .subscription-settings .subscription-announcement-rule { background: #142238; border-color: #33465f; }
html[data-theme="dark"] .subscription-settings .subscription-settings-section .admin-section-head { border-color: #33465f; }
html[data-theme="dark"] .section-kicker { color: #80adff; }
html[data-theme="dark"] :is(.provisioning-status, .ssh-fingerprint-help, .online-users-dialog) { background: #192b45; color: #e7edf7; border-color: #536783; }
html[data-theme="dark"] .menu-toggle { background: #142238; border-color: #536783; }
html[data-theme="dark"] .menu-toggle span { background: #d3def0; }
html[data-theme="dark"] .connection-tags span { background: #203655; color: #b5ceff; }

html[data-theme="dark"] .admin-page .admin-table td,
html[data-theme="dark"] .table-primary { color: #e7edf7; }
html[data-theme="dark"] .admin-page .admin-table .table-secondary { color: #a8b8ce; }

html[data-theme="dark"] :is(.server-node, .access-manager > div, .assignment-item, .online-users-list li) { background: #192b45; color: #e7edf7; border-color: #425573; }
html[data-theme="dark"] .server-node b { color: #e7edf7; }
html[data-theme="dark"] .server-node small { color: #a8b8ce; }
html[data-theme="dark"] .node-flag { background: #29405f; }

@media (max-width: 760px) {
  .site-header .header-inner > .header-actions + .theme-toggle { margin-left: auto; }
}

.admin-breadcrumb {display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.admin-breadcrumb h1 {margin:0;font:inherit;color:inherit}
html[data-theme="dark"] .admin-page :is(.server-edit-form,.endpoint-edit form,.out-provision-ports,.out-provision-port-group,.queue-admin,.announce-preview,.user-traffic-card) {background:#192b45;color:#e7edf7;border-color:#425573}
html[data-theme="dark"] .admin-page :is(.assignment-add select,.assignment-add input,.admin-search input,.admin-search select,.search-row input) {background:#0e1a2c;color:#e7edf7;border-color:#536783}
html[data-theme="dark"] .admin-page .user-edit-tabs button {background:#20304a;color:#b8c9e1;border-color:#536783}
html[data-theme="dark"] .admin-page .user-edit-tabs button[aria-selected="true"] {background:#1767f5;color:#fff;border-color:#4384eb}
html[data-theme="dark"] .admin-page :is(.access-manager > div > b,.assignment-item > span,.endpoint-row > div > b,.endpoint-summary-group b,.ssh-fingerprint-help strong,.queue-admin > b,.announce-preview > p) {color:#e7edf7}
html[data-theme="dark"] .admin-page :is(.balancer-row,.balancer-row code,.endpoint-summary,.endpoint-summary-groups,.endpoint-list-head,.switch-label,.sync-help p,.sync-report-message,.sync-report-name small,.sync-report-detail,.sync-dashboard-foot,.assignment-item small,.announce-variable small,.announce-preview-head label) {color:#a8b8ce}
html[data-theme="dark"] .admin-page :is(.server-edit > summary,.endpoint-edit > summary,.sync-help > summary,.maintenance-summary-action,.sync-summary-action) {color:#80adff}
html[data-theme="dark"] .admin-page :is(.endpoint-count,.sync-help code) {background:#203655;color:#c3d0e3}
html[data-theme="dark"] .admin-page :is(.server-edit,.assignment-item,.user-edit-tabs,.sync-node-columns,.sync-dashboard-foot,.endpoint-row,.server-admin-head,.endpoint-list-head) {border-color:#33465f}
html[data-theme="dark"] .admin-page .admin-table .action-cell > details[open] form {background:#192b45;color:#e7edf7;border-color:#425573}
html[data-theme="dark"] .admin-page .subscription-announcement-rule textarea:focus {background:#0e1a2c;color:#e7edf7}
html[data-theme="dark"] .admin-page .admin-subtabs a {background:transparent;color:#b8c9e1;border-color:transparent}
html[data-theme="dark"] .admin-page .admin-subtabs a.active {background:#1767f5;color:#fff;border-color:#4384eb}
html[data-theme="dark"] .admin-page .admin-subtabs a:hover {background:#29456d;color:#fff}
html[data-theme="dark"] .admin-page .subscription-settings .subscription-routing-panel {background:#192b45;color:#e7edf7;border-color:#425573}
html[data-theme="dark"] .admin-page :is(.inline-form select,.inline-form input:not([type="hidden"]):not([type="checkbox"]),.user-edit-access select) {background:#0e1a2c;color:#e7edf7;border-color:#536783}

/* Server card controls must follow the selected theme, including nested forms. */
html[data-theme="dark"] .admin-page .balancer-panel { background:#192b45; color:#e7edf7; border-color:#33465f; }
html[data-theme="dark"] .admin-page .balancer-panel-head strong { color:#e7edf7; }
html[data-theme="dark"] .admin-page :is(.balancer-panel-body,.balancer-outbound-form,.balancer-traffic) { border-color:#33465f; }
html[data-theme="dark"] .admin-page .balancer-strategy-form { background:#142238; border-color:#425573; }
html[data-theme="dark"] .admin-page .balancer-strategy-form label,
html[data-theme="dark"] .admin-page .balancer-outbound-head,
html[data-theme="dark"] .admin-page .balancer-traffic-head,
html[data-theme="dark"] .admin-page .balancer-traffic-row { color:#c3d0e3; }
html[data-theme="dark"] .admin-page .balancer-outbound-option { background:#142238; color:#d3def0; border-color:#425573; }
html[data-theme="dark"] .admin-page .balancer-strategy-form select { background:#0e1a2c; color:#e7edf7; border-color:#536783; }
html[data-theme="dark"] .admin-page .auto-endpoint-form { background:#192b45; color:#e7edf7; border-color:#425573; }
html[data-theme="dark"] .admin-page .auto-endpoint-form :is(select,input:not([type="hidden"]):not([type="checkbox"])) { background:#0e1a2c; color:#e7edf7; border-color:#536783; }
html[data-theme="dark"] .admin-page .server-admin-card .server-admin-head { border-color:#33465f; }
html[data-theme="dark"] .admin-page .server-card-overview-summary > strong { color:#e7edf7; }
html[data-theme="dark"] .admin-page .server-card-tabs { border-color:#33465f; }
html[data-theme="dark"] .admin-page .balancer-panel-head,
html[data-theme="dark"] .admin-page .balancer-outbound-form { border-color:#33465f; }
html[data-theme="dark"] .admin-page .balancer-outbound-option { background:#142238; color:#d3def0; border-color:#425573; }
html[data-theme="dark"] .admin-page .endpoint-list-head { background:#192b45; color:#d3def0; border-color:#33465f; }
html[data-theme="dark"] .admin-page .endpoint-list-head:hover { background:#203655; border-color:#536783; }
html[data-theme="dark"] .admin-page .endpoint-edit form,
html[data-theme="dark"] .admin-page .server-edit form { background:#192b45; color:#e7edf7; border-color:#425573; }
html[data-theme="dark"] .admin-page .endpoint-row { border-color:#33465f; }
html[data-theme="dark"] .admin-page .endpoint-row:has(+ .endpoint-edit),
html[data-theme="dark"] .admin-page .endpoint-edit { background:#192b45; border-color:#425573; }

/* Sidebar colours depend only on day/night, independently of design density. */
html[data-theme="dark"] .admin-page .admin-sidebar {background:#102338;border-color:#33465f}
html[data-theme="dark"] .admin-page .admin-sidebar .brand {color:#fff}
html[data-theme="dark"] .admin-page .admin-label {color:#a6b9ce}
html[data-theme="dark"] .admin-page .admin-nav a {color:#dbe6f3}
html[data-theme="dark"] .admin-page .admin-nav a:hover {background:#203b57;color:#fff}
html[data-theme="dark"] .admin-page .admin-nav a.active {background:#1767f5;color:#fff}
html[data-theme="dark"] .admin-page :is(.admin-status,.sidebar-logout) {color:#b8c9dc}
html[data-theme="dark"] .admin-page .sidebar-logout {border-color:#38506a}

@media(max-width:760px){.admin-topbar {flex-wrap:wrap;gap:10px}.admin-topbar-actions {flex-wrap:wrap;gap:8px}}

html[data-theme="dark"] .server-help-item { background:#192b45; border-color:#425573; }
html[data-theme="dark"] .server-help-step { color:#9dbfff; background:#203655; }
html[data-theme="dark"] .server-help-port-example span:not([aria-hidden]) { background:#142238; border-color:#425573; }