/* =====================================================================
   Jabar Open 2026 — gaya halaman aplikasi (daftar, status, hasil, panitia)
   Token warna mengikuti beranda: putih, biru Jabar Open, emas logo sebagai aksen.
   ===================================================================== */
:root{
  --ink:#13284a; --ink-2:#34476a; --muted:#5b6b88; --faint:#8a97ad;
  --blue:#2c4c7b; --blue-d:#1f3a62; --blue-2:#4a6a97; --blue-lt:#e9eff8;
  --gold:#e4c87d; --gold-d:#8a6a1f; --gold-lt:#fbf4e1;
  --paper:#f4f6fa; --surface:#ffffff; --line:#e2e8f1; --line-2:#cdd6e4;
  --ok:#1b7f47; --ok-lt:#e6f5ec; --warn:#9a6200; --warn-lt:#fdf3dc; --bad:#b42318; --bad-lt:#fdecea;
  --gold:#b8860b; --silver:#7d8796; --bronze:#a0522d;
  --r:16px; --r-sm:10px;
  --font:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink-2);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue)}
a:hover{color:var(--blue-d)}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:750;letter-spacing:-.025em}
h1{font-size:clamp(2rem,5vw,2.9rem);font-weight:800;letter-spacing:-.045em;line-height:1.05}
h1 em,h2 em{font-style:normal;font-weight:250;color:var(--blue-2)}
h2{font-size:1.35rem}
h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 1em}
.num,.tabular{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.875rem} .tiny{font-size:.78rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px;border-radius:6px}

/* ---------- top bar ---------- */
.topbar{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);color:var(--ink);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.topbar-in{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px;min-height:66px}
.topbar .brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:650;white-space:nowrap}
.topbar .brand img{height:38px;width:auto}
.topbar .brand span{display:none}
.topnav{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap}
.topnav a{color:var(--ink-2);text-decoration:none;padding:7px 12px;border-radius:999px;font-size:.94rem;font-weight:500}
.topnav a:hover{background:var(--paper);color:var(--ink)}
.topnav a[aria-current="page"]{color:var(--blue);background:var(--blue-lt)}
.lang{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;margin-left:8px;background:#fff}
.lang button{background:none;border:0;color:var(--muted);padding:4px 9px;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;border-radius:999px}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}
.menu-btn{display:none;margin-left:auto;background:#fff;border:1px solid var(--line-2);color:var(--ink);border-radius:999px;padding:8px 16px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
@media (max-width:760px){
  .menu-btn{display:block}
  .topnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 30px -24px rgba(19,40,74,.35);flex-direction:column;align-items:stretch;padding:6px 16px 16px;margin:0}
  .topnav a{border-radius:0;padding:13px 2px;border-bottom:1px solid var(--line);font-size:1rem}
  .topnav a[aria-current="page"]{background:none}
  .topnav.open{display:flex}
  .lang{align-self:flex-start;margin:6px 0 0}
}

/* ---------- layout ---------- */
body > main{flex:1 0 auto;width:100%}
body[data-page=panitia]{display:block}
.wrap{max-width:820px;margin:0 auto;padding:28px 16px 64px}
.wrap-wide{max-width:1200px;margin:0 auto;padding:24px 16px 64px}
.page-head{margin-bottom:22px}
.page-head p{color:var(--muted);max-width:62ch}
.d-ready{margin:0 0 18px;max-width:780px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card + .card{margin-top:16px}
.card h2{margin-bottom:.35em}
.stack > * + *{margin-top:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}
.divider{border:0;border-top:1px solid var(--line);margin:18px 0}
.spacer{flex:1}

/* ---------- forms ---------- */
.f{display:block;font-weight:600;font-size:.93rem;color:var(--ink);margin-bottom:6px}
.f-hint{font-size:.83rem;color:var(--muted);margin-top:5px}
.f-err{font-size:.85rem;color:var(--bad);margin-top:5px}
input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=date],input[type=datetime-local],input[type=number],input[type=search],input[type=url],input[type=time],input[type=password],select,textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;min-height:44px}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,76,123,.16)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--bad)}
.field{margin-bottom:14px}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--blue)}
.choice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-2);border-radius:var(--r);padding:14px;cursor:pointer;background:#fff;transition:border-color .12s}
.choice:hover{border-color:var(--blue)}
.choice input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--blue)}
.choice:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset;background:var(--blue-lt)}
.choice.disabled{opacity:.55;cursor:not-allowed;background:var(--paper)}
.choice .c-title{font-weight:700;color:var(--ink)}
.choice .c-sub{font-size:.85rem;color:var(--muted)}
.choices{display:grid;gap:10px}
.choices.two{grid-template-columns:1fr 1fr}
@media (max-width:640px){.choices.two{grid-template-columns:1fr}}
.choices.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.choices.three{grid-template-columns:1fr}}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:#fff}
.seg label{padding:9px 14px;cursor:pointer;font-weight:600;font-size:.93rem;border-right:1px solid var(--line-2)}
.seg label:last-child{border-right:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--ink);color:#fff}
.seg label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:-3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:.97rem;border-radius:999px;padding:11px 20px;min-height:44px;border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.2}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px -8px rgba(44,76,123,.55)}
.btn-primary:hover{background:var(--blue-d);color:#fff}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#ecd697;color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ok{background:var(--ok);color:#fff}
.btn-bad{background:#fff;color:var(--bad);border-color:#e9b4ae}
.btn-bad:hover{background:var(--bad-lt)}
.btn-sm{padding:6px 11px;min-height:34px;font-size:.86rem}
.btn[disabled],.btn.loading{opacity:.55;cursor:not-allowed}
.btn-link{background:none;border:0;padding:0;color:var(--blue);font:inherit;cursor:pointer;text-decoration:underline}

/* ---------- pills / status ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:600;white-space:nowrap;background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}
.pill.ok{background:var(--ok-lt);color:var(--ok);border-color:#b9e2c8}
.pill.warn{background:var(--warn-lt);color:var(--warn);border-color:#f1d9a3}
.pill.bad{background:var(--bad-lt);color:var(--bad);border-color:#f2c1bb}
.pill.info{background:var(--blue-lt);color:var(--blue-d);border-color:#c9d6ea}
.pill.gold{background:var(--gold-lt);color:var(--gold-d);border-color:#efdcaa}
.pill.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.medal{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px}
.medal.emas{background:#e0b02a;box-shadow:0 0 0 2px #f6e3a3}
.medal.perak{background:#a9b2bf;box-shadow:0 0 0 2px #e1e5ea}
.medal.perunggu{background:#b8703f;box-shadow:0 0 0 2px #ecd2bf}

/* ---------- notices ---------- */
.note{border-radius:var(--r);padding:12px 14px;font-size:.93rem;border:1px solid}
.note.info{background:var(--blue-lt);border-color:#c9d6ea;color:var(--blue-d)}
.note.gold{background:var(--gold-lt);border-color:#efdcaa;color:#5e4813}
.note.warn{background:var(--warn-lt);border-color:#f1d9a3;color:#6b4400}
.note.bad{background:var(--bad-lt);border-color:#f2c1bb;color:var(--bad)}
.note.ok{background:var(--ok-lt);border-color:#b9e2c8;color:#135e34}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;z-index:200;max-width:calc(100% - 32px);font-size:.93rem;box-shadow:0 8px 30px rgba(19,40,74,.3)}
.toast.bad{background:var(--bad)}

/* ---------- steps ---------- */
.steps{display:flex;gap:6px;margin:0 0 20px;padding:0;list-style:none;counter-reset:s}
.steps li{flex:1;counter-increment:s;font-size:.8rem;color:var(--faint);font-weight:600;padding-top:10px;border-top:4px solid var(--line);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps li::before{content:counter(s) ". "}
.steps li.done{border-color:var(--blue);color:var(--blue)}
.steps li.now{border-color:var(--gold);color:var(--ink)}
@media (max-width:520px){.steps li span{display:none}}
.step-actions{display:flex;gap:10px;justify-content:space-between;margin-top:20px;flex-wrap:wrap}

/* ---------- athlete card (form) ---------- */
.ath{border:1px solid var(--line-2);border-radius:var(--r);background:#fff;margin-bottom:16px}
.ath-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfd;border-radius:var(--r) var(--r) 0 0}
.ath-head .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem;flex:none}
.ath-body{padding:16px}
.cat-list{display:grid;gap:8px}
.cat{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;background:#fff}
.cat input{margin-top:3px;width:18px;height:18px;accent-color:var(--blue)}
.cat .t{font-weight:700;color:var(--ink);font-size:.95rem}
.cat .s{font-size:.8rem;color:var(--muted)}
.cat .fee{font-weight:700;font-size:.9rem;white-space:nowrap}
.cat.off{background:var(--paper);cursor:not-allowed;border-style:dashed}
.cat.off .t,.cat.off .fee{color:var(--faint)}
.cat.off .why{font-size:.78rem;color:var(--faint)}
.cat:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset;background:var(--blue-lt)}
.pri{margin:-2px 0 4px 30px;font-size:.88rem}
.cat-off summary{cursor:pointer;padding:8px 0 2px;list-style-position:inside}
.cat-off[open] summary{margin-bottom:4px}
.upload{border:1.5px dashed var(--line-2);border-radius:var(--r-sm);padding:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fbfcfe}
.upload.done{border-style:solid;border-color:#b9e2c8;background:var(--ok-lt)}
.upload input[type=file]{font-size:.85rem;max-width:100%}

/* ---------- amount (the one loud element) ---------- */
.amount{font-weight:700;font-size:clamp(2.1rem,8vw,3.2rem);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.amount .uc{color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:5px;text-underline-offset:7px}
.pay{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}
.pay .qris{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px}
.pay .qris img{width:100%;height:auto}
@media (max-width:640px){.pay{grid-template-columns:1fr}.pay .qris{max-width:300px}}
.breakdown{width:100%;border-collapse:collapse;font-size:.93rem}
.breakdown td{padding:5px 0;border-bottom:1px dashed var(--line)}
.breakdown td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.breakdown tr.total td{border:0;padding-top:10px;font-weight:800;font-size:1.05rem;color:var(--ink)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:.8rem;padding:9px 10px;border-bottom:1px solid var(--line);background:#fafbfd;white-space:nowrap;position:sticky;top:0}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td.r,.tbl th.r{text-align:right}
.tbl td.c,.tbl th.c{text-align:center}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover{background:#f7f9fd}
.rank{font-weight:800;font-size:1.1rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--blue)}

/* ---------- misc ---------- */
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
.footer{border-top:1px solid var(--line-2);background:#fff;color:var(--muted);font-size:.87rem}
.footer-in{max-width:1200px;margin:0 auto;padding:26px 16px 30px;display:flex;gap:18px 32px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.footer .logos{display:flex;align-items:center;gap:16px}
.footer img{height:44px;width:auto}
.footer img.jo{height:46px}
.footer a{color:var(--ink-2)}
.footer address{font-style:normal}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:.93rem}
.kv dt{color:var(--muted)} .kv dd{margin:0;color:var(--ink);font-weight:600}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.bib{display:inline-block;background:var(--ink);color:#fff;font-weight:700;border-radius:6px;padding:2px 8px;font-variant-numeric:tabular-nums;font-size:.85rem}
dialog{border:0;border-radius:var(--r);padding:0;max-width:min(560px,calc(100% - 24px));width:100%;box-shadow:0 20px 60px rgba(19,40,74,.35)}
dialog::backdrop{background:rgba(19,40,74,.5)}
.dlg-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.dlg-body{padding:18px 20px}
.dlg-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
/* ---------- beregu & musik ---------- */
.seg label.is-off{opacity:.45;cursor:not-allowed}
.mb-check:empty,.mb-cat:empty{display:none}
.mb-check{margin:-4px 0 12px}
.mb-cat{margin:4px 0 0;color:var(--muted)}
.ok-t{color:#135e34;font-weight:600}
.bad-t{color:var(--bad);font-weight:600}
.music input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem}
.m-rules{margin:0 0 18px;max-width:780px}
.m-rules summary{cursor:pointer}
.m-rules ul{margin:8px 0 0;padding-left:18px}
.m-rules li{margin:4px 0}
.mono-link{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;word-break:break-all}
[hidden]{display:none !important}
/* daftar: daftar klub yang bisa digulir */
.club-list{max-height:320px;overflow-y:auto;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff}
.club-opt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;font:inherit;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 12px;cursor:pointer}
.club-opt:last-child{border-bottom:0}
.club-opt:hover,.club-opt:focus-visible{background:var(--blue-lt);outline:none}
.club-opt .c-title{font-weight:650;color:var(--ink)}
.club-opt .c-sub{font-size:.8rem;color:var(--muted)}
/* juri: disiplin & ketersediaan */
.jd{border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 14px;margin-bottom:8px;background:#fff}
.jd.on{border-color:var(--blue);background:var(--blue-lt)}
.jd-body{padding:4px 0 6px}
.jd-body .field{margin-bottom:8px}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.day span{white-space:nowrap}
.day{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;background:#fff;font-size:.9rem}
.day:has(input:checked){border-color:var(--blue);background:var(--blue-lt);box-shadow:0 0 0 1px var(--blue) inset}
/* v6: dokumen terpisah, musik per nomor, hitung mundur bayar */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:6px}
.doc-slot{margin:0}
.doc-slot .upload{padding:10px;min-height:56px}
.mu-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;margin:6px 0}
.mu-row label{font-weight:600;color:var(--ink)}
@media (max-width:560px){.mu-row{grid-template-columns:1fr;gap:4px}}
.cat .pri-t{color:var(--blue-d);font-weight:600}
.timer{border-color:#e4c87d;background:#fdf8ea}
.timer h2{font-variant-numeric:tabular-nums}
.timer.over{border-color:var(--bad);background:var(--bad-lt)}
.photo-rules{margin:8px 0;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;background:#fbfcfe}
.photo-rules summary{cursor:pointer}
.pr-body{margin-top:8px}
.pr-ex{display:flex;gap:12px;flex-wrap:wrap}
.pr-ex figure{margin:0;text-align:center;font-size:.78rem;font-weight:600}
.pr-ex img{width:90px;height:120px;border-radius:6px;border:2px solid var(--line);display:block}
.pr-ex .ok img{border-color:var(--ok)} .pr-ex .ok figcaption{color:var(--ok)}
.pr-ex .no img{border-color:var(--bad);opacity:.85} .pr-ex .no figcaption{color:var(--bad)}
.pr-ex .no figcaption::before{content:"\2715  "} .pr-ex .ok figcaption::before{content:"\2713  "}
.aic-v{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.aic-photo{width:120px;height:160px;object-fit:cover;border-radius:8px;border:1px solid var(--line);margin-top:12px;flex:none}
.aic-v .kv{flex:1;min-width:220px}

/* footer halaman lain: abu muda, garis emas, pemisah (15 Okt) */
.footer{background:#eaeff6;border-top:3px solid #e4c87d}
@media (max-width:700px){
  .footer-in{flex-direction:column;align-items:flex-start;gap:0}
  .footer .logos{padding-bottom:16px;border-bottom:1px solid var(--line-2);width:100%}
  .footer-in > div:last-child{padding-top:14px}
}