:root{
    --bg:#f4f1e7;
    --surface:#ffffff;
    --surface-2:#ece6d5;
    --ink:#16231d;
    --ink-dim:#47564c;
    --line: #d8d2c0;
    --pitch:#1e5c42;
    --pitch-strong:#163f2d;
    --pitch-ink:#f4f6f1;
    --whistle:#d96a1a;
    --whistle-ink:#16231d;
    --warn:#b23b2e;
    --shadow: 0 1px 0 var(--line), 0 6px 16px -12px rgba(22,35,29,0.22);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#101914;
      --surface:#172420;
      --surface-2:#1c2b23;
      --ink:#eef2ec;
      --ink-dim:#a9b8ae;
      --line: #2b3a32;
      --pitch:#4bae82;
      --pitch-strong:#6cc99b;
      --pitch-ink:#0c2016;
      --whistle:#e98b3f;
      --whistle-ink:#2a1b03;
      --warn:#e2695c;
      --shadow: 0 1px 0 var(--line), 0 10px 24px -12px rgba(0,0,0,0.5);
    }
  }
  :root[data-theme="dark"]{
    --bg:#101914;
    --surface:#172420;
    --surface-2:#1c2b23;
    --ink:#eef2ec;
    --ink-dim:#a9b8ae;
    --line: #2b3a32;
    --pitch:#4bae82;
    --pitch-strong:#6cc99b;
    --pitch-ink:#0c2016;
    --whistle:#e98b3f;
    --whistle-ink:#2a1b03;
    --warn:#e2695c;
    --shadow: 0 1px 0 var(--line), 0 10px 24px -12px rgba(0,0,0,0.5);
  }

  *{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
  html,body{ height:100%; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
  }
  h1,h2,h3{ font-family:"Big Shoulders Display", "IBM Plex Sans", sans-serif; text-wrap: balance; margin:0; }
  button{ font-family: inherit; }
  input{ font-family: inherit; }

  #app{ min-height: 100dvh; display:flex; flex-direction:column; }

  .topbar{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:.75rem;
    padding: max(.9rem, env(safe-area-inset-top)) 1rem .75rem;
    border-bottom: 1.5px solid var(--line);
    background: var(--bg);
    position: sticky; top:0; z-index:5;
  }
  .club-name-wrap{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
  .eyebrow{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.62rem; letter-spacing:.05em; text-transform:uppercase;
    color: var(--pitch); display:flex; align-items:center; gap:.4rem; margin:0;
  }
  .eyebrow::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background: var(--pitch); flex:none; }
  .club-name-btn{
    background:none; border:none; padding:0; text-align:left;
    font-family:"Big Shoulders Display", sans-serif; font-weight:700; font-size:1.3rem;
    text-transform:uppercase; letter-spacing:.01em; line-height:1;
    color: var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 62vw;
  }
  .club-name-input{
    font-family:"Big Shoulders Display", sans-serif; font-weight:700; font-size:1.3rem;
    text-transform:uppercase; letter-spacing:.01em;
    color: var(--ink); background: var(--surface-2); border:1px solid var(--line);
    border-radius:.4rem; padding:.1rem .45rem; max-width:62vw;
  }
  .sync-dot{ width:.55rem; height:.55rem; border-radius:50%; flex:none; }
  .sync-dot.live{ background: var(--pitch); box-shadow: 0 0 0 0 var(--pitch); animation: pulse 2.2s infinite; }
  .sync-dot.local{ background: var(--ink-dim); }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(79,163,119,.55); }
    70%{ box-shadow: 0 0 0 .5rem rgba(79,163,119,0); }
    100%{ box-shadow: 0 0 0 0 rgba(79,163,119,0); }
  }
  .sync-label{ font-family:"IBM Plex Mono",monospace; font-size:.64rem; color: var(--ink-dim); white-space:nowrap; display:flex; align-items:center; gap:.35rem; }

  main{ flex:1; padding: 1rem 1rem 6.5rem; max-width: 560px; width:100%; margin:0 auto; }

  /* ---- onboarding ---- */
  .onboarding{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:.9rem; padding: 3rem 1.25rem 2rem; margin-top: .5rem;
  }
  .onboarding .ball{
    width:4.5rem; height:4.5rem; border-radius:50%;
    background: var(--surface); border:2px solid var(--pitch);
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; box-shadow: var(--shadow);
  }
  .onboarding h2{ font-size:1.5rem; text-transform:uppercase; letter-spacing:.01em; }
  .onboarding p{ color: var(--ink-dim); font-size:.92rem; max-width:26rem; line-height:1.5; margin:0; }

  /* ---- scoreboard ---- */
  .scoreboard-card{
    background: var(--surface); border-radius:.875rem; box-shadow: var(--shadow);
    overflow:hidden; border:1.5px solid var(--line);
  }
  .match-meta{
    display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    padding:.7rem 1rem; border-bottom:1px solid var(--line);
    font-family:"IBM Plex Mono",monospace; font-size:.74rem; color: var(--ink-dim);
  }
  .match-meta .status-pill{
    font-family:"IBM Plex Mono", monospace; font-weight:500; font-size:.66rem;
    letter-spacing:.05em; text-transform:uppercase;
    padding:.2rem .55rem; border-radius:99px;
  }
  .status-pill.gepland{ background: var(--surface-2); color: var(--ink-dim); }
  .status-pill.bezig{ background: var(--warn); color:#fff; }
  .status-pill.rust{ background: var(--whistle); color: var(--whistle-ink); }
  .status-pill.afgelopen{ background: var(--surface-2); color: var(--ink); }

  .panels{ display:flex; }
  .panel{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.6rem; padding: 1.4rem .5rem 1.6rem; position:relative;
    border:none; cursor:pointer; user-select:none; -webkit-user-select:none;
    touch-action: manipulation;
  }
  .panel:active{ filter:brightness(0.94); }
  .panel.home{ background: var(--pitch); color: var(--pitch-ink); }
  .panel.away{ background: var(--whistle); color: var(--whistle-ink); }
  .panel .team-label{
    font-family:"IBM Plex Mono", monospace; font-weight:500; font-size:.7rem;
    letter-spacing:.06em; text-transform:uppercase; opacity:.85;
    padding:0 .5rem; text-align:center; max-width:100%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .panel .score-num{
    font-family:"Big Shoulders Display", sans-serif; font-weight:800;
    font-size: clamp(3.6rem, 18vw, 5.6rem); line-height:.95;
  }
  .panel .tap-hint{ font-size:.66rem; opacity:.75; }
  .minus-btn{
    font-family:"IBM Plex Mono", monospace;
    border:1px solid currentColor; background: transparent; color: inherit;
    opacity:.8; border-radius:99px; padding:.2rem .7rem; font-size:.72rem;
    font-weight:500;
  }
  .minus-btn:active{ opacity:1; }
  .vs-divider{ width:1px; background: var(--line); }

  .status-row{ padding: .9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.6rem; }
  .status-btn{
    width:100%; padding:.85rem 1rem; border-radius:.7rem; border:none;
    background: var(--pitch); color: var(--pitch-ink);
    font-family:"Big Shoulders Display", sans-serif; font-weight:700; font-size:1.05rem;
    text-transform:uppercase; letter-spacing:.02em; touch-action: manipulation;
  }
  .status-btn:active{ filter:brightness(0.92); }
  .status-btn.ghost{
    background: transparent; color: var(--ink-dim); border:1px solid var(--line);
    font-weight:500; font-size:.85rem;
  }
  .status-sub{ font-size:.75rem; color: var(--ink-dim); text-align:center; }

  /* ---- history ---- */
  .history-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: .9rem; gap:.75rem; }
  .history-header h2{ font-size:1.35rem; text-transform:uppercase; letter-spacing:.01em; }
  .new-match-btn{
    background: var(--pitch); color: var(--pitch-ink); border:none;
    font-family:"Big Shoulders Display", sans-serif; font-weight:700; font-size:.88rem;
    text-transform:uppercase; letter-spacing:.02em;
    padding:.55rem .9rem; border-radius:.6rem; white-space:nowrap;
    touch-action: manipulation;
  }
  .new-match-btn:active{ filter:brightness(0.92); }

  .history-list{ display:flex; flex-direction:column; gap:.6rem; }
  .history-row{
    background: var(--surface); border:1.5px solid var(--line); border-radius:.625rem;
    padding:.75rem .9rem; box-shadow: var(--shadow);
    display:flex; align-items:center; gap:.75rem;
    touch-action: manipulation;
  }
  .history-row .info{ flex:1; min-width:0; text-align:left; background:none; border:none; padding:0; color:inherit; font: inherit; }
  .history-row .date-line{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; color: var(--ink-dim); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
  .history-row .opp-line{ font-family:"IBM Plex Sans", sans-serif; font-weight:600; font-size:.95rem; margin-top:.15rem; }
  .history-row .example-badge{
    font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color: var(--whistle); border:1px solid var(--whistle); border-radius:99px; padding:.05rem .4rem;
  }
  .history-row .score-line{
    font-family:"Big Shoulders Display", sans-serif; font-weight:700; font-size:1.4rem; flex:none;
    min-width:3.4rem; text-align:right;
  }
  .history-row .del-btn{
    flex:none; background:none; border:none; color: var(--ink-dim);
    font-family:"IBM Plex Mono",monospace; font-size:.66rem; padding:.4rem .3rem; touch-action: manipulation;
  }
  .history-row .del-btn.confirming{ color: var(--warn); font-weight:700; }
  .empty-history{ color: var(--ink-dim); font-size:.88rem; text-align:center; padding: 2rem 1rem; }

  /* ---- calendar ---- */
  .filter-row{ display:flex; gap:.5rem; margin-bottom:.7rem; }
  .filter-chip{
    background: var(--surface); border:1px solid var(--line); color: var(--ink-dim);
    font-family:"IBM Plex Mono", monospace; font-size:.72rem; font-weight:500;
    padding:.4rem .8rem; border-radius:99px; touch-action: manipulation;
  }
  .filter-chip.active{ background: var(--pitch); color: var(--pitch-ink); border-color: var(--pitch); }
  .calendar-hint{ font-size:.78rem; color: var(--ink-dim); margin: 0 0 1rem; }
  .calendar-body{ display:flex; flex-direction:column; gap:1.3rem; }
  .fixture-group-h{
    font-family:"IBM Plex Mono", monospace; font-size:.68rem; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase; color: var(--pitch);
    margin: 0 0 .5rem;
  }
  .fixture-list{ display:flex; flex-direction:column; gap:.5rem; }
  .fixture-row{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    background: var(--surface); border:1.5px solid var(--line); border-radius:.625rem;
    padding:.7rem .85rem; box-shadow: var(--shadow); text-align:left;
    touch-action: manipulation;
  }
  .fixture-row.linked{ border-color: var(--pitch); }
  .fixture-main{ min-width:0; flex:1; }
  .fixture-top{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.2rem; }
  .fixture-ha{
    font-family:"IBM Plex Mono", monospace; font-size:.62rem; font-weight:600;
    letter-spacing:.04em; text-transform:uppercase; padding:.1rem .4rem; border-radius:.3rem;
  }
  .fixture-ha.thuis{ background: var(--pitch); color: var(--pitch-ink); }
  .fixture-ha.uit{ background: var(--whistle); color: var(--whistle-ink); }
  .fixture-team{
    font-family:"IBM Plex Mono", monospace; font-size:.62rem; color: var(--ink-dim);
    border:1px solid var(--line); border-radius:.3rem; padding:.1rem .4rem;
  }
  .fixture-when{ font-family:"IBM Plex Mono", monospace; font-size:.66rem; color: var(--ink-dim); }
  .fixture-opp{ font-family:"IBM Plex Sans", sans-serif; font-weight:600; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fixture-status{
    flex:none; font-family:"IBM Plex Mono", monospace; font-size:.66rem; font-weight:600;
    color: var(--pitch); text-align:right; max-width:6.5rem;
  }
  .fixture-cta{
    flex:none; font-family:"IBM Plex Mono", monospace; font-size:.68rem; font-weight:600;
    color: var(--ink-dim);
  }

  /* ---- admin lock ---- */
  .topbar-right{ display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; }
  .admin-btn{
    background: var(--surface-2); border:1px solid var(--line); color: var(--ink-dim);
    font-size:.8rem; line-height:1; padding:.3rem .55rem; border-radius:.5rem;
    touch-action: manipulation;
  }
  .admin-btn.on{ background: var(--pitch); color: var(--pitch-ink); border-color: var(--pitch); }
  .status-pill.provisional{ background: var(--whistle); color: var(--whistle-ink); }
  .status-pill.confirmed{ background: var(--pitch); color: var(--pitch-ink); }
  .panel.locked{ opacity:.82; cursor:default; }
  .lock-badge{ position:absolute; top:.6rem; right:.7rem; font-size:.9rem; opacity:.9; }
  .confirm-note{ font-size:.78rem; color: var(--ink-dim); text-align:center; margin:0; }
  .status-btn.small{ padding:.55rem .8rem; font-size:.82rem; }
  .admin-copy{ font-size:.85rem; color: var(--ink-dim); line-height:1.45; margin:0; }
  .admin-error{ font-size:.8rem; color: var(--warn); margin:0; font-weight:700; }
  .toast.info{ background: var(--pitch); color: var(--pitch-ink); }

  /* ---- standings (admin only) ---- */
  .standings{
    background: var(--surface); border:1.5px solid var(--line); border-radius:.7rem;
    padding:.7rem .9rem; margin-bottom:.9rem; box-shadow: var(--shadow);
  }
  .standings-h{
    font-family:"IBM Plex Mono", monospace; font-size:.64rem; font-weight:500;
    letter-spacing:.06em; text-transform:uppercase; color: var(--pitch); margin:0 0 .5rem;
    display:flex; align-items:center; gap:.35rem;
  }
  .standings-rows{ display:flex; flex-direction:column; gap:.35rem; }
  .standings-row{ display:flex; align-items:center; justify-content:space-between; }
  .standings-team{ font-family:"Big Shoulders Display", sans-serif; font-weight:700; font-size:1rem; text-transform:uppercase; }
  .standings-wdl{ font-family:"IBM Plex Mono", monospace; font-size:.82rem; font-weight:600; color: var(--ink-dim); }

  /* ---- clock + period scores ---- */
  .match-clock{
    font-family:"IBM Plex Mono", monospace; font-size:1.4rem; font-weight:600;
    text-align:center; color: var(--ink); letter-spacing:.03em; padding:.1rem 0 .2rem;
  }
  .period-scores{
    background: var(--surface); border:1.5px solid var(--line); border-radius:.7rem;
    padding:.65rem .9rem; margin-top:.7rem; box-shadow: var(--shadow);
  }
  .period-scores-h{
    font-family:"IBM Plex Mono", monospace; font-size:.62rem; font-weight:500;
    letter-spacing:.06em; text-transform:uppercase; color: var(--ink-dim); margin:0 0 .3rem;
  }
  .period-scores-line{ font-size:.85rem; color: var(--ink); margin:0; line-height:1.5; }

  /* ---- settings ---- */
  .history-header-actions{ display:flex; align-items:center; gap:.5rem; }
  .settings-btn{
    background: var(--surface-2); border:1px solid var(--line); color: var(--ink-dim);
    font-size:1rem; line-height:1; padding:.5rem .6rem; border-radius:.6rem;
    touch-action: manipulation;
  }

  /* ---- help ---- */
  .topbar-btns{ display:flex; align-items:center; gap:.35rem; }
  .help-btn{
    background: var(--surface-2); border:1px solid var(--line); color: var(--ink-dim);
    font-size:.85rem; line-height:1; padding:.3rem .55rem; border-radius:.5rem;
    touch-action: manipulation;
  }
  .help-content{ display:flex; flex-direction:column; gap:.85rem; max-height:60vh; overflow-y:auto; }
  .help-section h4{
    font-family:"IBM Plex Mono", monospace; font-size:.68rem; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; color: var(--pitch); margin:0 0 .25rem;
  }
  .help-section p{ font-size:.85rem; color: var(--ink-dim); line-height:1.5; margin:0; }

  /* ---- tab bar ---- */
  .tabbar{
    position: fixed; left:0; right:0; bottom:0; z-index:6;
    display:flex; border-top:1px solid var(--line);
    background: var(--surface);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tab-btn{
    flex:1; background:none; border:none; padding:.6rem .5rem .55rem;
    display:flex; flex-direction:column; align-items:center; gap:.2rem;
    color: var(--ink-dim); font-size:.68rem; font-weight:600;
    letter-spacing:.02em; touch-action: manipulation;
  }
  .tab-btn .ic{ font-size:1.15rem; line-height:1; }
  .tab-btn.active{ color: var(--pitch); }

  /* ---- sheet / overlay ---- */
  .overlay{
    position:fixed; inset:0; background: rgba(15,20,18,.45); z-index:10;
    display:flex; align-items:flex-end; justify-content:center;
  }
  .sheet{
    width:100%; max-width:560px; background: var(--surface);
    border-radius:1.2rem 1.2rem 0 0; padding:1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    box-shadow: var(--shadow); display:flex; flex-direction:column; gap:.9rem;
  }
  .sheet h3{ font-size:1.25rem; text-transform:uppercase; letter-spacing:.01em; }
  .field label{ display:block; font-size:.75rem; color: var(--ink-dim); margin-bottom:.3rem; font-weight:600; }
  .field input{
    width:100%; padding:.65rem .75rem; border-radius:.6rem; border:1px solid var(--line);
    background: var(--bg); color: var(--ink); font-size:1rem;
  }
  .field input:focus{ outline:2px solid var(--pitch); outline-offset:1px; }
  .toggle-row{ display:flex; gap:.6rem; }
  .toggle-btn{
    flex:1; padding:.6rem; border-radius:.6rem; border:1px solid var(--line);
    background: var(--bg); color: var(--ink-dim); font-weight:600; font-size:.88rem;
    touch-action: manipulation;
  }
  .toggle-btn.selected{ background: var(--pitch); color: var(--pitch-ink); border-color: var(--pitch); }
  .sheet-actions{ display:flex; gap:.6rem; margin-top:.2rem; }
  .btn-primary{
    flex:2; background: var(--pitch); color: var(--pitch-ink); border:none;
    padding:.8rem; border-radius:.7rem; font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:1.05rem;
    text-transform:uppercase; letter-spacing:.02em;
    touch-action: manipulation;
  }
  .btn-secondary{
    flex:1; background:none; border:1px solid var(--line); color: var(--ink-dim);
    padding:.8rem; border-radius:.7rem; font-weight:600; font-size:.9rem;
    touch-action: manipulation;
  }

  .toast{
    position: fixed; left:1rem; right:1rem; bottom: calc(4.6rem + env(safe-area-inset-bottom));
    z-index: 20; background: var(--warn); color:#fff; border-radius:.7rem;
    padding:.75rem .9rem; font-size:.82rem; display:flex; align-items:center; gap:.7rem;
    box-shadow: var(--shadow);
  }
  .toast button{ background: rgba(255,255,255,.2); border:none; color:#fff; border-radius:.5rem; padding:.35rem .6rem; font-size:.75rem; font-weight:700; flex:none; }

  @media (prefers-reduced-motion: reduce){
    .sync-dot.live{ animation:none; }
  }

  .boot-loading{
    display:flex; align-items:center; justify-content:center;
    min-height: 100vh; color: var(--ink-dim); font-size:.95rem;
  }