:root{--tile:#0E4C73;--rope:#F2C230;--aqua:#7FD3E6;--bg:#EEF6F9;--card:#fff;--ink:#10283A;--muted:#5B7486;--line:#D3E3EB;--in:#1F8A5B;--out:#C23D35;--open:#B7791F;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#071A26;--card:#0F2636;--ink:#E6F2F7;--muted:#8FA9B8;--line:#1F3B4E;--in:#4CC38A;--out:#F07A72;--open:#E9B44C}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
.num{font-family:"Barlow Condensed","Roboto Condensed","Arial Narrow",sans-serif;font-stretch:condensed;font-variant-numeric:tabular-nums}
nav.top{background:var(--tile);color:#fff;padding-top:env(safe-area-inset-top)}
.navrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px}
.brand{font-weight:700;text-decoration:none;color:var(--aqua)}
.navlinks{display:flex;gap:14px;font-size:.95rem}
.navlinks a{color:#fff;text-decoration:none}
.hero{background:var(--tile);color:#fff;position:relative;padding:4px 0 34px}
.hero.solo{padding-top:calc(env(safe-area-inset-top) + 40px)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,var(--rope) 0 18px,#fff 18px 22px,#C23D35 22px 40px,#fff 40px 44px)}
.balance{font-weight:700;font-size:clamp(3rem,14vw,5rem);line-height:1;margin:14px 0 4px}
.balance.neg{color:#FFB3AD}
.teamtitle{font-weight:700;font-size:2.2rem;line-height:1.1}
.sub{color:#CFE7F0}
.stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;font-size:.85rem;color:#CFE7F0}
.stats b{display:block;font-size:1.35rem;color:#fff}
h2{font-size:1.3rem;margin:28px 0 10px}
.flash{margin-top:14px;padding:10px 14px;border-radius:8px;background:var(--card);border-left:4px solid var(--in)}
.flash.err{border-left-color:var(--out)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px}
.list{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row.single{grid-template-columns:1fr}
.full{grid-column:1/-1}
.thumb{width:44px;height:44px;border-radius:8px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;font-size:1.1rem;text-decoration:none;color:var(--muted);font-weight:600}
.thumb img{width:100%;height:100%;object-fit:cover}
.desc{min-width:0}
.desc strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desc small{color:var(--muted)}
.amt{text-align:right;font-weight:700;font-size:1.2rem;white-space:nowrap}
.amt.in{color:var(--in)}.amt.out{color:var(--out)}.amt.open{color:var(--open)}
.tools{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.tools.start{justify-content:flex-start}
.tools form{margin:0}
.inline-form{display:flex;gap:6px}
.inline-form input{width:170px;padding:4px 8px}
.btn{display:inline-block;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:10px 14px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn.primary{background:var(--rope);border-color:var(--rope);color:#10283A}
.btn.small{padding:4px 10px;font-size:.85rem;border-radius:6px;font-weight:500}
.btn.ok{border-color:var(--in);color:var(--in)}
.btn.danger{color:var(--out)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
details.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-top:10px}
details.panel summary{padding:14px 16px;cursor:pointer;font-weight:600}
details.panel .body{padding:0 16px 16px}
label{display:block;font-size:.9rem;font-weight:500;margin:12px 0 4px}
label.inline{display:flex;gap:8px;align-items:center;font-weight:400}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
input[type=checkbox]{width:auto}
textarea{margin-top:8px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.checks label{display:flex;gap:8px;align-items:center;font-weight:400;margin:4px 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chips a{border:1px solid var(--line);border-radius:999px;padding:4px 14px;text-decoration:none;color:var(--muted)}
.chips a.on{background:var(--tile);border-color:var(--tile);color:#fff}
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.member{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.9rem;color:var(--muted)}
.member strong{display:block;font-size:1rem;color:var(--ink)}
.due{color:var(--open);font-weight:600}
.muted{color:var(--muted);font-size:.9rem}
.empty{padding:20px 16px;text-align:center;color:var(--muted)}
.login{max-width:400px;margin:0 auto;padding:8px 16px 40px}
footer{margin:32px 0;color:var(--muted);font-size:.85rem}
:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
/* kasboek-datefix: iOS datumveld gelijk aan andere velden */
input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;min-height:46px;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-datetime-edit{padding:0}
/* kasboek-mailcss */
.flash.warn{border-left-color:var(--open)}
.flash a{font-weight:600}
.linkrow{margin:14px 0 0;font-size:.9rem}
.linkrow a{color:var(--muted)}
.inline-form{flex-wrap:wrap;margin-top:6px}
.inline-form input{flex:1 1 170px;width:auto}
/* kasboek-logocss */
.hero .wrap{position:relative}
.hero-logo{position:absolute;right:16px;top:14px;height:64px;width:auto;pointer-events:none}
.login-logo{display:block;height:110px;width:auto;max-width:100%;margin-bottom:14px}
@media (max-width:420px){.hero-logo{height:46px;top:18px}}
/* kasboek-aanmeldcss */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* kasboek-betaalcss */
.iban{font-size:1.4rem;font-weight:700;margin:6px 0 2px;letter-spacing:.02em}
.bad{color:var(--out)}
/* kasboek-uitnodigcss */
.row.pick{cursor:pointer;margin:0;font-weight:400;font-size:1rem}
.row.pick input{width:auto;margin-right:6px}
/* kasboek-vrijcss */
.checks.one{grid-template-columns:1fr}
.checks input[type=radio]{width:auto}
.vrij-bedrag{flex:0 1 130px;width:130px;padding:4px 8px}
.amt.vrij{font-size:1rem}