:root{
  --bg:#f6f8fb; --panel:#ffffff; --ink:#0f172a; --muted:#55627a; --border:#e7edf3; --accent:#2563eb; --accent-ghost:#e8f0fe;
  --ok:#16a34a; --ok-ghost:#e7f7eb; --warn:#f59e0b; --err:#dc2626; --err-ghost:#fee2e2; --radius:18px; --gap:clamp(12px, 3vw, 20px);
  --shadow:0 12px 28px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.06);
  --sticky: linear-gradient(180deg, rgba(246,248,251,.96), rgba(246,248,251, .65));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  color:var(--ink); background:var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Layout & header */
.wrap{max-width:960px; margin:0 auto; padding:clamp(12px,3vw,24px)}
header.top{position:sticky; top:0; z-index:5; background:var(--sticky); backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--border)}
.top-inner{display:flex; align-items:center; gap:var(--gap); padding:clamp(10px,2.5vw,14px) 0}
.brand{font-weight:700; letter-spacing:.2px; opacity:.85}
.settings-btn{margin-left:auto; border:1px solid var(--border); background:var(--panel); border-radius:999px; width:44px; height:44px; display:grid; place-items:center; box-shadow:var(--shadow); cursor:pointer}
.settings-btn svg{width:22px; height:22px; opacity:.85}

/* Timer */
.timer-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(12px,3vw,18px); display:grid; gap:clamp(8px,2vw,12px)}
.timer-controls{display:flex; gap:clamp(10px,3vw,14px); justify-content:center; flex-wrap:wrap}
.btn{border:1px solid var(--border); background:var(--panel); padding:14px 16px; border-radius:12px; font-weight:700; font-size:18px; cursor:pointer; box-shadow:var(--shadow)}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}
.btn.warn{background:#fff4e5; color:#8a5800; border-color:#ffd9a6}
.btn.ghost{background:var(--panel)}
.btn:disabled{opacity:.55; filter:grayscale(85%); cursor:not-allowed}

.display{font-variant-numeric:tabular-nums; letter-spacing:1px; font-size:clamp(44px, 10vw, 96px); font-weight:800; line-height:1; text-align:center}
.display.paused{ color: var(--warn) }
.display.overtime{ color: var(--err) }
.phase{ text-align:center; font-size:14px; color:var(--muted) }

/* Ronde chips */
.rounds{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center}
.chip{padding:8px 12px; border-radius:999px; font-weight:700; border:1px solid var(--border)}
.chip.pending{ background:var(--err-ghost); color:#b91c1c; border-color:#fecaca }
.chip.current{ background:#ecfdf5; color:#065f46; border-color:#bbf7d0 }
.chip.done{ background:var(--ok); color:#fff; border-color:transparent }
/* extra rondes */
.chip.extra-current{ background:#fff7ed; color:#92400e; border-color:#fed7aa }
.chip.extra-done{ background:#fb923c; color:#fff; border-color:transparent }

/* Scorebord */
.board{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:var(--gap)}
.col{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(14px,3vw,18px); display:grid; gap:clamp(10px,2.5vw,14px)}
.title{font-size:clamp(18px,5vw,24px); font-weight:800; text-align:center}
.score{font-size:clamp(56px,14vw,110px); font-weight:900; text-align:center; line-height:1; letter-spacing:1px}
.score-controls{display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,2.5vw,14px)}
.score-controls .btn{padding:18px 0; font-size:clamp(24px,6vw,36px)}
.plus{background:#ecfdf3; color:#065f46; border-color:#bbf7d0}
.minus{background:#fff1f2; color:#9f1239; border-color:#fecdd3}

/* Log / Wijzigingen */
.log-panel{margin-top:var(--gap); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:visible}
.log-head{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border)}
.log-title{display:flex; align-items:center; gap:10px}
.log-menu-btn{border:1px solid var(--border); background:var(--panel); border-radius:10px; width:42px; height:42px; display:grid; place-items:center; box-shadow:var(--shadow); cursor:pointer}
.log-menu{position:absolute; right:12px; top:56px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); display:none; min-width:240px; overflow:hidden; z-index:10}
.log-menu.show{display:block}
.log-menu button{display:block; width:100%; text-align:left; padding:12px 14px; border:0; background:transparent; font-size:15px; cursor:pointer}
.log-menu button:hover{background:#f5f8ff}

/* Tabs per ronde */
.tabbar{display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); overflow:auto}
.tab{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#f9fbff; border:1px solid var(--border); cursor:pointer; font-weight:700; white-space:nowrap}
.tab.active{outline:3px solid rgba(37,99,235,.18)}
.badge{font-size:12px; padding:2px 8px; border-radius:999px; background:#eef2ff; border:1px solid #dbe2ff; color:#334155}
.tab.extra-current{ background:#fff7ed; color:#92400e; border-color:#fed7aa }
.tab.extra-done{ background:#fb923c; color:#fff; border:1px solid #fb923c }

/* Tabel */
.log-wrap{max-height:40vh; overflow:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
thead{position:sticky; top:0; background:var(--sticky)}
th, td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap}
td.stand{font-variant-numeric:tabular-nums}

/* Modal & formulieren */
.modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(15,23,42,.5); padding:20px; z-index:1000}
.modal.show{display:grid}
.sheet{width:min(720px, 100%); background:var(--panel); border-radius:20px; border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden}
.sheet header{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border)}
.sheet h3{margin:0; font-size:20px}
.sheet .body{padding:16px 18px; display:grid; gap:14px}
.sheet .footer{display:flex; gap:10px; justify-content:flex-end; padding:16px 18px; border-top:1px solid var(--border)}
label{font-weight:700; font-size:14px; color:var(--muted)}
.row{display:grid; gap:8px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.three{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
input[type="text"], select{width:100%; padding:14px 12px; font-size:16px; border:1px solid var(--border); border-radius:12px; background:#f9fbff}
.danger{background:#fef2f2; color:#991b1b; border-color:#fecaca}

/* Small screens */
@media (max-width:420px){
  .score-controls{grid-template-columns:1fr;}
}