@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(/static/fonts/open-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(/static/fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--gold:#C9A227;--gold-d:#8A6D12;--ink:#262626;--anth:#373737;--anth2:#4A4A4A;--sand:#D1C6B0;--sand-l:#EAE4D6;--bg:#F4F4F4;--card:#fff;--muted:#6B6455;--line:#E6E0D2;--green:#7A8F1A;--orange:#E08A1E;--red:#C0392B;--r:16px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--anth);font-family:"Open Sans",system-ui,sans-serif;font-size:15px;line-height:1.5}
h1,h2,h3{margin:0;line-height:1.25}
h1{font-size:24px;font-weight:700}h2{font-size:18px;font-weight:700}h3{font-size:16px;font-weight:700}
p{margin:0 0 .6em}a{color:var(--gold-d)}
img{max-width:100%}
.muted{color:var(--muted)}.small{font-size:13px}.xs{font-size:12px}.bold{font-weight:700}.center{text-align:center}
.logo{font-size:34px;font-weight:800;letter-spacing:-.5px;color:var(--anth)}.logo span{color:var(--gold)}
.logo.sm{font-size:22px}
.tag{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
/* ---------- client shell ---------- */
.phone{width:100%;max-width:460px;min-height:100vh;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--bg);position:relative}
@media(min-width:520px){body.client{background:#e9e6de}.phone{box-shadow:0 0 0 1px var(--line),0 10px 40px rgba(0,0,0,.12)}}
.page{flex:1;padding:22px 22px 28px;display:flex;flex-direction:column;gap:14px}
.page.has-nav{padding-bottom:96px}
.topbar{padding:14px 22px 0}
.progress-wrap{display:flex;flex-direction:column;gap:6px}
.progress-label{font-size:12px;font-weight:700;color:var(--muted);display:flex;justify-content:space-between}
.progress{height:6px;border-radius:3px;background:var(--sand-l);overflow:hidden}.progress i{display:block;height:100%;background:var(--gold);border-radius:3px}
.back{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;min-height:44px}
.footer-cta{margin-top:auto;display:flex;flex-direction:column;gap:12px;align-items:center;padding-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 24px;border:0;border-radius:27px;background:var(--gold);color:var(--ink);font:700 16px "Open Sans",sans-serif;cursor:pointer;text-decoration:none;width:100%;text-align:center;transition:transform .08s,filter .15s}
.btn:hover{filter:brightness(1.05)}.btn:active{transform:scale(.985)}
.btn.dark{background:var(--anth);color:#fff}.btn.ghost{background:transparent;border:2px solid var(--anth);color:var(--anth)}
.btn.sm{min-height:44px;font-size:14px;padding:0 18px;width:auto;border-radius:22px}.btn.auto{width:auto}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.danger{background:var(--red);color:#fff}
.card{background:var(--card);border-radius:var(--r);padding:16px}
.card.sand{background:var(--sand-l)}.card.outline{background:#fff;border:1px solid var(--sand)}
.card.dark{background:var(--anth);color:#fff}
.card.dark .kicker{color:var(--gold)}
.kicker{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold-d)}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=url],input[type=search],select,textarea{height:48px;border-radius:12px;border:1px solid #C9BFA8;background:#fff;padding:0 14px;font:400 16px "Open Sans",sans-serif;color:var(--anth);width:100%}
textarea{height:auto;padding:12px 14px;min-height:90px;line-height:1.45;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(201,162,39,.35);border-color:var(--gold-d)}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold-d);flex-shrink:0;margin:0}
input[type=radio]{accent-color:var(--gold-d)}
.row{display:flex;gap:12px}.row>*{flex:1}
.stack{display:flex;flex-direction:column;gap:12px}
.err{background:#fbeae7;border:1px solid #e9b9b1;color:#8f2a1d;border-radius:12px;padding:10px 14px;font-size:14px}
.ok{background:#eef3d8;border:1px solid #cdd9a0;color:#4d5c0c;border-radius:12px;padding:10px 14px;font-size:14px}
.big-input{font-size:44px;font-weight:800;text-align:center;height:90px;border-radius:18px}
.unit{font-size:20px;font-weight:700;color:var(--muted)}
.option{display:flex;gap:14px;align-items:flex-start;background:#fff;border:2px solid transparent;border-radius:var(--r);padding:14px 16px;cursor:pointer;min-height:64px}
.option:has(input:checked){border-color:var(--gold);background:#fffaf0}
.option input{margin-top:3px}.option b{display:block;font-size:16px}.option span{font-size:13px;color:var(--muted)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{flex:1;min-width:84px}.chip input{position:absolute;opacity:0}
.chip span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:76px;border-radius:14px;background:#fff;border:2px solid transparent;font-weight:700;cursor:pointer}
.chip span small{font-weight:400;font-size:12px;color:var(--muted)}
.chip input:checked+span{border-color:var(--gold);background:#fffaf0}.chip input:focus-visible+span{outline:3px solid rgba(201,162,39,.4)}
.check-list{background:#fff;border-radius:var(--r);padding:2px 14px;display:flex;flex-direction:column}
.check-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #EEE9DE;min-height:48px}.check-row:last-child{border:0}
.check-row .t{flex:1;font-size:14px}.check-row .v{font-size:13px;font-weight:700}.check-row .m{font-size:13px;color:#555}
.check-row.locked{opacity:.55}
.steplist{display:flex;flex-direction:column;gap:10px}
.step{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--r);padding:14px 16px;text-decoration:none;color:var(--anth);min-height:64px}
.step .ic{width:34px;height:34px;border-radius:50%;background:var(--sand-l);display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
.step.done .ic{background:var(--gold-d);color:#fff}.step.cur{outline:2px solid var(--gold)}
.step.lock{opacity:.5}.step .tt{font-weight:700;font-size:15px}.step .ss{font-size:12px;color:var(--muted)}
.step .arrow{margin-left:auto;color:var(--muted)}
.countdown{display:flex;align-items:center;gap:14px;background:var(--anth);color:#fff;border-radius:20px;padding:16px 18px}
.countdown .num{width:56px;height:56px;border-radius:16px;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-size:28px;font-weight:800}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font-weight:700;color:var(--anth);flex-shrink:0}
.avatar.sm{width:32px;height:32px;font-size:12px}.avatar.lg{width:52px;height:52px;font-size:18px}
.bubble{margin:0;font-size:14px;line-height:1.45;background:#fff;border-radius:4px 14px 14px 14px;padding:9px 12px}
.tipcard{background:var(--anth);color:#fff;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;text-decoration:none}
.tipcard .kicker{color:var(--gold)}.tipcard .tt{font-size:17px;font-weight:700}.tipcard .ss{font-size:13px;color:#E6E0D2}
.tipcard .done{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--gold)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--anth);display:flex;flex-direction:column}
.tile .pic{height:56px;background:var(--sand-l);display:grid;place-items:center;overflow:hidden}.tile .pic img{width:100%;height:100%;object-fit:cover}
.tile .tx{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px}.tile .k{font-size:11px;font-weight:700;color:#8C7F52}.tile .n{font-size:13px;font-weight:700;line-height:1.3}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.nav{position:sticky;bottom:0;margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid #E6E0D2;padding:8px 8px calc(10px + env(safe-area-inset-bottom));z-index:5}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:600;padding:4px 0;min-height:48px;justify-content:center}
.nav a.on{color:var(--anth);font-weight:700}.nav svg{stroke:currentColor}
.glasses{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 10px 34px}
.glass{width:30px;height:38px;border-radius:5px 5px 9px 9px;border:2px solid #A9C4D8;background:#fff;cursor:pointer;padding:0;position:relative;overflow:hidden}
.glass.on{background:linear-gradient(#cfe5f4,#8fc0e0);border-color:#6aa6cf}
.cards-snap{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -22px;padding:0 22px 8px;scrollbar-width:none}
.cards-snap::-webkit-scrollbar{display:none}
.snapcard{flex:0 0 82%;scroll-snap-align:center;background:#fff;border-radius:20px;padding:22px;min-height:230px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line)}
.snapcard .no{width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:800;display:grid;place-items:center}
.dots{display:flex;gap:6px;justify-content:center}.dots i{width:8px;height:8px;border-radius:50%;background:var(--sand)}.dots i.on{background:var(--gold-d)}
.stat{display:flex;flex-direction:column;align-items:center;gap:0;padding:18px;background:#fff;border-radius:20px;text-align:center}
.stat .big{font-size:52px;font-weight:800;line-height:1.1}.stat .u{font-size:16px;font-weight:700;color:var(--muted)}
.target{background:#fff;border-radius:20px;padding:18px}.target .big{font-size:44px;font-weight:800;line-height:1.1}
.mood{display:flex;flex-direction:column;gap:6px;align-items:center}.mood .val{font-size:44px;font-weight:800}
input[type=range]{width:100%;height:44px;accent-color:var(--gold-d)}
.tabs{display:flex;gap:6px;background:var(--sand-l);border-radius:14px;padding:4px}
.tabs a,.tabs button{flex:1;text-align:center;padding:10px 6px;border-radius:11px;font:600 13px "Open Sans";text-decoration:none;color:var(--muted);background:none;border:0;cursor:pointer;min-height:44px}
.tabs .on{background:#fff;color:var(--anth);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.list-item{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--anth);min-height:56px}
.list-item.locked{opacity:.55}
.list-item .no{width:32px;height:32px;border-radius:50%;background:var(--sand-l);display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.list-item.open .no{background:var(--gold);color:var(--ink)}
.list-item .st{font-size:12px;color:var(--muted)}
.prose p,.prose ul{margin:0 0 .8em}.prose ul{padding-left:1.2em}.prose li{margin:.2em 0}
.video{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--anth);color:#fff;padding:10px 18px;border-radius:20px;font-size:14px;z-index:20}
.chart{background:#fff;border-radius:var(--r);padding:10px 8px 6px}
.segbar{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden}
.pill{display:inline-block;padding:3px 10px;border-radius:12px;background:var(--anth);color:#fff;font-size:12px;font-weight:700}
.pill.gold{background:var(--gold);color:var(--ink)}
.catch{background:#fffaf0;border:1px solid #EBD99A;border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.catch .it{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--anth)}
.catch .it b{display:block}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}
.dot.groen{background:var(--green)}.dot.oranje{background:var(--orange)}.dot.rood{background:var(--red)}.dot.grijs{background:#aaa}
/* ---------- staff (coach/admin) ---------- */
body.staff{background:var(--bg)}
.layout{display:flex;min-height:100vh;flex-wrap:wrap}
.side{flex:1 1 230px;max-width:260px;background:var(--anth);color:#fff;padding:26px 18px;display:flex;flex-direction:column;gap:26px;position:sticky;top:0;height:100vh;overflow:auto}
.side .logo{color:#fff}.side .role{font-size:12px;font-weight:600;color:var(--sand)}
.side nav{display:flex;flex-direction:column;gap:3px}
.side nav .grp{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#a99f88;margin:12px 12px 4px}
.side nav a{padding:10px 12px;border-radius:10px;color:#E6E0D2;text-decoration:none;font-size:14px;min-height:40px;display:flex;align-items:center;gap:8px;justify-content:space-between}
.side nav a.on{background:var(--anth2);color:#fff;font-weight:700}.side nav a:hover{background:#444}
.side .who{margin-top:auto;font-size:12px;color:var(--sand);display:flex;flex-direction:column;gap:8px}
.side .who button{background:none;border:1px solid #666;color:#fff;border-radius:10px;padding:8px;font:600 13px "Open Sans";cursor:pointer;min-height:40px}
.badge{background:var(--gold);color:var(--ink);border-radius:10px;padding:0 7px;font-size:11px;font-weight:800}
.main{flex:999 1 560px;min-width:0;padding:30px 34px;display:flex;flex-direction:column;gap:22px}
@media(max-width:820px){.side{position:static;height:auto;max-width:none;flex-basis:100%}.main{padding:20px 16px}}
.pagehead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.pagehead h1{font-size:28px;font-weight:800}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{background:#fff;border-radius:var(--r);padding:18px}.kpi .l{font-size:13px;color:#555}.kpi .n{font-size:30px;font-weight:800}
.kpi.hl{border:2px solid var(--anth)}
.tablewrap{background:#fff;border-radius:var(--r);overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
table.t th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;padding:14px 14px;font-weight:700}
table.t td{padding:13px 14px;border-top:1px solid #EEE9DE;vertical-align:middle}
table.t tr.grey td{color:#999}
table.t a.row-link{color:var(--anth);font-weight:700;text-decoration:none}
.btn-s{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border:0;border-radius:21px;background:var(--gold);color:var(--ink);font:700 14px "Open Sans";cursor:pointer;text-decoration:none}
.btn-s.dark{background:var(--anth);color:#fff}.btn-s.out{background:#fff;border:2px solid var(--anth);color:var(--anth)}.btn-s.red{background:var(--red);color:#fff}
.btn-s.xs{min-height:34px;padding:0 14px;font-size:13px}
.panel{background:#fff;border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px}
.panel h2{font-size:17px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.staff label.f input,.staff label.f select,.staff label.f textarea{height:44px;font-size:15px}.staff label.f textarea{height:auto}
.staff textarea.code{font:13px/1.5 ui-monospace,Menlo,monospace}
.hint{font-size:12px;color:var(--muted)}
.tag-ok{color:var(--green);font-weight:700}.tag-no{color:var(--orange);font-weight:700}
.secret{font:600 14px ui-monospace,Menlo,monospace;background:#fffaf0;border:1px dashed var(--gold-d);padding:10px 12px;border-radius:10px;word-break:break-all}
.notes{display:flex;flex-direction:column;gap:6px}.notes .n{display:flex;gap:10px;font-size:14px;background:#fff;border-radius:12px;padding:10px 14px}.notes .n.un{border-left:4px solid var(--gold)}
.timeline td{font-size:13px}
details.fold{background:#fff;border-radius:var(--r);padding:0}details.fold>summary{cursor:pointer;padding:16px 20px;font-weight:700;list-style:none;min-height:48px}
details.fold[open]>summary{border-bottom:1px solid var(--line)}details.fold>div{padding:16px 20px}
@media print{.side,.nav{display:none}}