/* Domain Pulse / Workspace UI. Loaded after style.css; behavior stays in the existing scripts. */
:root {
  --bg: #0d1216;
  --surface: #151b20;
  --text: #e8edf2;
  --muted: #86919c;
  --line: rgba(255,255,255,.08);
  --green: #c8f36c;
  --green-dark: #b6eb52;
  --green-soft: rgba(200,243,108,.09);
  --blue: #73d4d0;
  --blue-soft: rgba(115,212,208,.10);
  --orange: #f1a269;
  --orange-soft: rgba(241,162,105,.10);
  --red: #ed929c;
  --red-soft: rgba(237,146,156,.10);
  --sidebar: 226px;
  --shadow: 0 3px 16px rgba(28, 43, 78, .035);
  --workspace-gutter: 20px;
  --section-gap: 16px;
  font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: 16px;
  color: var(--text);
}

body { background: var(--bg); line-height: 1.6; }
button, input, textarea, select { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline:none; outline-offset:0; }
::selection { background: var(--panel-soft); color: #223ea0; }
.mono, .datetime, .metric-value, .id-cell, .chart-current { font-variant-numeric: tabular-nums; }
.icon { stroke-width: 1.8; }

/* Navigation */
.sidebar {
  padding: 28px 14px 18px;
  background: #172139;
  border-right: 0;
  color: #e9eefb;
}
.brand { gap: 12px; padding: 0 12px 28px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px;
  background: #5578ff; color: #fff; box-shadow: 0 4px 14px #07112830;
}
.brand-title { color: #fff; font-size: 25px; letter-spacing: 2px; font-weight: 700; }
.brand-en { color: #98a7c5; font-size: 10px; letter-spacing: 1.65px; margin-top: 4px; }
.nav-caption { margin: 18px 0 10px; padding: 0 14px; color: #8c9bbb; font-size: 10px; letter-spacing: 1.1px; }
.nav { gap: 5px; }
.nav-link { height: 46px; padding: 0 14px; gap: 12px; border-radius: 9px; color: #b6c2da; font-size: 15px; font-weight: 500; }
.nav-link .icon { width: 19px; height: 19px; opacity: .88; }
.nav-link:hover { background: #222f4a; color: #fff; }
.nav-link.active { background: #345be0; color: #fff; box-shadow: 0 3px 12px #0c142820; }
.nav-link.active::after { background: var(--panel-soft); width: 5px; height: 5px; }
.nav-link .nav-cloud, .nav-link.active .nav-cloud { color: inherit; }
.nav-count { padding: 1px 7px; background: #293854; color: #c6d2ec; font-size: 12px; border-radius: 5px; }
.nav-link.active .nav-count { background: #ffffff25; color: #fff; }
.sidebar-navigation { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb, #354149) transparent; }
.workspace { padding: 14px; background: #1f2d46; border: 1px solid #33405b; border-radius: 10px; }
.workspace-top { color: #dfe8fb; font-size: 13px; }
.workspace p { color: #9eacc6; font-size: 12px; margin: 8px 0 12px; }
.workspace-link { width: 100%; color: #b4c5ff; font-size: 12px; }
.workspace .status-dot { background: #60d6b2; }
.sidebar-footer { padding: 17px 8px 0; color: #92a0bc; font-size: 11px; }
.sidebar .sidebar-close { color: #c5d0e7; }

/* Full-width workspace; the breadcrumb remains the single page title. */
.shell { min-width: 0; margin-left: var(--sidebar); }
.topbar {
  height: 72px; padding: 0 var(--workspace-gutter); background: var(--panel); border-bottom: 1px solid var(--line);
}
.topbar-left { min-width: 0; }
.breadcrumb { gap: 11px; color: #78869b; font-size: 14px; }
.breadcrumb .current { color: #263550; font-weight: 650; }
.breadcrumb > .icon:first-child { color: #4d70dc; }
.topbar-tools { gap: 17px; }
.environment { color: #687992; font-size: 12px; }
.profile { gap: 9px; }
.profile-name { color: #33405a; font-size: 14px; }
.avatar { border: 2px solid var(--line); width: 34px; height: 34px; }
.icon-button { color: #708099; width: 34px; height: 34px; border-radius: 8px; }
.icon-button:hover { background: var(--panel-soft); color: #365fe9; }
.content { max-width: none; width: 100%; margin: 0; padding: var(--workspace-gutter) var(--workspace-gutter) 0; min-height: calc(100dvh - 72px); gap: 0; }
.page-heading { display: none; }
.panel { border: 1px solid var(--line); border-radius: 13px; background: var(--panel); box-shadow: var(--shadow); }
.list-panel { margin-bottom: var(--section-gap); overflow: hidden; }
.panel-title, .list-title h2 { color: #24314c; font-size: 18px; font-weight: 700; letter-spacing: .1px; }
.panel-subtitle { color: #6d7d94; font-size: 13px; line-height: 1.7; }
.panel-header { padding: 18px 20px 0; }
.panel-header a { color: #5e7396; font-size: 13px; }
.list-panel-heading { padding: 16px 18px; gap: 10px 14px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.list-title { gap: 10px; min-width: 0; flex-wrap: wrap; }
.list-title h2 { margin: 0; }
.count-pill { border: 1px solid var(--line); background: var(--panel-soft); color: #6b7b95; font-size: 12px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.filter-controls { gap: 9px; min-width: 0; }
.list-heading-filters, .cloudflare-table .list-heading-filters { flex: 1 1 auto; margin-left: auto; width: auto; justify-content: flex-end; }
.list-heading-filters .search-field, .cloudflare-table .list-heading-filters .search-field { width: 244px; flex: 0 1 244px; }
.list-tools { flex-wrap: wrap; gap: 8px; max-width: none; justify-content: flex-start; }
.search-field { min-height: 39px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; color: #7d8ca3; }
.search-field:focus-within { border-color: #8ba3f5;  box-shadow:none; }
.search-field input { font-size: 14px; padding: 9px 0; color: #33435e; background: transparent; }
.search-field input::placeholder { color: #8794a8; }
.select-wrap { min-height: 39px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.select-wrap select { color: #546782; font-size: 14px; padding-top: 9px; padding-bottom: 9px; }
.select-wrap > .icon { color: #8c99ae; }

/* Actions */
.btn, .list-tools .btn, .list-panel-heading .btn {
  min-height: 39px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: #465873; font-size: 14px; font-weight: 550; line-height: 1.4;
  box-shadow:none;
}
.btn:hover { border-color: var(--line); background: var(--panel-soft); color: #365fe9; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; transition: background .16s, border-color .16s, color .16s, box-shadow .16s; }
.btn:disabled, .row-action-link:disabled, .monitor-action:disabled, .task-action:disabled, .website-action:disabled { cursor: not-allowed; opacity: .48; box-shadow:none; }
.btn:active:not(:disabled) { box-shadow:none; }
.btn .icon { width: 16px; height: 16px; }
.btn-primary, .list-tools .btn-primary, .list-panel-heading .btn-primary { color: #fff; background: #365fe9; border-color: #365fe9; box-shadow:none; }
.btn-primary:hover { background: #284bcc; border-color: #284bcc; color: #fff; }
.btn-danger, .list-panel-heading .btn-danger { color: #c64c5b; background: var(--panel); border-color: var(--line); }
.btn-danger:hover { color: #b73d4d; background: var(--panel-soft); border-color: var(--line); }
.btn-text, .tool-card-footer .btn-text { color: #365fe9; padding: 0; min-height: 28px; background: transparent; box-shadow:none; border: 0; }
.btn-small { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.btn-quiet { background: transparent; border-color: transparent; box-shadow:none; }
.btn.is-active { background: var(--panel-soft); border-color: var(--line); color: #365fe9; }
.website-action, .task-action, .row-action-link, .cf-rules-link { color: #365fe9; font-size: 14px; font-weight: 500; }
.website-action:hover, .task-action:hover, .row-action-link:hover { background: var(--panel-soft); color: #2549c8; }
.website-action.danger, .task-action.danger, .cf-delete-link, .icon-button.danger { color: #ca5361; }
.row-actions { gap: 7px; }
.row-actions .icon-button, .monitor-table .row-actions .icon-button { width: 31px; height: 32px; border-radius: 7px; }
.row-actions .icon-button:hover { background: var(--panel-soft); }
.row-actions .icon-button.danger:hover { background: var(--panel-soft); color: #bf3a4d; }

/* Tables: quieter headers, stronger content, visible hover and selection. */
.data-table-wrap, .dns-table-wrap, .cf-rule-table-wrap { scrollbar-color: var(--scroll-thumb, #354149) transparent; }
.data-table { color: #44536b; }
.list-panel .data-table th, .monitor-table .data-table th {
  background: var(--panel-soft); color: #708098; font-size: 13px; font-weight: 600;
  padding: 12px 14px; border-bottom: 1px solid var(--line); line-height: 1.5;
}
.list-panel .data-table td, .monitor-table .data-table td { padding: 14px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.list-panel .data-table td:first-child, .list-panel .data-table th:first-child { padding-left: 14px; }
.list-panel .data-table td:last-child, .list-panel .data-table th:last-child { padding-right: 14px; }
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: var(--panel-soft); }
.data-table tbody tr.selected { background: var(--panel-soft); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .id-cell { color: #8795aa; font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; }
.data-table .site-cell strong, .website-name, .data-table td > strong { color: #2e3b55; font-size: 15px; font-weight: 600; }
.site-cell small, .data-table .site-cell small { color: #7b89a0; font-size: 12px; }
.domain-link, .cf-domain-name, .ns-domain-name, .website-domain { color: #334764; font-size: 15px; font-weight: 550; }
.monitor-domain-copy:hover { color: #365fe9; }
.target-address, .datetime, .expiry, .dns-lines { color: #4b607c; font-size: 14px; }
.datetime-sub, .expiry-note, .task-type-label { color: #71819a; font-size: 12px; line-height: 1.6; }
.cell-note { color: #728198; font-size: 14px; }
.website-pool-ratio { color: #32476b; font-size: 17px; font-weight: 650; }
.website-pool-warning { color: var(--orange); font-size: 12px; }
.website-pool-note { color: #7c8ca2; font-size: 12px; }
.execution-mode { color: #526681; font-size: 14px; }
.execution-mode .icon { color: #8393af; }
.provider-type { color: #526782; }
.key-cell code { background: var(--panel-soft); border-radius: 5px; padding: 4px 7px; color: #687b97; }
.table-check, .management-select, input[type='checkbox'], input[type='radio'] { accent-color: #365fe9; }
.table-check { border-color: var(--line); border-radius: 4px; }
.table-footer { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel); color: #7c8ba2; font-size: 13px; gap: 12px; }
.table-scroll-hint { color: #7b8ba4; background: var(--panel); font-size: 12px; }
.pagination button, .pagination select { min-height: 33px; height: 33px; border-radius: 7px; color: #687c9c; border-color: var(--line); }
.pagination button.active { background: #365fe9; border-color: #365fe9; color: #fff; }
.pagination button:hover:not(:disabled) { background: var(--panel-soft); color: #365fe9; }
.pagination button.active:hover { background: #284bcc; color: #fff; }
.selection-count { color: #365fe9; }
.badge { border-radius: 5px; font-size: 12px; min-height: 26px; font-weight: 550; padding: 4px 8px; color: #198369; background: var(--panel-soft); }
.badge.blue { color: #365fe9; background: var(--panel-soft); }
.badge.orange { color: #a8701e; background: var(--panel-soft); }
.badge.red { color: #c54f60; background: var(--panel-soft); }
.badge.gray, .badge.neutral { color: #78869c; background: var(--panel-soft); }
.badge.outline { background: var(--panel); border-color: var(--line); color: #6b7f9f; }
.status-dot { background: #2da481; }
.dot-orange { background: #d8a14e; }
.dot-gray { background: #a0aec3; }
.table-progress { color: var(--accent); font-size: 14px; }
.table-progress .progress-track { background: var(--panel-soft); height: 4px; width: 46px; }
.table-progress .progress-track span { background: #42aa91; }
.table-progress.orange { color: #b6812b; }
.table-progress.orange .progress-track span { background: #dbb064; }

/* Fit desktop lists to the available workspace instead of legacy oversized tables. */
@media (min-width: 1280px) {
  .list-panel .data-table { width: 100%; min-width: 0; table-layout: fixed; }
  .list-panel .data-table th, .list-panel .data-table td { padding-left: 8px; padding-right: 8px; white-space: normal; overflow-wrap: anywhere; }
  .list-panel .data-table .row-actions { min-width: 0; flex-wrap: wrap; gap: 4px 7px; }
  .list-panel .data-table .row-actions .icon-button { flex: 0 0 28px; width: 28px; }
  .list-panel .data-table .website-pool, .list-panel .data-table .website-actions, .list-panel .data-table .task-actions { min-width: 0; }
  .list-panel .data-table .key-cell { min-width: 0; flex-wrap: wrap; gap: 4px; }
  .list-panel .data-table .key-cell code { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .list-panel .data-table .id-cell { white-space: nowrap; overflow-wrap: normal; }
  .monitor-table .data-table .row-actions { gap: 4px; }
  .monitor-table .data-table td:last-child, .monitor-table .data-table th:last-child { padding-left: 4px; padding-right: 4px; }
  .monitor-table .table-progress { gap: 6px; }
  .monitor-table .table-progress .progress-track { width: 32px; }
  .namesilo-table .data-table th:nth-child(1) { width: 18%; }
  .namesilo-table .data-table th:nth-child(2) { width: 14%; }
  .namesilo-table .data-table th:nth-child(3) { width: 14%; }
  .namesilo-table .data-table th:nth-child(4) { width: 28%; }
  .namesilo-table .data-table th:nth-child(5) { width: 12%; }
  .namesilo-table .data-table th:nth-child(6) { width: 14%; }
  .cloudflare-table .data-table th:nth-child(1) { width: 3%; }
  .cloudflare-table .data-table th:nth-child(2) { width: 23%; }
  .cloudflare-table .data-table th:nth-child(3) { width: 12%; }
  .cloudflare-table .data-table th:nth-child(4) { width: 13%; }
  .cloudflare-table .data-table th:nth-child(5) { width: 20%; }
  .cloudflare-table .data-table th:nth-child(6) { width: 14%; }
  .cloudflare-table .data-table th:nth-child(7) { width: 15%; }
  .websites-table .data-table th:nth-child(1) { width: 3%; }
  .websites-table .data-table th:nth-child(2) { width: 10%; }
  .websites-table .data-table th:nth-child(3) { width: 15%; }
  .websites-table .data-table th:nth-child(4) { width: 7%; }
  .websites-table .data-table th:nth-child(5) { width: 15%; }
  .websites-table .data-table th:nth-child(6) { width: 17%; }
  .websites-table .data-table th:nth-child(7) { width: 10%; }
  .websites-table .data-table th:nth-child(8) { width: 19%; }
  .tasks-table .data-table th:nth-child(1) { width: 3%; }
  .tasks-table .data-table th:nth-child(2) { width: 4%; }
  .tasks-table .data-table th:nth-child(3) { width: 16%; }
  .tasks-table .data-table th:nth-child(4) { width: 15%; }
  .tasks-table .data-table th:nth-child(5) { width: 10%; }
  .tasks-table .data-table th:nth-child(6) { width: 12%; }
  .tasks-table .data-table th:nth-child(7) { width: 12%; }
  .tasks-table .data-table th:nth-child(8) { width: 28%; }
  .api-table .data-table th:nth-child(1) { width: 3%; }
  .api-table .data-table th:nth-child(2) { width: 9%; }
  .api-table .data-table th:nth-child(3) { width: 14%; }
  .api-table .data-table th:nth-child(4) { width: 18%; }
  .api-table .data-table th:nth-child(5) { width: 19%; }
  .api-table .data-table th:nth-child(6) { width: 14%; }
  .api-table .data-table th:nth-child(7) { width: 10%; }
  .api-table .data-table th:nth-child(8) { width: 13%; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
  .monitor-table .data-table .row-actions { gap: 3px; }
  .monitor-table .data-table .row-actions .icon-button { flex-basis: 26px; width: 26px; }
}
.cf-rules-link { font-size: 14px; }
.cf-rule-target { overflow-wrap: anywhere; }
.modal.mysql-manager-dialog, .modal.mysql-connection-dialog { width: min(100%, 680px); }
.mysql-manager-toolbar, .mysql-connection-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mysql-manager-toolbar { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mysql-connection-list { display: grid; max-height: min(45vh, 360px); overflow-y: auto; }
.mysql-connection-row { padding: 12px 3px; border-bottom: 1px solid var(--line); }
.mysql-connection-row > div { display: grid; gap: 4px; min-width: 0; }
.mysql-connection-row strong { color: #344d70; }
.mysql-connection-row span, .mysql-empty { color: #7488a5; font-size: 13px; overflow-wrap: anywhere; }
.mysql-empty { padding: 22px 4px; text-align: center; }
.mysql-operation-result { max-height: min(45vh, 360px); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 15px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); color: #425b7d; font: 13px/1.65 ui-monospace, Consolas, monospace; }
@media (max-width: 520px) { .mysql-connection-row { align-items: flex-start; flex-direction: column; } }
.cf-redirect-count, .cloudflare-table .cf-redirect-count { color: #8291a8; font-size: 12px; }
.ssl-status, .ssl-cell { color: #51637f; }
.dns-lines { line-height: 1.6; }
.renew-toggle-text { color: #7b8ca5; font-size: 12px; }
.toggle { background: var(--panel-soft); }
.toggle.on { background: #4d73ef; }

/* Account bars */
.provider-toolbar { padding: 14px 18px; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); margin-bottom: var(--section-gap); }
.account-picker { gap: 12px; }
.account-picker-label { color: #73839c; font-size: 13px; }
.account-icon { background: var(--panel-soft); color: #4f6ee2; border: 1px solid var(--line); border-radius: 9px; width: 36px; height: 36px; }
.account-select { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-height: 41px; min-width: 248px; color: #3d506f; }
.account-select select { color: #3d506f; font-size: 14px; }
.account-online { color: #73859c; font-size: 12px; }
.provider-right { gap: 18px; }
.provider-stat { color: #7c8ba2; font-size: 13px; }
.provider-stat strong { color: #334b75; font-size: 25px; font-weight: 700; }
.provider-logo { opacity: .85; }

/* Dashboard retains its existing modules, with a new information hierarchy. */
.metrics { gap: var(--section-gap); margin-bottom: var(--section-gap); }
.metric { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow); overflow: hidden; }
.metric::before { content: ''; position: absolute; left: 0; top: 23px; width: 3px; height: 28px; background: #6484f3; border-radius: 0 3px 3px 0; }
.metric-label { color: #738198; font-size: 14px; }
.metric-icon { width: 34px; height: 34px; background: var(--panel-soft); color: #4c70df; border-radius: 10px; }
.metric-icon.blue { background: var(--panel-soft); color: #4f7bd5; }
.metric-icon.orange { background: var(--panel-soft); color: #c29240; }
.metric-icon.purple { background: var(--panel-soft); color: #8b73cc; }
.metric-value { font-family: inherit; font-size: 38px; line-height: 1.45; color: #263755; font-weight: 750; letter-spacing: -1px; margin-top: 9px; }
.metric-value small { color: #8190a6; font-size: 15px; font-weight: 400; letter-spacing: 0; }
.metric-footer { font-size: 12px; color: #8794a9; gap: 8px; margin-top: 11px; }
.trend { color: #2a9477; font-size: 12px; }
.trend.warn { color: #b58b3e; }
.dashboard-main, .dashboard-bottom { gap: var(--section-gap); margin-bottom: var(--section-gap); grid-template-columns: minmax(0,1.8fr) minmax(290px,1fr); }
.chart-summary { padding: 22px 25px 0; gap: 22px; }
.chart-current { color: #2b3f65; font-family: inherit; font-size: 34px; }
.chart-legend, .chart-caption { color: #7b8ba5; font-size: 12px; }
.legend-square { background: #5575e8; }
.segmented { border: 1px solid var(--line); background: var(--panel-soft); border-radius: 7px; padding: 3px; }
.segmented button { color: #8191a7; font-size: 12px; padding: 5px 10px; border-radius: 5px; }
.segmented button.active { color: #365fe9; background: var(--panel); box-shadow: 0 1px 5px #2539650d; }
.line-chart { padding: 12px 22px 0; }
.line-chart > svg { height: 238px; }
.chart-line { stroke: #5575e8; stroke-width: 2.8; }
#chart-fill stop { stop-color: #5575e8; }
.chart-focus-line { stroke: #a9b9f0; }
.chart-focus-circle { stroke: #5575e8; }
.chart-grid { stroke: #e9eef7; }
.chart-label { fill: #95a1b5; }
.chart-tooltip-bg { fill: #243659; }
.chart-bottom { margin: 4px 24px 0; color: #8696ac; font-size: 12px; }
.donut-wrap { height: 244px; }
.donut-wrap svg { width: 190px; height: 190px; }
.donut-green { stroke: #5b7ce8; }
.donut-orange { stroke: #e9b65b; }
.donut-gray { stroke: #c2cddd; }
.donut-track { stroke: #f1f4fa; }
.donut-center strong { color: #2e4065; font-size: 38px; }
.donut-center span { color: #8392a9; font-size: 12px; }
.health-legend .legend-name, .health-note { color: #8292a8; font-size: 12px; }
.health-legend strong { color: #3b4f70; font-size: 23px; }
.health-note { padding: 15px 22px; }
.compact-table th { background: var(--panel-soft); color: #8090a7; font-size: 13px; font-weight: 500; padding: 13px 21px; }
.compact-table td { color: #526480; font-size: 14px; padding: 17px 21px; border-color: var(--line); }
.site-icon { color: #6c86c5; background: var(--panel-soft); border-color: var(--line); border-radius: 8px; }
.activity-list { padding: 7px 24px 0; }
.activity { padding: 18px 0; border-color: var(--line); }
.activity-icon { background: var(--panel-soft); color: #5d7bd9; border-radius: 8px; }
.activity-icon.orange { background: var(--panel-soft); color: #c29140; }
.activity-icon.blue { background: var(--panel-soft); color: #6a91db; }
.activity-text h3 { color: #405474; font-size: 14px; font-weight: 550; }
.activity-text p, .activity-time, .activity-footer { color: #8997ad; font-size: 12px; }
.mini-card { background: var(--panel); border-color: var(--line); border-radius: 11px; }
.mini-card h3 { color: #425775; font-size: 15px; }
.mini-card p { color: #8493a9; font-size: 13px; }
.info-strip { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 9px; color: #7185a8; font-size: 13px; line-height: 1.8; padding: 13px 16px; }
.info-strip > .icon { color: #6d89d2; }
.footer { margin-top: auto; padding: 24px 0; color: #8b99ae; font-size: 12px; }
.footer-right { color: #8b99ae; gap: 16px; }
.footer button { color: #7086ad; }

/* Compact whole-card tools */
.tools-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),252px)); gap: 14px; padding: 18px; justify-content: start; }
.tool-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; box-shadow: none; }
.tool-card:hover, .tool-card:focus-visible { border-color: var(--line); box-shadow:none; transform:none; }
.tool-card-top { margin-bottom: 16px; }
.tool-card-icon { background: var(--panel-soft); color: #4e71df; width: 43px; height: 43px; border-radius: 12px; }
.tool-card-icon.blue { background: var(--panel-soft); color: #6d85d0; }
.tool-card h3 { color: #314564; font-size: 17px; font-weight: 650; margin-bottom: 10px; }
.tool-card p { color: #8390a5; font-size: 14px; line-height: 1.75; min-height: 49px; }
.tool-card-footer { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--line); }
.tool-card-footer .btn-text { color: #365fe9; font-size: 13px; font-weight: 600; }
.favorite-button { color: #a9b7cd; }
.favorite-button.is-favorite { color: #c3983c; }
.favorite-button.is-favorite .icon { fill: #fff4d8; }
.toolbox-footer { padding: 16px 23px; color: #8596af; border-color: var(--line); font-size: 12px; }

/* Centered dialogs: fixed title and actions, one independently scrollable body. */
.modal-backdrop { align-items: center; justify-content: center; padding: 24px; background: rgba(17,29,53,.44); backdrop-filter: blur(4px); }
.modal { margin: 0; width: min(100%,640px); max-height: calc(100dvh - 48px); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 28px 100px #0d1c4938; overflow: hidden; }
.modal > form, .modal form, .cf-workflow #modal-form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 48px); }
.modal .modal-head { flex: 0 0 auto; padding: 21px 26px; background: var(--panel); border-bottom: 1px solid var(--line); gap: 16px; }
.modal .modal-head h2, .cf-workflow .modal-head h2 { margin: 0; color: #293b59; font-size: 21px; font-weight: 650; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.modal-head .icon-button { background: var(--panel-soft); color: #7c8da7; flex-shrink: 0; }
.modal-head .icon-button:hover { background: var(--panel-soft); color: #365fe9; }
.modal .modal-body { padding: 24px 26px; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb, #354149) transparent; }
.modal-description { color: #697c97; font-size: 15px; line-height: 1.75; margin: 0 0 20px; }
.form-row { gap: 16px; }
.modal-auto-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; align-items: start; margin-bottom: 14px; }
body .modal .modal-auto-row > .form-field { margin-bottom: 0; }
.modal-auto-row .form-field input, .modal-auto-row .form-field select { width: 100%; min-width: 0; }
.form-field { color: #425674; font-size: 15px; font-weight: 550; gap: 8px; margin-bottom: 20px; line-height: 1.6; min-width: 0; }
.form-field input, .form-field select, .form-field textarea {
  min-height: 46px; padding: 11px 13px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; color: #314762; font-size: 16px; font-weight: 400; line-height: 1.55; box-shadow:none;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #96a4b9; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--line); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline:none; border-color: #7895f3; box-shadow:none; }
.form-field textarea { min-height: 110px; font-family: inherit; line-height: 1.8; }
.form-field small { color: #8191a9; font-size: 13px; font-weight: 400; line-height: 1.7; }
.modal-note { color: #71849f; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; padding: 12px 15px; line-height: 1.8; margin-top: 7px; }
.modal .modal-actions { flex: 0 0 auto; padding: 17px 26px; border-top: 1px solid var(--line); background: var(--panel); gap: 10px; }
.modal-actions .btn { min-width: 96px; min-height: 42px; font-size: 15px; }
.form-error { padding: 10px 13px; border: 1px solid var(--line); border-radius: 7px; color: #b84658; background: var(--panel-soft); font-size: 14px; }
.modal-output { background: var(--panel-soft); border-color: var(--line); border-radius: 8px; color: #3d567c; font-size: 14px; }
.detail-list > div { border-color: var(--line); padding: 13px 0; font-size: 15px; }
.detail-list dt { color: #8393ab; }
.detail-list dd { color: #445d7d; }
.modal-inline-actions { gap: 9px; }
.pool-item { border-color: var(--line); background: var(--panel); border-radius: 8px; padding: 12px 14px; color: #526783; font-size: 14px; }
.task-log-summary { color: #425b7d; border-color: var(--line); font-size: 15px; gap: 12px; }
.task-log-summary span { color: #8796af; font-size: 12px; white-space: nowrap; }
.task-log-item { padding: 16px 3px; border-color: var(--line); }
.task-log-item time { color: #899ab5; font-size: 12px; margin-bottom: 6px; }
.task-log-item p { color: #486181; font-size: 15px; line-height: 1.75; }
.help-list { color: #667e9f; font-size: 14px; line-height: 2; }

/* Batch workflows / DNS / monitor details */
.modal.cf-workflow { width: min(100%,860px); }
.modal.ns-workflow { width: min(100%,820px); }
.modal.cf-rules-dialog { width: min(100%,820px); }
.modal.monitor-details { width: min(100%,1000px); }
.modal.schedule-dialog { width: min(100%,720px); }
.cf-workflow .form-field textarea, .ns-workflow .form-field textarea { min-height: 116px; }
.cf-switch-row { padding: 14px 16px; border-color: var(--line); background: var(--panel); border-radius: 9px; margin-bottom: 15px; }
.cf-switch-copy strong { color: #435a7a; font-size: 15px; font-weight: 550; }
.cf-switch-copy small { color: #8294af; font-size: 13px; line-height: 1.65; margin-top: 4px; }
.cf-switch-track { background: var(--panel-soft); }
.cf-switch-control input:checked + .cf-switch-track { background: #4d73ef; }
.cf-conditional { background: var(--panel); border-color: var(--line); border-radius: 9px; padding: 17px 16px 0; }
.cf-filter-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cf-filter-option { min-width: 0; }
.cf-filter-option .cf-switch-row { height: 100%; }
.cf-record-count { border: 0; border-radius: 5px; padding: 4px 7px; color: #4867c2; background: var(--panel-soft); cursor: pointer; font: inherit; }
.cf-record-count:hover, .cf-record-count:focus-visible { color: #2d4fac; background: var(--panel-soft); text-decoration: underline; text-underline-offset: 2px; }
.cf-type-options legend { color: var(--ink); font-size: 15px; }
.cf-type-options label { color: var(--muted); font-size: 14px; }
.cf-domain-meta, .ns-domain-meta { color: #8797b0; font-size: 13px; }
.cf-rule-hint, .ns-help, .cf-summary-note { color: #7e90aa; font-size: 13px; line-height: 1.8; }
.cf-progress-panel { background: var(--panel); border-color: var(--line); border-radius: 10px; margin-top: 22px; }
.cf-progress-head { padding: 18px; }
.cf-progress-title, .cf-progress-title strong { color: #445e84; font-size: 15px; }
.cf-progress-title span { color: #365fe9; }
.cf-progress-track, .cf-progress-track::-webkit-progress-bar { background: var(--panel-soft); }
.cf-progress-track::-webkit-progress-value { background: #5377ee; }
.cf-progress-track::-moz-progress-bar { background: #5377ee; }
.cf-progress-caption { color: #8294af; font-size: 13px; }
.cf-progress-stats b { color: var(--accent); }
.cf-progress-stats .failed b { color: var(--red); }
.cf-result-wrap { border-color: var(--line); }
.cf-result-table th { background: var(--panel-soft); color: #7b90af; font-size: 13px; }
.cf-result-table td { color: #607c9f; font-size: 14px; }
.cf-result-table td:first-child { color: #3f5b81; }
.cf-result-table td, .cf-result-table th { border-color: var(--line); padding: 12px 15px; }
.cf-execution-actions { border-color: var(--line); padding: 12px 16px; }
.cf-execution-actions button { color: #b56168; font-size: 13px; }
.cf-rule-heading { color: #445e83; font-size: 16px; }
.cf-rule-item { background: var(--panel); border-color: var(--line); color: #728aab; padding: 14px; border-radius: 9px; }
.cf-rule-item strong { color: #49638a; }
.dns-table th, .cf-rule-table th, .probe-table th { background: var(--panel-soft); color: #798da9; font-size: 13px; }
.dns-table td, .cf-rule-table td, .probe-table td { color: #4b6486; font-size: 14px; border-color: var(--line); }
.dns-table, .cf-rule-table { border-color: var(--line); }
.ns-expiry-filters { gap: 9px; margin-bottom: 13px; }
.ns-expiry-filters .btn { min-height: 41px; background: var(--panel); color: #6881a6; border-color: var(--line); font-size: 14px; }
.ns-expiry-filters .btn[aria-pressed=true] { background: var(--panel-soft); border-color: #93a9ef; color: #365fe9; }
.ns-picker { border-color: var(--line); border-radius: 9px; }
.ns-picker-heading { color: #7389a9; background: var(--panel-soft); font-size: 13px; padding: 12px 14px; }
.ns-picker-label { border-color: var(--line); color: #526e95; padding: 12px 14px; font-size: 14px; }
.ns-picker-label small { color: #8b9bb4; font-size: 12px; }
.ns-plan, .renew-estimate { background: var(--panel-soft); border-color: var(--line); border-radius: 9px; padding: 17px 18px; }
.ns-plan-label { color: #7b90b1; font-size: 13px; }
.ns-plan-label strong { color: var(--ink); font-size: 15px; }
.ns-plan-amount, .renew-estimate strong { color: #365fe9; font-size: 27px; }
.ns-plan-amount small, .ns-result-money { color: #8196b6; font-size: 12px; }
.probe-summary-card { background: var(--panel); border-color: var(--line); border-radius: 10px; }
.probe-summary-card strong { color: var(--cyan); }
.probe-summary-card > span, .probe-summary-card small { color: #7a8fac; }
.probe-summary-card.other strong { color: #b4873e; }
.probe-meter, .probe-meter::-webkit-progress-bar { background: var(--panel-soft); }
.probe-meter::-webkit-progress-value { background: #6281e5; }
.probe-meter::-moz-progress-bar { background: #6281e5; }
.other .probe-meter::-webkit-progress-value { background: #d5b272; }
.other .probe-meter::-moz-progress-bar { background: #d5b272; }
.probe-subject { background: var(--panel-soft); border-color: var(--line); }
.probe-subject strong { color: var(--ink); }
.probe-subject small, .probe-subject > span, .probe-caption { color: #8294af; }
.probe-source { color: #7e8fad; background: var(--panel-soft); border-color: var(--line); }
.probe-table-wrap, .schedule-domain-picker { border-color: var(--line); border-radius: 9px; }
.probe-empty { color: #8296b1; border-color: var(--line); }
.monitor-value-link:hover, .monitor-domain-copy:hover { background: var(--panel-soft); }
.schedule-domain-choice { color: #4f6c91; border-color: var(--line); }
.schedule-domain-choice strong { color: #506a8d; }
.schedule-domain-choice:has(input:checked) { background: var(--panel-soft); }
.schedule-domain-choice small { color: #8b9db7; }
.schedule-scope-option { color: #506b91; border-color: var(--line); }
.schedule-scope-option:has(input:checked) { background: var(--panel-soft); border-color: var(--line); color: #365fe9; }
.schedule-scope legend, .schedule-picker-title strong { color: var(--ink); }
.schedule-picker-head { background: var(--panel-soft); border-color: var(--line); }
.schedule-picker-title, .schedule-picker-tools { color: #8294b0; }
.schedule-picker-search { color: #4a6388; border-color: var(--line); }

/* Notices stay in the center, including narrow viewports. */
.notifications-popover { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%,-50%); width: min(420px,calc(100vw - 32px)); padding: 25px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 20px 70px #152a6030; }
.notifications-popover h3 { color: #344c72; font-size: 18px; padding-right: 23px; }
.notifications-popover p { color: #7187a7; font-size: 14px; }
.notification-meta { color: #8c9cb4; font-size: 12px; }
.toast-region { top: 50%; left: 50%; bottom: auto; right: auto; transform: translate(-50%,-50%); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); width: max-content; align-items: center; justify-content: center; overflow: auto; }
.toast { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: #4e698e; box-shadow: 0 10px 45px #172c6725; font-size: 15px; padding: 17px 21px; max-width: min(480px,calc(100vw - 32px)); }
.toast.warning { background: var(--panel); border-color: var(--line); color: #a07d40; }
.toast-region, .notifications-popover { scrollbar-width: none; -ms-overflow-style: none; }
.toast-region::-webkit-scrollbar, .notifications-popover::-webkit-scrollbar { display: none; width: 0; height: 0; }

@media (min-width: 1800px) {
  :root { --workspace-gutter: 22px; }
}
@media (max-width: 1250px) {
  :root { --sidebar: 208px; }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .brand { gap: 10px; padding-left: 9px; }
  .brand-en { font-size: 9px; }
  .metrics { gap: 14px; }
  .metric { padding: 20px 18px; }
  .metric-value { font-size: 34px; }
  .metric-footer { font-size: 12px; }
  .dashboard-main, .dashboard-bottom { gap: 18px; grid-template-columns: minmax(0,1.6fr) minmax(270px,1fr); }
  .list-heading-filters .search-field, .cloudflare-table .list-heading-filters .search-field { width: 208px; flex-basis: 208px; }
  .list-panel-heading { gap: 10px; }
  .account-select { min-width: 210px; }
  .topbar-tools { gap: 13px; }
}
@media (max-width: 1000px) {
  .dashboard-main, .dashboard-bottom { grid-template-columns: minmax(0,1fr); }
  .metric { padding: 18px 15px; }
  .metric-value { font-size: 30px; }
  .metric-label { font-size: 13px; }
  .metric-icon { height: 29px; width: 29px; }
  .list-heading-filters, .cloudflare-table .list-heading-filters { flex: 1 1 100%; width: 100%; margin-left: 0; justify-content: flex-start; }
  .list-panel-heading .list-tools { width: auto; }
  .list-heading-filters .search-field, .cloudflare-table .list-heading-filters .search-field { flex: 1 1 200px; width: auto; }
  .tools-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),260px)); }
}
@media (max-width: 760px) {
  :root { --sidebar: 244px; --workspace-gutter: 16px; --section-gap: 14px; }
  .sidebar { padding: 29px 14px 18px; transform: translateX(-100%); visibility: hidden; box-shadow: 12px 0 50px #10203a30; }
  .sidebar.open { visibility: visible; transform: translateX(0); }
  .sidebar .sidebar-close { display: grid; right: 9px; top: 8px; }
  .sidebar-scrim.open { background: #14253d60; backdrop-filter: blur(2px); }
  .shell { margin-left: 0; }
  .menu-toggle { display: inline-flex; width: 32px; margin-right: 2px; }
  .topbar { height: 64px; gap: 10px; }
  .topbar-left { display: flex; align-items: center; gap: 7px; }
  .breadcrumb { font-size: 13px; gap: 8px; }
  .topbar-tools { gap: 7px; }
  .environment, .tool-divider, .profile-name { display: none; }
  .content { min-height: calc(100dvh - 64px); }
  .panel { border-radius: 11px; }
  .list-panel-heading { padding: 14px; gap: 10px; }
  .list-title { gap: 8px; }
  .list-title h2, .panel-title { font-size: 17px; }
  .list-heading-filters, .cloudflare-table .list-heading-filters { flex: 1 1 100%; width: 100%; }
  .list-heading-filters .search-field, .cloudflare-table .list-heading-filters .search-field { min-width: 0; flex: 1 1 180px; }
  .list-heading-filters .select-wrap { flex: 1 1 130px; }
  .list-panel-heading .list-tools { width: 100%; }
  .btn, .list-tools .btn, .list-panel-heading .btn { font-size: 13px; min-height: 39px; padding: 9px 11px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
  .metric { padding: 18px; border-radius: 10px; }
  .metric-value { font-size: 33px; }
  .metric-label { font-size: 13px; }
  .metric-footer { font-size: 12px; gap: 5px; }
  .dashboard-main, .dashboard-bottom { gap: 16px; margin-bottom: 16px; }
  .provider-toolbar { padding: 14px; gap: 10px; }
  .account-picker { gap: 9px; }
  .account-select { min-width: 0; flex: 1; }
  .account-online { display: flex; font-size: 12px; }
  .provider-right { width: 100%; border-top: 1px solid var(--line); padding-top: 12px; gap: 12px; }
  .provider-stat strong { font-size: 24px; }
  .table-footer { padding: 12px 14px; }
  .tools-grid { padding: 17px; gap: 14px; grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),260px)); }
  .tool-card { padding: 20px; }
  .toolbox-footer { padding: 15px 17px; }
  .info-strip { font-size: 12px; padding: 12px 14px; }
  .footer { padding: 20px 0; font-size: 11px; gap: 10px; }
  .footer-right { gap: 12px; }
  .modal-backdrop { padding: 14px; }
  .modal { max-height: calc(100dvh - 28px); border-radius: 13px; }
  .modal > form, .modal form, .cf-workflow #modal-form { max-height: calc(100dvh - 28px); }
  .modal .modal-head { padding: 18px 20px; }
  .modal .modal-head h2, .cf-workflow .modal-head h2 { font-size: 19px; }
  .modal .modal-body { padding: 20px; }
  .modal .modal-actions { padding: 15px 20px; }
  .modal-actions .btn { min-width: 88px; min-height: 42px; font-size: 14px; }
}
@media (max-width: 600px) {
  .form-row, .cf-workflow .form-row, .ns-workflow .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-field { font-size: 15px; margin-bottom: 18px; }
  .form-field input, .form-field select, .form-field textarea { font-size: 16px; }
  .form-field small, .modal-note { font-size: 13px; }
  .cf-switch-row { padding: 13px; gap: 12px; }
  .cf-switch-copy strong { font-size: 14px; }
  .cf-switch-copy small { font-size: 12px; }
  .ns-expiry-filters .btn { min-width: 115px; font-size: 13px; }
  .cf-progress-head { padding: 15px; }
  .cf-result-table th, .cf-result-table td { padding: 11px 12px; }
  .schedule-scope-option { min-width: 100%; }
}
@media (max-width: 460px) {
  :root { --workspace-gutter: 12px; }
  .topbar-tools { gap: 3px; }
  .breadcrumb { font-size: 12px; gap: 7px; }
  .topbar-tools .icon-button { width: 29px; }
  .metric { padding: 16px; }
  .metric-label { font-size: 12px; }
  .metric-value { font-size: 30px; }
  .metric-footer { font-size: 11px; }
  .metric-icon { width: 27px; height: 27px; }
  .panel-header { padding: 19px 18px 0; }
  .list-panel-heading { padding: 13px; }
  .list-title h2 { font-size: 17px; }
  .list-title .btn { font-size: 12px; min-height: 34px; padding: 7px 9px; }
  .count-pill { font-size: 11px; padding: 3px 7px; }
  .tools-grid { grid-template-columns: minmax(0,272px); justify-content: start; }
  .chart-summary { padding: 19px 18px 0; gap: 14px; }
  .chart-current { font-size: 30px; }
  .line-chart { padding: 10px 13px 0; }
  .line-chart > svg { height: 200px; }
  .donut-wrap { height: 208px; }
  .chart-bottom { margin-left: 18px; margin-right: 18px; }
  .modal .modal-head { padding: 17px 18px; }
  .modal .modal-body { padding: 19px 18px; }
  .modal .modal-actions { padding: 14px 18px; }
  .task-log-summary { flex-wrap: wrap; }
  .notifications-popover { padding: 22px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .sidebar { padding-top: 20px; }
  .brand { padding-bottom: 17px; }
  .nav-link { height: 41px; }
  .nav-caption { margin-top: 14px; }
  .workspace { padding: 11px; }
  .workspace p { margin: 6px 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* NameSilo sorting and monitor notification form controls. */
.expiry-danger { color: var(--red) !important; font-weight: 700; }
.notification-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 4px 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; }
.notification-events legend { padding: 0 6px; color: #526783; font-size: 14px; font-weight: 600; }
.notification-events label { display: flex; align-items: center; gap: 8px; color: #647896; font-size: 13px; line-height: 1.5; }
.notification-events input, .form-switch-field input { accent-color: #365fe9; }
.form-switch-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.form-switch-field small { grid-column: 1 / -1; }
.notification-dialog { width: min(100%, 620px); }

@media (max-width: 560px) {
  .notification-events { grid-template-columns: 1fr; }
}

/* Dialog density: readable content, fitted tables, and consistent short distances. */
.modal-backdrop { padding: 18px; }
.modal { max-height: calc(100dvh - 36px); border-radius: 12px; }
.modal > form, .modal form, .cf-workflow #modal-form { max-height: calc(100dvh - 38px); }
.modal .modal-head { padding: 15px 20px; gap: 12px; }
.modal .modal-head h2, .cf-workflow .modal-head h2 { font-size: 20px; color: #23354e; line-height: 1.45; }
.modal .modal-body { padding: 18px 20px; }
.modal .modal-actions { padding: 12px 20px; }
.modal .modal-actions .btn { min-height: 40px; min-width: 86px; }
.modal-description { margin-bottom: 13px; color: #536781; line-height: 1.65; }
.modal .form-field { gap: 6px; margin-bottom: 14px; font-weight: 600; color: #354b67; line-height: 1.5; }
.modal .form-field input, .modal .form-field select, .modal .form-field textarea { min-height: 42px; padding: 9px 11px; color: #283f5b; }
.modal .form-field textarea, .cf-workflow .form-field textarea, .ns-workflow .form-field textarea { min-height: 88px; line-height: 1.65; }
.modal .form-field small { color: #637791; line-height: 1.55; }
.modal .form-row { gap: 14px; margin-bottom: 14px; align-items: start; }
.modal .form-row > .form-field { margin-bottom: 0; }
.modal .form-row:last-child { margin-bottom: 0; }
.modal-note { padding: 9px 11px; margin-top: 5px; color: #5c718d; background: var(--panel-soft); border-color: var(--line); line-height: 1.6; }
.modal-note:empty, .modal-description:empty { display: none; }
.modal-inline-actions { margin-top: 13px; gap: 8px; }
.modal-inline-actions.dns-toolbar { margin: 0 0 12px; justify-content: flex-end; }
.modal .cf-switch-row { padding: 11px 13px; margin-bottom: 11px; gap: 12px; background: var(--panel); }
.cf-switch-copy strong { color: #354d6c; }
.cf-switch-copy small { margin-top: 3px; color: #637994; line-height: 1.55; }
.cf-conditional { padding: 12px 13px 0; margin-bottom: 12px; }
.cf-type-options { margin-bottom: 12px; }
.cf-type-options legend { margin-bottom: 8px; }
.cf-domain-meta, .ns-domain-meta { margin: -4px 0 12px; font-size: 12px; color: #607594; }
.cf-summary-note, .cf-rule-hint, .ns-help { color: var(--muted); line-height: 1.6; font-size: 13px; }
.cf-summary-note { margin: 10px 0 0; }
.ns-help { margin-bottom: 12px; }
.ns-plan, .renew-estimate { padding: 12px 14px; margin-bottom: 10px; gap: 10px; }
.ns-plan-label, .ns-plan-amount small { color: var(--muted); }
.ns-plan-amount { font-size: 25px; }
.ns-expiry-filters { margin-bottom: 10px; gap: 8px; }
.ns-expiry-filters .btn { min-height: 37px; padding: 8px 10px; }
.ns-picker { margin-bottom: 12px; }
.ns-picker-heading, .ns-picker-label { padding: 9px 12px; }
.cf-progress-panel { margin-top: 14px; }
.cf-progress-head { padding: 13px 14px; }
.cf-progress-title { margin-bottom: 9px; font-size: 14px; }
.cf-progress-caption { font-size: 12px; color: #627c9c; }
.cf-progress-track { margin-bottom: 9px; }
.cf-result-table th, .cf-result-table td { padding: 10px 12px; }
.cf-execution-actions { padding: 8px 13px; }
.modal.dns-dialog { width: min(100%,1020px); }
.dns-table-wrap, .cf-rule-table-wrap, .probe-table-wrap, .cf-result-wrap { max-width: 100%; min-width: 0; }
.dns-table, .cf-rule-table, .probe-table, .cf-result-table { width: 100%; min-width: 0; table-layout: fixed; white-space: normal; }
.dns-table th, .dns-table td, .cf-rule-table th, .cf-rule-table td,
.probe-table th, .probe-table td, .cf-result-table th, .cf-result-table td {
  min-width: 0; max-width: none; white-space: normal; overflow-wrap: anywhere; word-break: normal; vertical-align: middle;
}
.dns-table th, .cf-rule-table th, .probe-table th, .cf-result-table th { color: #4f6584; padding: 11px 10px; font-weight: 600; }
.dns-table td, .cf-rule-table td, .probe-table td, .cf-result-table td { color: #354d6d; padding: 12px 10px; }
.dns-table th:nth-child(1) { width: 23%; }
.dns-table th:nth-child(2) { width: 11%; }
.dns-table th:nth-child(3) { width: 28%; }
.dns-table th:nth-child(4) { width: 14%; }
.dns-table th:nth-child(5) { width: 9%; }
.dns-table th:nth-child(6) { width: 15%; }
.dns-value { min-width: 0; max-width: none; }
.dns-table .dns-actions { flex-wrap: wrap; gap: 7px 12px; }
.dns-table .row-action-link { min-height: 32px; padding: 6px 11px; font-size: 13px; }
.cf-proxy-state { gap: 5px; font-size: 13px; }
.cf-cloud-icon { width: 22px; height: 16px; }
.cf-rule-table th:first-child { width: 27%; }
.cf-rule-table th:nth-child(2) { width: 48%; }
.cf-rule-table th:last-child { width: 25%; }
.cf-page-rule-cell { min-width: 0; white-space: normal; gap: 4px; }
.cf-page-rule-cell strong { color: #314b6f; }
.cf-page-rule-cell span { color: #637995; }
.cf-rule-table .row-actions { justify-content: center; flex-wrap: wrap; }
.cf-rule-details { grid-template-columns: 75px minmax(0,1fr); }
.cf-result-table th:first-child { width: 31%; }
.cf-result-table th:nth-child(2) { width: 18%; }
.cf-result-table th:last-child { width: 51%; }
.cf-result-table td:first-child, .cf-result-table td:nth-child(2), .cf-result-table td:last-child { min-width: 0; width: auto; white-space: normal; }
.probe-table { font-size: 13px; }
.probe-table th, .probe-table td { padding: 10px 8px; }
.probe-table .badge { white-space: normal; }
.probe-subject { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; padding: 11px 13px; margin-bottom: 12px; }
.probe-subject-main, .probe-subject-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; min-width: 0; }
.probe-subject-main strong { font-size: 16px; overflow-wrap: anywhere; }
.probe-subject-main > span { color: var(--muted); font-size: 13px; }
.probe-subject-meta { font-size: 13px; color: var(--muted); }
.probe-subject-meta > span { overflow-wrap: anywhere; min-width: 0; }
.probe-source { margin-bottom: 10px; }
.probe-tabs { margin-bottom: 12px; gap: 7px; }
.probe-summary { margin-bottom: 11px; gap: 11px; }
.probe-summary-card { padding: 13px 14px; }
.probe-summary-card > span { margin-bottom: 6px; }
.probe-summary-card strong { font-size: 26px; }
.probe-caption { margin-bottom: 11px; color: #657b98; }
.probe-empty { padding: 22px 14px; }
.task-log-summary { padding-bottom: 11px; }
.task-log-item { padding: 12px 2px; }
.task-log-item p { color: #3c5474; line-height: 1.65; }
.modal .selected-domains { margin-bottom: 13px; gap: 6px; }
.schedule-scope { margin-bottom: 13px; }
.schedule-triggers { min-width: 0; margin: 0 0 14px; padding: 13px 15px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.schedule-triggers legend { padding: 0 5px; color: var(--ink); font-size: 14px; font-weight: 650; }
.schedule-triggers > p { margin: 0 0 12px; color: #8191a9; font-size: 13px; line-height: 1.6; }
.schedule-triggers .modal-auto-row { margin-bottom: 0; }
.task-trigger-summary { display: block; margin-top: 5px; color: #6f83aa; font-size: 12px; line-height: 1.5; white-space: normal; }
.schedule-scope legend { margin-bottom: 8px; }
.schedule-scope-option { padding: 9px 12px; }
.schedule-domain-picker { margin-bottom: 12px; }
.schedule-picker-head { padding: 11px 12px; }
.schedule-domain-choice { padding: 10px 12px; }
.detail-list > div { padding: 10px 0; gap: 14px; }
.modal .form-field:last-child { margin-bottom: 0; }
.modal .modal-body > :last-child:not(.form-error) { margin-bottom: 0; }
.modal .modal-body > :nth-last-child(2):has(+ .form-error[hidden]) { margin-bottom: 0; }
.ns-result-money:empty { display: none; }
.cf-domain-meta > span:empty, .ns-domain-meta > span:empty { display: none; }
.cf-progress-panel:has(.cf-result-empty) .cf-result-wrap { display: none; }
.cf-progress-panel:has(.cf-result-empty) .cf-progress-head { padding: 12px 14px; }
.modal .form-field input[type='number'] { width: 100%; }
.modal .detail-list dd, .modal .selected-domains > span, .modal .pool-item-domain { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .modal-backdrop { padding: 12px; }
  .modal { max-height: calc(100dvh - 24px); }
  .modal > form, .modal form, .cf-workflow #modal-form { max-height: calc(100dvh - 26px); }
  .modal .modal-head { padding: 13px 15px; }
  .modal .modal-head h2, .cf-workflow .modal-head h2 { font-size: 18px; }
  .modal .modal-body { padding: 15px; }
  .modal .modal-actions { padding: 11px 15px; }
  .modal .modal-actions .btn { font-size: 14px; min-width: 76px; padding: 9px 11px; }
}
@media (max-width: 600px) {
  .modal .form-row { grid-template-columns: 1fr; gap: 13px; margin-bottom: 13px; }
  .modal-auto-row, .cf-filter-switches { grid-template-columns: 1fr; gap: 0; }
  .modal-auto-row { margin-bottom: 0; }
  .schedule-triggers { padding: 11px 12px 0; }
  .cf-filter-option .cf-switch-row { height: auto; }
  .modal .form-field { margin-bottom: 13px; }
  .modal .form-field input, .modal .form-field select, .modal .form-field textarea { font-size: 16px; }
  .ns-expiry-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .ns-expiry-filters .btn { min-width: 0; white-space: normal; font-size: 12px; padding: 8px 5px; line-height: 1.5; }
  .ns-plan { flex-wrap: nowrap; padding: 11px 12px; }
  .ns-plan-label { min-width: 0; font-size: 12px; }
  .ns-plan-label strong { font-size: 14px; }
  .ns-plan-amount { font-size: 23px; }
  .ns-picker-label { gap: 8px; }
  .modal-inline-actions { gap: 7px; }
  .modal-inline-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  /* Keep every table field visible without squeezing columns or hiding a scrollbar. */
  .modal .dialog-data-table { display: block; width: 100%; min-width: 0; max-width: 100%; table-layout: auto; }
  .modal .dialog-data-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .modal .dialog-data-table tbody { display: grid; width: 100%; gap: 9px; padding: 9px; }
  .modal .dialog-data-table tbody tr { display: grid; min-width: 0; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
  .modal .dialog-data-table tbody td { display: grid; grid-template-columns: 84px minmax(0,1fr); align-items: start; gap: 9px; min-width: 0; width: 100%; max-width: none; padding: 5px 0; border: 0; text-align: left; font-size: 14px; color: #324b6a; white-space: normal; overflow-wrap: anywhere; }
  .modal .dialog-data-table tbody td::before { content: attr(data-label); color: #687d98; font-family: 'Segoe UI','Microsoft YaHei',sans-serif; font-size: 12px; line-height: 1.8; font-weight: 500; }
  .modal .dialog-data-table tbody td > * { min-width: 0; max-width: 100%; }
  .modal .dialog-data-table tbody td > .badge { justify-self: start; }
  .modal .dialog-data-table .row-actions, .modal .dialog-data-table .dns-actions { justify-content: flex-start; flex-wrap: wrap; }
  .modal .dialog-data-table .cf-proxy-state { justify-content: flex-start; }
  .modal .dialog-data-table .cf-page-rule-cell { min-width: 0; }
  .modal .dialog-data-table .dialog-table-empty { border: 0; background: transparent; padding: 0; }
  .modal .dialog-data-table .dialog-table-empty td { display: block; padding: 14px 8px; text-align: center; color: #6b7f99; }
  .modal .dialog-data-table .dialog-table-empty td::before { content: none; }
  .cf-result-wrap { max-height: 310px; }
  .probe-table-wrap { max-height: 360px; }
  .cf-rules-toolbar { align-items: center; gap: 8px; }
  .cf-rules-toolbar .cf-rule-heading { font-size: 14px; }
  .cf-rules-toolbar .btn { font-size: 12px; padding: 7px 9px; min-height: 34px; }
  .modal .detail-list > div { gap: 10px; }
  .modal .detail-list dt { flex: 0 1 40%; }
  .modal .detail-list dd { flex: 1 1 60%; }
}

/* Text actions stay compact and readable across every management table. */
.monitor-action,.task-action,.website-action,.row-action-link,.node-action,.node-result-detail{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:#4265b3;font:inherit;font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap;cursor:pointer;transition:color .18s ease,background .18s ease,border-color .18s ease}
.monitor-action:hover,.task-action:hover,.website-action:hover,.row-action-link:hover,.node-action:hover,.node-result-detail:hover{color:#284bcc;background:var(--panel-soft);border-color:var(--line);text-decoration:none}
.monitor-action.danger,.task-action.danger,.website-action.danger,.row-action-link.danger,.cf-delete-link{color:#b64b5a;background:var(--panel);border-color:var(--line)}
.monitor-action.danger:hover,.task-action.danger:hover,.website-action.danger:hover,.row-action-link.danger:hover,.cf-delete-link:hover{color:#a84250;background:var(--panel-soft);border-color:var(--line)}
.monitor-actions,.task-actions,.website-actions,.dns-actions{gap:6px;flex-wrap:wrap;justify-content:center}
.row-action-divider{display:none}
.node-action.edit{color:#5376a0}
.monitor-action:focus-visible,.task-action:focus-visible,.website-action:focus-visible,.row-action-link:focus-visible,.node-action:focus-visible,.node-result-detail:focus-visible{outline:none;outline-offset:0}
.monitor-node-pool-list{display:grid;gap:12px;margin:0 0 14px}
.monitor-node-pool-row{display:grid;grid-template-columns:auto minmax(120px,1fr) minmax(150px,1.2fr) minmax(150px,1.2fr) auto;align-items:end;gap:10px;padding:13px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.monitor-node-pool-row .form-field,body .modal.monitor-pool-dialog .monitor-node-pool-row .form-field{margin:0;min-width:0}
.monitor-node-pool-row .form-field input{min-height:40px}
.pool-node-enabled{display:flex;align-items:center;justify-content:center;gap:6px;height:var(--control-height,46px);margin:0;color:var(--muted);font-size:12px;white-space:nowrap}
.pool-node-enabled input{accent-color:var(--green);width:15px;height:15px}
.monitor-node-pool-row>[data-action="remove-monitor-pool-node"]{margin-bottom:0}
@media(max-width:760px){.monitor-node-pool-row{grid-template-columns:1fr 1fr}.monitor-node-pool-row .pool-node-enabled{grid-column:1}.monitor-node-pool-row>[data-action="remove-monitor-pool-node"]{grid-column:2;justify-self:end}.monitor-node-pool-row .form-field:nth-of-type(2),.monitor-node-pool-row .form-field:nth-of-type(3),.monitor-node-pool-row .form-field:nth-of-type(4){grid-column:1 / -1}}
.monitor-node-pool-row .modal-auto-row{display:contents}

/* Threshold controls remain inside the node dialog, preserving unsaved nodes. */
.monitor-alert-settings{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink)}
.monitor-alert-settings[hidden]{display:none}
.monitor-alert-heading,.monitor-alert-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.monitor-alert-heading h3{margin:0;color:var(--ink);font-size:16px;font-weight:600}
.monitor-alert-heading>span,.monitor-alert-footer>span{color:var(--muted);font-size:13px}
.monitor-alert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.monitor-alert-field{display:grid;gap:9px;min-width:0;font-size:14px;color:var(--ink)}
.monitor-alert-input{display:flex;align-items:center;gap:9px;min-height:46px;padding:0 12px;background:var(--panel-soft);border:1px solid var(--line);border-radius:8px}
.monitor-alert-input:focus-within{border-color:var(--accent)}
.monitor-alert-input>span{color:var(--muted);font-size:13px;white-space:nowrap}
body .modal .monitor-alert-input input{width:100%;min-width:0;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--ink);text-align:center}
body .modal .monitor-alert-input input:focus{box-shadow:none;border:0;outline:none}
@media(max-width:760px){.monitor-alert-grid{grid-template-columns:1fr}.monitor-alert-footer{align-items:flex-start}.monitor-alert-footer .btn{margin-left:auto}}

/* Monitor toolbar, shared probe pool and manual pinned order. */
.monitor-table .list-heading-filters > [data-action="add-monitor"] { flex: 0 0 auto; white-space: nowrap; }
.monitor-action.monitor-pin-up { min-width: 31px; width: 31px; padding: 6px; color: #365fe9; background: var(--panel-soft); border-color: var(--line); }
.monitor-pin-up .icon { width: 17px; height: 17px; }
.monitor-action.monitor-pin-up:disabled { opacity: .35; cursor: default; }
.modal.monitor-pool-dialog { width: min(100%, 920px); }
.monitor-pool-dialog .monitor-node-pool-row { grid-template-columns: 56px minmax(100px, 1fr) minmax(155px, 1.3fr) minmax(145px, 1.2fr) auto; }
.monitor-pool-dialog .monitor-node-pool-row .form-field { font-size: 14px; }
.monitor-pool-dialog .monitor-node-pool-row .form-field input { width: 100%; min-width: 0; }
.monitor-pool-dialog .monitor-node-pool-row > .btn { height: var(--control-height,46px); min-height: var(--control-height,46px); align-self:end; margin:0; }
@media (max-width: 760px) {
  .monitor-pool-dialog .monitor-node-pool-row { grid-template-columns: minmax(0, 1fr) auto; }
  .monitor-pool-dialog .monitor-node-pool-row > .form-field { grid-column: 1 / -1; }
  .monitor-pool-dialog .pool-node-enabled { grid-column: 1; grid-row: 1; }
  .monitor-pool-dialog [data-action="remove-monitor-pool-node"] { grid-column: 2; grid-row: 1; }
}

/* Direct SSL and DNS controls share the management action treatment. */
.ssl-mode-button { border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); color: #4164ac; min-height: 32px; padding: 6px 11px; font-size: 13px; font-weight: 500; cursor: pointer; }
.ssl-mode-button:hover { background: var(--panel-soft); border-color: var(--line); }
.ssl-mode-button.flexible { background: var(--panel-soft); border-color: var(--line); color: #9a702e; }
.ssl-mode-help { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: #5f7597; font-size: 14px; line-height: 1.8; margin-bottom: 14px; }
.dns-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.dns-toolbar-copy strong { font-size: 15px; color: #2d4466; }
.dns-toolbar-copy strong span { margin-left: 6px; padding: 2px 7px; border-radius: 5px; background: var(--panel-soft); color: #617aa2; font-size: 12px; font-weight: 500; }
.dns-toolbar-copy p { margin: 5px 0 0; color: #7184a0; font-size: 12px; line-height: 1.6; }
.dns-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cf-proxy-toggle { min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); font-family: inherit; transition: background .16s, border-color .16s; }
.cf-proxy-toggle.is-proxied { border-color: var(--line); background: var(--panel-soft); }
.cf-proxy-toggle:hover { border-color: var(--line); background: var(--panel-soft); }
.cf-proxy-toggle.is-proxied:hover { border-color: #e7b879; background: var(--panel-soft); }
.cf-proxy-toggle[aria-busy=true] { opacity: .5; }
.cf-execution-actions button { min-height: 32px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 7px; color: #b64b5a; background: var(--panel); }
.cf-execution-actions button:hover { background: var(--panel-soft); border-color: var(--line); }
.ns-picker-heading button, .schedule-picker-tools button { min-height: 30px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: #4265b3; }
@media (max-width: 760px) {
  .dns-toolbar { align-items: flex-start; gap: 10px; }
  .dns-toolbar-actions { width: 100%; }
  .dns-toolbar-actions .btn { flex: 1 1 auto; min-height: 36px; }
  .modal .dialog-data-table .cf-proxy-toggle { justify-self: start; }
}