:root {
  color-scheme: light dark;
  --bg: #fbf6ec; --surface: #ffffff; --ink: #1d2433; --muted: #5d6576; --line: #e8dfcd;
  --sun: #f2a516; --sun-deep: #c97a00; --accent-ink: #1d2433; --error: #b42318; --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1420; --surface: #171e2d; --ink: #eef0f5; --muted: #a4abbb; --line: #273047;
          --sun: #f7b437; --sun-deep: #ffc95c; --accent-ink: #0f1420; --error: #ff8a80; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.55;
       font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: inherit; text-decoration-color: var(--sun); text-underline-offset: 3px; }
.top { max-width: 760px; margin: 0 auto; padding: 22px 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 750; font-size: 20px; }
.brand svg { color: var(--sun); }
.wrap { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; }
h1 { font-size: clamp(30px, 6vw, 42px); line-height: 1.1; margin: 10px 0 12px; letter-spacing: -.02em; }
.lead { color: var(--muted); margin: 0 0 24px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
           padding: 20px 18px; margin: 0 0 18px; min-width: 0; }
legend { font-weight: 700; padding: 0 6px; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input:not([type]), input[type=email], input[type=password], input[type=url], input[type=tel], select, textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; }
input:focus, textarea:focus { outline: 2px solid var(--sun); outline-offset: 1px; }
.help { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.error { color: var(--error); font-size: 15px; margin: 6px 0 0; font-weight: 600; }
.error.box { border: 1px solid var(--error); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.plans { display: grid; gap: 10px; margin: 6px 0 4px; }
.plan { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; margin: 0;
        border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 500; }
.plan:has(input:checked) { border-color: var(--sun); box-shadow: 0 0 0 1px var(--sun); }
.plan input { grid-row: span 2; accent-color: var(--sun-deep); width: 18px; height: 18px; }
.plan-name { font-weight: 700; }
.plan-price { font-weight: 700; text-align: right; }
.plan-price small { font-weight: 400; color: var(--muted); }
.plan-year { grid-column: 2 / 4; color: var(--muted); font-size: 14px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-weight: 400; align-items: start; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--sun-deep); }
.check small { color: var(--muted); }
.btn { display: inline-block; background: var(--sun); color: var(--accent-ink); border: 0; border-radius: 999px;
       padding: 14px 26px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.banner { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 14px; font-size: 15px; }
.banner.test { border-color: var(--sun); }
.banner a { float: right; text-decoration: none; font-weight: 700; }
.banner.nag { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.banner.nag span { flex: 1 1 320px; }
.banner.nag a.btn { float: none; flex: 0 0 auto; padding: 8px 16px; font-size: 14px; }
.card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 22px 20px; }
.card .big { font-size: 20px; font-weight: 650; margin: 0 0 10px; }
.state-active { border-color: var(--sun); }
.foot { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } .plan { grid-template-columns: auto 1fr; }
  .plan-price { grid-column: 2; text-align: left; } .plan-year { grid-column: 2; } }
.steps { list-style: none; padding: 0; margin: 14px 0 12px; display: grid; gap: 8px; }
.steps li { position: relative; padding-left: 30px; color: var(--muted); }
.steps li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); }
.steps li.done { color: var(--ink); }
.steps li.done::before { background: var(--sun); border-color: var(--sun); }
.steps li.done::after { content: ""; position: absolute; left: 7px; top: 8px; width: 5px; height: 8px;
  border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.steps li.now { color: var(--ink); font-weight: 650; }
.steps li.now::before { border-color: var(--sun); border-top-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .steps li.now::before { animation: none; } }
.preview { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.preview-label { margin-top: 22px; }
.progress { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 16px 0 8px; }
.progress .bar { display: block; height: 100%; background: var(--sun); border-radius: 999px; transition: width .6s ease; }
.bar.w0 { width: 0%; }
.bar.w5 { width: 5%; }
.bar.w10 { width: 10%; }
.bar.w15 { width: 15%; }
.bar.w20 { width: 20%; }
.bar.w25 { width: 25%; }
.bar.w30 { width: 30%; }
.bar.w35 { width: 35%; }
.bar.w40 { width: 40%; }
.bar.w45 { width: 45%; }
.bar.w50 { width: 50%; }
.bar.w55 { width: 55%; }
.bar.w60 { width: 60%; }
.bar.w65 { width: 65%; }
.bar.w70 { width: 70%; }
.bar.w75 { width: 75%; }
.bar.w80 { width: 80%; }
.bar.w85 { width: 85%; }
.bar.w90 { width: 90%; }
.bar.w95 { width: 95%; }
.bar.w100 { width: 100%; }
.progress-meta { margin: 0 0 6px; font-size: 15px; color: var(--muted); }
.progress-meta b { color: var(--ink); }
.terminal { background: #0b0f17; color: #d6dde8; border-radius: 12px; padding: 14px 16px; margin: 14px 0 6px;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre; }
.terminal .ts { color: #f7b437; }
.terminal .cursor { animation: blink 1s steps(1) infinite; color: #f7b437; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .terminal .cursor { animation: none; } }
.modes { display: grid; gap: 10px; border: 0; padding: 0; margin: 0 0 18px; }
/* Trial or pay: without JavaScript (CSP), the chosen mode hides the other one's parts. */
.trial-only { display: none; }
form.mode-trial .trial-only,
form:has(input[name="mode"][value="trial"]:checked) .trial-only { display: revert; }
form:has(input[name="mode"][value="trial"]:checked) .pay-only { display: none; }
.plan .plan-price.trial-only { color: var(--sun-deep); }
.card > pre.terminal { white-space: pre-wrap; word-break: break-word; }
/* My Daylit */
.narrow { max-width: 420px; }
.acc-nav { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 0 0 18px; font-size: 15px; }
.acc-nav a { color: var(--muted); }
.acc-nav .who { margin-left: auto; color: var(--muted); font-size: 13px; }
.site-list { display: grid; gap: 10px; margin: 0 0 20px; }
.site-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; text-decoration: none; color: inherit; }
.site-row .site-name { font-weight: 700; }
.site-row .site-meta { grid-column: 1 / 3; color: var(--muted); font-size: 14px; }
.pill { font-size: 13px; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--line); }
.pill.on { border-color: #2f9e5b; color: #2f9e5b; }
.pill.off { border-color: var(--muted); color: var(--muted); }
.pill.busy { border-color: var(--sun); color: var(--sun-deep); }
.actions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.act .help { margin-top: 6px; }
.act.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.act.inline select { width: auto; }
table.list { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 15px; }
table.list td { border-top: 1px solid var(--line); padding: 8px 6px; vertical-align: top; }
table.list details form { display: grid; gap: 8px; margin-top: 8px; }
.history { list-style: none; padding: 0; margin: 0 0 10px; font-size: 15px; }
.history .ts { color: var(--muted); margin-right: 6px; }
.st-done { color: #2f9e5b; } .st-failed { color: #c0392b; } .st-queued, .st-running { color: var(--sun-deep); }
details.danger { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
details.danger summary { cursor: pointer; font-weight: 700; }
details.danger form { display: grid; gap: 8px; margin-top: 8px; }
.qr { background: #fff; border-radius: 10px; padding: 8px; }
pre.codes { font: 16px/1.8 ui-monospace, Consolas, monospace; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; columns: 2; }
button[disabled] { opacity: .5; cursor: not-allowed; }
.top { display: flex; align-items: center; justify-content: space-between; }
.acc-link { color: var(--muted); font-size: 15px; }
.act.inline select { width: auto; min-width: 200px; }
.st-confirm { color: var(--sun-deep); } .st-expired { color: var(--muted); }

/* plan 'redirect': a target field instead of the Care option */
.redirect-only { display: none; }
form:has(input[name="plan"][value="redirect"]:checked) .redirect-only { display: block; }
form:has(input[name="plan"][value="redirect"]:checked) .no-redirect { display: none; }
.joined { display: flex; align-items: center; gap: 4px; }
.joined input { flex: 1 1 auto; min-width: 6em; }
.joined span { color: var(--muted, #8a93a6); white-space: nowrap; }
form.inline { display: inline; margin-left: 8px; }
.btn.small { padding: 4px 12px; font-size: 13px; }

/* Daylit Energy */
.energy-now { font-size: 14px; margin: 4px 0 12px; color: var(--muted, #8a93a6); }
.energy-now.mode-solar, .energy-now.mode-battery { color: var(--sun); }
.card.energy p { margin: 4px 0; }
.bars { width: 100%; max-width: 420px; height: auto; max-height: 90px; display: block; margin: 8px 0 0; }
.bars rect.green { fill: var(--sun); }
.bars rect.grid { fill: var(--line); }
.bars text { font-size: 7px; fill: var(--muted, #8a93a6); }
.big-number { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.big-number small { font-size: 14px; font-weight: 400; color: var(--muted, #8a93a6); }
pre.snippet { white-space: pre-wrap; word-break: break-all; font-size: 13px; padding: 10px; border-radius: 8px;
  background: rgba(127,127,127,.12); user-select: all; }
.card.energy .saved { color: var(--sun); font-weight: 700; }
/* statistics */
.bars rect.up { fill: #34d399; }
.bars rect.warn { fill: #fb923c; }
.bars rect.down { fill: #ef4444; }
.bars rect.none { fill: var(--line); }
.table-scroll { overflow-x: auto; margin: 10px 0; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stats-table th, .stats-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
.stats-table tfoot th { border-bottom: 0; }
/* site page: tabs and tiles */
.overview-card .meta { margin: 0 0 12px; color: var(--muted, #8a93a6); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 18px 0 8px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted, #8a93a6); border-bottom: 2px solid transparent;
  margin-bottom: -1px; font-weight: 600; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--sun); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); text-decoration: none; color: var(--ink); }
.tile b { font-size: 22px; }
.tile span { font-size: 13px; color: var(--muted, #8a93a6); }
/* home: compact overview */
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.head-row h1 { margin: 0; }
.new-menu { position: relative; }
.new-menu summary { list-style: none; cursor: pointer; }
.new-menu summary::-webkit-details-marker { display: none; }
.new-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: grid; }
.new-menu .menu a { padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.new-menu .menu a:hover { background: rgba(127,127,127,.12); }
.site-list { margin-top: 18px; }
.site-row .site-stats { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px;
  color: var(--muted, #8a93a6); margin-top: 6px; }
.site-row .site-stats b { color: var(--ink); }
details.fold { margin: 16px 0; }
details.fold > summary { cursor: pointer; font-weight: 700; font-size: 17px; }
details.fold[open] > summary { margin-bottom: 12px; }
.side-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 16px; }
/* the two-step reminder: one quiet line */
.banner.nag { padding: 8px 12px; font-size: 14px; }
.banner.nag a.btn { padding: 6px 14px; font-size: 13px; }
.bars rect.visits { fill: #60a5fa; }
.visit-line { margin: 14px 0 0; }

/* WordPress plans: the starter questions */
.wp-only { display: none; }
form:has(input[name="plan"][value^="wordpress"]:checked) .wp-only,
form:has(input[name="plan"][value="webshop"]:checked) .wp-only { display: block; }
.wp-only legend { font-weight: 600; }
.wp-only .label { display: block; font-weight: 600; margin-top: .6rem; }
.wp-only select { width: 100%; }
.pill.free { display: inline-block; font-size: .78em; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: rgba(240,180,0,.18); color: inherit; border: 1px solid rgba(240,180,0,.55); margin-right: 4px; }

/* Two-step: a clear choice of method */
.choices { display: grid; gap: 8px; margin: 1rem 0 1.4rem; max-width: 560px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid rgba(127,127,127,.3);
  border-radius: 12px; text-decoration: none; color: inherit; background: rgba(255,255,255,.35); }
.choice:hover { border-color: #f0a500; }
.choice.on { border: 2px solid #f0a500; padding: 11px 13px; }
.choice b { display: block; }
.choice small { display: block; opacity: .75; margin-top: 2px; }
.choice .dot { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 2px solid rgba(127,127,127,.6); }
.choice.on .dot { border-color: #f0a500; background: radial-gradient(#f0a500 45%, transparent 50%); }
.linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; opacity: .8; }
/* Security page: one card, a row per method */
.sec-card { border: 1px solid rgba(127,127,127,.25); border-radius: 14px; padding: 16px 18px; margin: 0 0 18px;
  background: rgba(255,255,255,.35); max-width: 720px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: default; }
summary.sec-head { cursor: pointer; list-style: none; }
summary.sec-head::-webkit-details-marker { display: none; }
summary.sec-head h2::after { content: " ▾"; font-size: .7em; opacity: .6; }
.sec-head h2 { margin: 0; font-size: 1.2rem; }
.sec-card > .help { margin: 6px 0 4px; }
.sec-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 0;
  border-top: 1px solid rgba(127,127,127,.2); }
.sec-row b { display: block; }
.sec-row small { display: block; opacity: .75; }
.sec-act form { margin: 0; }
.sec-more { grid-column: 1 / -1; }
.sec-more summary { cursor: pointer; opacity: .85; }
.pill.ok { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8em; font-weight: 600;
  background: rgba(40,160,80,.15); border: 1px solid rgba(40,160,80,.5); }
.pill.off { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8em; font-weight: 600;
  background: rgba(200,60,40,.12); border: 1px solid rgba(200,60,40,.45); }
.pk-list { list-style: none; padding: 0; margin: 4px 0 8px; }
.pk-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0;
  border-bottom: 1px dashed rgba(127,127,127,.25); }
.pk-list form { margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sec-summary h2 { margin: 0 0 6px; font-size: 1.25rem; }
.sec-summary.ok { border-color: rgba(40,160,80,.45); }
.sec-summary.todo { border-color: rgba(240,165,0,.8); border-width: 2px; }
.step { margin: 0 0 4px; font-size: .85em; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }

/* --- Daylit Beheer --------------------------------------------------------------------- */
.beheer-nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.tiles .tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.tiles .tile b { font-size: 26px; }
.tiles .tile b.bad { color: #c0392b; } .tiles .tile b.warn { color: var(--sun-deep); } .tiles .tile b.good { color: #2f9e5b; }
.tiles .tile span { color: var(--muted); font-size: 14px; }
.muted { color: var(--muted); font-weight: 400; }
ul.checks { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 6px; }
ul.checks li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14.5px; }
ul.checks li span { color: var(--muted); }
ul.checks li.fail { border-color: #c0392b; } ul.checks li.fail b { color: #c0392b; }
ul.checks li.warn { border-color: var(--sun); } ul.checks li.warn b { color: var(--sun-deep); }
ul.checks li.ok { border: 0; padding: 2px 0; }
.table-wrap { overflow-x: auto; }
.beheer-table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.beheer-table th, .beheer-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.beheer-table th { color: var(--muted); font-weight: 600; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 20px; font-size: 14px; }
.handbook { line-height: 1.55; }
.handbook table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0 18px; display: block; overflow-x: auto; }
.handbook th, .handbook td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.handbook pre { background: #1d2433; color: #eef0f5; padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: 13px; }
.handbook code { overflow-wrap: anywhere; }
.handbook h2 { margin-top: 32px; scroll-margin-top: 16px; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.link-grid .card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.link-grid .card span { color: var(--muted); font-size: 14px; }
.link-grid .card:hover { border-color: var(--sun); }
.thread { display: grid; gap: 10px; margin: 16px 0; }
.thread .msg { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; max-width: 760px; }
.thread .msg p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread .msg.daylit { border-color: var(--sun); background: color-mix(in srgb, var(--sun) 7%, transparent); }
.form label { display: block; margin: 0 0 12px; }
.form label.check { display: flex; gap: 8px; align-items: flex-start; }
.form select, .form input[name]:not([type=checkbox]):not([type=hidden]), .form textarea { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 16px; }
.filters input[name=q] { flex: 1 1 240px; width: auto; }
.filters select { width: auto; flex: 0 1 auto; padding: 10px 12px; }
.nowrap { white-space: nowrap; }
.pager { display: flex; gap: 10px; flex-wrap: wrap; }
.tiles .tile b.small { font-size: 16px; overflow-wrap: anywhere; }
.danger-zone { margin: 18px 0; }
.danger-zone summary { cursor: pointer; }
.btn.danger { background: #c0392b; color: #fff; border-color: #c0392b; }
ul.checks li .hint { color: var(--ink); font-size: 14px; }
ul.checks li .hint-link { font-size: 13px; margin-left: 6px; }
.pk-login { margin-top: 18px; }
.pk-login .or { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 0 0 12px; }
.pk-login .or::before, .pk-login .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.beheer-table td.bad, .beheer-table .bad { color: #c0392b; }