* { box-sizing: border-box; }
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #fff;
  --surface-alt: #fbfcfe;
  --surface-soft: #f3f6fa;
  --surface-hover: #eef4ff;
  --text: #1c2430;
  --muted: #647084;
  --border: #d9dee7;
  --border-soft: #e1e5ec;
  --header-bg: #172033;
  --header-text: #fff;
  --header-muted: #c8d1df;
  --button-bg: #fff;
  --button-text: #172033;
  --button-secondary-bg: #f6f7f9;
  --link: #173d77;
  --notice-bg: #fff5d6;
  --notice-border: #e3c766;
  --input-bg: #fff;
  --input-text: #1c2430;
  --code-bg: transparent;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --surface: #151b23;
  --surface-alt: #1a222d;
  --surface-soft: #202a36;
  --surface-hover: #243248;
  --text: #e6edf3;
  --muted: #9aa8ba;
  --border: #303b49;
  --border-soft: #263241;
  --header-bg: #090d13;
  --header-text: #f4f7fb;
  --header-muted: #9fb0c4;
  --button-bg: #202a36;
  --button-text: #f0f4f8;
  --button-secondary-bg: #1a222d;
  --link: #8ab4f8;
  --notice-bg: #332a10;
  --notice-border: #8a6d1d;
  --input-bg: #0f141b;
  --input-text: #f0f4f8;
  --code-bg: #0f141b;
}
body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--text); }
header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 24px; padding: 18px 24px 14px; background: #172033; color: #fff; }
header > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
header h1 { margin: 0; font-size: 22px; }
header p { margin: 4px 0 0; color: #c8d1df; }
nav { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
nav a, .button, button { border: 1px solid #52627a; background: #fff; color: #172033; padding: 9px 12px; border-radius: 6px; text-decoration: none; cursor: pointer; }
nav a { background: transparent; color: #fff; border-color: #74849a; }
.version { grid-column: 4; grid-row: 1; justify-self: end; display: grid; gap: 2px; text-align: right; color: #c8d1df; line-height: 1.2; }
.version span:first-child { color: #fff; font-weight: 700; }
.version span:last-child { font-size: 12px; text-transform: uppercase; letter-spacing: 0; }
.settings-subnav-shell { grid-column: 2; grid-row: 2; justify-self: end; background: transparent; padding: 0; }
.settings-subnav-shell .settings-subnav { max-width: none; margin: 0; }
.compact-button { display: inline-flex; padding: 6px 9px; line-height: 1; }
.inline-form { display: inline-flex; align-items: center; margin: 0; }
.inline-control { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.inline-control select { width: auto; min-width: 170px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.secondary-button { background: #f6f7f9; border-color: #b9c2d0; }
.secondary-button.active, .secondary-button[aria-pressed="true"] { border-color: #172033; background: #172033; color: #fff; }
.text-button { color: #52627a; text-decoration: none; padding: 9px 4px; }
.text-button:hover { color: #172033; text-decoration: underline; }
main { max-width: 1440px; margin: 24px auto; padding: 0 20px; }
.login { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.login header { width: 100%; }
.login .login-panel { align-self: center; justify-self: center; margin: 24px 16px; }
section, .login-panel { background: #fff; border: 1px solid #d9dee7; border-radius: 8px; padding: 20px; margin-bottom: 18px; }
.login-panel { width: min(420px, calc(100vw - 32px)); }
.login-panel h1 { margin-top: 0; }
label { display: grid; gap: 7px; margin-bottom: 14px; font-weight: 700; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #b9c2d0; border-radius: 6px; font: inherit; }
textarea { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.overview dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; }
.overview div { border: 1px solid #e1e5ec; border-radius: 6px; padding: 12px; }
.overview-stat-grid { margin: 0 0 14px !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
.overview-stat-grid dd { font-size: 22px; font-weight: 700; }
.compact-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 14px; }
.compact-dl div { border: 1px solid #e1e5ec; border-radius: 6px; padding: 10px; }
dt { font-weight: 700; margin-bottom: 6px; }
dd { margin: 0; overflow-wrap: anywhere; }
.section-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.section-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border-bottom: 1px solid #e1e5ec; padding: 10px; overflow-wrap: anywhere; }
tbody tr:nth-child(odd) { background: #fbfcfe; }
tbody tr:nth-child(even) { background: #f3f6fa; }
tbody tr:hover { background: #eef4ff; }
.selected-row, tbody tr.selected-row { background: #e6efff; }
.draft-group-row td { background: #e8edf5; border-top: 2px solid #9aa8ba; font-weight: 600; }
.draft-group-row span { margin-left: 10px; font-weight: 500; }
code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.table-scroll { overflow-x: auto; }
.powerdns-table-scroll { max-width: 100%; }
.powerdns-server-table,
.powerdns-stat-table { table-layout: fixed; min-width: 760px; }
.powerdns-server-id-col { width: 22%; }
.powerdns-server-type-col { width: 13%; }
.powerdns-server-daemon-col { width: 16%; }
.powerdns-server-version-col { width: 17%; }
.powerdns-server-url-col { width: 32%; }
.powerdns-stat-name-col { width: 26%; }
.powerdns-stat-type-col { width: 18%; }
.powerdns-stat-value-col { width: 56%; }
.powerdns-cell-clip,
.powerdns-cell-wrap { display: block; min-width: 0; max-width: 100%; }
.powerdns-cell-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.powerdns-cell-wrap { overflow-wrap: anywhere; word-break: break-word; }
.powerdns-stat-table code { display: block; max-width: 100%; max-height: 14rem; overflow: auto; }
.powerdns-ring-stat code { max-height: none; color: var(--muted); }
.powerdns-collapsed-value { display: grid; gap: 8px; }
.powerdns-value-toggle { position: absolute; opacity: 0; pointer-events: none; }
.powerdns-collapsed-value code { max-height: calc(1.25em * 4); overflow: hidden; }
.powerdns-value-toggle:checked + code { max-height: 18rem; overflow: auto; }
.powerdns-collapsed-value label { display: inline-flex; justify-self: start; margin: 0; cursor: pointer; color: var(--link); font-weight: 700; }
.powerdns-value-hide { display: none; }
.powerdns-value-toggle:checked ~ label .powerdns-value-show { display: none; }
.powerdns-value-toggle:checked ~ label .powerdns-value-hide { display: inline; }
.notice { background: #fff5d6; border: 1px solid #e3c766; border-radius: 6px; padding: 10px; }
.compact-notice { margin: 0; padding: 8px 10px; }
.draft-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; padding: 8px 10px; }
.muted { color: #647084; }
.stack { display: grid; gap: 14px; }
.settings-subnav { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; padding: 10px; border: 1px solid #d9dee7; border-radius: 8px; background: #f7f9fc; }
.settings-subnav a { border: 1px solid #b9c2d0; background: #fff; color: #172033; padding: 7px 10px; border-radius: 6px; text-decoration: none; }
.settings-subnav a.active { border-color: #172033; background: #172033; color: #fff; }
.settings-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.settings-hub article { border-top: 2px solid #283850; padding-top: 10px; }
.settings-hub h3 { margin: 0 0 10px; }
.summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.summary-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid #e1e5ec; padding: 10px 0; }
.summary-list li:last-child { border-bottom: 0; }
.summary-list span { display: block; color: #647084; margin-top: 3px; }
.secondary-status-views { display: grid; gap: 14px; }
.secondary-status-card { border: 1px solid #d9dee7; border-radius: 8px; background: #fbfcfe; padding: 14px; margin-bottom: 14px; }
.secondary-status-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-bottom: 12px; }
.secondary-status-card-header h3 { margin: 0; }
.secondary-status-card-header p { margin: 4px 0 0; }
.mini-metrics { display: grid; grid-template-columns: repeat(4, minmax(70px, auto)); gap: 8px; margin: 0; }
.mini-metrics div { border: 1px solid #e1e5ec; border-radius: 6px; padding: 8px; background: #fff; }
.mini-metrics dt { font-size: 12px; margin-bottom: 3px; color: #647084; }
.mini-metrics dd { font-weight: 700; }
.secondary-status-list { display: grid; gap: 10px; }
.secondary-status-item { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(360px, 1.3fr) minmax(260px, 0.8fr); gap: 12px; align-items: center; border-top: 1px solid #e1e5ec; padding-top: 10px; }
.secondary-status-item:first-child { border-top: 0; padding-top: 0; }
.secondary-status-main { display: grid; gap: 4px; min-width: 0; }
.secondary-status-main span { color: #647084; overflow-wrap: anywhere; }
.secondary-status-detail { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 8px; margin: 0; }
.secondary-status-detail div { min-width: 0; }
.secondary-status-detail dt { font-size: 12px; margin-bottom: 3px; color: #647084; }
.secondary-status-detail dd { overflow-wrap: anywhere; }
.secondary-status-verify { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0; }
.account-layout { display: grid; grid-template-columns: minmax(320px, 0.85fr) minmax(360px, 1.15fr); gap: 16px; align-items: start; }
.empty-detail { border: 1px dashed #b9c2d0; border-radius: 8px; padding: 18px; background: #fbfcfe; }
.account-card { border: 1px solid #d9dee7; border-radius: 8px; padding: 16px; background: #fbfcfe; }
.account-card h3 { margin: 0; }
.account-card p { margin: 4px 0 0; }
.account-card dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 14px; }
.account-card dl div { border: 1px solid #e1e5ec; border-radius: 6px; padding: 10px; background: #fff; }
.account-detail-list { display: grid; gap: 4px; padding-left: 18px; }
.managed-defaults-list { display: grid; gap: 4px; padding-left: 18px; }
fieldset { border: 1px solid #d9dee7; border-radius: 8px; padding: 12px; margin: 0 0 14px; }
legend { font-weight: 700; padding: 0 6px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 8px; }
.check input { width: auto; }
.check.primary-account-locked { color: #647084; opacity: 0.72; }
.check.primary-account-locked input { cursor: not-allowed; }
.zone-essentials { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; }
.zone-essentials > div { min-width: 0; }
.compact-list { margin: 0; padding-left: 20px; }
.record-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(160px, 240px) minmax(180px, auto); gap: 12px; margin: 14px 0; align-items: end; }
.record-toolbar label { margin: 0; }
.record-toolbar .record-toggle { align-self: center; white-space: nowrap; }
.record-list { display: grid; gap: 12px; }
.record-host-group { display: grid; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface-alt); }
.record-host-group[hidden] { display: none; }
.record-host-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.record-host-dyndns { display: contents; min-width: 0; }
.record-host-dyndns .record-dyndns-panel { display: contents; margin-top: 0; padding-top: 0; border-top: 0; }
.record-host-dyndns .record-dyndns-panel > summary { grid-column: 2; justify-self: end; }
.record-host-dyndns .record-dyndns-panel > .record-dyndns-form { grid-column: 1 / -1; }
.record-host-dyndns > .record-dyndns-panel:not(details) { display: flex; grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.record-host-records { display: grid; gap: 10px; }
.record-card { border: 1px solid #d9dee7; border-radius: 8px; padding: 14px; background: #fbfcfe; }
.record-card[hidden] { display: none; }
.record-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 10px; }
.record-title { display: grid; min-width: 0; gap: 4px; }
.record-title strong { overflow-wrap: anywhere; }
.record-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.domain-cell-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 220px; }
.domain-cell-main > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.domain-cell-badges { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.domain-cell-badges [data-dashboard-authority-badges] { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.type-pill, .status-pill { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid #bac5d5; padding: 3px 8px; font-size: 12px; font-weight: 700; background: #fff; }
.status-pill.disabled { border-color: #d08b27; color: #8a4f00; background: #fff6e6; margin-left: 8px; }
.status-pill.dnssec-ok { border-color: #25815c; color: #185c42; background: #e8f7ef; margin-left: 8px; }
.status-pill.dnssec-warning { border-color: #d08b27; color: #8a4f00; background: #fff6e6; margin-left: 8px; }
.status-pill.registrar-ok { border-color: #25815c; color: #185c42; background: #e8f7ef; white-space: nowrap; }
.status-pill.registrar-warning { border-color: #d08b27; color: #8a4f00; background: #fff6e6; white-space: nowrap; }
.status-pill.registrar-expired { border-color: #b42318; color: #8a1f17; background: #fde8e5; white-space: nowrap; }
.status-pill.registrar-unknown { border-color: #8aa0b7; color: #43556a; background: #f2f6fa; white-space: nowrap; }
.status-pill.authority-warning { border-color: #d08b27; color: #8a4f00; background: #fff6e6; white-space: nowrap; }
.status-pill.authority-missing { border-color: #b42318; color: #8a1f17; background: #fde8e5; white-space: nowrap; }
.status-pill.record-check-ok { border-color: #25815c; color: #185c42; background: #e8f7ef; }
.status-pill.record-check-warning { border-color: #d08b27; color: #8a4f00; background: #fff6e6; }
.status-pill.record-check-neutral { border-color: #8aa0b7; color: #43556a; background: #f2f6fa; }
.pending-draft-pill { border-color: #8c6b00; color: #5d4700; background: #fff7d1; text-decoration: none; }
.pending-draft-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.record-card-pending-draft { border-left-color: #8c6b00; }
.record-actions { display: inline-flex; gap: 8px; }
.record-actions a { color: #173d77; }
.record-values { display: grid; gap: 8px; }
.record-value { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.record-value code { display: inline; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.record-dyndns-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid #e1e5ec; margin-top: 10px; padding-top: 10px; }
.record-dyndns-panel summary { cursor: pointer; font-weight: 700; }
.record-dyndns-spacer { flex: 1 1 auto; min-width: 16px; }
.record-dyndns-settings { position: relative; flex: 0 0 auto; }
.record-dyndns-settings > summary { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); list-style: none; line-height: 1; }
.record-dyndns-settings > summary::-webkit-details-marker { display: none; }
.record-dyndns-settings > summary:hover, .record-dyndns-settings[open] > summary { border-color: var(--border); background: var(--button-secondary-bg); color: var(--button-text); }
.record-dyndns-settings-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 21; display: grid; gap: 8px; min-width: 230px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 16px 34px rgb(0 0 0 / 18%); padding: 10px; }
.record-dyndns-settings-panel p { margin: 0; }
.record-dyndns-settings-panel .inline-form { display: block; }
.record-dyndns-settings-panel button { width: 100%; justify-content: center; }
.danger-button { border-color: #b42318; color: #8a1f17; }
html[data-theme="dark"] .danger-button { border-color: #e06b61; color: #ffb4ac; }
.record-dyndns-form { display: grid; grid-template-columns: minmax(300px, 1.15fr) minmax(340px, 1.25fr) minmax(100px, 140px) auto; gap: 10px; align-items: end; width: 100%; margin-top: 10px; }
.record-dyndns-form label { margin: 0; }
.record-dyndns-password-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 8px; align-items: center; }
.dyndns-log-row td { background: var(--surface); padding-top: 0; }
.dyndns-update-log-panel { margin: 0; }
.dyndns-update-log-panel summary { cursor: pointer; font-weight: 700; }
.dyndns-update-log-table-wrap { max-width: 100%; overflow-x: auto; }
.dyndns-update-log-table { min-width: 920px; table-layout: auto; }
.dyndns-update-log-table th, .dyndns-update-log-table td { vertical-align: top; }
.dyndns-update-log-table th:nth-child(2), .dyndns-update-log-table th:nth-child(3),
.dyndns-update-log-table td:nth-child(2), .dyndns-update-log-table td:nth-child(3) { width: 1%; white-space: nowrap; }
.dyndns-log-time, .dyndns-log-address, .dyndns-log-user-agent { white-space: nowrap; }
.dyndns-log-record { font-weight: 700; white-space: nowrap; }
.dyndns-monitor-list { display: grid; gap: 10px; }
.dyndns-monitor-card { border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-alt); padding: 12px; display: grid; gap: 10px; }
.dyndns-monitor-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.dyndns-monitor-title { display: grid; gap: 3px; min-width: 0; }
.dyndns-monitor-title strong, .dyndns-monitor-details dd, .dyndns-monitor-detail { overflow-wrap: anywhere; }
.dyndns-monitor-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dyndns-monitor-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 0; }
.dyndns-monitor-details div { min-width: 0; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--surface); padding: 8px; }
.dyndns-monitor-details dt { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.dyndns-monitor-details dd { font-weight: 700; }
.dyndns-monitor-detail { margin: 0; color: var(--muted); }
.dyndns-monitor-warning { margin: 0; color: var(--notice-border); font-weight: 700; }
.dyndns-monitor-action { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.dyndns-update-log-panel table { margin-top: 10px; font-size: 13px; }
.dyndns-update-log-empty { border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px 10px; background: var(--surface); color: var(--muted); }
.record-dyndns-panel .dyndns-update-log-panel { position: relative; flex: 0 0 auto; margin-left: 0; }
.record-dyndns-panel .dyndns-update-log-panel summary { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; background: var(--button-bg); color: var(--button-text); padding: 6px 9px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.record-dyndns-panel .dyndns-update-log-content { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: min(980px, calc(100vw - 48px)); max-width: calc(100vw - 48px); max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 16px 34px rgb(0 0 0 / 18%); padding: 10px; }
.record-dyndns-panel .dyndns-update-log-content table { margin-top: 0; }
.record-dyndns-panel .dyndns-update-log-content .dyndns-update-log-empty { border: 0; padding: 0; background: transparent; }
.disabled-record code { color: #7a4b00; }
.record-edit-form { border-top: 1px solid #e1e5ec; display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; }
.record-edit-form[hidden] { display: none; }
.add-record-card { border-style: dashed; background: #fff; }
.snippet-record-form fieldset .record-card fieldset { margin: 12px 0 0; background: #fff; }
.snippet-record-row .record-card-header { margin-bottom: 12px; }
.snippet-record-edit-panel { margin-top: 12px; }
.snippet-record-edit-panel[hidden] { display: none; }
.add-record-fields { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(120px, 180px) minmax(120px, 180px); gap: 12px; }
.add-record-fields label { margin-bottom: 0; }
.record-edit-row { display: grid; grid-template-columns: minmax(110px, 140px) minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; }
.record-edit-row .check { margin: 0; }
.record-edit-row > input:only-child { grid-column: 1 / -1; }
.record-helper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; grid-column: 1 / -1; }
.record-helper-grid label { margin: 0; font-size: 13px; font-weight: 700; }
.record-helper-source { display: none; }
.record-edit-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.record-comments { margin-top: 10px; color: #647084; }
.record-comments p { margin: 4px 0; overflow-wrap: anywhere; }
.details-panel { border: 1px solid #e1e5ec; border-radius: 8px; margin-top: 14px; padding: 0; }
.details-panel summary { cursor: pointer; font-weight: 700; padding: 12px 14px; }
.details-panel[open] { padding-bottom: 12px; }
.details-panel[open] summary { border-bottom: 1px solid #e1e5ec; margin-bottom: 12px; }
.details-panel > :not(summary) { margin-left: 14px; margin-right: 14px; }
.details-summary-title { display: block; }
.details-panel[open] .secondary-zone-preview { display: none; }
.secondary-zone-preview { display: grid; gap: 4px; margin-top: 8px; font-weight: 400; }
.secondary-zone-preview-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(90px, auto) minmax(160px, auto); gap: 12px; align-items: baseline; }
.secondary-zone-preview-row span { color: #5e6a78; }
.dnssec-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; margin: 14px 0; }
.dnssec-toggle-form { display: contents; }
.dnssec-toggle-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.dnssec-command-group { display: flex; justify-content: flex-end; }
.dnssec-command-form { justify-self: end; }
.toggle-control { display: inline-flex; }
.toggle-button { display: inline-flex; align-items: center; gap: 8px; border-color: #8aa0b7; background: #f2f6fa; color: #243142; min-height: 38px; }
.toggle-button.is-on { border-color: #25815c; background: #e8f7ef; color: #185c42; }
.toggle-button-track { position: relative; width: 34px; height: 18px; border-radius: 999px; background: #8aa0b7; flex: 0 0 auto; }
.toggle-button-track span { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform 120ms ease; }
.toggle-button.is-on .toggle-button-track { background: #25815c; }
.toggle-button.is-on .toggle-button-track span { transform: translateX(16px); }
.dnssec-key-list { display: grid; gap: 12px; }
.dnssec-key-card { border: 1px solid #d9dee7; border-radius: 8px; padding: 14px; background: #fbfcfe; }
.dnssec-key-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.dnssec-key-card h3 { margin: 0 0 10px; font-size: 16px; }
.dnssec-key-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0; }
.dnssec-key-meta div { border: 1px solid #e1e5ec; border-radius: 6px; padding: 8px; background: #fff; min-width: 0; }
.dnssec-key-meta dt { margin: 0 0 4px; color: #647084; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.dnssec-key-meta dd { margin: 0; overflow-wrap: anywhere; }
.dnssec-key-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dnssec-key-material-grid { display: grid; gap: 10px; margin-top: 12px; }
.dnssec-key-material-block { border: 1px solid #e1e5ec; border-radius: 6px; padding: 10px; background: #fff; margin: 0; }
.dnssec-key-material-block h4 { margin: 0 0 8px; font-size: 13px; }
.dnssec-key-material-block div { display: grid; gap: 8px; min-width: 0; }
.dnssec-key-material-block code { display: block; width: 100%; }
.compact-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.compact-form label { margin-bottom: 0; }
.record-type-table .record-type-option { margin: 0; }
.theme-toggle { grid-column: 3; grid-row: 1; justify-self: end; border-color: #74849a; background: transparent; color: var(--header-text); white-space: nowrap; }
.theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }
header { background: var(--header-bg); color: var(--header-text); }
header p, .version { color: var(--header-muted); }
nav a { color: var(--header-text); }
main a, .record-actions a { color: var(--link); }
section, .login-panel, .account-card, .secondary-status-card, .record-card, .details-panel, fieldset, .empty-detail, .dnssec-key-card, .dnssec-key-material-block { background: var(--surface); border-color: var(--border); }
.settings-subnav, .secondary-status-card, .account-card, .record-card, .empty-detail, .dnssec-key-card { background: var(--surface-alt); }
.add-record-card, .snippet-record-form fieldset .record-card fieldset, .mini-metrics div, .account-card dl div, .overview div, .compact-dl div, .dnssec-key-meta div, .dnssec-key-material-block { background: var(--surface); border-color: var(--border-soft); }
nav a, .button, button { background: var(--button-bg); color: var(--button-text); border-color: #52627a; }
nav a, .theme-toggle { background: transparent; color: var(--header-text); }
.secondary-button { background: var(--button-secondary-bg); border-color: var(--border); }
input, select, textarea { background: var(--input-bg); color: var(--input-text); border-color: var(--border); }
input::placeholder, textarea::placeholder { color: var(--muted); }
th, td, .summary-list li, .secondary-status-item, .record-edit-form, .details-panel[open] summary { border-color: var(--border-soft); }
tbody tr:nth-child(odd) { background: var(--surface-alt); }
tbody tr:nth-child(even) { background: var(--surface-soft); }
tbody tr:hover, .selected-row, tbody tr.selected-row { background: var(--surface-hover); }
.draft-group-row td { background: var(--surface-soft); border-color: var(--muted); }
.muted, .summary-list span, .secondary-status-main span, .secondary-status-detail dt, .mini-metrics dt, .record-comments, .secondary-zone-preview-row span, .dnssec-key-meta dt { color: var(--muted); }
.notice { background: var(--notice-bg); border-color: var(--notice-border); color: var(--text); }
code { background: var(--code-bg); color: var(--text); }
html[data-theme="dark"] .type-pill,
html[data-theme="dark"] .status-pill { background: #0f141b; border-color: #46566b; color: #dce7f3; }
html[data-theme="dark"] .status-pill.disabled,
html[data-theme="dark"] .status-pill.dnssec-warning,
html[data-theme="dark"] .status-pill.registrar-warning,
html[data-theme="dark"] .status-pill.record-check-warning { border-color: #b88725; color: #ffd98a; background: #33240b; }
html[data-theme="dark"] .status-pill.dnssec-ok,
html[data-theme="dark"] .status-pill.registrar-ok,
html[data-theme="dark"] .status-pill.record-check-ok { border-color: #3ba875; color: #9af0c6; background: #0d2b20; }
html[data-theme="dark"] .status-pill.registrar-expired { border-color: #d0443e; color: #ffb4ad; background: #351111; }
html[data-theme="dark"] .status-pill.authority-warning { border-color: #d89a35; color: #ffd699; background: #35230d; }
html[data-theme="dark"] .status-pill.authority-missing { border-color: #d0443e; color: #ffb4ad; background: #351111; }
html[data-theme="dark"] .status-pill.registrar-unknown,
html[data-theme="dark"] .status-pill.record-check-neutral { border-color: #58708c; color: #c8d6e6; background: #172232; }
html[data-theme="dark"] .toggle-button { border-color: #58708c; color: #c8d6e6; background: #172232; }
html[data-theme="dark"] .toggle-button.is-on { border-color: #3ba875; color: #9af0c6; background: #0d2b20; }
html[data-theme="dark"] .pending-draft-pill { border-color: #b88725; color: #ffe7a6; background: #352a0d; }
html[data-theme="dark"] .disabled-record code { color: #ffd98a; }
html[data-theme="dark"] .text-button { color: #a8b8cb; }
html[data-theme="dark"] .text-button:hover { color: #e6edf3; }
@media (max-width: 680px) {
  header { display: flex; align-items: flex-start; flex-direction: column; }
  header > div:first-child, .version, .settings-subnav-shell { grid-column: auto; grid-row: auto; }
  .settings-subnav-shell { width: 100%; }
  nav { justify-content: flex-start; margin-left: 0; }
  .zone-essentials, .record-toolbar, .record-host-header, .record-card-header, .account-layout, .settings-hub, .summary-list li, .add-record-fields, .record-dyndns-form, .record-dyndns-password-row, .secondary-status-card-header, .secondary-status-item, .secondary-status-detail, .secondary-status-verify { grid-template-columns: 1fr; }
  .record-host-dyndns .record-dyndns-panel > summary { grid-column: 1; justify-self: start; }
  .dnssec-key-card-header { grid-template-columns: 1fr; }
  .dnssec-key-actions { justify-content: flex-start; }
  .dnssec-controls { grid-template-columns: 1fr; }
  .dnssec-command-group, .dnssec-command-form { justify-content: flex-start; justify-self: start; }
  .record-edit-row { grid-template-columns: 1fr; }
  .record-meta { justify-content: flex-start; }
  .mini-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}