:root{
  --pink:#F2A0BE; --pink-deep:#E07EA3; --pink-wash:#FDEFF4;
  --navy:#2B3568; --navy-2:#3D4A87;
  --ground:#FDEFF4; --panel:#FFFFFF; --panel-2:#FFF6FA; --sunken:#FBEAF1;
  --ink:#1B2247; --ink-2:#4A5385; --ink-3:#8189B4;
  --line:#F2D6E2; --line-2:#E7C7D6;
  --go:#2E9E6B; --go-bg:#E4F4EC; --go-line:#BFE6D3;
  --stop:#D6455F; --stop-bg:#FCE7EB; --stop-line:#F5C2CC;
  --idle:#C67F14; --idle-bg:#FCF0DC; --idle-line:#F0DBB4;
  /* Warna gender punya token sendiri. TIDAK boleh pakai --navy: token itu berubah
     jadi pink di mode gelap, dan laki-laki akan ikut jadi pink. */
  --boy:#2160C4; --boy-bg:#E4EEFB; --boy-line:#BFD6F5;
  --girl:#C93F82; --girl-bg:#FCE6F1; --girl-line:#F4C3DB;
  /* Ikon bawaan browser (pemilih tanggal) digambar hitam; di mode gelap perlu
     dibalik supaya kelihatan. color-scheme membuat popup kalender, scrollbar, dan
     autofill ikut tema - tanpa itu popup-nya putih menyilaukan di mode gelap. */
  --ikon-filter:none;
  color-scheme:light;
  --shadow:0 1px 2px rgba(43,53,104,.05), 0 6px 20px rgba(43,53,104,.06);
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ground:#131936; --panel:#1C2445; --panel-2:#222B52; --sunken:#161D3D;
  --ink:#F6E9EF; --ink-2:#C3C9E4; --ink-3:#8A93BC;
  --line:#2B3563; --line-2:#3A4578; --pink-wash:#2A2148;
  --navy:#F2A0BE; --navy-2:#E07EA3;
  --go:#5FD3A0; --go-bg:#17392C; --go-line:#25563F;
  --stop:#F58396; --stop-bg:#3C1D26; --stop-line:#5E2C38;
  --idle:#F0BC63; --idle-bg:#3A2E17; --idle-line:#574220;
  --boy:#7FB3F7; --boy-bg:#16274A; --boy-line:#284566;
  --girl:#F59CC8; --girl-bg:#3C1C2E; --girl-line:#5E2B47;
  --ikon-filter:invert(1) brightness(1.7);
  color-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
}}
:root[data-theme="dark"]{
  --ground:#131936; --panel:#1C2445; --panel-2:#222B52; --sunken:#161D3D;
  --ink:#F6E9EF; --ink-2:#C3C9E4; --ink-3:#8A93BC;
  --line:#2B3563; --line-2:#3A4578; --pink-wash:#2A2148;
  --navy:#F2A0BE; --navy-2:#E07EA3;
  --go:#5FD3A0; --go-bg:#17392C; --go-line:#25563F;
  --stop:#F58396; --stop-bg:#3C1D26; --stop-line:#5E2C38;
  --idle:#F0BC63; --idle-bg:#3A2E17; --idle-line:#574220;
  --boy:#7FB3F7; --boy-bg:#16274A; --boy-line:#284566;
  --girl:#F59CC8; --girl-bg:#3C1C2E; --girl-line:#5E2B47;
  --ikon-filter:invert(1) brightness(1.7);
  color-scheme:dark;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.45}
.app{max-width:480px; margin:0 auto; padding-bottom:70px; min-height:100vh}

/* topbar */
.topbar{position:sticky; top:0; z-index:100; background:var(--pink); color:#fff; overflow:hidden}
.topbar-wave{position:absolute; inset:0; opacity:.45}
.topbar-in{position:relative; display:flex; align-items:center; gap:11px; padding:9px 14px 11px}
.capy{flex:none; width:40px; height:40px}
.link{background:none; border:0; color:#fff; font:inherit; font-size:11.5px; opacity:.85; padding:0; cursor:pointer; display:block}
.link:hover{opacity:1; text-decoration:underline}
.tb-title{font-size:17px; font-weight:800; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-right{margin-left:auto; text-align:right; flex:none}
.tb-actions{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none}
.tb-btn{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); color:#fff; font:inherit;
  font-size:12.5px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .15s, transform .05s}
.tb-btn:hover{background:rgba(255,255,255,.3)}
.tb-btn:active{transform:translateY(1px)}
.tb-btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
.tb-btn.tb-ico{width:34px; padding:0; justify-content:center}
.tb-btn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tb-btn .dot{fill:currentColor; stroke:none}
.save-bar{font-size:11.5px; font-weight:700; min-height:16px; color:#fff; opacity:.75}
.save-bar.saving{opacity:1}
.save-bar.saved{opacity:1}
.save-bar.error{color:#5B1220; opacity:1}
#clock{display:block; font-family:var(--mono); font-size:12px; opacity:.85; font-variant-numeric:tabular-nums}

/* stats */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px 12px; background:var(--panel); border-bottom:1px solid var(--line)}
.stat-card{text-align:center; padding:7px 4px; background:var(--sunken); border-radius:10px}
.stat-label{font-size:10px; color:var(--ink-3); font-weight:600; letter-spacing:.04em}
.stat-value{font-family:var(--mono); font-size:20px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .stat-value, :root:not([data-theme="light"]) .stat-value{color:var(--ink)}

/* tabs */
.tabs{display:flex; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:62px; z-index:99}
.tab{flex:1; height:46px; border:0; background:none; color:var(--ink-3); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; border-bottom:3px solid transparent}
.tab.active{color:var(--navy); border-bottom-color:var(--navy); font-weight:700}
.tab:focus-visible{outline:2px solid var(--navy); outline-offset:-3px}

.section{background:var(--panel); margin:10px 12px; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.sec-title{font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; padding:12px 14px 0}
.sec-divider{height:1px; background:var(--line); margin:6px 0}
.input-row{display:flex; gap:8px; padding:10px 12px}
.search-wrap{padding:6px 12px 8px}
/* ---------- field ----------
   Satu aturan untuk SEMUA jenis input teks. Sebelumnya hanya [type=text] dan
   [type=number] yang disebut, jadi password dan date tampil dengan gaya bawaan
   browser - kotak persegi abu-abu yang tidak nyambung dengan sisanya.
   Daftarnya ditulis lengkap, plus input tanpa atribut type. */
input[type=text],
input[type=number],
input[type=password],
input[type=date],
input[type=time],
input[type=tel],
input[type=email],
input[type=search],
input:not([type]),
textarea{
  width:100%; min-height:44px; padding:0 13px;
  border:1.5px solid var(--line-2); border-radius:10px;
  font:inherit; font-size:15px; background:var(--sunken); color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
textarea{padding:11px 13px; line-height:1.5; resize:vertical; min-height:88px}
input::placeholder,textarea::placeholder{color:var(--ink-3); opacity:1}

input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--navy);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent);
}
input:disabled,textarea:disabled,select:disabled{
  opacity:.55; cursor:not-allowed; background:var(--panel-2);
}

/* Kolom nomor: panah spinner dibuang. Di kotak selebar 56px (jumlah lapangan)
   panah itu memakan hampir separuh ruang angkanya. */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* Kolom tanggal: ikon kalender bawaan diwarnai mengikuti tema, kalau tidak dia
   hitam pekat di mode gelap dan hampir tak terlihat. */
input[type=date]{position:relative}
input[type=date]::-webkit-calendar-picker-indicator{
  opacity:.65; cursor:pointer; filter:var(--ikon-filter);
}
input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}

/* Label field di luar modal. Di dalam modal sudah diatur .modal label. */
.field{display:block; margin-bottom:11px}
.field > span{display:block; font-size:13px; color:var(--ink-2); font-weight:600; margin-bottom:5px}

/* Wadah formulir di dalam .section. Jaraknya sama dengan .input-row supaya
   formulir dan baris tombol sejajar di seluruh app. */
.form-pad{padding:10px 12px 14px}
.form-pad > *:not(:last-child){margin-bottom:11px}
.form-pad .hint{margin-bottom:0}
.form-pad > div:empty{margin-bottom:0}
.btn{height:44px; padding:0 16px; border:1.5px solid var(--line-2); border-radius:10px; background:var(--sunken); color:var(--ink-2); font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center}
.btn:active{transform:scale(.96)}
.btn:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.btn-blue{background:var(--navy); color:var(--panel); border-color:var(--navy)}
:root[data-theme="dark"] .btn-blue, :root:not([data-theme="light"]) .btn-blue{color:var(--ground)}
.btn-green{background:var(--go-bg); color:var(--go); border-color:var(--go-line)}
.btn-red{background:var(--stop-bg); color:var(--stop); border-color:var(--stop-line)}
.btn-gray{background:var(--sunken); color:var(--ink-2); border-color:var(--line-2)}
.btn-sm{height:36px; padding:0 12px; font-size:13px}
.btn-xs{height:34px; padding:0 10px; font-size:12px; border-radius:8px}
/* Tombol utama sebuah formulir: selebar penuh dan lebih tinggi, seperti tombol aksi
   di modal - itu yang menandakan "ini yang ditekan kalau sudah selesai".
   HARUS setelah .btn, kalau tidak tinggi & radius-nya ditimpa balik. */
.btn-lg{width:100%; height:50px; font-size:15px; border-radius:12px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:disabled:active{transform:none}

/* kelompok antrian */
.group-header{display:flex; align-items:center; gap:8px; padding:11px 14px 5px}
.group-line{flex:1; height:1px; background:var(--line)}
.group-pill{font-family:var(--mono); font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:20px; white-space:nowrap; border:1px solid transparent}
.gp-0{background:var(--idle-bg); color:var(--idle); border-color:var(--idle-line)}
.gp-1{background:var(--pink-wash); color:var(--navy); border-color:var(--line-2)}
.gp-2{background:var(--go-bg); color:var(--go); border-color:var(--go-line)}
.gp-3{background:var(--sunken); color:var(--pink-deep); border-color:var(--line-2)}
.gp-4{background:var(--stop-bg); color:var(--stop); border-color:var(--stop-line)}
.gp-x{background:var(--sunken); color:var(--ink-3); border-color:var(--line-2)}

.q-item{display:flex; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); gap:10px}
.q-item:last-child{border-bottom:none}
.q-left{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.q-pos{font-family:var(--mono); font-size:12.5px; color:var(--ink-3); font-weight:700; min-width:26px}
.q-info{flex:1; min-width:0}
.q-name{font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.q-sub{font-size:12px; color:var(--ink-3); margin-top:1px; font-variant-numeric:tabular-nums}
.q-actions{display:flex; gap:6px; flex-shrink:0}
.member-item{display:flex; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); gap:10px}
.member-item:last-child{border-bottom:none}
.member-item.left-item{opacity:.5}
.mi-info{flex:1; min-width:0}
.mi-name{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mi-sub{font-size:12px; color:var(--ink-3); margin-top:1px}
.mi-right{display:flex; align-items:center; gap:6px; flex-shrink:0}
.badge{font-family:var(--mono); font-size:11px; padding:3px 8px; border-radius:6px; font-weight:700; white-space:nowrap; border:1px solid transparent}
.b-green{background:var(--go-bg); color:var(--go); border-color:var(--go-line)}
.b-blue{background:var(--pink-wash); color:var(--navy); border-color:var(--line-2)}
.b-gray{background:var(--sunken); color:var(--ink-3); border-color:var(--line-2)}

/* pilih partner (dialog "game selesai" & edit skor) */
.pair-q{font-size:14px; color:var(--ink-2); margin:2px 0 8px}
.pair-q b{color:var(--ink)}
.pair-choices{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px}
.pair-chip{flex:1 1 28%; min-width:88px; min-height:48px; padding:8px 10px; border:1.5px solid var(--line-2); border-radius:10px; background:var(--sunken); color:var(--ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.pair-chip:hover{border-color:var(--navy)}
.pair-chip.sel{background:var(--pink-wash); border-color:var(--navy); color:var(--navy); box-shadow:0 0 0 2px color-mix(in srgb, var(--navy) 22%, transparent)}

/* form skor: nama partner di atas, angka skor besar di bawah */
.score-form{display:flex; flex-direction:column; gap:8px; margin:12px 0 4px}
.score-block{background:var(--sunken); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px 14px; text-align:center}
.score-team{font-weight:800; font-size:15px; color:var(--ink); margin-bottom:10px; line-height:1.3}
.score-block .score-in{width:100%; max-width:170px; margin:0 auto; text-align:center; font-family:var(--mono); font-size:40px; font-weight:800; height:66px; min-height:66px; padding:0}
.score-vs{text-align:center; font-size:13px; font-weight:800; color:var(--ink-3); letter-spacing:.12em; margin:-1px 0}

/* daftar skor (tab Skor sesi & grid admin) */
.skor-item{padding:10px 14px; border-bottom:1px solid var(--line)}
.skor-meta{font-size:11px; color:var(--ink-3); font-family:var(--mono); margin-bottom:4px}
.skor-main{display:flex; align-items:center; gap:8px}
.skor-team{flex:1; min-width:0; font-weight:700; font-size:13.5px; color:var(--ink)}
.skor-team-b{text-align:right}
.skor-num{flex:none; font-family:var(--mono); font-weight:800; font-size:16px; color:var(--navy); background:var(--sunken); border:1px solid var(--line-2); border-radius:8px; padding:3px 10px; white-space:nowrap}
.skor-num i{font-style:normal; color:var(--ink-3); margin:0 3px}
.skor-actions{display:flex; gap:6px; justify-content:flex-end; margin-top:8px}
.skor-todo{color:#d08700; font-weight:700}

/* pengatur jumlah lapangan di halaman antrian */
.court-count-bar{display:flex; align-items:center; gap:12px; padding:12px 14px; margin:10px 0; background:var(--panel); border:1px solid var(--line); border-radius:12px}
.ccb-label{flex:1; font-weight:700; font-size:14px; color:var(--ink)}
.ccb-ctrl{display:flex; align-items:center; gap:12px; flex:none}
.ccb-btn{width:40px; height:40px; border:1.5px solid var(--line-2); border-radius:10px; background:var(--sunken); color:var(--navy); font-size:22px; font-weight:700; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.ccb-btn:hover{border-color:var(--navy)}
.ccb-btn:disabled{opacity:.4; cursor:default}
.ccb-num{min-width:28px; text-align:center; font-family:var(--mono); font-size:20px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}

/* ---------- lembar cetak (tombol Cetak → preview multi-halaman → print) ----------
   Warna sheet dikunci hitam-putih (bukan token tema) supaya konsisten di kertas.
   Tiap .pr-page = satu kertas A4. */
#print-review{ display:none; position:fixed; inset:0; z-index:500; background:#4a4a58; flex-direction:column; }
.pr-bar{ flex:none; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--line); }
.pr-bar .pr-title{ flex:1; min-width:0; font-weight:700; color:var(--ink); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pr-scroll{ flex:1; overflow:auto; padding:16px 10px; }
.pr-page{ width:210mm; height:297mm; box-sizing:border-box; margin:0 auto 16px; background:#fff; color:#000; font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; padding:12mm; box-shadow:0 6px 24px rgba(0,0,0,.4); overflow:hidden; }

@media print {
  @page{ size:A4; margin:0; }
  .app{ display:none !important; }
  #print-review{ position:static; display:block !important; background:#fff; }
  .pr-bar{ display:none !important; }
  .pr-scroll{ overflow:visible; padding:0; }
  .pr-pages{ zoom:1 !important; }
  .pr-page{ margin:0; box-shadow:none; break-after:page; page-break-after:always; }
  .pr-page:last-child{ break-after:auto; page-break-after:auto; }
  .ps-tbl tr, .ps-h2{ page-break-inside:avoid; }
}
.ps{ color:#000; background:#fff; font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.ps-head{ display:flex; align-items:center; gap:12px; border-bottom:3px solid #000; padding-bottom:10px; margin-bottom:12px; }
.ps-logo{ width:48px; height:48px; flex:none; }
.ps-title{ font-size:22px; font-weight:800; letter-spacing:.01em; line-height:1.1; }
.ps-sub{ font-size:12px; color:#444; }
.ps-date{ margin-left:auto; text-align:right; font-size:12px; color:#444; }
.ps-date b{ font-size:15px; color:#000; }
.ps-rules{ font-size:12px; margin:0 0 14px; padding:8px 12px; border:1px solid #bbb; border-radius:6px; }
.ps-rules b{ display:block; margin-bottom:3px; }
.ps-rules ol{ margin:0; padding-left:20px; }
.ps-rules li{ margin:1px 0; }
.ps-h2{ font-size:14px; font-weight:800; margin:16px 0 6px; }
.ps-cnt{ font-weight:600; color:#666; font-size:12px; }
table.ps-tbl{ width:100%; border-collapse:collapse; margin-bottom:8px; }
.ps-tbl th, .ps-tbl td{ border:1px solid #333; padding:5px 6px; font-size:12px; }
.ps-tbl th{ background:#e9e9e9; font-weight:700; text-align:center; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.ps-no{ width:36px; text-align:center; }
.ps-nm{ text-align:left; font-weight:600; }
.ps-g{ width:34px; text-align:center; }
.ps-tbl tbody td{ height:24px; }
.b-left{background:var(--sunken); color:var(--ink-3); opacity:.8}

/* lapangan */
.court-card{margin:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.court-top{display:flex; align-items:center; padding:11px 12px 11px 14px; border-bottom:1px solid var(--line); gap:8px; flex-wrap:wrap}
.court-name{font-size:16px; font-weight:800; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.timer-badge{font-family:var(--mono); font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:8px; background:var(--go-bg); color:var(--go); font-variant-numeric:tabular-nums; border:1px solid var(--go-line)}
.timer-badge.warn{background:var(--idle-bg); color:var(--idle); border-color:var(--idle-line)}
.timer-badge.inactive{background:var(--sunken); color:var(--ink-3); border-color:var(--line-2)}
.court-slots{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line)}
.slot{padding:10px 8px 10px 13px; background:var(--panel); display:flex; align-items:center; gap:8px; min-height:52px}
.slot.filled{background:var(--go-bg)}
.slot.empty{background:var(--sunken)}
.slot-name{font-weight:700; font-size:14px; color:var(--go); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.slot-games{font-family:var(--mono); font-size:11px; color:var(--go); opacity:.75}
.slot-empty-txt{font-size:13px; color:var(--ink-3); flex:1; font-style:italic}
.slot-btn{width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; font-size:20px; display:grid; place-items:center; font-weight:700; flex-shrink:0}
.slot-btn.plus{background:var(--navy); color:var(--panel)}
:root[data-theme="dark"] .slot-btn.plus, :root:not([data-theme="light"]) .slot-btn.plus{color:var(--ground)}
.slot-btn.minus{background:var(--stop-bg); color:var(--stop); border:1px solid var(--stop-line)}
.slot-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.court-footer{padding:10px 12px}
.bulk-row{display:flex; align-items:center; gap:8px; padding:0 12px 12px; flex-wrap:wrap}
.bulk-row span{font-size:13px; color:var(--ink-2)}
.bulk-row input{width:56px; height:38px; text-align:center; padding:0 6px}

/* modal */
.modal-overlay{position:fixed; inset:0; background:rgba(27,34,71,.55); display:flex; align-items:flex-end; justify-content:center; z-index:999}
.modal{background:var(--panel); border-radius:20px 20px 0 0; padding:18px 16px 34px; width:100%; max-width:480px; max-height:85vh; overflow-y:auto; border-top:1px solid var(--line)}
.modal-handle{width:40px; height:4px; background:var(--line-2); border-radius:2px; margin:0 auto 15px}
.modal h3{font-size:17px; font-weight:800; margin-bottom:3px}
.modal .sub{font-size:13px; color:var(--ink-3); margin-bottom:13px}
.modal label{font-size:13px; color:var(--ink-2); display:block; margin:10px 0 4px; font-weight:600}
.modal-actions{display:flex; gap:8px; margin-top:16px}
.modal-actions .btn{flex:1; height:50px; font-size:15px; border-radius:12px}
.pick-list{border:1.5px solid var(--line); border-radius:10px; overflow:hidden; max-height:260px; overflow-y:auto; margin-top:6px}
.pick-item{display:flex; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid var(--line); cursor:pointer; background:var(--panel)}
.pick-item:last-child{border-bottom:none}
.pick-item:hover{background:var(--sunken)}
.pick-name{font-weight:700; font-size:15px; flex:1; min-width:0}
.pick-sub{font-size:12px; color:var(--ink-3)}
.empty-state{text-align:center; padding:1.6rem 1rem; color:var(--ink-3); font-size:14px}

/* layar sesi */
.session-screen{padding:14px 12px 2rem}
.session-item{display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:8px; cursor:pointer; box-shadow:var(--shadow)}
.session-item:hover{border-color:var(--pink)}
.si-name{font-weight:700; font-size:15px}
.si-meta{font-size:12px; color:var(--ink-3); margin-top:2px}
.eyebrow{font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; margin:16px 2px 8px}
.loading-overlay{position:fixed; inset:0; background:var(--ground); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9999; gap:14px}
.spinner{width:34px; height:34px; border:3px solid var(--line-2); border-top-color:var(--navy); border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s} .btn:active{transform:none}}
.foot{padding:4px 14px 0; font-size:11.5px; line-height:1.6; color:var(--ink-3)}


/* ---------- tambahan untuk beranda / admin ---------- */
.nav{display:flex; gap:4px; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:62px; z-index:98}
.nav button{flex:1; height:38px; border:1px solid var(--line-2); background:var(--sunken); color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:700; border-radius:10px; cursor:pointer}
.nav button[aria-current="true"]{background:var(--navy); border-color:var(--navy); color:var(--panel)}
:root[data-theme="dark"] .nav button[aria-current="true"], :root:not([data-theme="light"]) .nav button[aria-current="true"]{color:var(--ground)}
.nav button:focus-visible{outline:2px solid var(--navy); outline-offset:2px}

.sched{margin:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.sched-h{padding:12px 14px; border-bottom:1px solid var(--line)}
.sched-date{font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--pink-deep); letter-spacing:.04em}
.sched-name{font-size:17px; font-weight:800; margin-top:2px; letter-spacing:-.01em}
.sched-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.sched-b{padding:10px 14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.quota{flex:1; min-width:120px}
.bar{height:7px; background:var(--sunken); border-radius:99px; overflow:hidden; margin-top:5px}
.bar span{display:block; height:100%; background:var(--go); border-radius:99px}
.bar.full span{background:var(--stop)}
.quota-t{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.req-item{display:flex; align-items:center; gap:9px; padding:10px 14px; border-top:1px solid var(--line)}
.req-info{flex:1; min-width:0}
.req-name{font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.req-sub{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:1px}
.wa{display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 11px; border-radius:8px; background:var(--go-bg); color:var(--go); border:1px solid var(--go-line); font-size:12px; font-weight:700; text-decoration:none}
.wa:hover{background:var(--go); color:#fff}
.pl-row{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line)}
.pl-row:last-child{border-bottom:none}
.pl-i{flex:1; min-width:0}
.pl-nm{font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pl-sb{font-size:12px; color:var(--ink-3); margin-top:1px}
.dot-m{display:inline-block; width:6px; height:6px; border-radius:99px; background:var(--pink-deep); margin-right:5px; vertical-align:middle}
.warnbox{margin:0 0 10px; padding:10px 12px; border-radius:10px; background:var(--idle-bg); border:1px solid var(--idle-line); color:var(--idle); font-size:13px; font-weight:600}
.okbox{margin:0 0 10px; padding:10px 12px; border-radius:10px; background:var(--go-bg); border:1px solid var(--go-line); color:var(--go); font-size:13px; font-weight:600}
.hint{font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.5}
.cfg-row{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line)}
.cfg-row:last-child{border-bottom:none}
.cfg-l{flex:1; min-width:0}
.cfg-l b{display:block; font-size:14px; font-weight:700}
.cfg-l span{display:block; font-size:11.5px; color:var(--ink-3); margin-top:1px}
.cfg-row input,.cfg-row select{width:112px; height:38px; flex:none; text-align:center}
.cfg-row input[type=text]{width:150px; text-align:left}
select{font:inherit; font-size:14px; border:1.5px solid var(--line-2); border-radius:10px; background:var(--sunken); color:var(--ink); height:44px; padding:0 10px; width:100%}
select:focus{outline:none; border-color:var(--navy)}


/* ---------- grid 3 tombol di /admin ---------- */
.tile-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:14px 12px}
.tile{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px;
  min-height:132px; padding:18px 8px 14px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); cursor:pointer; font:inherit; color:var(--ink);
  text-align:center; text-decoration:none}
.tile:hover{border-color:var(--pink); background:var(--panel-2)}
.tile:active{transform:scale(.97)}
.tile:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.tile-ico{width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
  background:var(--pink-wash); border:1px solid var(--line-2)}
.tile-ico svg{width:22px; height:22px; stroke:var(--navy); fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.tile-name{font-size:14.5px; font-weight:800; letter-spacing:-.01em}
.tile-sub{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); line-height:1.5}
.tile-sub b{display:block; color:var(--idle); font-weight:700}
@media (max-width:359px){
  .tile-grid{grid-template-columns:1fr}
  .tile{flex-direction:row; min-height:0; justify-content:flex-start; gap:12px; text-align:left; padding:12px 14px}
  .tile-ico{flex:none}
}

/* baris kembali di atas seksi admin */
.crumb{display:flex; align-items:center; gap:8px; padding:10px 12px 0}
.crumb button{background:none; border:0; font:inherit; font-size:13.5px; font-weight:700;
  color:var(--navy); cursor:pointer; padding:6px 2px}
.crumb button:hover{text-decoration:underline}
.crumb-now{font-size:13.5px; color:var(--ink-3)}

/* ---------- daftar nama di halaman utama ---------- */
.who{padding:11px 14px 12px; border-top:1px solid var(--line)}
.who-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 12px}
.who-nm{display:flex; align-items:center; gap:5px; font-size:13.5px; line-height:1.75; min-width:0}
.who-nm .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
/* badge grade di papan publik dibuat sekecil mungkin - dua kolom di layar HP tidak
   punya ruang untuk badge ukuran normal tanpa memotong nama */
.g-kecil{font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:-.02em;
  padding:1px 5px; border-radius:5px; background:var(--sunken); color:var(--pink-deep);
  border:1px solid var(--line-2); flex:none; margin-left:auto}
.who-none{font-size:13px; color:var(--ink-3); font-style:italic}
@media (max-width:339px){ .who-grid{grid-template-columns:1fr} }

/* label pemisah: PESERTA / WAITING LIST */
.who-label{display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700;
  color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; padding-bottom:8px}
.who-label::after{content:""; flex:1; height:1px; background:var(--line)}
.who-label .n{font-family:var(--mono); letter-spacing:0; color:var(--ink-3); opacity:.8}

/* baris waiting list - dibedakan dari peserta supaya tidak dikira sudah masuk */
.wait-item{display:flex; align-items:center; gap:8px; font-size:13.5px; line-height:1.9}
.wait-item .nm{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wait-note{font-size:11px; color:var(--idle); background:var(--idle-bg); border:1px solid var(--idle-line);
  border-radius:6px; padding:2px 7px; font-weight:700; white-space:nowrap; flex:none}

/* tanggal jadi judul kartu di halaman utama */
.sched-day{font-size:19px; font-weight:800; letter-spacing:-.015em; line-height:1.25}
.sched-lewat{opacity:.62}
.sched-kuota{font-family:var(--mono); font-size:18px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; margin-top:8px; letter-spacing:-.03em; line-height:1.3}
.sched-kuota .penuh{color:var(--stop)}
.sched-kuota .sisa{color:var(--go)}
/* di layar sempit, biar tidak menabrak tepi kartu */
@media (max-width:359px){ .sched-kuota{font-size:16px} }
.tag-lewat{font-family:var(--mono); font-size:10.5px; font-weight:700; padding:3px 8px;
  border-radius:6px; background:var(--sunken); color:var(--ink-3); border:1px solid var(--line-2)}

/* badge grade - dibedakan dari badge Member supaya tidak menyatu jadi satu blok */
.b-grade{background:var(--sunken); color:var(--pink-deep); border-color:var(--line-2)}

/* baris meta di kartu pemain: badge dulu, lalu "terakhir main" */
.pl-meta{display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap}
.pl-meta .kapan{font-size:11.5px; color:var(--ink-3)}

/* ---------- tong sampah ---------- */
.sampah-item{display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--line)}
.sampah-item:last-child{border-bottom:none}
.sampah-i{flex:1; min-width:0}
.sampah-nm{font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sampah-sb{font-size:11.5px; color:var(--ink-3); margin-top:2px; font-family:var(--mono)}
.k-player{background:var(--pink-wash); color:var(--navy); border-color:var(--line-2)}
.k-court{background:var(--idle-bg); color:var(--idle); border-color:var(--idle-line)}

/* ---------- ikon gender ----------
   Gender ditampilkan sebagai lambang, bukan kata "Putra"/"Putri". */
.g{display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
  border-radius:5px; font-size:12px; font-weight:700; line-height:1; flex:none;
  vertical-align:-3px; margin-right:5px; border:1px solid transparent}
.g-L{background:var(--boy-bg); color:var(--boy); border-color:var(--boy-line)}
.g-P{background:var(--girl-bg); color:var(--girl); border-color:var(--girl-line)}
.g-x{background:var(--sunken); color:var(--ink-3); border-color:var(--line-2)}

/* pilihan gender di formulir: tiga tombol, bukan dropdown teks */
.gpick{display:flex; gap:8px; margin-top:4px}
.gpick button{flex:1; height:44px; border:1.5px solid var(--line-2); border-radius:10px;
  background:var(--sunken); color:var(--ink-2); font:inherit; font-size:14px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px}
.gpick button[aria-pressed="true"]{border-color:var(--navy); background:var(--pink-wash); color:var(--navy)}
/* tombol yang dipilih memakai warna gendernya, jadi warnanya sama dengan ikon di
   daftar - kalau beda, orang harus menghafal dua kode warna */
.gpick button[data-do$=":L"][aria-pressed="true"]{background:var(--boy-bg); color:var(--boy); border-color:var(--boy)}
.gpick button[data-do$=":P"][aria-pressed="true"]{background:var(--girl-bg); color:var(--girl); border-color:var(--girl)}
.gpick button:focus-visible{outline:2px solid var(--navy); outline-offset:2px}

/* baris config yang isinya panjang (daftar grade) butuh dua baris */
.cfg-col{padding:10px 14px; border-bottom:1px solid var(--line)}
.cfg-col:last-child{border-bottom:none}
.cfg-col b{display:block; font-size:14px; font-weight:700}
.cfg-col span{display:block; font-size:11.5px; color:var(--ink-3); margin:1px 0 7px}
.cfg-col input{width:100%; text-align:left}
.grade-pratinjau{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}

/* status sambungan ke server */
.conn{position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:900;
  padding:9px 15px; border-radius:99px; font-size:12.5px; font-weight:700;
  background:var(--stop-bg); color:var(--stop); border:1px solid var(--stop-line);
  box-shadow:var(--shadow); display:none; max-width:calc(100% - 24px); text-align:center}
.conn.show{display:block}
.conn.ok{background:var(--go-bg); color:var(--go); border-color:var(--go-line)}