:root { color-scheme: dark; font-family: "Segoe UI", Arial, sans-serif; color: #f4f0e6; background: #171917; --muted: #b7b8ad; --gold: #ecd18b; --line: #ffffff16; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100svh; background: radial-gradient(ellipse at 85% 0, #b6924220, transparent 45%), #171917; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, .button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.brand { display: inline-flex; align-items: baseline; gap: 10px; font-size: 28px; font-weight: 650; letter-spacing: -.055em; }
.brand span { color: var(--gold); }
.brand small { padding-left: 12px; border-left: 1px solid #d6c79550; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.login-shell { min-height: 100svh; display: grid; place-items: center; padding: 32px 20px; }
.login-panel { width: min(460px, 100%); padding: clamp(26px, 5vw, 48px); border: 1px solid #d6c79535; border-radius: 18px; background: linear-gradient(145deg, #2c2d28, #20221f); box-shadow: 0 30px 90px #0005; }
.eyebrow { color: var(--gold); font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 14px 0 12px; font-size: clamp(30px, 4vw, 46px); font-weight: 550; letter-spacing: -.045em; line-height: 1.15; }
p { color: var(--muted); line-height: 1.65; }
.login-panel h1 { margin-top: 38px; font-size: 32px; }
.login-form { display: grid; gap: 10px; margin-top: 28px; }
label { margin-top: 8px; font-size: 14px; font-weight: 500; }
input { width: 100%; min-width: 0; padding: 13px 14px; color: #fff; background: #161815; border: 1px solid #ffffff25; border-radius: 7px; }
.button:disabled, button:disabled, input:disabled { cursor: not-allowed; opacity: .56; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; border: 1px solid #f4dfaa70; border-radius: 7px; color: #24231d; background: linear-gradient(115deg, #cbae69, #f2dfa6); font-weight: 650; }
.button:hover { filter: brightness(1.08); }
.login-form .button { margin-top: 14px; }
.back-link { display: inline-block; margin-top: 26px; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.notice { padding: 14px 16px; border: 1px solid #d5aa6360; border-radius: 8px; color: #f3dcb1; background: #6b461b25; line-height: 1.55; }
.admin-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; min-height: 86px; padding: 20px clamp(20px, 4vw, 64px); background: linear-gradient(120deg, #2d2b27, #5a5038 65%, #aa9256); border-bottom: 1px solid #d6c79545; }
.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; font-size: 14px; }
.header-actions form { margin: 0; }
.quiet-button { min-height: 44px; padding: 10px 18px; border: 1px solid #fff4cf50; border-radius: 6px; color: #fff7dc; background: #29291fe0; white-space: nowrap; }
.danger-button { min-height: 40px; padding: 9px 14px; border: 1px solid #ff8d7b70; border-radius: 6px; color: #ffe6df; background: #6d1d14; }
.admin-layout { width: min(1600px, 100%); margin-inline: auto; display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100svh - 86px); }
.sidebar { padding: 38px 22px; border-right: 1px solid var(--line); }
.nav-label { margin: 0 12px 16px; color: #989b90; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.nav-link { display: block; margin-block: 5px; padding: 14px 16px; border: 1px solid transparent; border-radius: 8px; color: #bfc1b5; font-size: 15px; }
.nav-link:hover { background: #ffffff06; color: #fff; }
.nav-link.is-active { border-color: #d6c79535; background: #d3b46710; color: #f2d99e; }
.skip-link { position: absolute; z-index: 10; top: 8px; left: 8px; padding: 12px; background: #252820; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.action-card { position: relative; min-width: 0; padding: 30px; border: 1px solid #d6c79525; border-radius: 12px; background: linear-gradient(130deg, #303129, #22251f); transition: border-color .18s, background .18s; }
.action-card:hover { border-color: #d6c79590; background: #30332a; }
.action-card h2 { margin: 0 30px 12px 0; font-size: 21px; font-weight: 550; letter-spacing: -.025em; }
.action-card p { margin: 0; font-size: 15px; }
.card-arrow { position: absolute; top: 25px; right: 25px; font-size: 24px; color: var(--gold); }
.support-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 24px; padding: 26px 30px; border: 1px solid var(--line); border-radius: 12px; }
.support-strip p { margin: 6px 0 0; font-size: 14px; }
.status-label { color: var(--gold); font-size: 13px; }
address { color: var(--muted); font-style: normal; line-height: 1.7; }
@media (max-width: 1000px) { .action-card { padding: 24px; } }
@media (max-width: 560px) { .action-grid { grid-template-columns: 1fr; } .brand small { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .action-card { transition: none; } }
.dashboard { min-width: 0; padding: clamp(26px, 4vw, 64px); }
.dashboard-intro { margin-bottom: 38px; }
.dashboard-intro p { max-width: 620px; margin: 0; }
.workspace-panel { min-height: 300px; padding: clamp(24px, 4vw, 44px); border: 1px solid #d6c79525; border-radius: 14px; background: linear-gradient(140deg, #2b2d2780, #20221f90); box-shadow: 0 16px 50px #0002; }
.workspace-panel h2 { font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
.workspace-panel p { max-width: 560px; }
.admin-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 36px; color: #9b9e93; font-size: 13px; }
.customer-details { display: grid; grid-template-columns: minmax(100px, 140px) minmax(0, 1fr); gap: 16px; line-height: 1.6; }
.customer-details dt { color: var(--muted); }
.customer-details dd { margin: 0; overflow-wrap: anywhere; }
.password-panel { margin-top: 24px; }
.password-panel .login-form { max-width: 460px; }
@media (max-width: 440px) { .customer-details { grid-template-columns: 1fr; gap: 6px; } .customer-details dd { margin-bottom: 16px; } }
@media (max-width: 760px) { .admin-layout { grid-template-columns: 1fr; } .sidebar { padding: 18px 20px; border-right: 0; border-bottom: 1px solid var(--line); } .nav-label { display: none; } .admin-header { gap: 14px; } .header-actions { gap: 14px; } .workspace-panel { min-height: 240px; } }

/* Accountbeheer: formulieren en lijsten blijven bruikbaar bij smalle schermen en zoom. */
select { font: inherit; width: 100%; min-width: 0; min-height: 44px; padding: 13px 14px; color: #fff; background: #161815; border: 1px solid #ffffff25; border-radius: 7px; }
select:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.workspace-panel + .workspace-panel, .dashboard > .notice { margin-bottom: 24px; }
.workspace-panel + .workspace-panel { margin-top: 24px; }
.workspace-panel { min-width: 0; overflow-wrap: anywhere; }
.workspace-panel h2 { margin-top: 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.field { display: grid; align-content: start; gap: 9px; min-width: 0; }
.field label { margin-top: 0; }
.profile-form { display: grid; gap: 24px; margin-top: 26px; }
.profile-form > .field { max-width: 560px; }
.profile-form > .button, .compact-form > .button { justify-self: start; }
.field-hint { margin: 0; font-size: 13px; line-height: 1.6; }
.password-field { position: relative; min-width: 0; }
.password-field input { padding-right: 58px; }
.password-toggle { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #d6bc87; }
.password-toggle[hidden] { display: none; }
.password-toggle svg { display: block; pointer-events: none; }
.password-toggle[aria-pressed="true"] .password-eye-slash { display: none; }
.password-toggle:hover { color: #f2dfa6; background: #d6bc8717; }
.password-toggle:focus-visible { outline: 2px solid #d6bc87; outline-offset: -3px; }
.email-check-field.is-valid { border-color: #8fd8a7; box-shadow: 0 0 0 3px #8fd8a71f; }
.email-check-field.is-invalid { border-color: #ff9384; box-shadow: 0 0 0 3px #ff938424; }
.email-check-hint { margin: 0; min-height: 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.email-check-hint.is-ok { color: #a7e2b7; }
.email-check-hint.is-error { color: #ffb1a6; }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.section-heading h2 { margin: 0; }
.search-form { display: grid; gap: 8px; margin-bottom: 22px; }
.search-controls { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: start; max-width: 760px; }
.search-controls .quiet-button { min-width: 112px; }
.search-field-wrap, .customer-combobox { position: relative; min-width: 0; }
.customer-suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); max-height: 310px; overflow-y: auto; padding: 8px; border: 1px solid #d6c79545; border-radius: 8px; background: #1d211b; box-shadow: 0 18px 40px #0007; }
.customer-suggestions[hidden] { display: none; }
.customer-suggestions button { display: block; width: 100%; min-height: 42px; padding: 10px 12px; border: 0; border-radius: 6px; color: #f4f0e6; background: transparent; text-align: left; overflow-wrap: anywhere; }
.customer-suggestions button:hover, .customer-suggestions button.is-active { color: #241f15; background: #e7cf8c; }
.customer-list, .domain-list { display: grid; }
.customer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 18px; align-items: center; padding: 18px 8px; border-bottom: 1px solid var(--line); }
.customer-row:hover { background: #d3b46710; }
.customer-row small { display: block; margin-top: 6px; color: var(--muted); }
.customer-state { color: var(--gold); font-size: 13px; }
.pagination { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.domain-item { padding-block: 22px; border-bottom: 1px solid var(--line); }
.domain-item h3 { margin: 0; font-size: 20px; }
.domain-meta { margin: 6px 0 14px; font-size: 14px; }
.domain-meta a { color: #f2d99e; text-decoration: underline; text-underline-offset: 4px; }
.domain-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.compact-form { display: grid; gap: 12px; max-width: 560px; padding-block: 14px; }
.domain-editor { border-top: 1px solid var(--line); padding-block: 16px; }
.domain-editor summary { cursor: pointer; min-height: 44px; padding-block: 12px; color: var(--gold); }
.transfer-code { display: block; padding: 20px; border: 1px solid #d6c79560; border-radius: 8px; font-size: 20px; background: #161815; overflow-wrap: anywhere; user-select: all; }
.password-form { max-width: 460px; }
.header-actions > span { overflow-wrap: anywhere; }
.checkbox-row { display: flex; align-items: center; gap: 12px; margin-top: 0; color: #f4f0e6; line-height: 1.5; }
.checkbox-row input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: #d6bc87; }
.dns-overview .section-heading p, .dns-record-panel .section-heading p { margin: 6px 0 0; }
.dns-domain-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dns-domain { display: grid; gap: 6px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #15171270; }
.dns-domain:hover, .dns-domain.is-active { border-color: #d6c79580; background: #d3b46712; }
.dns-domain span, .dns-domain small { color: var(--muted); overflow-wrap: anywhere; }
.dns-domain small { font-size: 12px; }
.integration-panel code, .setup-grid code { display: block; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; color: #f4e5ba; background: #12140f; line-height: 1.6; overflow-x: auto; }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.dns-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.dns-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.dns-table th, .dns-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dns-table th { color: var(--gold); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dns-table td { color: #f4f0e6; overflow-wrap: anywhere; }
.dns-table tbody tr:hover { background: #ffffff06; }
.inline-form { display: grid; gap: 10px; min-width: 210px; }
.inline-form .field { gap: 6px; }
.inline-form label { font-size: 12px; }
.inline-form input { min-height: 38px; padding-block: 9px; }
.inline-form .password-toggle { width: 38px; height: 38px; min-height: 38px; }
.inline-form .password-field input { padding-right: 48px; }
.dns-record-grid { display: grid; grid-template-columns: 130px minmax(160px, 1fr) minmax(260px, 2fr) 110px 140px; gap: 16px; align-items: start; }
.dns-value-field { min-width: 0; }
@media (max-width: 1000px) { .field-grid { grid-template-columns: 1fr; } .customer-row { grid-template-columns: minmax(0, 1fr) 20px; } .customer-state { grid-column: 1; } .customer-row > span:last-child { grid-column: 2; grid-row: 1; } }
@media (max-width: 1000px) { .setup-grid, .dns-record-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .search-controls { grid-template-columns: 1fr; } .search-controls .quiet-button { justify-self: stretch; } }
@media (max-width: 440px) { .brand { flex-wrap: wrap; } .button { max-width: 100%; white-space: normal; } }

.dns-editor { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; scroll-margin-top: 24px; }
.dns-editor summary, .dns-table summary { cursor: pointer; color: var(--gold); padding-block: 8px; overflow-wrap: anywhere; }
.dns-editor .profile-form { margin-top: 16px; }
.dns-editor .field, .dns-record-grid > * { min-width: 0; }
.dns-editor textarea { width: 100%; max-width: 100%; resize: vertical; }
.dns-editor:target { border-color: var(--gold); }

.dns-table [hidden] { display: none !important; }
.dns-table { table-layout: fixed; }
.dns-table th:nth-child(1) { width: 8%; }
.dns-table th:nth-child(2) { width: 18%; }
.dns-table th:nth-child(3) { width: 36%; }
.dns-table th:nth-child(4) { width: 7%; }
.dns-table th:nth-child(5) { width: 10%; }
.dns-table th:nth-child(6) { width: 21%; }
.dns-table input, .dns-table select, .dns-table textarea { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.dns-table textarea { resize: vertical; }
.dns-table .inline-form { min-width: 0; }
.dns-row-actions { display: grid; gap: 4px; justify-items: start; }
.dns-table tr.is-editing { background: #d3b4670d; }
@media (max-width: 760px) {
  .dns-table, .dns-table tbody, .dns-table tr, .dns-table td { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
  .dns-table thead { display: none; }
  .dns-table tr { padding: 12px; border-bottom: 1px solid var(--line); }
  .dns-table td { padding: 8px 0; border: 0; }
  .dns-table td::before { content: attr(data-label); display: block; color: var(--gold); font-size: 12px; margin-bottom: 4px; }
}

/* Financieel: rustige kaarten en tastbare downloadknoppen in Xmail-goud. */
.finance-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-bottom: 24px; }
.finance-tile { display: grid; gap: 12px; min-width: 0; padding: clamp(20px,3vw,32px); border: 1px solid #c2a56540; border-radius: 14px; background: radial-gradient(ellipse at top right,#d9b76316,transparent 65%),#1c201b; box-shadow: inset 0 1px #fff05; }
.finance-tile > strong { font-size: clamp(24px,3vw,38px); font-weight: 500; color: #efda9e; letter-spacing: -.03em; overflow-wrap: anywhere; }
.finance-tile > span:last-child { color: var(--muted); }
.finance-panel .section-heading p { margin: 8px 0 0; color: var(--muted); }
.finance-invoice { display: grid; grid-template-columns: 40px minmax(130px,1fr) auto auto auto; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.finance-document { color: #bfa16a; }
.finance-document svg { width: 32px; height: 38px; }
.finance-reference, .finance-projection > div { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.finance-reference span, .finance-projection span { color: var(--muted); font-size: 13px; }
.finance-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-badge { padding: 5px 10px; border: 1px solid #cdb57840; border-radius: 30px; color: #d9c78f; font-size: 12px; }
.finance-badge.is-paid { color: #afd1b9; border-color: #afd1b940; background: #afd1b908; }
.finance-downloads { display: grid; grid-template-columns: 112px 84px; gap: 8px; justify-content: end; }
.finance-download { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 44px; box-sizing: border-box; border: 1px solid #c7ab6b55; border-radius: 8px; color: #efda9e; background: linear-gradient(130deg,#d6b87310,#d6b87304); font-size: 13px; transition: background .2s,border-color .2s,transform .2s; }
.finance-download svg { width: 20px; height: 23px; }
.finance-download:hover { border-color: #efd799; background: #d6b87320; transform: translateY(-1px); }
.finance-download:focus-visible { outline: 2px solid #efd799; outline-offset: 3px; }
.finance-download.is-unavailable { color: var(--muted); border-color: var(--line); background: none; font-size: 11px; }
.finance-forecast { background: radial-gradient(ellipse at top right,#c8a0650c,transparent 70%),#1c201b; }
.finance-forecast > p { color: var(--muted); max-width: 80ch; line-height: 1.7; }
.finance-projection { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.finance-projection > strong { white-space: nowrap; color: #e6ce91; }
.finance-pagination { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
@media(max-width: 1150px) { .finance-invoice { grid-template-columns: 32px minmax(0,1fr) auto; gap: 14px; } .finance-downloads { grid-column: 2 / -1; } .finance-amount { grid-column: 2; grid-row: 2; } }
@media(max-width: 600px) { .finance-summary { grid-template-columns: 1fr; gap: 12px; } .finance-invoice { grid-template-columns: minmax(0,1fr) auto; } .finance-document { display: none; } .finance-amount { grid-column: 1; } .finance-downloads { grid-column: 1 / -1; } .finance-projection { flex-direction: column; gap: 10px; } }
@media(prefers-reduced-motion: reduce) { .finance-download { transition: none; } .finance-download:hover { transform: none; } }

.finance-tile { line-height: 1.5; }
.finance-reference { line-height: 1.5; }
.finance-document svg, .finance-download svg { display: block; flex-shrink: 0; }

.finance-downloads [data-format="pdf"] { grid-column: 1; grid-row: 1; }
.finance-downloads [data-format="ubl"] { grid-column: 2; grid-row: 1; }
.finance-downloads .finance-download { justify-content: center; }

.nav-divider { height: 1px; margin: 20px 16px; border: 0; background: linear-gradient(90deg, transparent, #b68b50 24%, #ead69b 50%, #b68b50 76%, transparent); opacity: .65; }
@keyframes nav-divider-breathe {
    0%, 100% { opacity: .4; box-shadow: 0 0 0 transparent; }
    50% { opacity: 1; box-shadow: 0 0 8px #d6b97455; }
}
@media (prefers-reduced-motion: no-preference) {
    .nav-divider { animation: nav-divider-breathe 4.8s ease-in-out infinite; }
}

.password-check { margin: 20px 0 8px; padding: clamp(16px, 3vw, 22px); border: 1px solid #c3a66b45; border-radius: 12px; background: linear-gradient(135deg, #c3a66b10, #ffffff03); min-width: 0; }
.password-check-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; color: #efdaad; }
.password-check-heading span { color: #babbaa; font-size: .8rem; font-variant-numeric: tabular-nums; }
.password-check-progress { display: flex; gap: 7px; margin: 14px 0 16px; }
.password-check-progress span { flex: 1; height: 4px; border-radius: 3px; background: #ffffff12; transition: background .2s ease; }
.password-check-progress[data-level="1"] span.is-complete { background: linear-gradient(90deg, #c84e4e, #f08b80); }
.password-check-progress[data-level="2"] span.is-complete { background: linear-gradient(90deg, #cf842d, #f4b85e); }
.password-check-progress[data-level="3"] span.is-complete { background: linear-gradient(90deg, #419c74, #8bd6a6); }
.password-check ul { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0; }
.password-check li { display: flex; align-items: baseline; gap: 10px; color: #aeb0a6; font-size: .875rem; line-height: 1.5; }
.password-check-icon { flex: 0 0 18px; text-align: center; color: #aa9672; }
.password-check li.is-complete, .password-check li.is-complete .password-check-icon { color: #dece9c; }
.password-check-status { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid #c3a66b22; color: #c3c5b9; font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; }
.password-check.is-complete { border-color: #a7c99a70; }
.password-check.is-complete .password-check-status { color: #c2ddb6; }
.password-input-valid { border-color: #a7c99a80 !important; }
.password-input-invalid { border-color: #d89b8580 !important; }
@media (prefers-reduced-motion: reduce) { .password-check-progress span { transition: none; } }
.session-warning { width: min(460px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow-y: auto; margin: auto; box-sizing: border-box; padding: clamp(24px, 5vw, 38px); color: #f4f0e4; border: 1px solid #cdb37780; border-radius: 20px; background: linear-gradient(140deg, #343226, #1c1f1b 70%); box-shadow: 0 28px 90px #0009; }
.session-warning::backdrop { background: #080a08ba; backdrop-filter: blur(5px); }
.session-warning-label { color: #e3c886; font-size: .75rem; letter-spacing: .15em; font-weight: 700; }
.session-warning h2 { margin: 15px 0; font-size: clamp(24px, 5vw, 30px); line-height: 1.2; }
.session-warning-text, .session-warning-status { color: #c5c6b9; line-height: 1.6; overflow-wrap: anywhere; }
.session-warning-clock { margin: 20px 0; color: #eed9a0; font-size: 44px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.session-warning-status:empty { display: none; }
.session-warning-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.session-warning-actions button { flex: 1 1 160px; min-height: 48px; }
.website-selector { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(125deg, #292b23, #1e211b); }
.website-selector label { display: block; margin: 0 0 12px; color: #eee7d5; }
.website-select-controls { display: flex; gap: 12px; align-items: stretch; }
.website-select-controls select { flex: 1; }
.website-select-controls .button { flex-shrink: 0; }
.website-selector select, .website-form select { width: 100%; min-width: 0; max-width: 100%; padding: 14px; border: 1px solid #d4c08840; border-radius: 9px; background: #161914; color: #f5f0e2; font: inherit; }
.website-selector select:focus-visible, .website-form select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.website-servers { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 28px; }
.website-servers [aria-current] { border-color: #d4b46d; background: #a68b471f; color: #f1d995; }
.website-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin: 30px 0 24px; }
.website-summary > div { flex: 1; min-width: min(100%, 220px); }
.website-summary h2 { margin: 8px 0 5px; font-size: clamp(24px, 3vw, 34px); overflow-wrap: anywhere; letter-spacing: -.025em; }
.website-summary p { margin: 0; }
.website-badge { border: 1px solid #ddc78d40; border-radius: 999px; padding: 8px 13px; color: #e9d6a4; background: #d2ae5710; font-size: 13px; }
.website-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.website-card { min-width: 0; padding: clamp(22px, 3vw, 34px); border: 1px solid #d7c18b30; border-radius: 18px; background: radial-gradient(ellipse at top right, #ab884d0e, transparent 70%), linear-gradient(145deg, #26291f, #1d211b); box-shadow: 0 15px 45px #00000012; overflow-wrap: anywhere; }
.website-card-title { display: flex; align-items: center; gap: 16px; margin-bottom: 25px; }
.website-card-title h2 { font-size: 23px; margin: 7px 0 0; line-height: 1.2; }
.website-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 48px; color: #e8ce8c; border: 1px solid #d7b77344; border-radius: 14px; background: linear-gradient(135deg, #c1a26425, #a0824310); box-shadow: inset 0 1px #f5dfac15; }
.website-icon svg, .website-backups svg { width: 24px; height: 24px; flex-shrink: 0; }
.website-form { display: grid; gap: 12px; margin-top: 22px; }
.website-form label { margin: 0; }
.website-form p { margin: 0 0 4px; }
.website-form .button { width: 100%; margin-top: 6px; white-space: normal; }
.website-card .field-hint { font-size: 13px; line-height: 1.7; color: #aeb2a5; }
.website-card > .field-hint { margin-top: 14px; }
.website-facts { margin: 0; display: grid; gap: 14px; }
.website-facts > div { display: grid; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid #d4c0881c; }
.website-facts dt { color: #aeb2a5; font-size: 13px; }
.website-facts dd { margin: 0; color: #f3eddf; }
.website-metric { display: block; margin: 10px 0 20px; color: #edd7a2; font-size: clamp(32px, 4vw, 46px); font-weight: 550; letter-spacing: -.04em; }
.website-card-wide { grid-column: 1 / -1; }
.website-backups { list-style: none; padding: 0; margin: 22px 0 28px; }
.website-backups li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid #d4c08822; }
.website-backups li span { display: flex; align-items: center; gap: 14px; }
.website-backups svg { color: #d8bd7c; }
.website-backups strong { color: #c1c5b6; font-size: 14px; font-weight: 500; }
@media (max-width: 1100px) { .website-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .website-select-controls { flex-direction: column; } .website-summary { align-items: flex-start; } .website-summary .quiet-button { width: 100%; } .website-servers .quiet-button { flex: 1; text-align: center; white-space: normal; } }

.mail-domain-picker { position: relative; flex: 1 1 260px; min-width: 0; }
.mail-domain-form .mail-domain-picker input[type="search"] { display: block; width: 100%; }
.mail-domain-suggestions { position: absolute; inset: calc(100% + 6px) 0 auto; z-index: 30; max-height: 280px; overflow-y: auto; padding: 7px; border: 1px solid #d6bc7970; border-radius: 10px; background: #20241d; box-shadow: 0 16px 42px #0008; }
.mail-domain-suggestions[hidden] { display: none; }
.mail-domain-suggestions button { display: block; width: 100%; min-height: 44px; padding: 12px; border: 0; border-radius: 7px; background: transparent; color: #f0e8d2; text-align: left; overflow-wrap: anywhere; }
.mail-domain-suggestions button:hover, .mail-domain-suggestions [aria-selected="true"] { background: #dfc480; color: #24231c; }
.mail-domain-suggestions p { margin: 8px; font-size: 14px; }
.mail-domain-results { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }

.password-strength { display: grid; gap: 7px; padding: 14px 16px; margin: 0 0 18px; border-left: 3px solid #ba9b60; border-radius: 0 8px 8px 0; background: #dec48b09; overflow-wrap: anywhere; }
.password-strength strong { color: #efdaad; font-size: .95rem; }
.password-strength span { color: #bfc0b3; font-size: .8rem; line-height: 1.6; }
.password-strength[data-strength="1"] { border-color: #db9984; }
.password-strength[data-strength="3"], .password-strength[data-strength="4"] { border-color: #d8c58c; background: linear-gradient(100deg,#d8c58c14,transparent); }
.checkout-form .password-strength { margin-bottom: 18px; }

.password-check .password-check-status.is-mismatch { color: #ff4545; }

/* Artikelbeheer: ruime tekstvelden en een overzichtelijke indeling. */
.article-editor { margin-top: 16px; padding: 0 22px; border: 1px solid #d6c79535; border-radius: 14px; background: #151a1640; }
.article-editor summary { padding: 20px 0; font-weight: 600; }
.article-editor[open] summary { border-bottom: 1px solid #d6c79525; }
.article-editor .article-form { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 24px; max-width: none; padding: 24px 0; }
.article-form > label { display: flex; flex-direction: column; gap: 9px; min-width: 0; color: #e9e2d1; font-size: 14px; }
.article-form .article-wide,.article-form .article-actions { grid-column: 1 / -1; }
.article-form label small { font-weight: 400; color: #b0b7a5; font-size: 12px; }
.article-form input,.article-form select,.article-form textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 14px 16px; border: 1px solid #d6c79540; border-radius: 10px; background: #141914; color: #f4eddd; font: inherit; line-height: 1.5; }
.article-form textarea { min-height: 124px; resize: vertical; }
.article-form textarea[name="features"] { min-height: 190px; }
.article-form input[readonly] { color: #b5bca8; background: #1c211b; }
.article-form input:focus-visible,.article-form select:focus-visible,.article-form textarea:focus-visible { outline: 2px solid #ddc17d; outline-offset: 2px; }
.article-form .article-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid #d6c79530; }
.article-actions .checkbox-row { display: flex; align-items: center; gap: 12px; }
.article-actions input[type="checkbox"] { width: 20px; height: 20px; accent-color: #ddc17d; }
@media(max-width:700px) { .article-editor { padding-inline: 16px; }.article-editor .article-form { grid-template-columns: minmax(0,1fr); gap: 20px; }.article-actions .button { width: 100%; justify-content: center; } }