:root{
  --bg:#eef3fb; --card:#ffffff; --ink:#183153; --muted:#5f6f86; --line:#d6e1ef;
  --brand:#1f847c; --brand2:#186d67; --warn:#b45309; --shadow:0 8px 24px rgba(15,23,42,.08);
  --radius:12px; --win-bg:#dcfce7; --win-bd:#86efac; --loss-bg:#fee2e2; --loss-bd:#fca5a5;
  --draw-bg:#fef3c7; --draw-bd:#fcd34d; --bye-bg:#eef2ff; --bye-bd:#c7d2fe; --bye-ink:#3730a3;
  --qual-bg:#dcfce7; --qual-bd:#86efac; --qual-ink:#166534; --post-head:#fff59d; --post-line:#d6c66b;
  --score-font-size:13px; --ends-font-size:13px; --score-font-weight:600; --ends-font-weight:600; --box-height:34px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.wrap{max-width:1320px;margin:0 auto;padding:8px 12px 20px}
h1,h2,h3{margin:0 0 8px}
p{margin:0 0 8px;color:var(--muted)}
.hidden{display:none!important}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 auto 10px;max-width:1300px}
.brand{display:flex;align-items:center;gap:12px}
.logo-mark{
  width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--brand),#20a3a3);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;box-shadow:var(--shadow);flex:0 0 auto
}
.brand-text h1{font-size:44px;line-height:1;font-weight:800;display:flex;align-items:center;min-height:56px;margin:0}
.topbar-actions{display:flex;align-items:center;gap:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin:0 auto 12px;max-width:1300px}
.home-card,.club-menu,.wip{text-align:center}
.hero-text{font-size:18px;margin-bottom:14px}
.hero-actions,.menu-actions,.btn-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.hero-actions .btn,.menu-actions .btn{min-width:180px;min-height:48px}
.grid{max-width:1300px;margin:0 auto;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
#setupScreen > .card{width:100%;height:100%}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.setup-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.setup-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.section-title h2{font-size:22px}
.admin-badge,.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#e8fbff;color:#0a7280;font-size:12px;font-weight:700}
.small{font-size:12px;color:var(--muted)}
label{font-size:13px;font-weight:700;color:#132238}
input[type="text"], textarea, select, input[type="number"], input[type="date"]{width:100%;border:1px solid #bfd0e5;border-radius:8px;padding:9px 12px;font:inherit;background:#fff}
textarea{min-height:220px;resize:vertical}
input::placeholder, textarea::placeholder{color:#98a6b8;font-style:italic}
.date-input-wrap{position:relative;width:100%}
.date-input-wrap input[type="date"]{width:100%;cursor:pointer}
.date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer}
.btn{border:0;background:var(--brand);color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;cursor:pointer;font-size:16px}
.btn:hover{background:var(--brand2)}
.btn.secondary{background:#ddeaf9;color:#10223b}
.btn.secondary:hover{background:#cfdef2}
.btn.ghost{background:#fff;color:#111827;border:1px solid #cfdced;box-shadow:none;font-size:14px;padding:10px 18px}
.btn.warn{background:var(--warn)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.role-grid{display:grid;gap:10px}
.role-col textarea{min-height:220px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:22px}
th,td{border-bottom:1px solid var(--line);padding:4px 4px;vertical-align:middle;text-align:left;line-height:1.05}
th{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:#f8fbff;position:sticky;top:0;z-index:1;white-space:nowrap;padding:6px 4px}
.center{text-align:center}
.col-pos{width:38px;text-align:center}
.col-team{min-width:210px}
.col-mats{min-width:96px;text-align:center}
.col-mat{width:34px;min-width:34px;text-align:center;font-variant-numeric:tabular-nums}
.col-score{min-width:68px;text-align:center}
.col-ends{min-width:42px;text-align:center}
.col-total{min-width:58px;text-align:center}
.col-qual{min-width:60px;text-align:center}
.name-cell{white-space:nowrap;font-weight:600}
.score-box,.ends-box,.post-mat-box{width:100%;height:var(--box-height);border:1px solid #cbd5e1;border-radius:6px;background:#fff;outline:none;margin:0 auto;display:block;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0;font-family:inherit;text-align:center;padding-top:2px;padding-bottom:2px;vertical-align:middle}
.score-box{max-width:70px;padding-left:4px;padding-right:4px;font-size:var(--score-font-size)!important;font-weight:var(--score-font-weight)}
.ends-box{max-width:34px;padding-left:2px;padding-right:2px;font-size:var(--ends-font-size)!important;font-weight:var(--ends-font-weight)}
.post-mat-box{max-width:50px;font-size:12px;font-weight:600;padding-left:2px;padding-right:2px}
.bye-box{background:var(--bye-bg)!important;border-color:var(--bye-bd)!important;color:var(--bye-ink);font-weight:600}
.qual-pill{display:inline-block;min-width:28px;text-align:center;padding:2px 8px;border-radius:999px;background:var(--qual-bg);border:1px solid var(--qual-bd);color:var(--qual-ink);font-weight:700;font-size:14px}
.place-pill{display:inline-block;min-width:44px;text-align:center;padding:2px 8px;border-radius:999px;background:#e0f2fe;color:#075985;font-weight:700;font-size:15px}
.score-win{background:var(--win-bg)!important;border-color:var(--win-bd)!important}
.score-loss{background:var(--loss-bg)!important;border-color:var(--loss-bd)!important}
.score-draw{background:var(--draw-bg)!important;border-color:var(--draw-bd)!important}
.post-header{background:var(--post-head)!important;color:#111827!important;border-bottom:1px solid var(--post-line);text-align:center}
.post-board table{font-size:18px}
.post-board th,.post-board td{border:1px solid var(--line)}
.post-name{min-width:260px;font-weight:600}
.post-mat{width:58px;text-align:center}
.post-score{width:82px;text-align:center}
.post-cell-note{font-size:12px;color:var(--muted);text-align:center}
.round-band-1{background:#f5f3ff}
.round-band-2{background:#eff6ff}
.round-band-3{background:#ecfeff}
.round-band-4{background:#f0fdf4}
.round-band-5{background:#fff7ed}
td.round-band-1,td.round-band-2,td.round-band-3,td.round-band-4,td.round-band-5{text-align:center}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000}
.modal{width:min(820px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.22);border:1px solid var(--line)}
.modal-head,.modal-foot{padding:12px 14px;border-bottom:1px solid var(--line)}
.modal-foot{border-bottom:0;border-top:1px solid var(--line)}
.modal-body{padding:14px}
.assign-list{display:grid;gap:8px}
.assign-row{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.assign-row.error{background:#fff1f2;border-color:#ef4444}
.assign-number-input.error{border-color:#ef4444;background:#fff1f2}
.assign-name{font-weight:600;word-break:break-word}
.assign-help{font-size:12px;color:var(--muted);margin-top:8px}
.assign-error{font-size:13px;color:#b91c1c;margin-bottom:10px;font-weight:600}
.notice{max-width:1300px;margin:0 auto;padding:28px;text-align:center}
.notice h2{font-size:28px}
.notice p{font-size:16px}
@media (max-width:980px){
  .grid,.role-grid{grid-template-columns:1fr}
  .setup-row-2{grid-template-columns:1fr 1fr}
  .setup-row-3{grid-template-columns:1fr 1fr 1fr}
  table{font-size:18px}
  :root{--score-font-size:12px;--ends-font-size:12px;--box-height:30px}
  .score-box{max-width:62px}.ends-box{max-width:30px}
}
@media (max-width:700px){
  .topbar{flex-direction:column;align-items:flex-start}
  .topbar-actions{width:100%}
  .setup-row-2,.setup-row-3{grid-template-columns:1fr}
  .brand-text h1{font-size:36px}
}


.sample-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.25);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:360px;
  padding:20px;
  z-index:1100;
}
.sample-modal{
  width:min(200px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  overflow:hidden;
}
.sample-modal-head,
.sample-modal-body,
.sample-modal-foot{
  padding:12px 14px;
}
.sample-modal-head{
  border-bottom:1px solid var(--line);
}
.sample-modal-foot{
  border-top:1px solid var(--line);
}
.sample-modal-foot .btn-row{
  justify-content:center;
}
.sample-modal-body .field{
  margin-bottom:0;
}


.sample-modal-head h3{
  margin:0 auto;
  font-size:16px;
  font-weight:700;
  text-align:center;
  width:100%;
}
#sampleTeamCount{
  text-align:center;
}