/* KomisiKu — tema Halloween "Costume Contest": gelap, oranye labu, hantu 👻 */
:root{
  --bg:#14092b; --card:#221040; --card2:#2c1550; --ink:#f5efff; --muted:#b9a8d9;
  --orange:#ff7a1a; --pumpkin:#ffa940; --green:#7ee081; --red:#ff6b6b; --line:#3d2370;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 500px at 80% -10%,#3b1a6e 0%,var(--bg) 55%);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-size:1.35rem}.tag{font-size:.8rem;color:var(--muted);font-weight:400}
.payout-chip{background:var(--card2);border:1px solid var(--line);padding:6px 12px;border-radius:999px;font-size:.85rem}
main{max-width:920px;margin:0 auto;padding:20px 16px 40px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.stat-label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px}
.stat strong{font-size:1.35rem}
.stat.highlight{border-color:var(--orange);background:linear-gradient(135deg,#3a1660,#4a1e05)}
.stat.highlight strong{color:var(--pumpkin)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:18px}
h2{margin:0 0 14px;font-size:1.15rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
label{font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;gap:6px}
input,select{background:#180b33;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:1rem;width:100%}
input:focus,select:focus{outline:2px solid var(--orange)}
button{cursor:pointer;border-radius:10px;border:0;font-size:.95rem;padding:10px 16px}
.btn-primary{background:var(--orange);color:#1a0b00;font-weight:700}
.btn-primary:hover{background:var(--pumpkin)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:transparent;color:var(--red);border:1px solid #5a2430}
.hint{font-size:.8rem;color:var(--muted)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions input{width:170px}
.link-list{display:flex;flex-direction:column;gap:10px}
.link-item{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.link-item .top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.link-item a{color:var(--pumpkin);text-decoration:none;word-break:break-all}
.link-item .meta{color:var(--muted);font-size:.85rem;margin-top:4px}
.link-item .nums{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.9rem}
.link-item .nums b{color:var(--green)}
.link-item .item-actions{display:flex;gap:8px;margin-top:10px}
.link-item .item-actions button{padding:6px 12px;font-size:.85rem}
.empty{color:var(--muted);text-align:center;padding:18px 0 6px}
.payout li{margin:4px 0;color:var(--muted)}
.payout strong{color:var(--ink)}
footer{text-align:center;color:var(--muted);font-size:.8rem;padding:0 16px 24px}
dialog{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:20px;max-width:420px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}