:root{
  --bg:#fbf5f1; --card:#fffdfb; --ink:#5a4744; --muted:#a38f8a; --line:#f0e2dc;
  --accent:#d4a1a0; --accent-strong:#b97978; --accent-ink:#fff; --soft:#f7e6e1; --field:#faf0ec;
  --danger:#c07070; --danger-soft:#f8e3e0; --ok:#7a9a7e; --ok-soft:#e6efe4;
  --lunch:#f3dcc8; --diner:#e6dbee; --shadow:0 6px 24px rgba(196,140,130,.10);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#241c1e; --card:#2e2427; --ink:#f3e4e0; --muted:#b39d99; --line:#3d3034;
    --accent:#d9a5a4; --accent-strong:#e6b8b7; --accent-ink:#2a1f22; --soft:#3d2e32; --field:#352a2d;
    --danger:#e39a9a; --danger-soft:#4a2f31; --ok:#a8c9a9; --ok-soft:#2f3b30;
    --lunch:#4a3a30; --diner:#3d3445; --shadow:none; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:600px;margin:0 auto;padding:48px 16px 80px}
header.top{text-align:center;margin-bottom:36px}
.flower{color:var(--accent);font-size:1.1rem;letter-spacing:.6em;margin-bottom:12px;display:block}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:2.5rem;line-height:1.05;margin:0 0 12px;letter-spacing:-.01em}
h2{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:1.45rem;line-height:1.2;margin:0 0 12px}
h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:500;margin:18px 0 8px}
p{margin:0 0 10px}
a{color:var(--accent-strong)}
.intro,.muted{color:var(--muted)}
.intro{margin:0 auto;max-width:42ch}
.small{font-size:.85rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
.card > :last-child{margin-bottom:0}
input,select,textarea{font:inherit;color:var(--ink);background:var(--field);border:1px solid transparent;border-radius:14px;padding:10px 14px;width:100%;min-width:0;transition:border-color .2s,background .2s}
textarea{resize:vertical;min-height:70px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--card)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent)}
label{font-size:.78rem;color:var(--muted);display:grid;gap:6px}
.btn{appearance:none;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:500 .88rem "DM Sans",sans-serif;padding:10px 20px;cursor:pointer;white-space:nowrap;transition:transform .15s,opacity .15s;box-shadow:0 4px 14px rgba(212,161,160,.35);text-decoration:none;display:inline-block;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--muted);box-shadow:none}
.btn.soft{background:var(--soft);color:var(--ink);box-shadow:none}
.btn.small{padding:5px 13px;font-size:.78rem}
.btn.danger{background:transparent;color:var(--danger);box-shadow:none;border:1px solid var(--danger-soft)}
.btn.block{width:100%}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.stack{display:grid;gap:14px}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.06em;text-transform:lowercase;padding:3px 12px;border-radius:999px;background:var(--lunch)}
.tag.diner{background:var(--diner)}
.pill{display:inline-block;white-space:nowrap;font-size:.75rem;padding:3px 11px;border-radius:999px;background:var(--soft);color:var(--ink)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--danger-soft);color:var(--danger)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--soft);border-radius:999px;padding:4px 12px;font-size:.82rem}
.msg{font-size:.85rem;color:var(--danger)}
.msg:empty{display:none}
.note-box{background:var(--soft);border-radius:16px;padding:12px 14px;font-size:.9rem}
.note-box.warn{background:var(--danger-soft)}
.note-box.ok{background:var(--ok-soft)}
details summary{cursor:pointer;color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:32px 0;font-style:italic}
footer.bottom{text-align:center;color:var(--accent);margin-top:36px;letter-spacing:.6em}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,8px);background:var(--card);color:var(--ink);box-shadow:0 10px 30px rgba(150,100,95,.22);padding:12px 20px;border-radius:999px;font-size:.88rem;opacity:0;transition:all .25s;pointer-events:none;max-width:calc(100% - 32px);z-index:50;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.linkbtn{color:var(--accent-strong);background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
/* Toggle-pillen voor keuzes */
.toggles{display:flex;flex-wrap:wrap;gap:6px}
.toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;font-size:.85rem;color:var(--ink);padding:6px 14px;border-radius:999px;background:var(--field);border:1px solid transparent;transition:all .15s;user-select:none}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle:has(input:checked){background:var(--accent);color:var(--accent-ink)}
.toggle:has(input:focus-visible){border-color:var(--accent-strong)}
/* Onderblad */
.sheet-bg{position:fixed;inset:0;background:rgba(60,40,40,.35);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.sheet-bg[hidden]{display:none}
.sheet{background:var(--card);width:100%;max-width:600px;max-height:92vh;overflow:auto;border-radius:28px 28px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
@media (min-width:640px){ .sheet-bg{align-items:center} .sheet{border-radius:28px} }
/* Voortgangsbalken */
.bar{height:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.bar.done > i{background:var(--ok)}
/* Samen gegeten */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin-bottom:16px}
.stats b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:2.2rem;font-weight:500;line-height:1.1}
.stats span{font-size:.75rem;color:var(--muted)}
.spark{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;height:70px;align-items:end}
.spark div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.spark i{display:block;width:100%;max-width:22px;background:var(--accent);border-radius:6px 6px 3px 3px;opacity:.85}
.spark span{font-size:.65rem;color:var(--muted)}

/* ------------------------------------------------------------------
   Stijlen die Bo-elle kan kiezen (roze is de standaard hierboven)
   ------------------------------------------------------------------ */
/* Salie & linnen */
html[data-theme="salie"]{--bg:#f3f1ea;--card:#fbfaf6;--ink:#33402f;--muted:#7d8a76;--line:#dfe3d6;--accent:#7f9a73;--accent-strong:#5e7a52;--accent-ink:#fff;--soft:#e8eddf;--field:#eef1e7;--lunch:#e9e4cf;--diner:#dce6dc;--ok:#5e7a52;--ok-soft:#e1ead9;--shadow:none}
html[data-theme="salie"] body{font-family:"Nunito Sans",sans-serif}
html[data-theme="salie"] h1,html[data-theme="salie"] h2,html[data-theme="salie"] .slot .when,html[data-theme="salie"] .what,html[data-theme="salie"] .ag-date b,html[data-theme="salie"] .stats b,html[data-theme="salie"] .guest b,html[data-theme="salie"] .cal-head h2{font-family:"Fraunces",serif!important;font-style:normal!important;font-weight:500!important;letter-spacing:-.01em}
html[data-theme="salie"] h1{font-size:2.4rem}
html[data-theme="salie"] .card{border-radius:10px;border:1px solid var(--line);box-shadow:none}
html[data-theme="salie"] .btn{border-radius:8px;box-shadow:none;font-family:"Nunito Sans";font-weight:600}
html[data-theme="salie"] .tag,html[data-theme="salie"] .chip,html[data-theme="salie"] .pill{border-radius:6px}
html[data-theme="salie"] .flower{letter-spacing:.4em;color:var(--accent)}
html[data-theme="salie"] .ev,html[data-theme="salie"] .cell{border-radius:8px}
/* Terracotta */
html[data-theme="terracotta"]{--bg:#f6ece2;--card:#fffaf4;--ink:#4a2c22;--muted:#a07a66;--line:#ecd9c8;--accent:#c4673f;--accent-strong:#a8502c;--accent-ink:#fff;--soft:#f3dfcf;--field:#f7e9dc;--lunch:#f4d9b8;--diner:#e9c9b9;--shadow:0 2px 0 #ecd9c8}
html[data-theme="terracotta"] body{font-family:"Work Sans",sans-serif}
html[data-theme="terracotta"] h1,html[data-theme="terracotta"] h2,html[data-theme="terracotta"] .slot .when,html[data-theme="terracotta"] .ag-date b,html[data-theme="terracotta"] .stats b,html[data-theme="terracotta"] .guest b,html[data-theme="terracotta"] .cal-head h2{font-family:"DM Serif Display",serif!important;font-style:normal!important;font-weight:400!important}
html[data-theme="terracotta"] h1{font-size:2.6rem}
html[data-theme="terracotta"] .card{border-radius:4px 28px 4px 28px;border:0;box-shadow:var(--shadow)}
html[data-theme="terracotta"] .btn{border-radius:4px;box-shadow:none;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-family:"Work Sans";font-weight:500}
html[data-theme="terracotta"] .tag{border-radius:2px;text-transform:uppercase;letter-spacing:.1em}
html[data-theme="terracotta"] .flower{color:var(--accent)}
html[data-theme="terracotta"] .ev,html[data-theme="terracotta"] .cell{border-radius:4px 18px 4px 18px}
/* Lavendel */
html[data-theme="lavendel"]{--bg:#f4f1fb;--card:#ffffff;--ink:#4b4466;--muted:#9a93b5;--line:#e6e1f5;--accent:#a88ee0;--accent-strong:#8a6fd0;--accent-ink:#fff;--soft:#efe9fb;--field:#f3f0fb;--lunch:#fde7ef;--diner:#e6e0fb;--shadow:0 10px 30px rgba(140,110,210,.12)}
html[data-theme="lavendel"] body{font-family:"Quicksand",sans-serif;font-weight:500;background:linear-gradient(180deg,#f7eefa 0%,#eef0fb 60%,#f4f1fb 100%) fixed}
html[data-theme="lavendel"] h1,html[data-theme="lavendel"] h2,html[data-theme="lavendel"] .slot .when,html[data-theme="lavendel"] .ag-date b,html[data-theme="lavendel"] .stats b,html[data-theme="lavendel"] .guest b,html[data-theme="lavendel"] .cal-head h2{font-family:"Quicksand",sans-serif!important;font-style:normal!important;font-weight:700!important;letter-spacing:-.01em}
html[data-theme="lavendel"] h1{font-size:2.2rem}
html[data-theme="lavendel"] .card{border-radius:32px;border:0}
html[data-theme="lavendel"] .btn{border-radius:999px;background:linear-gradient(135deg,#c3a6f0,#f0a6c8);box-shadow:0 6px 18px rgba(170,130,230,.35);font-family:"Quicksand";font-weight:700}
html[data-theme="lavendel"] .btn.soft,html[data-theme="lavendel"] .btn.ghost{background:var(--soft);box-shadow:none}
html[data-theme="lavendel"] .flower{color:#d7a6e8}
html[data-theme="lavendel"] .ev,html[data-theme="lavendel"] .cell{border-radius:22px}
/* Nacht & goud */
html[data-theme="nacht"]{--bg:#1f1a24;--card:#2a2330;--ink:#f1e8dc;--muted:#a99fae;--line:#3b3242;--accent:#d4b06a;--accent-strong:#e6c482;--accent-ink:#1f1a24;--soft:#362d3d;--field:#332a39;--lunch:#3d3328;--diner:#33293f;--ok:#c9b27a;--ok-soft:#3a3427;--danger:#e3958f;--shadow:none}
html[data-theme="nacht"] body{font-family:"Jost",sans-serif;font-weight:300;letter-spacing:.01em}
html[data-theme="nacht"] h1,html[data-theme="nacht"] h2,html[data-theme="nacht"] .slot .when,html[data-theme="nacht"] .ag-date b,html[data-theme="nacht"] .stats b,html[data-theme="nacht"] .guest b,html[data-theme="nacht"] .cal-head h2{font-family:"Cormorant Garamond",serif!important;font-weight:500!important}
html[data-theme="nacht"] h1{font-size:2.8rem;color:var(--accent-strong)}
html[data-theme="nacht"] .card{border-radius:2px;border:1px solid var(--line)}
html[data-theme="nacht"] .btn{border-radius:0;background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-family:"Jost";font-weight:400}
html[data-theme="nacht"] .tag{border-radius:0;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
html[data-theme="nacht"] .chip{border-radius:0}
html[data-theme="nacht"] .flower{color:var(--accent)}
html[data-theme="nacht"] .ev,html[data-theme="nacht"] .cell{border-radius:2px}
html[data-theme="nacht"] .tabbar{background:rgba(31,26,36,.9)!important}

.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.themes button{appearance:none;border:2px solid transparent;border-radius:16px;padding:10px 8px;font:500 .78rem "DM Sans",sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px}
.themes button.on{border-color:var(--accent-strong)}
.themes i{display:flex;gap:3px}
.themes i b{width:16px;height:16px;border-radius:50%;display:block}