:root {
    --zwerfie-accent: #0069a7;
    --zwerfie-border: #76b82a;
    --zwerfie-button: #b1cb22;
    --zwerfie-text: #1f193b;
    --zwerfie-background: #f5f6ee;
    --bs-body-font-family: "Segoe UI", Arial, sans-serif;
    --bs-body-color: var(--zwerfie-text);
    --bs-body-bg: var(--zwerfie-background);
}
body.zwerfie {
    margin: 0;
    color: var(--zwerfie-text);
    background: var(--zwerfie-background);
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.5;
}
.zwerfie *, .zwerfie *::before, .zwerfie *::after { box-sizing: border-box; }
.zwerfie a { color: var(--zwerfie-text); }
.zwerfie :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    color: var(--zwerfie-text);
    background-color: var(--zwerfie-background);
    border: 2px solid var(--zwerfie-border);
    border-radius: 12px;
    font: inherit;
    padding: 10px 12px;
    max-width: 100%;
}
.zwerfie :is(input, select, textarea, a, button):focus-visible {
    outline: 3px solid var(--zwerfie-accent);
    outline-offset: 3px;
}
.zwerfie :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus {
    border-color: var(--zwerfie-accent);
    outline: none;
    box-shadow: none;
}
.zwerfie :is(button, .btn, .zwerfie-button) {
    background-color: var(--zwerfie-button);
    border: 0;
    border-radius: 999px;
    color: var(--zwerfie-text);
    font: inherit;
    font-weight: 700;
    padding: 11px 24px;
    cursor: pointer;
}
.zwerfie :is(button, .btn, .zwerfie-button):hover { filter: brightness(.96); }
.zwerfie .zwerfie-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    text-decoration: none;
}
.zwerfie .text-muted { color: var(--zwerfie-text) !important; }
.appbody { width: min(100%, 920px); margin: 0 auto; padding: 24px; }
.appbody label { font-weight: 600; }
.appbody .help-text { display: inline-block; padding-left: 12px; font-style: italic; }
.auth-shell { min-height: 100svh; position: relative; display: flex; flex-direction: column; padding: 36px; }
.auth-brand { position: absolute; top: 32px; left: 32px; }
.auth-brand img { display: block; width: clamp(180px, 17vw, 320px); height: auto; }
.auth-register-prompt { position: fixed; top: 32px; right: 36px; max-width: 360px; margin: 0; text-align: right; font-size: 17px; }
.auth-register-prompt a, .auth-forgot-password a { color: var(--zwerfie-accent); }
.auth-forgot-password { margin: -6px 8px 0; }
.auth-main { position: relative; z-index: 1; width: min(100%, 500px); margin: 14vh auto 80px; }
.auth-main h1 { text-align: center; font-size: clamp(42px, 3.4vw, 64px); font-weight: 700; margin: 0 0 26px; line-height: 1.2; }
.auth-main h2 { font-size: 24px; font-weight: 700; margin: 0 0 16px; }
.auth-main p { margin: 0 0 18px; }
.auth-sign-in .auth-main { width: min(100%, 500px); margin-top: 18vh; }
.auth-sign-in .auth-main h1 { width: fit-content; margin-inline: auto; padding: 10px 58px 14px; border-radius: 999px; background: var(--zwerfie-button); }
.auth-register .auth-main h1 { width: fit-content; margin-inline: auto; padding: 10px 58px 14px; border-radius: 999px; background: var(--zwerfie-button); }
.auth-main-wide { width: min(100%, 1040px); margin-top: 9vh; }
.auth-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.auth-field { margin-bottom: 20px; }
.auth-field label { display: block; font-size: 18px; font-weight: 700; margin: 0 0 6px 8px; }
.auth-field input { display: block; width: 100%; min-height: 48px; }
.auth-field input::placeholder { color: var(--zwerfie-text); opacity: .8; }
.auth-address-field { min-width: 0; padding: 0; border: 0; }
.auth-address-field legend { display: block; width: 100%; padding: 0; font-size: 18px; font-weight: 700; margin: 0 0 6px 8px; }
.auth-address-inputs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); gap: 10px; }
.auth-address-inputs > div { min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.auth-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 38px; }
.auth-actions .zwerfie-button { min-width: 145px; }
.auth-help { font-size: 15px; }
.auth-message, .auth-main form ul { border-left: 3px solid var(--zwerfie-accent); padding: 10px 14px; margin: 0 0 16px; list-style: none; }
.auth-illustrations { position: absolute; right: 7vw; bottom: 3vh; width: 400px; height: 380px; pointer-events: none; }
.auth-can { position: absolute; width: 330px; left: -30px; bottom: -20px; }
.auth-leaf { position: absolute; width: 230px; right: -20px; top: -15px; }
@media (max-width: 1100px) and (min-width: 701px) {
    .auth-illustrations { width: 220px; height: 230px; right: 1vw; }
    .auth-can { width: 220px; left: -10px; }
    .auth-leaf { width: 150px; }
    .auth-main-wide { margin-top: 110px; }
}
@media (max-width: 700px) {
    .auth-shell { padding: 44px 34px 32px; }
    .auth-brand { position: static; order: 3; margin: auto auto 0; padding-top: 64px; }
    .auth-brand img { width: 200px; }
    .auth-register-prompt { position: static; max-width: 400px; margin: -8px auto 32px; text-align: center; font-size: 15px; }
    .auth-main, .auth-main-wide { margin: 0 auto; width: min(100%, 400px); }
    .auth-main h1 { font-size: 50px; margin-bottom: 20px; }
    .auth-sign-in .auth-main { width: min(100%, 400px); margin: 80px auto 0; }
    .auth-sign-in .auth-main h1 { margin-bottom: 20px; }
    .auth-field { margin-bottom: 16px; }
    .auth-field label, .auth-address-field legend { font-size: 16px; }
    .auth-columns { grid-template-columns: 1fr; gap: 0; }
    .auth-actions { gap: 12px; margin-top: 38px; }
    .auth-actions .zwerfie-button { min-width: 0; flex: 1; padding-inline: 16px; }
    .auth-password .auth-actions .zwerfie-button { flex: initial; }
    .auth-illustrations { position: relative; align-self: flex-end; right: auto; bottom: auto; width: 145px; height: 160px; margin-top: 28px; }
    .auth-can { width: 195px; bottom: -35px; left: -23px; }
    .auth-leaf { display: none; }
    .auth-sign-in .auth-brand { padding-top: 0; }
}
@media (max-width: 350px) {
    .auth-shell { padding-inline: 20px; }
    .auth-main h1 { font-size: 44px; }
}

/* Authenticated screens: shared header, Account dropdown and page layouts. */
.app-page { position: relative; min-height: 100svh; }
.app-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 16px 32px; min-height: 110px; background: var(--zwerfie-button); }
.app-brand { justify-self: start; }
.app-brand img { display: block; width: clamp(180px, 16vw, 280px); height: auto; }
.desktop-navigation { display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2.5vw, 48px); }
.desktop-navigation a { min-width: 180px; padding: 12px 24px; border-radius: 999px; background: var(--zwerfie-background); text-align: center; text-decoration: none; font-size: 18px; white-space: nowrap; }
.desktop-navigation a:hover { filter: brightness(.97); }
.desktop-account { justify-self: end; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--zwerfie-accent); text-decoration: none; }
.desktop-account span { position: relative; display: block; width: 23px; height: 23px; }
.desktop-account span::before { content: ''; position: absolute; top: 1px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--zwerfie-button); }
.desktop-account span::after { content: ''; position: absolute; bottom: 1px; left: 3px; width: 18px; height: 10px; border-radius: 12px 12px 7px 7px; background: var(--zwerfie-button); }
.app-page .appbody { width: min(100%, 1400px); padding: 20px 48px 64px; }
.page-title { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: calc(1.2em + 24px); max-width: 100%; margin: 12px auto 28px; padding: 0 clamp(30px, 5vw, 80px); border-radius: 999px; background: var(--zwerfie-button); font-size: clamp(32px, 3.4vw, 64px); font-weight: 700; line-height: 1.2; text-align: center; }
.page-title > span { transform: translateY(-3px); }
.page-intro { text-align: center; margin: 0 auto 48px; font-size: 18px; }
.home-intro { text-align: center; font-size: clamp(22px, 2.9vw, 52px); margin-bottom: 50px; }
.home-actions { display: flex; flex-direction: column; align-items: center; gap: 36px; position: relative; z-index: 1; }
.home-actions .zwerfie-button { width: min(100%, 400px); min-height: 105px; font-size: 26px; padding: 24px; }
.home-volunteer { position: absolute; left: 0; bottom: 20px; width: min(35vw, 620px); pointer-events: none; }
.app-page.profile-page .appbody { max-width: 1120px; }
.profile-form { margin-top: 48px; }
.profile-form input:disabled { opacity: 1; -webkit-text-fill-color: var(--zwerfie-text); cursor: default; }
.profile-actions { display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin-top: 12px; }
.profile-actions .zwerfie-button { min-width: 160px; }
.app-notice { border-left: 4px solid var(--zwerfie-border); padding: 16px; margin: 24px 0; }
.delivery-page .appbody { position: relative; min-height: calc(100svh - 110px); }
.delivery-form { position: relative; z-index: 1; width: min(100%, 600px); margin: 0 auto; }
.delivery-decoration-left { position: absolute; z-index: 0; top: 245px; left: clamp(0px, 4vw, 60px); width: 180px; height: 260px; pointer-events: none; }
.delivery-decoration-leaf { position: absolute; top: 0; right: 0; width: 82px; height: auto; transform: rotate(-8deg); }
.delivery-decoration-bag { position: absolute; left: 0; bottom: 0; width: 125px; height: auto; }
.delivery-decoration-arrow { position: absolute; z-index: 0; top: 405px; right: clamp(80px, 11vw, 170px); width: 76px; height: auto; mix-blend-mode: multiply; pointer-events: none; }
.delivery-columns, .delivery-details { min-width: 0; max-width: 100%; }
.delivery-columns { display: block; }
.delivery-field { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 20px; }
.delivery-field > label { font-weight: 700; }
.delivery-field :is(input:not([type="checkbox"]), select) { width: 100%; min-width: 0; }
.delivery-field > div { min-width: 0; }
.delivery-field input[type="datetime-local"] { display: block; inline-size: 100%; width: 100%; min-inline-size: 0; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
.delivery-field ul { grid-column: 1; }
.delivery-field[hidden] { display: none; }
.delivery-notes textarea { width: 100%; min-height: 220px; resize: vertical; }
.delivery-notes .auth-field label { margin-left: 0; }
.address-help-text, .address-picker-status { font-size: 14px; margin: 8px 0; }
.address-picker-results { overflow-x: auto; }
.address-picker-table, .yield-table { width: 100%; border-collapse: collapse; }
.address-picker-table :is(th, td), .yield-table :is(th, td) { padding: 12px 8px; border-bottom: 1px solid var(--zwerfie-border); text-align: left; }
.address-picker-table { font-size: 13px; }
.zwerfie .address-picker-table button { padding: 6px 10px; }
.large-waste-controls { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 14px; }
.large-waste-controls #large-amount { min-width: 0; }
.large-waste-controls #large-amount[hidden] { display: none; }
.zwerfie input[role="switch"] { appearance: none; display: block; width: 48px; height: 28px; border: 2px solid var(--zwerfie-border); border-radius: 999px; background: var(--zwerfie-background); cursor: pointer; position: relative; }
.zwerfie input[role="switch"]::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; left: 2px; top: 2px; background: var(--zwerfie-border); transition: transform .15s; }
.zwerfie input[role="switch"]:checked { border-color: var(--zwerfie-accent); background: var(--zwerfie-accent); }
.zwerfie input[role="switch"]:checked::before { background: var(--zwerfie-background); transform: translateX(20px); }
.image-item { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.image-item > div { min-width: 0; flex: 1; }
.image-item input[type="file"] { width: 100%; font-size: 14px; }
.zwerfie .image-remove { color: var(--zwerfie-accent); background: transparent; padding: 4px 10px; font-size: 32px; }
.image-add { width: 100%; gap: 10px; }
.image-add span { font-size: 26px; line-height: 1; }
.delivery-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 18px; }
.delivery-volunteer { position: absolute; right: 0; bottom: 20px; width: min(25vw, 390px); pointer-events: none; }
.zwerfie .accent-button { background: var(--zwerfie-accent); color: #fff; }
.zwerfie .text-button { background: transparent; padding: 8px 0; font-weight: 400; text-decoration: underline; }
.yield-page .appbody { position: relative; min-height: calc(100svh - 110px); }
.yield-decoration-left { position: absolute; z-index: 0; top: 245px; width: 240px; height: auto; pointer-events: none; }
.yield-totals { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(34px, 5vw, 70px); margin-top: 58px; position: relative; z-index: 1; }
.yield-total { width: 280px; text-align: center; overflow: hidden; }
.yield-bag { width: 280px; height: 280px; display: flex; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: contain; }
.yield-bag-personal { background-image: url('/images/branding/vuilniszak.png'); }
.yield-bag-year { background-image: url('/images/branding/vuilniszak-groot.png'); }
.yield-bag-value { margin: auto; padding-top: 60px; }
.yield-bag strong { display: block; font-size: 54px; line-height: 1; }
.yield-total h2 { font-size: 24px; line-height: 1.25; font-weight: 700; }
.yield-volunteer { position: absolute; right: 0; bottom: 0; width: min(28vw, 430px); pointer-events: none; }
.feedback-page .appbody { position: relative; max-width: 920px; }
.feedback-form { position: relative; z-index: 1; }
.feedback-form textarea { width: 100%; min-height: 220px; resize: vertical; }
.feedback-submit { min-width: 160px; }
.feedback-leaf { position: absolute; right: clamp(-210px, calc((920px - 100vw) / 2), 0px); top: 330px; width: 260px; pointer-events: none; }
@media (max-width: 1200px) {
    .delivery-decoration-left, .delivery-decoration-arrow, .yield-decoration-left { display: none; }
}
@media (max-width: 1000px) {
    .app-header { gap: 18px; padding-inline: 20px; }
    .desktop-navigation { gap: 12px; }
    .desktop-navigation a { min-width: 0; padding-inline: 16px; font-size: 16px; }
    .delivery-volunteer { display: none; }
    .home-actions .zwerfie-button { width: 320px; min-height: 88px; font-size: 22px; }
    .yield-volunteer { display: none; }
    .feedback-leaf { display: none; }
}
@media (max-width: 700px) {
    body.app-page { padding-bottom: 0; }
    .app-header { grid-template-columns: auto 1fr auto; gap: 6px; min-height: 58px; padding: 8px; }
    .app-brand img { width: 78px; }
    .desktop-navigation { gap: 4px; min-width: 0; }
    .desktop-navigation a { min-width: 0; padding: 6px 7px; font-size: 11px; line-height: 1.1; }
    .desktop-account { width: 32px; height: 32px; }
    .desktop-account span { transform: scale(.72); }
    .app-page .appbody { padding: 8px 34px 32px; }
    .page-title { min-height: calc(1.2em + 18px); margin: 12px auto 26px; padding: 0 28px; font-size: 36px; }
    .page-intro { font-size: 15px; margin-bottom: 28px; }
    .home-page .page-title { font-size: 40px; }
    .home-intro { display: none; }
    .home-actions { gap: 30px; margin-top: 44px; }
    .home-actions .zwerfie-button { width: 230px; min-height: 78px; font-size: 20px; }
    .home-volunteer { position: static; width: 250px; max-width: 100%; margin: 36px 0 0 -24px; }
    .delivery-field { margin-bottom: 20px; }
    .large-waste-field { gap: 8px; }
    .large-waste-controls { grid-template-columns: 48px minmax(0, 1fr); }
    .delivery-notes textarea { min-height: 150px; }
    .yield-page .appbody { min-height: 0; }
    .yield-totals { gap: 34px; margin-top: 24px; }
    .yield-total { width: 100%; }
    .yield-bag { width: 220px; height: 220px; margin-inline: auto; }
    .yield-bag strong { font-size: 40px; }
    .yield-total h2 { font-size: 20px; }
    .feedback-page .page-title { font-size: 48px; }
    .feedback-title-suffix { display: none; }
    .feedback-form textarea { min-height: 190px; }
    .profile-page .page-title { font-size: clamp(26px, 7.5vw, 36px); }
    .profile-form { margin-top: 30px; }
    .profile-actions { justify-content: center; }
    .auth-columns { gap: 0; }
}