/* Domain Pulse · Night Console. Shared layout and component system. */
:root {
 --ink:#e8edf2; --muted:#86919c; --dim:#788591; --panel:#151b20;
 --panel-soft:#192127; --line:rgba(255,255,255,.08); --bg:#0d1216;
 --accent:#c8f36c; --accent-strong:#b6eb52; --cyan:#73d4d0;
 --violet:#9b8df8; --orange:#f1a269; --sidebar:250px;
 --surface:var(--panel); --text:var(--ink); --green:var(--accent);
 --green-dark:var(--accent-strong); --green-soft:rgba(200,243,108,.09);
 --blue:var(--cyan); --blue-soft:rgba(115,212,208,.10);
 --red:#ed929c; --red-soft:rgba(237,146,156,.10); --orange-soft:rgba(241,162,105,.10);
 --theme-accent:var(--accent); --theme-accent-hover:var(--accent-strong);
 --theme-ink:var(--ink); --theme-secondary:#bac4cd; --theme-muted:var(--muted);
 --theme-border:var(--line); --theme-input-border:#303a42; --theme-subtle:var(--panel-soft);
 --theme-soft:rgba(200,243,108,.08); --theme-sidebar:#11171b;
 --theme-focus:var(--accent); --theme-ring:rgba(200,243,108,.12);
 --dialog-help-color:#98a7b3; --dialog-help-background:#192127; --dialog-help-border:var(--line);
 --control-height:46px; --scroll-thumb:#354149; --shadow:0 8px 24px #00000015; color-scheme:dark;
}
* { scrollbar-width:thin; scrollbar-color:#354149 transparent; }
body { background:var(--bg); color:var(--ink); font-family:Inter,'Segoe UI','Microsoft YaHei',sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
.icon { fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon [fill^="var("] { fill:var(--panel); }
.icon.cf-cloud-icon { width:20px; height:20px; fill:none; stroke:currentColor; }
.nav-link .icon { width:20px; height:20px; }
::selection { color:var(--bg); background:var(--accent); }
a,button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.4; }
button:focus-visible,a:focus-visible { outline:none; outline-offset:0; }
/* Controls use one existing border; focus never adds a second frame or glow. */
body :is(button,a,input,select,textarea,[tabindex],[role="button"]):focus { outline:none; }
body :is(button,input,select,textarea):focus,body button.btn:focus,body button.btn:active { box-shadow:none; }
body :is(button,a,[role="button"]):focus-visible { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
body .icon-button:focus-visible { color:var(--ink); background:var(--panel-soft); }
body .search-field:focus-within,body .select-wrap:focus-within,body .account-select:focus-within { box-shadow:none; }
body :is(input[type="checkbox"],input[type="radio"]):focus-visible { filter:brightness(1.2); }
input[type=checkbox],input[type=radio],.table-check,.management-select { accent-color:var(--accent); }
[hidden] { display:none!important; }
/* A quiet navigation rail and a full-width working canvas. */
.sidebar { width:var(--sidebar); background:#11171b; border-right:1px solid var(--line); color:var(--ink); box-shadow:none; }
.shell { margin-left:var(--sidebar); min-width:0; }
.brand { padding:26px 24px 24px; }
.brand-mark { background:var(--accent); color:#17200e; border-radius:13px; box-shadow:none; }
.brand-name { color:var(--ink); font-size:23px; letter-spacing:2px; }
.brand-en { color:var(--dim); letter-spacing:2.5px; font-size:10px; }
.nav-caption { color:var(--dim); font-size:10px; letter-spacing:1.4px; margin:24px 24px 10px; }
.nav { padding:0 14px; }
.nav-link { min-height:46px; margin:4px 0; padding:12px 14px; gap:12px; color:#9ba8b2; border:1px solid transparent; border-radius:9px; font-size:14px; font-weight:500; }
.nav-link .icon { width:18px; height:18px; opacity:.8; }
.nav-link:hover { color:var(--ink); background:#1a2329; }
.nav-link.active { color:var(--accent); background:#202a1c; border-color:#c8f31a26; box-shadow:none; }
.nav-link.active::after { width:4px; height:4px; background:var(--accent); border-radius:50%; }
.nav-count { background:#263039; color:#a5b1ba; font-size:11px; min-width:24px; }
.nav-link.active .nav-count { color:var(--accent); background:#c8f36c13; }
.workspace { border:1px solid var(--line); border-radius:12px; background:#151d22; padding:16px; }
.workspace-top { color:#c9d2da; font-size:12px; }
.workspace p { color:var(--muted); font-size:12px; line-height:1.8; }
.workspace-link { color:var(--accent); font-size:12px; }
.sidebar-footer { color:var(--dim); font-size:11px; }
.status-dot { background:currentColor; }
.topbar { min-height:72px; background:#11171be8; border-bottom:1px solid var(--line); padding:0 30px; box-shadow:none; }
.breadcrumb { color:var(--muted); font-size:12px; gap:12px; }
.breadcrumb .current { color:var(--ink); font-size:14px; font-weight:500; }
.breadcrumb>.icon { color:var(--dim); width:15px; }
.environment { color:var(--muted); font-size:11px; }
.tool-divider { background:var(--line); }
.icon-button { color:var(--muted); border-radius:8px; }
.icon-button:hover { color:var(--ink); background:var(--panel-soft); }
.profile { color:var(--ink); }
.profile-name { color:#bec8d1; font-size:12px; }
.avatar { border:2px solid #303b42; width:30px; height:30px; }
.content { padding:28px 30px 0; width:100%; max-width:none; gap:22px; }
.footer { padding:24px 0; color:var(--dim); font-size:11px; line-height:1.8; }
.footer-right { color:var(--dim); gap:18px; }
.footer button,.footer a { color:var(--muted); }
/* Each list owns one command area: title, actions, then search. */
.panel,.provider-toolbar,.tool-card,.mini-card,.metric { background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.list-panel { overflow:hidden; }
.list-panel-heading { display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; padding:22px; min-height:88px; border-bottom:1px solid var(--line); background:transparent; }
.list-title { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-right:4px; }
.list-title h2,.panel-title { color:var(--ink); font-size:18px; font-weight:600; letter-spacing:.2px; }
.count-pill { background:#ffffff05; color:var(--muted); border:1px solid var(--line); border-radius:5px; font-size:11px; padding:4px 7px; white-space:nowrap; }
.list-tools { display:flex; flex-wrap:wrap; gap:7px; margin:0; }
.list-heading-filters { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.filter-controls { gap:8px; }
.search-field { width:240px; min-height:40px; border-radius:8px; border:1px solid #2b363e; background:#10171c; color:var(--muted); box-shadow:none; }
.search-field input { color:var(--ink); background:transparent; font-size:13px; }
.search-field input::placeholder { color:var(--dim); }
.search-field:focus-within { border-color:#52616b; box-shadow:none; }
.select-wrap,.account-select { background:#10171c; border:1px solid #2b363e; border-radius:8px; color:#bec8d1; min-height:40px; box-shadow:none; }
.select-wrap select { color:#bec8d1; background:transparent; font-size:13px; padding:10px 34px 10px 12px; }
.select-wrap .icon { color:var(--dim); }
select option { background:#192127; color:var(--ink); }
/* Buttons have a clear hierarchy and consistent targets. */
.btn,.list-tools .btn,.list-panel-heading .btn { min-height:39px; border-radius:8px; padding:9px 13px; border:1px solid #354149; background:#1b242b; color:#c6d0d8; font-size:13px; font-weight:500; line-height:1.3; gap:7px; box-shadow:none; }
.btn:hover { background:#232f36; color:var(--ink); border-color:#4a5963; transform:none; }
.btn-primary,.list-tools .btn-primary,.list-panel-heading .btn-primary { color:#16200b; background:var(--accent); border-color:var(--accent); font-weight:650; box-shadow:none; }
.btn-primary:hover { color:#101a07; background:var(--accent-strong); border-color:var(--accent-strong); }
.btn-danger,.list-tools .btn-danger,.list-panel-heading .btn-danger { color:#ed929c; background:#ed929c08; border-color:#ed929c33; }
.btn-danger:hover { color:#ffb4bc; background:#ed929c16; border-color:#ed929c66; }
.btn-text,.btn.btn-text,.footer .btn { color:var(--accent); border-color:transparent; background:transparent; box-shadow:none; }
.btn.is-active { color:var(--accent); background:var(--green-soft); border-color:#c8f36c55; }
.row-actions { gap:6px; flex-wrap:wrap; justify-content:center; }
.website-action,.task-action,.row-action-link,.monitor-action,.cluster-action,.cf-record-count,.ssl-mode-button,.cluster-security-trigger { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:6px 9px; border:1px solid #334047; background:#1a242a; border-radius:6px; color:#c5d4de; font-size:12px; font-weight:500; line-height:1.35; box-shadow:none; white-space:nowrap; }
.website-action:hover,.task-action:hover,.row-action-link:hover,.monitor-action:hover,.cluster-action:hover,.cf-record-count:hover,.ssl-mode-button:hover,.cluster-security-trigger:hover:not(:disabled) { background:#253129; border-color:#c8f36c55; color:var(--accent); }
.website-action.danger,.task-action.danger,.row-action-link.danger,.cluster-action.danger,.cf-delete-link { color:#ed929c; background:#ed929c08; border-color:#ed929c33; }
.cf-rules-link { color:var(--cyan); background:transparent; border:0; }
.cluster-security-trigger.is-applied { color:var(--muted); background:#ffffff04; border-color:var(--line); }
.cluster-security-trigger.is-running { color:var(--cyan); border-color:#73d4d044; background:#73d4d010; }
/* Data density is controlled by content; no decorative oversized columns. */
.data-table { color:#b3bfc9; border-collapse:collapse; }
.list-panel .data-table th,.monitor-table .data-table th,.compact-table th,.dialog-data-table th,.dns-table th,.cf-rule-table th,.cf-result-table th,.probe-table th { color:#83939f; background:#11191f; border-color:var(--line); padding-top:15px; padding-bottom:15px; font-size:12px; font-weight:500; letter-spacing:.3px; }
.list-panel .data-table td,.monitor-table .data-table td,.compact-table td,.dialog-data-table td,.dns-table td,.cf-rule-table td,.cf-result-table td,.probe-table td { color:#b9c5ce; background:transparent; border-color:var(--line); padding-top:18px; padding-bottom:18px; font-size:13px; }
.data-table tbody tr { transition:background .12s ease; }
.data-table tbody tr:hover { background:#1a242b; }
.data-table tbody tr.selected { background:#c8f36c08; }
.data-table .id-cell { color:var(--dim); font-size:12px; font-variant-numeric:tabular-nums; }
.site-cell strong,.data-table .site-cell strong,.website-name,.domain-link,.cf-domain-name,.ns-domain-name,.website-domain,.cluster-server-name { color:var(--ink); font-size:14px; font-weight:500; }
.domain-copy-button,.monitor-domain-copy { color:var(--ink); }
.domain-copy-button:hover,.monitor-domain-copy:hover { color:var(--accent); background:#c8f36c09; }
.datetime,.dns-lines,.expiry,.target-address,.execution-mode,.provider-type,.ssl-cell { color:#b9c5ce; font-size:13px; }
.datetime-sub,.expiry-note,.site-cell small,.task-type-label,.cell-note,.website-pool-note { color:var(--dim); font-size:11px; line-height:1.7; }
.target-label { color:var(--dim); }
.key-cell code { color:var(--muted); background:#10171c; border:1px solid var(--line); padding:5px 7px; border-radius:5px; }
.badge { border-radius:5px; font-size:11px; font-weight:500; color:var(--accent); background:#c8f36c0d; border-color:#c8f36c18; }
.badge.blue,.badge.outline { color:var(--cyan); background:#73d4d00d; border-color:#73d4d018; }
.badge.orange,.badge.warning { color:var(--orange); background:#f1a26910; border-color:#f1a26922; }
.badge.red,.badge.danger { color:#ed929c; background:#ed929c10; border-color:#ed929c22; }
.badge.gray,.badge.neutral { color:var(--muted); background:#ffffff07; border-color:var(--line); }
.expiry.is-soon,.expiry.soon,.expiry.expiring,.namesilo-table .is-expiring .expiry { color:#ed929c; }
.table-footer { padding:16px 20px; border-top:1px solid var(--line); background:#121a1f; color:var(--muted); font-size:12px; gap:14px; }
.selection-count,.result-count { color:var(--muted); font-size:12px; }
.selection-count strong,.website-pool-ratio { color:var(--accent); }
.pagination { gap:5px; }
.pagination button,.pagination select { color:var(--muted); background:#192127; border:1px solid #303b42; border-radius:6px; min-height:32px; font-size:12px; }
.pagination button:hover:not(:disabled) { background:#263229; color:var(--accent); }
.pagination button.active,.pagination button.active:hover { color:#16200b; background:var(--accent); border-color:var(--accent); }
.pagination button:disabled { background:transparent; }
.table-scroll-hint { color:var(--muted); background:#11191f; border-color:var(--line); }
.empty-state { color:var(--dim); min-height:210px; }
.empty-state strong { color:#bdc8d0; font-size:15px; font-weight:500; }
.empty-state .icon { color:var(--dim); }
.provider-toolbar { padding:18px 20px; gap:16px; }
.account-icon,.account-icon.namesilo { background:#c8f36c0b; color:var(--accent); border:1px solid #c8f36c14; border-radius:9px; }
.account-select { color:var(--ink); padding:10px 12px; font-size:13px; }
.account-picker-label,.account-online,.provider-stat { color:var(--muted); font-size:12px; }
.provider-stat strong { color:var(--ink); font-size:25px; font-weight:500; }
.provider-right { color:var(--muted); gap:18px; }
.provider-logo.cloudflare { color:var(--orange); }
.provider-logo.namesilo { color:var(--cyan); }
.provider-right .tool-divider { background:var(--line); }
/* Dialogs are focused work surfaces with fixed header/footer and one scroll body. */
.modal-backdrop { padding:26px; background:#02070bd1; backdrop-filter:blur(6px); }
.modal { width:min(100%,680px); max-height:calc(100dvh - 52px); background:var(--panel); color:var(--ink); border:1px solid #364148; border-radius:16px; box-shadow:0 32px 110px #0009,0 0 0 1px #ffffff03; overflow:hidden; }
.modal-head { min-height:78px; padding:23px 26px; border-bottom:1px solid var(--line); background:#182127; gap:20px; }
.modal-head h2 { color:var(--ink); font-size:20px; font-weight:600; letter-spacing:.3px; line-height:1.5; }
.modal-head .icon-button { width:32px; height:32px; background:#ffffff05; border:1px solid var(--line); border-radius:8px; color:var(--muted); }
.modal-head .icon-button:hover { color:var(--ink); background:#ffffff10; }
.modal-body { padding:25px 26px; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; color:#b5c1cb; }
.modal-actions { padding:17px 26px; border-top:1px solid var(--line); background:#121a20; gap:10px; }
.modal-actions .btn { min-height:41px; padding:10px 19px; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.form-field { min-width:0; color:#bcc8d2; font-size:13px; font-weight:500; margin-bottom:18px; gap:8px; }
.form-field label,.form-field>span { color:#b9c5cf; font-weight:500; }
.form-field input,.form-field select,.form-field textarea,.login-card input { width:100%; min-width:0; min-height:43px; padding:11px 12px; background:#10171c; color:var(--ink); border:1px solid #34414a; border-radius:8px; font-size:14px; font-weight:400; line-height:1.5; box-shadow:none; transition:border-color .15s,box-shadow .15s; }
.form-field input:hover,.form-field select:hover,.form-field textarea:hover { border-color:#4b5b66; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.login-card input:focus { outline:none; border-color:#52616b; box-shadow:none; }
.form-field input::placeholder,.form-field textarea::placeholder { color:var(--dim); opacity:1; font-size:13px; }
.form-field input[readonly] { color:var(--muted); background:#172027; }
.form-field input:disabled,.form-field select:disabled { opacity:.5; }
.form-field input[type=checkbox],.form-field input[type=radio] { min-height:auto; width:auto; padding:0; }
.form-field small,.modal .modal-body .form-field small { color:var(--muted); font-size:12px; font-weight:400; line-height:1.7; }
.form-field textarea { min-height:110px; resize:vertical; }
.modal-description,.modal-note,.modal .modal-body .dialog-help { color:#a3b0ba; background:transparent; border:0; border-radius:0; font-size:13px; font-weight:400; line-height:1.75; padding:0; }
.modal .modal-body .dialog-help { margin-bottom:18px; }
.modal .modal-body .dialog-help> :is(.modal-description,.modal-note,.ssl-mode-help,.cluster-modal-caption,.cluster-protocol-card,.ns-help,.ns-payment-help,.cf-rule-hint,.cf-summary-note,.probe-caption) { color:inherit; background:transparent; border:0; padding:0; margin:0; font:inherit; }
.modal .modal-body .dialog-help strong { color:#cbd5dc; font-weight:500; }
.modal .modal-body .help-list { color:#96a5b1; font-size:13px; line-height:1.85; }
.modal .form-error,#form-error,.server-error { color:#f3a1aa; background:#e8849010; border:1px solid #e8849033; border-radius:8px; font-size:13px; }
.detail-list>div { border-color:var(--line); color:var(--muted); font-size:13px; padding:14px 0; }
.detail-list dd,.detail-list strong { color:var(--ink); }
.modal-output,.mysql-operation-result,.cluster-job-output { background:#0c1318; color:#bac9d3; border-color:var(--line); border-radius:8px; }
.pool-item,.cf-rule-item,.cf-conditional,.cf-progress-panel,.ns-plan,.ns-picker-heading,.cf-switch-row { background:var(--panel-soft); color:#b8c5ce; border-color:var(--line); border-radius:9px; }
.pool-item strong,.cf-rule-heading,.cf-rule-item strong,.cf-switch-copy strong,.cf-progress-title strong,.ns-picker-label { color:#ccd6df; }
.cf-switch-copy small,.cf-domain-meta,.ns-domain-meta,.cf-progress-caption,.cf-redirect-count { color:var(--muted); }
.cf-progress-title span,.ns-plan-amount,.ns-plan-amount span { color:var(--accent); }
.cf-result-wrap,.cf-execution-actions,.cf-result-table td,.ns-picker,.ns-picker-label,.dns-table,.cf-rule-table,.admin-reauth,.cluster-verification { border-color:var(--line); }
.cf-result-table td:first-child,.mysql-connection-row strong { color:var(--ink); }
.cf-progress-track,.cf-progress-track::-webkit-progress-bar { background:#2b353b; }
.cf-progress-track::-webkit-progress-value { background:var(--accent); }
.cf-progress-track::-moz-progress-bar { background:var(--accent); }
.cf-switch-control input:checked+.cf-switch-track,.toggle.on { background:var(--accent); }
.toggle { background:#36424a; }
.ns-expiry-filters .btn[aria-pressed=true] { background:var(--green-soft); color:var(--accent); border-color:#c8f36c55; }
.live-confirm { background:#10191e; border-color:#39464e; color:#becbd4; border-radius:9px; }
.live-confirm:has(input:checked) { background:#c8f36c09; border-color:#c8f36c66; }
.live-confirm small,.totp-setup p,.website-clear-password { color:var(--muted); }
.website-rotation-preview { background:#10191e; border:1px solid var(--line); border-radius:10px; color:var(--muted); padding:20px; }
.website-rotation-preview strong { color:var(--accent); }
.website-job-link { color:var(--cyan); background:#73d4d010; border-color:#73d4d020; }
.website-job-link.is-blocked { color:var(--orange); background:#f1a26912; border-color:#f1a26925; }
.website-job-message { background:#10191e; border:1px solid var(--line); border-left:2px solid var(--cyan); color:#b4c2cd; border-radius:8px; padding:15px; }
.website-job-actions { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.cluster-connection-note { background:#121b21; border-color:var(--line); color:var(--muted); }
.cluster-connection-note strong { color:var(--cyan); font-weight:500; }
.cluster-sub,.cluster-load span,.cluster-load small,.cluster-last-sync,.cluster-legend,.cluster-check,.cluster-key-upload { color:var(--muted); }
.cluster-ip { color:#c0cdd7; background:transparent; }
.cluster-ip:hover { color:var(--accent); background:var(--green-soft); }
.cluster-bandwidth .rx { color:var(--cyan); }
.cluster-bandwidth .tx { color:var(--violet); }
.cluster-meter strong,.cluster-load strong { color:#dce5ec; font-weight:500; }
.cluster-meter progress,.cluster-meter progress::-webkit-progress-bar { background:#2a353d; }
.cluster-meter progress::-webkit-progress-value { background:var(--accent); }
.cluster-meter progress::-moz-progress-bar { background:var(--accent); }
.cluster-meter progress.warm::-webkit-progress-value { background:var(--orange); }
.cluster-meter progress.hot::-webkit-progress-value { background:#ed929c; }
.cluster-reboot { color:var(--orange); background:#f1a26910; border-color:#f1a26933; }
.cluster-terminal-avatar { color:var(--cyan); background:#73d4d010; border-color:#73d4d030; }
.cluster-terminal-gate strong,.cluster-verification h3 { color:var(--ink); }
.cluster-terminal { border-color:#34424b; background:#080e12; border-radius:10px; }
.cluster-terminal-output { color:#c6d2da; background:#080e12; }
.cluster-terminal-input { color:var(--accent); background:transparent; }
.cluster-shortcut,.cluster-shortcut-item { color:#b5c4cd; background:#172128; border-color:var(--line); }
.mysql-manager-toolbar,.mysql-connection-row { background:var(--panel-soft); border-color:var(--line); }
/* Scheduler state is information, not an endless busy animation. */
.tasks-table .data-table { min-width:1230px; }
.task-state-note { display:block; max-width:155px; margin:7px auto 0; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-next-time { display:block; font-size:12px; font-variant-numeric:tabular-nums; color:var(--cyan); }
.task-form-intro { margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.eyebrow { display:block; color:var(--accent); font-size:10px; font-weight:600; letter-spacing:1.8px; margin-bottom:7px; }
.task-form-intro p { color:var(--muted); font-size:13px; margin:0; }
.task-schedule-fields { padding-top:18px; margin-top:4px; border-top:1px solid var(--line); }
.task-delete-names { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.task-delete-names span { background:#ffffff05; border:1px solid var(--line); color:#c6d1da; padding:6px 10px; border-radius:6px; font-size:12px; }
.task-log-summary { color:var(--muted); border-color:var(--line); background:transparent; margin-bottom:18px; }
.task-log-summary strong { display:block; color:var(--ink); font-size:16px; font-weight:500; }
.task-log { margin:0; padding:0; list-style:none; }
.task-log-item { padding:15px 0 15px 18px; border-left:1px solid #334047; border-bottom:1px solid var(--line); margin:0 0 0 4px; }
.task-log-item>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.task-log-item time { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.task-log-item p { color:#bdcbd5; font-size:13px; line-height:1.8; margin:8px 0 0; }
.task-log-status { color:var(--cyan); font-size:11px; }
/* Support surfaces and notices follow the same material and type scale. */
.info-strip { background:#151e20; color:#8c9da7; border:1px solid var(--line); border-radius:10px; padding:15px 18px; line-height:1.8; font-size:12px; }
.info-strip strong,.info-strip>.icon { color:var(--cyan); font-weight:500; }
.mini-card { padding:20px; gap:15px; border-radius:12px; }
.mini-card h3 { color:#cbd5dd; font-size:14px; font-weight:500; }
.tool-card p,.mini-card p,.toolbox-footer,.mysql-empty,.mysql-connection-row span,.panel-subtitle { color:var(--muted); font-size:12px; line-height:1.8; }
.tool-card { padding:23px; transition:border-color .15s,background .15s; }
.tool-card:hover,.tool-card:focus-visible { background:#192229; border-color:#647846; box-shadow:none; }
.tool-card h3 { color:var(--ink); font-size:16px; font-weight:500; }
.tool-card-icon,.tool-card-icon.blue,.mini-card-icon,.mini-card-icon.blue,.metric-icon,.metric-icon.blue,.activity-icon,.activity-icon.blue { color:var(--accent); background:#c8f36c0b; border:1px solid #c8f36c14; border-radius:10px; }
.tool-card-footer,.toolbox-footer,.metric-footer { border-color:var(--line); }
.favorite-button.is-favorite { color:var(--accent); }
.metric::before,.legend-square { background:var(--accent); }
.metric-value,.chart-current,.health-legend strong { color:var(--ink); font-weight:500; }
.metric-label,.chart-legend,.chart-caption,.chart-bottom,.activity-time { color:var(--muted); }
.chart-line,.chart-focus-circle,.donut-green { stroke:var(--accent); }
#chart-fill stop { stop-color:var(--accent); }
.chart-grid { stroke:#ffffff08; }
.chart-label { fill:var(--muted); }
.chart-tooltip-bg { fill:#283329; }
.segmented { background:#0f171c; border-color:var(--line); }
.segmented button { color:var(--muted); }
.segmented button.active { color:var(--accent); background:#263023; box-shadow:none; }
.toast { color:#d8e5d0; background:#1b2626; border:1px solid #c8f36c44; border-radius:12px; padding:19px 23px; box-shadow:0 22px 70px #0008; max-width:min(520px,calc(100vw - 40px)); overflow:hidden; scrollbar-width:none; }
.toast.warning { color:#f2c39e; border-color:#f1a26955; background:#28211d; }
.toast::-webkit-scrollbar { display:none; }
.notifications-popover { color:var(--ink); background:var(--panel); border:1px solid #34414a; border-radius:14px; box-shadow:0 28px 80px #0008; }
.notifications-popover p,.notification-meta { color:var(--muted); }
.server-loading::after { color:var(--accent); background:var(--bg); border-color:var(--line); }
.login-page { background:radial-gradient(ellipse at 50% 0,#26322255,transparent 65%),var(--bg); }
.login-card { width:min(440px,calc(100vw - 36px)); padding:36px; border:1px solid #344047; border-radius:18px; background:var(--panel); box-shadow:0 30px 100px #0005; }
.login-brand { color:var(--accent); letter-spacing:2px; }
.login-card h1 { color:var(--ink); font-weight:550; font-size:26px; }
.login-card p,.login-card small { color:var(--muted); }
.login-card label { color:#b7c5cf; font-size:13px; }
.login-card button { color:#17200c; background:var(--accent); border:1px solid var(--accent); border-radius:8px; min-height:44px; }
@media(min-width:1800px) { .content { padding-left:36px; padding-right:36px; } .list-panel-heading { gap:14px; } }
@media(max-width:1280px) { .content { padding:22px 20px 0; } .topbar { padding-left:20px; padding-right:20px; } .list-panel-heading { padding:18px; gap:12px; } .list-heading-filters { flex:1 1 330px; justify-content:flex-end; } }
@media(max-width:1050px) and (min-width:761px) { :root { --sidebar:220px; } .nav-link { padding:11px; font-size:13px; } .brand { padding-left:22px; } .list-heading-filters { margin-left:0; justify-content:flex-start; } }
@media(max-width:760px) {
 .sidebar { width:250px; } .shell { margin-left:0; } .topbar { min-height:64px; padding:0 16px; } .content { padding:16px 12px 0; gap:16px; }
 .sidebar-scrim { background:#0009; backdrop-filter:blur(2px); } .sidebar-close { color:var(--muted); }
 .breadcrumb { gap:9px; } .topbar-tools { gap:9px; } .environment,.tool-divider { display:none; }
 .panel,.provider-toolbar { border-radius:12px; } .list-panel-heading { padding:17px 14px; gap:12px; }
 .list-title { width:auto; max-width:100%; gap:8px; } .list-title h2 { font-size:17px; }
 .list-tools { order:1; width:auto; flex-wrap:wrap; } .list-heading-filters { order:2; width:100%; margin:0; flex:1 1 100%; justify-content:flex-start; gap:8px; }
 .search-field { width:auto; flex:1 1 170px; min-width:0; } .filter-controls .select-wrap { min-width:115px; flex:0 1 auto; }
 .list-tools .btn,.list-title .btn { padding:9px 11px; font-size:12px; min-height:38px; }
 .provider-toolbar { padding:15px; } .account-picker { width:100%; } .account-select { min-width:0; flex:1; max-width:100%; }
 .account-picker-label { display:none; } .provider-right { gap:12px; } .table-footer { padding:14px; gap:14px; }
 .modal-backdrop { padding:12px; } .modal { max-height:calc(100dvh - 24px); border-radius:13px; width:100%; }
 .modal-head { padding:18px; min-height:68px; } .modal-head h2 { font-size:18px; } .modal-body { padding:20px 18px; scrollbar-gutter:auto; }
 .modal-actions { padding:15px 18px; } .form-row { grid-template-columns:1fr; gap:0; } .form-field { margin-bottom:17px; }
 .form-field input,.form-field select,.form-field textarea { font-size:16px; min-height:44px; }
 .modal .modal-body .dialog-help { padding:0; font-size:13px; } .task-log-summary { gap:14px; flex-wrap:wrap; }
 .info-strip { padding:13px 14px; font-size:12px; } .footer { padding:20px 3px; gap:10px; font-size:10px; } .footer-right { gap:12px; }
 .mini-card { padding:17px; } .login-card { padding:28px 24px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation-duration:.01ms!important; } }
/* Explicit component scope keeps legacy page-specific selectors from leaking. */
body .modal .modal-head { background:#182127; border-color:var(--line); padding:23px 26px; }
body .modal .modal-head h2 { color:var(--ink); font-weight:600; font-size:20px; }
body .modal .modal-actions { background:#121a20; border-color:var(--line); padding:17px 26px; }
body .modal .form-field { color:#bcc8d2; font-weight:500; gap:8px; margin-bottom:18px; }
body .modal .form-field :is(input,select,textarea) { color:var(--ink); background:#10171c; border-color:#34414a; padding:11px 12px; min-height:43px; }
body .modal .form-field :is(input,select,textarea):focus { border-color:#52616b; box-shadow:none; outline:none; }
body .modal .form-field input:is([type=checkbox],[type=radio]) { min-height:auto; width:auto; }
body .modal .form-field :is(input,select):not([type=checkbox],[type=radio]) { height:var(--control-height); min-height:var(--control-height); }
body .modal .form-field input[readonly] { color:var(--muted); background:#172027; }
body .modal .modal-body { scrollbar-color:var(--scroll-thumb) transparent; }
body .modal hr { height:0; border:0; border-top:1px solid var(--line); margin:18px 0; }
body .modal :is(.modal-output,.mysql-operation-result,.cluster-job-output) { background:#0c1318; color:#c4d2dc; border-color:var(--line); }
body .modal :is(.cf-result-wrap,.cf-result-table,.cf-result-table tbody) { background:#10171c; border-color:var(--line); }
body .modal :is(.cf-result-table,.dns-table,.cf-rule-table,.probe-table) :is(th,td) { border-color:var(--line); }
body .modal :is(.cf-result-empty,.dns-empty,.probe-empty) { color:var(--muted); }
body .modal .form-field small { color:var(--muted); font-size:12px; font-weight:400; }
body .modal .modal-actions .btn { font-size:13px; min-width:82px; padding:10px 16px; }
body .data-table td>strong,body .data-table .site-cell strong,body .cluster-table .cluster-server-name { color:var(--ink); font-weight:500; }
body .cluster-table .cluster-security-trigger { font-size:11px; padding:5px 4px; min-height:29px; }
body .brand-en { color:var(--dim); }
body .modal .dialog-data-table { background:transparent; }
@media(max-width:760px) {
 :root { --control-height:48px; }
 body .modal .modal-head { padding:18px; } body .modal .modal-head h2 { font-size:18px; }
 body .modal .modal-actions { padding:15px 18px; } body .modal .form-field :is(input,select,textarea) { font-size:16px; min-height:44px; }
}
body table thead { background:#11191f; }
body .cluster-table .data-table { min-width:1100px; }
body .cluster-status[data-state='online'],body .cluster-status.is-online { color:var(--cyan); background:#73d4d00d; border-color:#73d4d026; }
body .data-table thead,body .modal table thead { background:#11191f; }
body .tasks-table .data-table { width:100%; min-width:1120px; table-layout:fixed; }
body .tasks-table .data-table th:nth-child(1) { width:3%; }
body .tasks-table .data-table th:nth-child(2) { width:4%; }
body .tasks-table .data-table th:nth-child(3) { width:13%; }
body .tasks-table .data-table th:nth-child(4) { width:13%; }
body .tasks-table .data-table th:nth-child(5) { width:11%; }
body .tasks-table .data-table th:nth-child(6) { width:11%; }
body .tasks-table .data-table th:nth-child(7) { width:9%; }
body .tasks-table .data-table th:nth-child(8) { width:13%; }
body .tasks-table .data-table th:nth-child(9) { width:23%; }
body .tasks-table .data-table :is(th,td) { padding-left:8px; padding-right:8px; }
body .tasks-table .task-actions { gap:5px; }
body .tasks-table .task-next-time { white-space:normal; line-height:1.7; }
body .task-log .task-log-item { background:transparent; border-color:var(--line); padding:15px 0 15px 18px; }
body .task-log .task-log-item p { color:#bdcbd5; font-size:13px; line-height:1.8; }
body .task-log .task-log-item time { color:var(--muted); font-size:11px; }
body .task-log-summary .eyebrow { color:var(--accent); }
body .tasks-table .task-actions { display:grid; grid-template-columns:repeat(3,max-content); justify-content:center; }
body .ssl-mode-button.flexible { color:var(--orange); background:#f1a26910; border-color:#f1a26933; }
body .cluster-status { color:var(--cyan); background:#73d4d00d; border:1px solid #73d4d026; }
body .cluster-status.offline { color:#ed929c; background:#ed929c10; border-color:#ed929c25; }
body .cluster-status.shutdown { color:var(--muted); background:#ffffff06; border-color:var(--line); }
body .cluster-status.installing { color:var(--orange); background:#f1a26910; border-color:#f1a26925; }
body .notifications-popover h3 { color:var(--ink); }
body .notification-events legend,body .notification-events label { color:#a8b6c1; }
body .notification-events input { accent-color:var(--accent); }
body .modal .cf-switch-row { color:#b8c5ce; background:var(--panel-soft); border-color:var(--line); }
body .modal .cf-switch-track { background:#36434d; border-color:#495761; }
body .modal .cf-switch-control input:checked+.cf-switch-track { background:var(--accent); border-color:var(--accent); }
body .modal .monitor-node-pool-row { background:var(--panel-soft); border-color:var(--line); color:#b8c5ce; }
body .modal .pool-node-enabled { color:var(--muted); }
body .modal .schedule-scope-option,body .modal .schedule-domain-option,body .modal .schedule-trigger-grid,body .modal .schedule-triggers { background:var(--panel-soft); color:#b8c5ce; border-color:var(--line); }
body .modal .schedule-scope-option:has(input:checked) { background:#c8f36c0a; border-color:#c8f36c44; }
body .modal .probe-subject,body .modal .probe-summary-card,body .modal .probe-source,body .modal .schedule-picker-head,body .modal .schedule-domain-choice,body .modal .renew-estimate { background:var(--panel-soft); color:#b8c5ce; border-color:var(--line); }
body .modal .schedule-domain-choice:has(input:checked) { background:#c8f36c0a; border-color:#c8f36c44; }
body .modal .cf-proxy-toggle { color:var(--muted); background:#26323a; border-color:#3c4952; }
body .modal .cf-proxy-toggle.is-proxied { color:var(--orange); background:#f1a26910; border-color:#f1a26944; }
body .modal .cf-execution-actions button,body .modal .ns-picker-heading button,body .modal .schedule-picker-tools button { color:#becbd4; background:#1b252c; border-color:#34414a; }
body .monitor-action.monitor-pin-up { color:var(--accent); background:#c8f36c0a; border-color:#c8f36c33; }
body .cluster-table .cluster-action { font-size:11px; padding:5px 4px; min-height:29px; }
body .cluster-table .cluster-panel-installed { display:inline-block; max-width:100%; white-space:normal; color:var(--accent); font-size:11px; line-height:1.6; }
/* Shared headings and tables, including responsive dialog cards. */
body .modal :is(h3,h4),body .modal :is(.dns-toolbar-copy,.mysql-manager-toolbar,.cf-rules-toolbar,.ns-picker-heading) strong { color:var(--ink); }
body .modal .dns-toolbar-copy strong { font-size:16px; font-weight:600; }
body .modal .dns-toolbar-copy strong span { display:inline-block; margin-left:8px; padding:2px 8px; color:#b9c6cf; background:#ffffff06; border:1px solid var(--line); border-radius:5px; font-size:12px; font-weight:500; vertical-align:middle; }
body :is(.data-table-wrap,.dns-table-wrap,.cf-rule-table-wrap,.probe-table-wrap,.cf-result-wrap,.ns-picker,.mysql-connection-list,.provider-right) { border-color:var(--line); }
body :is(.data-table,.compact-table,.dialog-data-table,.dns-table,.cf-rule-table,.cf-result-table,.probe-table) { border-color:var(--line); background:transparent; }
body :is(.data-table,.compact-table,.dialog-data-table,.dns-table,.cf-rule-table,.cf-result-table,.probe-table) :is(thead,tbody,tr,th,td) { border-color:var(--line); }
body :is(.data-table,.compact-table,.dialog-data-table,.dns-table,.cf-rule-table,.cf-result-table,.probe-table) th { color:#a3b0bc; background:#11191f; }
body .modal :is(.dialog-data-table,.dns-table,.cf-rule-table,.cf-result-table,.probe-table) td { color:#bfccd5; background:transparent; }
body .modal .dialog-data-table :is(strong,.cf-page-rule-cell strong) { color:var(--ink); }
body .modal .dialog-data-table .cf-page-rule-cell span { color:#a3b0bc; }
body .modal.cf-rules-dialog { width:min(1040px,100%); }
.cf-rule-sources { display:grid; gap:5px; line-height:1.6; overflow-wrap:anywhere; white-space:normal; }
.cf-rule-kind { display:block; color:var(--ink); white-space:nowrap; }
.cf-rule-state { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
body .modal .cf-rule-table { table-layout:fixed; }
body .modal .cf-rule-table th:nth-child(1) { width:27%; }
body .modal .cf-rule-table th:nth-child(2) { width:16%; }
body .modal .cf-rule-table th:nth-child(3) { width:42%; }
body .modal .cf-rule-table th:nth-child(4) { width:15%; }
body .modal .cf-rule-table .cf-page-rule-cell { min-width:0; }
body .modal .dialog-data-table :is(.dns-empty,.cf-result-empty),body .modal .dialog-data-table .dialog-table-empty td { color:var(--muted); }
body .modal .dialog-data-table td::before { color:#9baab6; }
body .modal fieldset,body .modal .notification-events { border-color:var(--line); }
body .modal .selected-domains>span { color:#bfccd5; background:var(--panel-soft); border-color:var(--line); }
body .modal .dialog-help { padding:0; border:0; border-radius:0; background:transparent; }
body .modal .dialog-help:empty { display:none; }
@media(max-width:760px) {
 body .modal .dialog-data-table tbody tr { border-color:var(--line); background:var(--panel-soft); }
 body .modal .dialog-data-table .dialog-table-empty { border:0; background:transparent; }
}

/* Keep selection and the primary name together in compact lists. */
body .list-panel:is(.monitor-table,.websites-table,.admins-table,.cloudflare-table) .data-table :is(th,td):first-child{width:36px;padding-left:10px;padding-right:6px;text-align:center}
body .list-panel:is(.monitor-table,.websites-table,.admins-table,.cloudflare-table) .data-table :is(th,td):nth-child(2){padding-left:6px;text-align:left}
body .monitor-table .data-table td:nth-child(2) .site-cell{justify-content:flex-start}
body .list-panel:is(.monitor-table,.websites-table,.cloudflare-table) .data-table th:last-child{width:auto}