:root{
    --bg:#F4F4F7; --card:#FFFFFF; --ink:#1D1D1F; --muted:#8A8A93; --line:#E6E6EB;
    --boven:#4F7CFF; --boven-soft:#E5ECFF;
    --gym:#FF7A45; --gym-soft:#FFE9DF;
    --les:#D9D9DF; --simone:#B9A6FF; --extra:#FFB020; --ok:#2BB673; --no:#FF4D4F;
    --r:18px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;}
  button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
  .app{max-width:1100px;margin:0 auto;padding:16px 16px 40px;display:grid;gap:16px;grid-template-columns:1fr}
  @media(min-width:900px){.app{grid-template-columns:1fr 300px;align-items:start}}

  header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
  .dot{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--boven),var(--gym))}
  .who{display:flex;background:var(--card);border-radius:999px;padding:4px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
  .who button{padding:7px 12px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted)}
  .who button.on{background:var(--ink);color:#fff}

  .card{background:var(--card);border-radius:var(--r);box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .week{display:flex;align-items:center;gap:6px;padding:10px}
  .week .nav{width:36px;height:36px;border-radius:12px;background:var(--bg);font-size:18px;font-weight:700}
  .days{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
  .day{padding:8px 0;border-radius:14px;text-align:center}
  .day small{display:block;font-size:12px;color:var(--muted);font-weight:600}
  .day b{font-size:18px}
  .day.on{background:var(--ink);color:#fff}.day.on small{color:#bbb}
  .day.today:not(.on) b{color:var(--boven)}

  .board{padding:12px 12px 16px}
  .lanes-head{display:grid;grid-template-columns:44px 1fr 1fr;gap:8px;margin-bottom:8px}
  .lane-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:8px 10px;border-radius:12px}
  .lane-title i{width:12px;height:12px;border-radius:4px}
  .t-boven{background:var(--boven-soft)} .t-boven i{background:var(--boven)}
  .t-gym{background:var(--gym-soft)} .t-gym i{background:var(--gym)}
  .grid{display:grid;grid-template-columns:44px 1fr 1fr;gap:8px;max-height:62vh;overflow:auto;position:relative}
  .hours{position:relative}
  .hours div{height:56px;font-size:12px;color:var(--muted);font-weight:600;transform:translateY(-7px)}
  .lane{position:relative;border-radius:12px;background:
      repeating-linear-gradient(to bottom,transparent 0 55px,var(--line) 55px 56px);}
  .slot{position:absolute;left:0;right:0;height:14px}
  .slot:hover{background:rgba(0,0,0,.04);border-radius:6px}
  .blk{position:absolute;left:3px;right:3px;border-radius:10px;padding:5px 8px;font-size:12px;font-weight:700;overflow:hidden;line-height:1.25}
  .blk[data-id]{cursor:pointer}
  .blk span{display:block;font-weight:500;opacity:.85}
  .blk.les{background:var(--les);color:#55555c}
  .blk.simone{background:var(--simone);color:#fff}
  .blk.mine.boven,.blk.other.boven{background:var(--boven);color:#fff}
  .blk.mine.gym,.blk.other.gym{background:var(--gym);color:#fff}
  .blk.pending{background:repeating-linear-gradient(135deg,#fff 0 6px,#f3f3f6 6px 12px)!important;color:var(--ink)!important;border:2px dashed currentColor}
  .blk.pending.boven{color:var(--boven)!important}.blk.pending.gym{color:var(--gym)!important}
  .blk.extra::after{content:"extra";position:absolute;top:5px;right:6px;background:var(--extra);color:#fff;font-size:10px;padding:1px 6px;border-radius:999px}
  .legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);margin-top:12px;font-weight:600}
  .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

  aside{display:grid;gap:16px}
  .side{padding:16px}
  .side h3{margin:0 0 4px;font-size:16px}
  .side p.sub{margin:0 0 14px;color:var(--muted);font-size:13px}
  .coach{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
  .coach:first-of-type{border-top:0}
  .coach b{font-size:15px}
  .coach small{display:block;color:var(--muted);font-size:12px}
  .pips{display:flex;gap:4px}
  .pip{width:14px;height:14px;border-radius:5px;background:var(--line)}
  .pip.free{background:var(--ok)} .pip.ext{background:var(--extra)}
  .req{border-top:1px solid var(--line);padding:12px 0}
  .req:first-of-type{border-top:0}
  .req .meta{font-size:14px;font-weight:700}
  .req .meta small{display:block;font-weight:500;color:var(--muted)}
  .req .acts{display:flex;gap:8px;margin-top:10px}
  .pill{flex:1;padding:10px;border-radius:12px;font-weight:700;font-size:14px}
  .pill.yes{background:var(--ok);color:#fff}.pill.no{background:var(--bg);color:var(--no)}
  .empty{color:var(--muted);font-size:14px}
  .big{width:100%;padding:13px;border-radius:14px;background:var(--simone);color:#fff;font-weight:800;font-size:15px}

  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.25);display:none;align-items:flex-end;justify-content:center;z-index:10}
  .scrim.on{display:flex}
  @media(min-width:700px){.scrim{align-items:center}}
  .sheet{background:var(--card);width:100%;max-width:440px;border-radius:24px 24px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));animation:up .22s ease}
  @media(min-width:700px){.sheet{border-radius:24px}}
  @keyframes up{from{transform:translateY(30px);opacity:0}}
  .sheet h2{margin:0 0 2px;font-size:20px}
  .sheet .when{color:var(--muted);font-weight:600;margin-bottom:16px}
  .label{font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 8px}
  .choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .choices.two{grid-template-columns:repeat(2,1fr)}
  .choice{padding:14px 6px;border-radius:14px;background:var(--bg);font-weight:800;font-size:16px;text-align:center}
  .choice small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
  .choice.on{background:var(--ink);color:#fff}.choice.on small{color:#bbb}
  .choice:disabled{opacity:.3;cursor:not-allowed}
  .note{margin-top:14px;padding:12px;border-radius:14px;font-size:13px;font-weight:600}
  .note.free{background:#E3F6EC;color:#1d7a4d}.note.ext{background:#FFF3DC;color:#9a6200}
  .sheet .go{width:100%;margin-top:16px;padding:15px;border-radius:16px;background:var(--ink);color:#fff;font-weight:800;font-size:16px}
  .sheet .cancel{width:100%;margin-top:6px;padding:12px;color:var(--muted);font-weight:700}
  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;transition:.25s;z-index:20}
  .toast.on{transform:translateX(-50%) translateY(0)}
  .proto{grid-column:1/-1;text-align:center;font-size:12px;color:var(--muted)}

  .login{max-width:360px;margin:12vh auto;padding:28px;text-align:center}
  .login h1{font-size:24px;margin:14px 0 4px}
  .login p{color:var(--muted);margin:0 0 20px;font-size:14px}
  .login .choices{grid-template-columns:repeat(3,1fr)}
  .login input{width:100%;margin-top:14px;padding:14px;border-radius:14px;border:0;background:var(--bg);font:inherit;font-size:22px;text-align:center;letter-spacing:6px}
  .login .err{color:var(--no);font-size:14px;font-weight:600;min-height:20px;margin-top:10px}
  .me{display:flex;align-items:center;gap:10px;font-weight:700}
  .me button{padding:7px 12px;border-radius:999px;background:var(--card);font-size:13px;color:var(--muted);font-weight:700}
  .warn{background:#FFF3DC;color:#9a6200;padding:10px 14px;border-radius:14px;font-size:13px;font-weight:600;margin-bottom:10px}