:root{
    --bg:#F6F5F1;
    --panel:#FFFFFF;
    --line:#E1DDD3;
    --ink:#241E14;
    --ink-soft:#6B6355;
    --accent:#1F3D2B;
    --accent-soft:#E7EFE9;
    --warn:#A23B2E;
    --warn-soft:#F6E4E1;
    --gold:#8A6100;
    --gold-soft:#FCEFD0;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--bg); color:var(--ink); display:flex; justify-content:center; padding:0 0 60px;
  }
  .page{ width:100%; max-width:640px; transition:max-width 0.15s ease; }
  .page.wide{ max-width:1100px; }
  .app-shell{ display:flex; align-items:stretch; min-height:480px; }
  .sidebar{ width:200px; flex-shrink:0; background:var(--accent-soft); border-right:1px solid var(--line); padding:18px 0; }
  .sidebar button{ display:block; width:100%; text-align:left; padding:12px 22px; border:none; background:transparent; cursor:pointer; font-size:0.9rem; color:var(--ink); }
  .sidebar button.active{ background:var(--accent); color:#fff; font-weight:600; }
  .sidebar button:hover:not(.active){ background:rgba(31,61,43,0.08); }
  .main-area{ flex:1; min-width:0; padding:22px 26px; }
  header.top{ padding:20px 20px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
  header.top h1{ font-size:1.2rem; margin:0; }
  .tabs{ display:flex; gap:6px; padding:14px 20px 0; }
  .tab-btn{
    flex:1; padding:10px 0; border:1px solid var(--line); background:var(--panel);
    border-radius:10px 10px 0 0; cursor:pointer; font-size:0.9rem; color:var(--ink-soft);
  }
  .tab-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
  .panel{ background:var(--panel); border:1px solid var(--line); border-top:none; padding:20px; min-height:420px; }
  .panel.flush{ padding:0; }

  h2{ font-size:1.15rem; margin:2px 0 4px; }

  .landing-hero{ padding:6px 0 4px; }
  .landing-hero h1{ font-size:1.55rem; line-height:1.25; margin:0 0 10px; color:var(--accent); }
  .landing-photo{
    background:linear-gradient(135deg, var(--accent) 0%, #3F6B46 100%);
    border-radius:14px; padding:32px 16px; text-align:center; margin:14px 0 18px; color:#fff;
  }
  .landing-photo__icon{ font-size:2.2rem; display:block; margin-bottom:8px; }
  .landing-photo__caption{ font-size:0.75rem; opacity:0.8; }
  .landing-facts{ display:flex; justify-content:space-between; gap:8px; margin-bottom:20px; }
  .fact{ flex:1; background:var(--accent-soft); border-radius:10px; padding:12px 6px; text-align:center; font-size:0.78rem; }
  .fact__icon{ display:block; font-size:1.3rem; margin-bottom:4px; }
  h3{ font-size:1rem; margin:16px 0 8px; }
  p.sub{ color:var(--ink-soft); font-size:0.88rem; margin:0 0 16px; }

  .btn{ border:none; border-radius:8px; padding:11px 16px; font-size:0.92rem; font-weight:600; cursor:pointer; width:100%; }
  .btn--primary{ background:var(--accent); color:#fff; }
  .btn--ghost{ background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
  .btn--warn{ background:var(--warn); color:#fff; }
  .btn[disabled]{ opacity:0.4; cursor:not-allowed; }
  .btn-sm{ width:auto; padding:7px 12px; font-size:0.82rem; }

  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:0.82rem; color:var(--ink-soft); margin-bottom:4px; }
  .field input, .field select, .field textarea{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line); font-size:0.95rem; font-family:inherit; }

  .slot-card{ display:flex; justify-content:space-between; align-items:center; background:var(--accent-soft); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
  .status-free{ color:var(--accent); font-weight:600; }
  .status-taken{ color:var(--warn); font-weight:600; }

  .day-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
  .day-row__label{ width:44px; flex-shrink:0; font-weight:700; color:var(--jungle); font-size:0.95rem; }
  .day-row__slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; flex:1; }
  .slot-block{ background:var(--accent-soft); border:1px solid var(--line); border-radius:10px; padding:8px 4px; text-align:center; cursor:pointer; }
  .slot-block.taken{ opacity:0.45; cursor:not-allowed; }
  .slot-block .sb-time{ display:block; font-weight:600; font-size:0.85rem; }
  .slot-block .sb-status{ display:block; font-size:0.68rem; margin-top:2px; }

  .summary-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:0.9rem; }
  .summary-row:last-child{ border-bottom:none; }

  .code-box{ background:var(--accent); color:#fff; border-radius:12px; padding:18px; text-align:center; margin-bottom:16px; }
  .code-box .code{ font-size:2rem; font-weight:700; letter-spacing:0.06em; }

  .keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
  .pad-key{ background:var(--accent-soft); border:1px solid var(--line); border-radius:8px; padding:14px 0; font-size:1.1rem; font-weight:600; cursor:pointer; }
  .dots{ display:flex; justify-content:center; gap:10px; margin:18px 0; }
  .dots span{ width:14px; height:14px; border-radius:50%; border:2px solid var(--accent); }
  .dots span.filled{ background:var(--accent); }

  .timer-plate{ background:var(--accent); color:#fff; text-align:center; padding:14px; border-radius:10px; font-size:2rem; font-weight:700; margin-bottom:8px; font-variant-numeric:tabular-nums; }
  .timer-plate.over{ background:var(--warn); }
  .penalty-status{ text-align:center; font-size:0.82rem; color:var(--ink-soft); margin-bottom:10px; line-height:1.5; }
  .penalty-status .penalty-note{ font-size:0.75rem; opacity:0.8; }
  .goal{ text-align:center; font-size:0.85rem; color:var(--ink-soft); margin-bottom:16px; }
  .hexgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:6px; }
  .hexbtn{ background:var(--accent-soft); border:1px solid var(--line); border-radius:10px; padding:16px 4px; text-align:center; font-size:0.78rem; cursor:pointer; }
  .lamp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:10px; }
  .lamp{ aspect-ratio:1/1; border-radius:50%; background:#DDD6C4; border:2px solid var(--line); font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .lamp.opened{ background:var(--accent); color:#fff; }
  .reveal{ background:var(--accent-soft); border-radius:8px; padding:12px; margin-bottom:10px; font-size:0.9rem; }

  table.admin{ width:100%; border-collapse:collapse; font-size:0.8rem; }
  table.admin th, table.admin td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
  .badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.7rem; font-weight:700; white-space:nowrap; }
  .badge.bevestigd{ background:var(--accent-soft); color:var(--accent); }
  .badge.voltooid{ background:#DCEBD9; color:#2C5C36; }
  .badge.no_show{ background:var(--warn-soft); color:var(--warn); }
  .badge.geannuleerd_terugbetaald{ background:#EDEDED; color:#666; }
  .badge.wacht_op_betaling{ background:var(--gold-soft); color:var(--gold); }
  .badge.aangevraagd{ background:var(--gold-soft); color:var(--gold); }

  .park-card{ display:flex; justify-content:space-between; align-items:center; background:var(--accent-soft); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px; cursor:pointer; }
  .park-card .name{ font-weight:600; }
  .park-card .revenue{ text-align:right; }
  .park-card .revenue .amount{ font-weight:700; font-size:1.1rem; color:var(--accent); }
  .park-card .revenue .label{ font-size:0.72rem; color:var(--ink-soft); }

  .month-cell{ background:var(--accent-soft); border:1px solid var(--line); border-radius:8px; padding:8px 6px; min-height:52px; }
  .month-cell .mc-num{ font-size:0.85rem; font-weight:600; }
  .month-cell .mc-count{ font-size:0.68rem; color:var(--accent); margin-top:4px; }

  .stat-row{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
  .stat-box{ flex:1; min-width:110px; background:var(--accent-soft); border-radius:10px; padding:12px; text-align:center; }
  .stat-box .num{ font-size:1.3rem; font-weight:700; color:var(--accent); }
  .stat-box .lbl{ font-size:0.72rem; color:var(--ink-soft); }

  .filter-row{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .filter-row select, .filter-row input{ padding:8px 10px; border-radius:8px; border:1px solid var(--line); font-size:0.85rem; }

  .toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--accent); color:#fff; padding:9px 16px; border-radius:999px; font-size:0.85rem; opacity:0; pointer-events:none; transition:opacity 0.2s; z-index:30; }
  .toast.show{ opacity:1; }
  .toolbar{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }

  .modal-overlay{ position:fixed; inset:0; background:rgba(36,30,20,0.5); display:flex; align-items:flex-end; justify-content:center; z-index:40; }
  .modal{ background:var(--panel); width:100%; max-width:640px; border-radius:14px 14px 0 0; padding:20px; }
  .modal h3{ margin:0 0 10px; font-size:1.05rem; }