/* Togel Payout Front End — tema gelap + emas ala screenshot referensi */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold: #f0b12a;
  --gold-dim: #c9971f;
  --bg: #000;
  --panel: #101010;
  --row: #1b1b1d;
  --row-alt: #161618;
  --line: #2e2e2e;
  --text: #f2f2f2;
  --muted: #b9b9b9;
  --red: #cf1f2e;
  --blue: #1a3fd6;
  --orange: #b34700;
  --yellow: #f3d515;
  --green: #1b9b53;
  --accent: var(--red);
}
body[data-mode="NO_DISKON"] { --accent: var(--red); --accent-text: #fff; }
body[data-mode="DISKON"]    { --accent: var(--blue); --accent-text: #fff; }
body[data-mode="BB"]        { --accent: var(--orange); --accent-text: #fff; }
body[data-mode="BB_DISKON"] { --accent: var(--yellow); --accent-text: #111; }
body[data-mode="THREE_PRIZES"] { --accent: var(--green); --accent-text: #fff; }

html, body { background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
body { padding-bottom: 60px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 12px 16px; }
body.wap .wrap { max-width: 480px; }

/* Header */
.site-head { text-align: center; padding: 18px 8px 10px; background: radial-gradient(1200px 240px at 50% -60px, #221a08, #000); }
.site-head h1 { color: var(--gold); font-size: 22px; letter-spacing: 1px; text-transform: uppercase; }
.site-head h1::after { content: ""; display: block; width: 64px; height: 3px; margin: 8px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 2px; }
.site-head .test-note { color: #777; font-size: 11px; margin-top: 4px; }
.wap-btn { margin-top: 10px; background: var(--gold); color: #4a2f00; border: none; border-radius: 8px;
  padding: 8px 20px; font-size: 14px; cursor: pointer; font-weight: bold; }
.wap-btn:hover { background: #ffc93e; }

/* Pasaran + info box */
select, input[type="text"] { font: inherit; }
.pasaran-select { background: #181818; color: #fff; border: 1px solid #555; border-radius: 6px;
  padding: 10px 12px; min-width: 260px; font-size: 15px; }
.info-box { border: 1px solid rgba(240,177,42,.3); border-radius: 10px; padding: 8px 16px; margin: 12px auto;
  display: block; width: fit-content; min-width: 260px; max-width: 100%; text-align: center; background: rgba(240,177,42,.05); }
.info-box .date { color: var(--gold); font-size: 12px; margin-bottom: 2px; letter-spacing: .3px; }
.info-box .title { color: #fff; font-size: 14px; }

/* Mode buttons */
.mode-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.mode-btn { background: #000; color: #fff; border: 2px solid #555; border-radius: 4px;
  padding: 8px 16px; font-weight: bold; font-size: 13px; cursor: pointer; }
.mode-btn[data-mode="NO_DISKON"] { border-color: var(--red); }
.mode-btn[data-mode="DISKON"]    { border-color: var(--blue); }
.mode-btn[data-mode="BB"]        { border-color: var(--orange); }
.mode-btn[data-mode="BB_DISKON"] { border-color: var(--yellow); }
.mode-btn[data-mode="THREE_PRIZES"] { border-color: var(--green); }
.mode-btn.active[data-mode="NO_DISKON"] { background: var(--red); }
.mode-btn.active[data-mode="DISKON"]    { background: var(--blue); }
.mode-btn.active[data-mode="BB"]        { background: var(--orange); }
.mode-btn.active[data-mode="BB_DISKON"] { background: var(--yellow); color: #111; }
.mode-btn.active[data-mode="THREE_PRIZES"] { background: var(--green); }
.mode-btn[hidden] { display: none; }

/* Jenis game chips */
.section-label { color: #eee; font-size: 14px; margin: 12px 0 8px; }
.section-divider { margin: 26px 0 8px; padding: 10px 12px; border-top: 1px solid #333;
  color: #9aa; font-size: 13px; }
.section-divider code { color: var(--gold); }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { background: #0c0c0c; color: #eee; border: 1px solid rgba(240,177,42,.45); border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap; }
.chip.active { background: linear-gradient(180deg, #ffce4d, #f2ab1f); color: #3a2800; border-color: var(--gold); }
.chip:hover:not(.active) { border-color: var(--gold); color: #fff; }

/* Tabs */
.tab-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0; }
.tab-btn { background: #0c0c0c; color: #ddd; border: 1px solid rgba(240,177,42,.4); border-radius: 6px;
  padding: 9px 16px; font-size: 13px; font-weight: bold; cursor: pointer; }
.tab-btn.active { background: rgba(240,177,42,.14); border-color: var(--gold); color: var(--gold); }

/* Bet table */
.bet-panel { margin-top: 10px; }
/* Tabel taruhan scroll-x sendiri → 4 kotak angka TAK PERNAH turun ke bawah (wrap) di HP. */
.bet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
table.bet { width: 100%; border-collapse: collapse; }
.bet-scroll > table.bet { min-width: 100%; width: max-content; }
table.bet thead th { background: var(--accent); color: var(--accent-text, #fff); text-align: left;
  padding: 12px 10px; font-size: 14px; font-weight: bold; white-space: nowrap; }
table.bet td { padding: 9px 10px; border-bottom: 1px solid #000; font-size: 14px; white-space: nowrap; }
table.bet tbody tr:nth-child(odd)  { background: var(--row); }
table.bet tbody tr:nth-child(even) { background: var(--row-alt); }
table.bet .no-col { width: 56px; }

.digit-box { width: 34px; height: 30px; text-align: center; border: none; border-radius: 4px;
  margin-right: 6px; font-size: 15px; background: #fff; color: #111; }
#betPanel .digit-box:disabled {
  background:#303034; color:#777; cursor:not-allowed; opacity:.7; outline:0; box-shadow:none;
}
.nominal-input, .free-input { width: 210px; height: 30px; border: none; border-radius: 3px;
  padding: 0 8px; background: #fff; color: #111; font-size: 14px; }
.free-input { width: 190px; }
#betPanel input.invalid, #betPanel select.invalid { outline: 2px solid var(--red); }
#betPanel .amount-field { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
#betPanel .number-field { display:block; white-space:nowrap; }
#betPanel .number-field > .field-error { display:block; margin-top:4px; }
#betPanel .position-field { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
#betPanel .amount-error, #betPanel .field-error { max-width:310px; color:#ff6b72; font-size:11px; font-weight:500; line-height:1.25; white-space:normal; }
.sel-input { height: 30px; border-radius: 3px; border: 1px solid #888; background: #fff; color: #111;
  padding: 0 6px; min-width: 110px; font-size: 14px; }
.lines-note { color: var(--gold); font-size: 11px; margin-left: 6px; }

.total-row td { background: #141414; font-weight: bold; padding: 14px 10px; }

/* Submit */
.submit-wrap { text-align: center; margin: 22px 0; }
.submit-btn { background: #f8c02c; color: #3a2800; border: none; border-radius: 999px;
  padding: 13px 44px; font-size: 14px; font-weight: bold; letter-spacing: 1px; cursor: pointer; }
.submit-btn:hover { background: #ffd35a; }

/* Payout reference table */
table.ref { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.ref th { background: #4a4a4c; color: #fff; text-align: left; padding: 12px 10px; font-size: 14px; }
table.ref td { padding: 11px 10px; font-size: 14px; border-bottom: 1px solid #000; }
table.ref tbody tr:nth-child(odd)  { background: #1a1a1c; }
table.ref tbody tr:nth-child(even) { background: #151517; }

/* Kotak section (BBFS / Pola / Fast2D) */
.box { border: 1px solid var(--gold); border-radius: 8px; padding: 12px 16px 16px; margin: 14px 0; }
.box h3 { color: var(--gold); font-size: 15px; font-weight: normal; margin-bottom: 10px; }
.box .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.box label { display: block; color: #eee; font-size: 13px; margin-bottom: 6px; }
.box input { width: 100%; height: 30px; border: none; border-radius: 3px; padding: 0 8px;
  background: #fff; color: #111; font-size: 14px; }
.box input[disabled], .box input[readonly] { background: #d6d6d6; color: #333; }
/* BBFS/FAST2D: kotak output tetap PUTIH (bukan abu-abu POLA) */
.box input.out-white[readonly] { background: #fff; color: #111; }
.box.total { background: #2a2a2c; border: none; }
body.wap .box .grid5 { grid-template-columns: 1fr 1fr; }

.gen-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 12px 0; }
.gen-row .field label { display: block; color: #eee; font-size: 13px; margin-bottom: 6px; }
.gen-row input { height: 30px; border: none; border-radius: 3px; padding: 0 8px; background: #fff; color: #111; }
.gen-btn { background: #c47a12; color: #fff; border: none; border-radius: 999px; padding: 9px 22px;
  font-size: 14px; cursor: pointer; font-weight: bold; }
.gen-btn:hover { background: #dd8d1c; }
.check-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 4px; color: #fff; font-size: 14px; }
.check-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: #1a56db; }

/* FAST 2D grid */
.f2d-grid { border-collapse: collapse; margin: 10px 0; }
.f2d-grid td, .f2d-grid th { border: 1px solid var(--gold); width: 42px; height: 38px;
  text-align: center; font-size: 14px; color: #fff; }
.f2d-grid .cb-cell { border-color: transparent; }
.f2d-grid td.num { cursor: pointer; user-select: none; }
.f2d-grid td.num.sel { background: var(--gold); color: #201400; font-weight: bold; }
.f2d-grid input { width: 15px; height: 15px; accent-color: #1a56db; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none;
  align-items: center; justify-content: center; z-index: 50; }
.modal-overlay.show { display: flex; }
.modal { background: #17171a; border: 1px solid var(--gold); border-radius: 10px;
  max-width: 680px; width: 92%; max-height: 80vh; overflow: auto; padding: 20px; }
.modal h3 { color: var(--gold); margin-bottom: 12px; }
.modal table { width: 100%; border-collapse: collapse; font-size: 13px; }
.modal th { text-align: left; color: #bbb; padding: 6px; border-bottom: 1px solid #333; }
.modal td { padding: 6px; border-bottom: 1px solid #242428; }
.modal .m-total { margin-top: 12px; font-size: 15px; font-weight: bold; color: var(--gold); }
.modal .m-actions { margin-top: 16px; display: flex; gap: 10px; justify-content: flex-end; }
.modal button { border: none; border-radius: 6px; padding: 9px 18px; cursor: pointer; font-weight: bold; }
.modal .save { background: var(--gold); color: #3a2800; }
.modal .close { background: #333; color: #fff; }
.modal .warn { color: #ff9d9d; font-size: 12px; margin-top: 8px; }
.bet-success-modal { position:relative; width:320px; height:258px; max-width:calc(100% - 30px); max-height:none;
  overflow:visible; padding:1px; border:0;
  border-radius:24px; text-align:center;
  background:linear-gradient(8.61deg,#ef801f 9.6%,#fddc13 41.07%,#ef841f 47.45%,#ffef91 94.24%);
  box-shadow:0 22px 70px rgba(0,0,0,.72); }
.bet-success-content { position:relative; display:flex; flex-direction:column; height:100%; padding:110px 18px 14px;
  border-radius:23px;
  background:linear-gradient(360deg,rgba(153,112,0,0) 72.49%,rgba(153,112,0,.4) 100%),
    linear-gradient(0deg,#060606,#060606); }
.bet-success-modal h3 { max-width:280px; margin:0 auto; font-size:24px; line-height:1.14; font-weight:800;
  background:radial-gradient(46.76% 46.76% at 53.24% 50%,#f7f096 0%,#ecd06f 100%);
  background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.bet-success-modal .m-actions { width:100%; margin:auto 0 0; justify-content:center; }
.bet-success-modal .save { width:100%; height:32px; min-height:0; padding:0; border:2px solid #fff4ce; border-radius:9px;
  background:linear-gradient(180deg,#f7d36e 0%,#ffeda4 50%,#f0c858 100%); color:#050505;
  font-size:14px; font-weight:500; box-shadow:inset 0 1px 2px rgba(255,255,255,.75); }
.bet-success-icon { position:absolute; z-index:1; top:-68px; left:50%; width:172px; height:172px;
  transform:translateX(-50%); object-fit:contain; }

/* Panel bawah: config & riwayat */
details.tool { margin: 18px 0; border: 1px solid #333; border-radius: 8px; background: #0d0d0f; }
details.tool summary { cursor: pointer; padding: 12px 14px; color: var(--gold); font-size: 14px; }
details.tool .tool-body { padding: 0 14px 14px; }
details.tool textarea { width: 100%; min-height: 260px; background: #101014; color: #cde;
  border: 1px solid #333; border-radius: 6px; font-family: Consolas, monospace; font-size: 12px; padding: 10px; }
details.tool .tool-actions { display: flex; gap: 8px; margin-top: 10px; }
details.tool .tool-actions button { border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; font-weight: bold; }
.cfg-apply { background: var(--gold); color: #3a2800; }
.cfg-reset, .hist-clear { background: #333; color: #fff; }
.cfg-msg { color: #8f8; font-size: 12px; margin-left: 8px; align-self: center; }
.cfg-msg.err { color: #f88; }
/* Kalkulator hadiah + tes bot */
.calc-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.calc-row .field label { display: block; color: #eee; font-size: 13px; margin-bottom: 6px; }
.calc-row select.sel-input { min-width: 240px; }
.calc-out { margin-top: 12px; font-size: 14px; color: #eee; }
.calc-out .muted, .muted { color: #999; font-size: 12px; }
table.kv td { padding: 5px 14px 5px 0; border-bottom: 1px solid #242428; }
table.kv td:first-child { color: #aaa; }
pre.fact { white-space: pre-wrap; word-break: break-word; background: #101014; border: 1px solid #333;
  border-radius: 6px; padding: 10px; font-size: 12px; color: #cde; margin-top: 8px; font-family: Consolas, monospace; }
details.tool textarea.small { min-height: 56px; }

/* ── Editor form payout (back-office) ── */
.pe-root { color: #eee; font-size: 13px; }
.pe-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #2a2a2e; margin-bottom: 12px; }
.pe-bar select { background: #181818; color: #fff; border: 1px solid #555; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.pe-bar label { color: #ddd; }
.pe-del { padding: 5px 12px; font-size: 12px; }
.pe-bm { display: flex; align-items: center; gap: 8px; margin: 6px 0 16px; color: #eee; }
.pe-bm input { width: 16px; height: 16px; accent-color: var(--gold); }
.pe-block { border: 1px solid #2e2e2e; border-radius: 10px; padding: 14px 16px; margin: 14px 0; background: #0e0e10; }
.pe-block > h3 { color: var(--gold); font-size: 15px; margin-bottom: 4px; }
.pe-hint { color: #8b8b93; font-size: 11px; margin: 4px 0 10px; line-height: 1.4; }
.pe-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pe-mode h5 { color: #ddd; font-size: 13px; margin-bottom: 6px; }
.pe-tbl { width: 100%; border-collapse: collapse; }
.pe-tbl th { text-align: left; color: #9a9aa2; font-weight: normal; font-size: 11px; padding: 4px 6px; border-bottom: 1px solid #2a2a2e; }
.pe-tbl td { padding: 4px 6px; border-bottom: 1px solid #1c1c20; color: #ccc; }
.pe-tbl td:first-child { white-space: nowrap; }
.pe-sec { border-top: 1px solid #232327; padding-top: 12px; margin-top: 12px; }
.pe-sec h4 { color: #e6e6ea; font-size: 13px; margin-bottom: 2px; }
.pe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; margin-top: 8px; }
.pe-field label { display: block; color: #9a9aa2; font-size: 11px; margin-bottom: 3px; }
.pe-num { display: block; width: 100%; }
.pe-num-control { display: flex; align-items: center; gap: 3px; width: 100%; }
.pe-num input { width: 100%; background: #17171b; color: #fff; border: 1px solid #333; border-radius: 5px; padding: 5px 7px; font-size: 13px; }
.pe-num input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.pe-num.invalid input { border-color: #ff4054; box-shadow: 0 0 0 1px rgba(255,64,84,.18); }
.pe-num-error { display: block; margin-top: 3px; color: #ff6b72; font-size: 11px; font-weight: 500; line-height: 1.25; }
.pe-num-error[hidden] { display: none; }
.pe-suf { color: #7a7a82; font-size: 12px; }
.pe-ok { border: 1px solid #232327; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.pe-ok-t { color: #cfcfd6; font-size: 12px; margin-bottom: 4px; }
.pe-ok .pe-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .pe-modes { grid-template-columns: 1fr; } .pe-grid { grid-template-columns: 1fr 1fr; } }

.hist-item { border-bottom: 1px solid #242428; padding: 8px 2px; font-size: 13px; color: #ddd; }
.hist-item .h-head { color: var(--gold); }
.hist-empty { color: #777; font-size: 13px; padding: 6px 2px; }

@media (max-width: 760px) {
  .nominal-input { width: 130px; }
  .digit-box { width: 28px; margin-right: 4px; }
  .box .grid5 { grid-template-columns: 1fr 1fr; }
  .f2d-grid td, .f2d-grid th { width: 30px; height: 30px; font-size: 12px; }
}

/* ── Panel CEK HASIL ── */
#winCheckTool { border-color: var(--gold); }
.wc-result-row, .wc-builder { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.wc-result-row { margin-bottom: 6px; }
.wc-builder { margin: 12px 0 6px; padding-top: 12px; border-top: 1px solid #242428; }
.wc-field { display: flex; flex-direction: column; gap: 4px; }
.wc-flabel { color: #bbb; font-size: 12px; }
.wc-input { height: 32px; border-radius: 5px; border: 1px solid #555; background: #fff; color: #111;
  padding: 0 8px; font-size: 14px; min-width: 96px; }
.wc-input.wc-prize { width: 90px; font-weight: bold; letter-spacing: 2px; text-align: center; }
.wc-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.wc-note { color: var(--gold); font-size: 12px; margin: 4px 0 2px; min-height: 16px; }
.wc-add { background: var(--gold); color: #3a2800; border: none; border-radius: 999px;
  padding: 9px 20px; font-size: 13px; font-weight: bold; cursor: pointer; height: 34px; }
.wc-add:hover { background: #ffd35a; }
.wc-table-wrap { overflow-x: auto; margin-top: 12px; }
.wc-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.wc-table th { background: #4a4a4c; color: #fff; text-align: left; padding: 9px 8px; font-size: 12px; white-space: nowrap; }
.wc-table td { padding: 8px; border-bottom: 1px solid #000; }
.wc-table tbody tr.wc-win  { background: #123018; }
.wc-table tbody tr.wc-lose { background: #2a1416; }
.wc-table tbody tr:not(.wc-win):not(.wc-lose):nth-child(odd) { background: #1a1a1c; }
.wc-c-status { font-weight: bold; white-space: nowrap; }
.wc-win .wc-c-status  { color: #62d585; }
.wc-lose .wc-c-status { color: #ff8b8b; }
.wc-c-pay { color: var(--gold); font-weight: bold; white-space: nowrap; }
.wc-c-note { color: #9a9aa2; font-size: 12px; }
.wc-empty { color: #777; text-align: center; padding: 16px 8px; }
.wc-del { background: transparent; border: none; color: #c66; cursor: pointer; font-size: 14px; }
.wc-del:hover { color: #f88; }
.wc-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.wc-total { background: #141416; border: 1px solid #2a2a2e; border-radius: 8px; padding: 10px 12px; }
.wc-tlabel { display: block; color: #9a9aa2; font-size: 11px; margin-bottom: 4px; }
.wc-tval { color: var(--gold); font-weight: bold; font-size: 15px; }
/* ── Kartu Bayaran (rate card) ── */
.rc-bar { display: flex; gap: 12px; align-items: end; margin-bottom: 12px; }
.rc-print { background: var(--gold); color: #3a2800; border: none; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: bold; cursor: pointer; height: 34px; }
.rc-print:hover { background: #ffd35a; }
.rc-card { background: #0e0e10; border: 1px solid #2a2a2e; border-radius: 10px; padding: 14px 16px; }
.rc-cardhead { border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 12px; }
.rc-title { color: var(--gold); font-size: 16px; font-weight: bold; letter-spacing: .5px; }
.rc-block { margin: 14px 0; }
.rc-h { color: #e6e6ea; font-size: 13px; margin-bottom: 6px; border-left: 3px solid var(--gold); padding-left: 8px; }
.rc-tblwrap { overflow-x: auto; }
.rc-tbl { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 480px; }
.rc-tbl th { background: #23232a; color: #cfcfd6; text-align: left; padding: 6px 8px; font-weight: normal; white-space: nowrap; }
.rc-tbl td { padding: 6px 8px; border-bottom: 1px solid #1c1c20; color: #ddd; white-space: nowrap; }
.rc-tbl .rc-pos { color: #fff; font-weight: bold; }
.rc-sub, .rc-sub2 { color: #9a9aa2; font-size: 11px; }
.rc-ket { color: #8b8b93; font-size: 11px; }
.rc-note { color: #8b8b93; font-size: 11px; margin-top: 6px; font-style: italic; }
@media print {
  body * { visibility: hidden; }
  #rateCardTool, #rateCardTool * { visibility: visible; }
  #rateCardTool { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; }
  #rateCardTool summary, .rc-bar { display: none; }
  .rc-card { background: #fff; border: 1px solid #999; color: #000; }
  .rc-title, .rc-h { color: #000; }
  .rc-tbl th { background: #eee; color: #000; }
  .rc-tbl td, .rc-tbl .rc-pos, .rc-sub, .rc-sub2, .rc-ket, .rc-note { color: #000; }
}
.wc-diskon { display: inline-flex; align-items: center; gap: 6px; height: 32px; color: #eee; font-size: 14px; white-space: nowrap; }
.wc-diskon input { width: 16px; height: 16px; accent-color: var(--gold); }
.wc-actions { display: flex; gap: 8px; margin-top: 12px; }
.wc-clear { background: #333; color: #fff; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; font-weight: bold; }
@media (max-width: 760px) { .wc-totals { grid-template-columns: 1fr 1fr; } .wc-input { min-width: 80px; } }

/* ══════════════════════════════════════════════════════════════════════════
   POLISH v2 — penghalusan visual + responsif mobile (menimpa nilai lama;
   tidak mengubah warna mode/tema togel, hanya merapikan & menyamankan sentuh).
   ══════════════════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: radial-gradient(1400px 600px at 50% -200px, #14100a, #000 60%) fixed, var(--bg); }
.wrap { padding: 14px 18px 40px; }

/* Transisi halus di semua elemen interaktif */
.mode-btn, .chip, .tab-btn, .submit-btn, .wap-btn, .wc-add, .rc-print, .cfg-apply, .cfg-reset,
.hist-clear, .wc-clear, .gen-btn, button, select, input { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease; }
button:active, .mode-btn:active, .chip:active, .tab-btn:active, .submit-btn:active { transform: translateY(1px); }

/* Header lebih rapi + garis emas tipis */
.site-head { border-bottom: 1px solid rgba(240,177,42,.18); }
.site-head h1 { text-shadow: 0 1px 12px rgba(240,177,42,.25); }

/* Fokus jelas & konsisten (aksesibilitas) */
input:focus-visible, select:focus-visible, textarea:focus-visible,
.digit-box:focus, .nominal-input:focus, .free-input:focus, .sel-input:focus, .wc-input:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,177,42,.15); }
button:focus-visible, .mode-btn:focus-visible, .chip:focus-visible, .tab-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Mode buttons: hover subtil + state aktif lebih tegas */
.mode-btn { letter-spacing: .3px; }
.mode-btn:not(.active):hover { background: #141414; }
.mode-btn.active { box-shadow: 0 2px 10px rgba(0,0,0,.4); }

/* Chip & tab: hover + aktif lebih hidup */
.chip:hover:not(.active), .tab-btn:hover:not(.active) { border-color: var(--gold); color: #fff; }
.chip.active, .tab-btn.active { box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* Kartu / panel: sudut + bayangan halus biar “ngangkat” */
details.tool { box-shadow: 0 2px 14px rgba(0,0,0,.35); overflow: hidden; }
details.tool summary { list-style: none; user-select: none; }
details.tool summary::-webkit-details-marker { display: none; }
details.tool summary::after { content: "▸"; float: right; color: var(--gold); transition: transform .18s ease; }
details.tool[open] summary::after { transform: rotate(90deg); }
details.tool[open] summary { border-bottom: 1px solid #222; }
.wc-card, .rc-card, .box { box-shadow: 0 2px 14px rgba(0,0,0,.3); }

/* Submit button: gradient emas lembut */
.submit-btn { background: linear-gradient(180deg, #ffce4d, #f2ab1f); box-shadow: 0 4px 16px rgba(240,177,42,.28); }
.submit-btn:hover { background: linear-gradient(180deg, #ffd968, #ffbe33); }

/* Tabel: sudut membulat + header lengket saat scroll panjang */
table.ref, .wc-table, .rc-tbl, table.bet { border-radius: 8px; overflow: hidden; }
.wc-table-wrap, .rc-tblwrap { border-radius: 8px; }

/* ── Mobile (≤ 600px): target sentuh besar, font input ≥16px (anti zoom iOS) ── */
@media (max-width: 600px) {
  html, body { font-size: 15px; }
  .wrap { padding: 10px 12px 40px; }
  .site-head { padding: 14px 8px 10px; }
  .site-head h1 { font-size: 19px; letter-spacing: .5px; }
  .wap-btn { display: none; }                       /* WAP toggle kurang relevan di HP */
  /* Tombol/kontrol: minimal ~44px tinggi, mudah disentuh */
  .mode-btn, .tab-btn { flex: 1 1 auto; min-height: 42px; padding: 10px 12px; font-size: 13px; text-align: center; }
  .chip { min-height: 40px; padding: 10px 14px; font-size: 13px; }
  /* Tombol aksi sekunder: naikkan ke ~42px biar nyaman disentuh di HP */
  .wc-add, .wc-clear, .rc-print, .cfg-apply, .cfg-reset, .hist-clear {
    min-height: 42px; padding: 10px 14px; font-size: 13px; }
  .mode-row, .chip-row, .tab-row { gap: 6px; }
  /* Input: font 16px supaya iOS tak auto-zoom saat fokus */
  input[type="text"], input[type="number"], select, textarea, .digit-box, .nominal-input, .free-input, .sel-input, .wc-input {
    font-size: 16px; }
  /* Kotak angka & tabel taruhan: kompak + TAK wrap (tabel scroll-x sendiri) */
  .digit-box { width: 32px; height: 38px; margin-right: 4px; text-align: center; }
  .nominal-input { width: 96px; max-width: none; height: 38px; }
  table.bet th, table.bet td { padding: 8px 7px; font-size: 13px; }
  table.bet .no-col { width: 34px; }
  /* Dropdown di dalam tabel (Posisi dll) dibatasi lebarnya biar tabel tak melebar */
  table.bet select { max-width: 96px; height: 38px; }
  .sel-input { min-height: 40px; }
  .pasaran-select { width: 100%; min-width: 0; height: 44px; }
  .info-box { display: block; min-width: 0; width: 100%; }
  .submit-btn { width: 100%; padding: 14px; font-size: 15px; }
  /* Panel & builder: stack vertikal rapi */
  .wc-result-row, .wc-builder, .rc-bar, .calc-row, .gen-row { flex-direction: column; align-items: stretch; }
  .wc-field, .wc-fields, .wc-fields > * { width: 100%; }
  .wc-input, .wc-prize { width: 100% !important; }
  .wc-add, .rc-print { width: 100%; }
  .wc-totals { grid-template-columns: 1fr 1fr; }
  .pe-grid, .pe-modes { grid-template-columns: 1fr 1fr; }
  details.tool summary { font-size: 15px; padding: 14px; }
}
/* ── Halaman Pasaran (card-list) ── */
#pasaranView { max-width: 680px; margin: 0 auto; }
.ps-back { background: none; border: 1px solid #444; color: var(--gold); border-radius: 8px;
  padding: 7px 14px; font-size: 13px; font-weight: bold; cursor: pointer; margin-bottom: 12px; }
.ps-back:hover { border-color: var(--gold); }
.ps-head { text-align: center; margin: 4px 0 16px; }
.ps-h { color: var(--gold); font-size: 22px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.ps-h::after { content: ""; display: block; width: 70px; height: 3px; margin: 8px auto 14px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 2px; }
.ps-search-wrap { position: relative; max-width: 420px; margin: 0 auto; }
.ps-search-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: .65; font-size: 14px; pointer-events: none; }
.ps-search { width: 100%; background: #0d0d0d; color: #fff; border: 1px solid var(--gold); border-radius: 999px;
  padding: 11px 16px 11px 40px; font-size: 15px; }
.ps-search::placeholder { color: #7a7a7a; }
.ps-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(240,177,42,.2); }
.ps-count { color: #888; font-size: 12px; margin-top: 8px; letter-spacing: .3px; }
.ps-list { display: flex; flex-direction: column; }
.ps-card { display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid #222; }
.ps-card:last-child { border-bottom: none; }
.ps-card-main { flex: 1 1 auto; min-width: 0; }
.ps-card-name { color: var(--gold); font-size: 17px; font-weight: 800; letter-spacing: .3px; }
.ps-card-freq { color: #ddd; font-size: 13px; margin: 2px 0; }
.ps-card-sched { color: #fff; font-size: 14px; font-weight: bold; margin: 4px 0; }
.ps-card-date { color: #888; font-size: 12px; margin-bottom: 10px; }
.ps-card-play { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #ffce4d, #f2ab1f);
  color: #3a2800; border: none; border-radius: 999px; padding: 9px 22px; font-size: 14px; font-weight: bold;
  letter-spacing: .5px; box-shadow: 0 3px 10px rgba(240,177,42,.3); cursor: pointer; }
.ps-card-play:hover { filter: brightness(1.05); }
.ps-card-play:active { transform: translateY(1px); }
.ps-card-result { display: flex; gap: 7px; flex-shrink: 0; }
.ps-rbox { width: 38px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold); border-radius: 8px; background: #000; color: var(--gold); font-size: 18px; font-weight: bold; }
.ps-empty { color: #999; text-align: center; padding: 44px 12px; font-size: 14px; }
@media (max-width: 600px) {
  .ps-card { gap: 10px; padding: 14px 2px; }
  .ps-card-name { font-size: 15px; }
  .ps-card-result { gap: 5px; }
  .ps-rbox { width: 30px; height: 36px; font-size: 15px; border-radius: 6px; }
  .ps-card-play { padding: 9px 18px; }
}

/* Toggle bahasa ID/EN (melayang kanan-atas) */
#langToggle { position: fixed; top: 10px; right: 10px; z-index: 999; display: flex;
  border: 1px solid var(--gold, #d4af37); border-radius: 999px; overflow: hidden;
  background: rgba(20,20,26,.85); backdrop-filter: blur(4px); }
#langToggle button { background: transparent; color: #ccc; border: 0; padding: 5px 12px;
  font-size: 12px; font-weight: bold; cursor: pointer; letter-spacing: .5px; }
#langToggle button.on { background: var(--gold, #d4af37); color: #1a1a1a; }
@media (max-width: 600px) {
  #langToggle button { padding: 7px 12px; min-height: 34px; }
  /* HP: toggle bahasa nempel di pojok kanan-atas (tab sudut), hanya di halaman Pasaran */
  #langToggle { top: 0; right: 0; border-radius: 0 0 0 12px; border-top: none; border-right: none;
    background: rgba(12,12,16,.92); box-shadow: 0 2px 10px rgba(0,0,0,.45); }
  body.view-bet #langToggle { display: none; }   /* sembunyikan di papan taruhan */
}

/* Kelola Daftar Pasaran (payout-editor) */
.payout-copy-panel { border-color:rgba(240,192,64,.45); }
.payout-copy-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }
.payout-copy-heading h3 { margin:0 0 5px; }
.payout-copy-source { margin-bottom:10px;font-size:14px; }
.payout-copy-warning { padding:10px 12px;border:1px solid #8b6d25;border-radius:6px;background:rgba(240,192,64,.1);color:#f5d982;line-height:1.45; }
.payout-copy-panel h4 { margin:14px 0 7px;color:#ddd; }
.payout-copy-peers { display:flex;flex-wrap:wrap;gap:6px; }
.payout-copy-peers span,.payout-copy-status { padding:2px 7px;border:1px solid #444;border-radius:999px;background:#19191f;color:#ccc;font-size:12px; }
.payout-copy-tree { display:grid;gap:8px; }
.payout-copy-market { padding:10px 12px;border:1px solid #36363f;border-radius:6px;background:#15151a; }
.payout-copy-market ul { margin:7px 0 0;padding-left:20px;color:#bbb;font-size:12px;line-height:1.6; }
.payout-copy-market code,.payout-copy-results code { overflow-wrap:anywhere; }
.payout-copy-empty { padding:12px; }
.payout-copy-actions { margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.payout-copy-result-head { display:flex;justify-content:space-between;gap:12px;margin:12px 0 5px; }
.payout-copy-table-wrap { overflow-x:auto;margin-top:10px; }
.payout-copy-results { width:100%;font-size:12px; }
.payout-copy-results th { padding:8px;text-align:left;color:#aaa;border-bottom:1px solid #444; }
.payout-copy-result-status { display:inline-block;padding:2px 7px;border-radius:999px;font-weight:700; }
.payout-copy-result-status.is-succeeded { background:rgba(75,190,110,.16);color:#7ee49b; }
.payout-copy-result-status.is-failed { background:rgba(225,80,80,.16);color:#ff9292; }
.payout-copy-result-status.is-skipped { background:rgba(240,192,64,.16);color:#f5d982; }
.payout-copy-error { margin-top:4px;color:#ff9292;max-width:420px; }
@media (max-width:600px) {
  .payout-copy-heading,.payout-copy-result-head { flex-direction:column; }
  .payout-copy-heading .cfg-reset { align-self:flex-start; }
}

.ps-block { padding: 8px; background: #0e0e10; }
.ps-block-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ps-block-head > h3 { color: var(--gold); font-weight: normal; margin: 0; }
.ps-open-add { margin-left: auto; }
.ps-bulk-details { flex: 1 0 100%; color: #9a9aa2; }
.ps-bulk-details > summary { cursor: pointer; width: max-content; }
.ps-bulk-board { margin-top: 8px; }
.ps-block .ps-bulk { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; flex-wrap: wrap; }
.ps-block .ps-bulk-txt { flex: 1 1 320px; min-height: 64px; font-family: inherit; font-size: 13px;
  background: #101014; color: #cde; border: 1px solid #2a2a33; border-radius: 8px; padding: 8px; }
.ps-tblwrap { max-height: 320px; overflow-y: auto; overflow-x: auto; border: 1px solid #2a2a33; border-radius: 8px; }
.ps-tbl { width: 100%; border-collapse: collapse; }
.ps-tbl th { position: sticky; top: 0; background: #171a1c; z-index: 1; white-space: nowrap; }
.ps-tbl td { vertical-align: middle; }
.ps-tbl .ps-cell { display: flex; align-items: center; min-height: 100%; box-sizing: border-box;
  background: #101014; color: #eee; border: 1px solid #1d1d25; border-radius: 6px; padding: 6px 8px; }
.ps-tbl input.ps-cell { width: 100%; font-size: 13px; }
.ps-tbl .ps-tags { gap: 6px; overflow: hidden; white-space: nowrap; }
.ps-day-tag, .ps-schedule-tag { display: inline-flex; align-items: center; flex: 0 0 auto;
  background: #2b2b30; color: #f0f0f2; border: 0; border-radius: 6px; padding: 3px 7px; font: inherit; }
.ps-tbl input.ps-schedule-tag { width: auto; max-width: 100%; height: auto; padding: 3px 7px;
  border: 0; border-radius: 6px; outline: none; background: #2b2b30; color: #f0f0f2; }
.ps-tbl input.ps-schedule-tag:focus { box-shadow: 0 0 0 1px var(--gold); }
.ps-schedule-empty::placeholder, .ps-empty-value, .ps-more { color: #85858c; }
.ps-more { flex: 0 0 auto; margin-left: auto; }
.ps-tbl .ps-ov { white-space: nowrap; color: var(--gold); font-size: 12px; }
.ps-action { text-align: right; }
.ps-tbl .ps-del { display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
  color: #ff1642; background: rgba(207,31,46,.25); border: 0; border-radius: 6px; padding: 6px; cursor: pointer; }
.ps-tbl .ps-del svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ps-tbl .ps-del:hover { color: #ff5472; background: rgba(207,31,46,.35); }
@media (max-width: 600px) { .ps-tbl input { font-size: 16px; } .ps-tblwrap { max-height: 260px; } }

/* Popup Add Market — giữ chiều rộng frame, chiều cao theo nội dung. */
.pm-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  padding: 16px; background: rgba(0,0,0,.72); }
.pm-overlay[hidden] { display: none; }
.pm-modal { position: relative; display: flex; flex-direction: column; width: 320px; max-width: 100%;
  padding: 16px; border-radius: 6px; background: #171a1c; color: #f2f2f2; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.pm-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pm-modal-head h3 { margin: 0; color: var(--gold); font-size: 20px; font-weight: 700; }
.pm-close { border: 0; background: transparent; color: #a4a4aa; font-size: 22px; line-height: 1; cursor: pointer; }
.pm-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.pm-modal .pm-field { position: relative; display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 0; color: #595959; font-size: 12px; }
.pm-field > input, .pm-field > select, .pm-token-field { width: 100%; border: 1px solid transparent; border-radius: 6px;
  background: #0d0d13; color: #f1f1f3; padding: 10px 12px; font: inherit; font-size: 14px; outline: none; }
.pm-field > input::placeholder, .pm-placeholder { color: #85858f; }
.pm-field > input:focus, .pm-field > select:focus, .pm-token-field.active { border-color: var(--gold); }
.pm-token-field.invalid { border-color: #ff4054; box-shadow: 0 0 0 1px rgba(255,64,84,.18); }
.pm-field-error { color: #ff6b72; font-size: 11px; font-weight: 500; line-height: 1.25; }
.pm-field > select { appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9a9b0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.pm-token-field { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-height: 38px; padding: 6px 12px; }
.pm-day-tags, .pm-schedule-tags { display: flex; align-items: center; gap: 5px; flex: 1 1 auto; flex-wrap: wrap; }
.pm-token { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 4px;
  padding: 3px 6px; background: #303036; color: #eee; font: inherit; cursor: pointer; }
.pm-token span { color: #a9a9ae; pointer-events: none; }
.pm-plus { margin-left: auto; padding: 0; border: 0; background: transparent; color: #a9a9b0;
  font-size: 22px; line-height: 1; cursor: pointer; }
.pm-popover { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2;
  padding: 10px; border: 1px solid rgba(240,177,42,.6); border-radius: 6px; background: #171a1c;
  box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.pm-popover[hidden] { display: none; }
.pm-day-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pm-day-option { border: 1px solid #303038; border-radius: 5px; padding: 7px 5px;
  background: #0d0d13; color: #aaa; cursor: pointer; }
.pm-day-option.selected { border-color: var(--gold); color: #fff; background: #303036; }
.pm-popover-done { width: 100%; margin-top: 10px; }
.pm-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-time-grid label { display: flex; flex-direction: column; gap: 7px; color: #77777d; }
.pm-time-grid input { width: 100%; border: 0; border-radius: 6px; padding: 10px;
  background: #0d0d13; color: #f1f1f3; font: inherit; color-scheme: dark; }
.pm-add-schedule { width: 100%; margin-top: 12px; }
.pm-submit { width: 100%; margin-top: 32px; }
.pm-add-schedule, .pm-popover-done, .pm-submit { border-radius: 6px; font-weight: 500; }
.pm-submit:disabled { background: #4a3d24; color: #111; cursor: not-allowed; opacity: .9; }

/* Error muat config (fail-loud, jangan tampilkan tarif default yang bisa salah) */
.cfg-error-box { border: 1px solid #a33; background: rgba(150,30,30,.12); border-radius: 10px;
  padding: 18px; margin: 12px 0; text-align: center; }
.cfg-error-box .cfg-error-h { color: #ff8a8a; font-weight: bold; font-size: 17px; margin-bottom: 6px; }
.cfg-error-box button { margin-top: 12px; }
.test-note.cfg-error { color: #ff8a8a; font-weight: bold; }

@media (max-width: 380px) {
  /* Layar terkecil: kotak angka paling kompak supaya 4 angka tetap 1 baris */
  .digit-box { width: 30px; height: 38px; margin-right: 3px; }
  .nominal-input { width: 90px; }
  table.bet select { max-width: 88px; }
  .wc-totals, .pe-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   POLISH v3 — penguatan identitas + kehalusan + aksesibilitas.
   ADITIF & CSS-first: hanya menimpa via urutan-sumber; TIDAK menyentuh angka
   payout/diskon/pengali sama sekali (murni tampilan + interaksi + a11y).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:10px; --r-pill:999px;
  --sh-1:0 1px 3px rgba(0,0,0,.35);
  --sh-2:0 2px 12px rgba(0,0,0,.35);
  --sh-3:0 6px 20px rgba(0,0,0,.4);
  --sh-gold:0 4px 16px rgba(240,177,42,.28);
  --ring-gold:0 0 0 3px rgba(240,177,42,.18);
  --grad-gold:linear-gradient(180deg,#ffd35e 0%,#f2ab1f 60%,var(--gold-dim) 100%);
  --grad-gold-hover:linear-gradient(180deg,#ffdd73 0%,#ffbe33 100%);
  --on-gold:#3a2800;
  --panel-2:#0e0e10; --field-dark:#101014; --btn-neutral:#26262b;
  --green:#1f9d55; --muted-min:#8f9096; --muted-2:#9a9aa2;
  --pos:#6fe09a; --neg:#ff9a9a;
  color-scheme: dark;
}

/* Scrollbar + seleksi teks bertema hitam+emas */
* { scrollbar-color: var(--gold-dim) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#333; border-radius:var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background:var(--gold-dim); }
::selection { background:rgba(240,177,42,.35); color:#fff; }

/* CTA emas primer — satu sistem (submit, PLAY NOW, add, print, apply, generate) */
.submit-btn, .ps-card-play, .chip.active, .wc-add, .rc-print, .cfg-apply, .gen-btn {
  background:var(--grad-gold); color:var(--on-gold); box-shadow:var(--sh-gold);
}
.submit-btn:hover, .ps-card-play:hover, .wc-add:hover, .rc-print:hover, .cfg-apply:hover, .gen-btn:hover {
  background:var(--grad-gold-hover); filter:brightness(1.02);
}
.submit-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(240,177,42,.36); }
.wc-add:active, .rc-print:active, .cfg-apply:active, .gen-btn:active { transform:translateY(1px); }

/* Tombol sekunder / netral — satu kulit dengan garis tipis + hover emas */
.wc-clear, .cfg-reset, .hist-clear, .modal .close {
  background:var(--btn-neutral); border:1px solid #3a3a42; color:#e8e8ee;
}
.wc-clear:hover, .cfg-reset:hover, .hist-clear:hover, .modal .close:hover {
  background:#303038; border-color:var(--gold); color:#fff;
}
.wc-clear:active, .cfg-reset:active, .hist-clear:active { transform:translateY(1px); }

/* Lantai kontras teks redup (WCAG AA) */
.test-note, .hist-empty, .wc-empty, .ps-empty, .muted { color:var(--muted-min); }
.ps-search::placeholder { color:var(--muted-min); }

/* Header — kilau emas judul + garis emas tipis */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .site-head h1 {
    background:linear-gradient(180deg,#ffd869,#f0b12a 55%,#d99a17);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}
.site-head { box-shadow:inset 0 -1px 0 rgba(240,177,42,.12); }
.site-head h1::after { background:var(--grad-gold); }

/* Papan taruhan — hover baris + total emas + angka tabular */
table.bet tbody tr:hover td { background:rgba(240,177,42,.07); }
.total-row td { border-top:1px solid rgba(240,177,42,.25); }
.total-row .cell-total { color:var(--gold); font-size:15px; }
table.bet td, .cell-total { font-variant-numeric:tabular-nums; }

/* Cek Hasil — aksen menang/kalah + badge status + kartu total berel emas */
.wc-table tbody tr.wc-win td:first-child { border-left:3px solid #2e9c57; }
.wc-table tbody tr.wc-lose td:first-child { border-left:3px solid #c0454b; }
.wc-table tbody tr.wc-win:hover { background:#143a1e; }
.wc-table tbody tr.wc-lose:hover { background:#351619; }
.wc-win .wc-c-status, .wc-lose .wc-c-status {
  display:inline-block; padding:2px 8px; border-radius:var(--r-pill);
  font-size:11px; letter-spacing:.4px;
}
.wc-win .wc-c-status { background:rgba(46,156,87,.18); color:var(--pos); }
.wc-lose .wc-c-status { background:rgba(192,69,75,.18); color:var(--neg); }
.wc-total { background:linear-gradient(180deg,#17171a,#121214); border:1px solid #2f2f36; position:relative; overflow:hidden; }
.wc-total::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--gold),var(--gold-dim)); opacity:.55; }
.wc-c-nom, .wc-c-pay, .wc-tval, .rc-tbl td { font-variant-numeric:tabular-nums; }

/* Kepala tabel data (cek hasil / kartu bayaran / referensi) — satu keluarga */
.wc-table th, .rc-tbl th, table.ref th {
  text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid rgba(240,177,42,.25);
}

/* Halaman Pasaran — kartu terangkat + hover lift + kotak hasil bergaya LED */
.ps-list { gap:12px; padding:2px; }
.ps-card {
  background:linear-gradient(180deg,#141414,#0c0c0c);
  border:1px solid #262626; border-radius:14px; padding:16px;
  box-shadow:var(--sh-2); position:relative;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ps-card:last-child { border-bottom:1px solid #262626; }
.ps-card:hover, .ps-card:focus-within {
  transform:translateY(-3px); border-color:rgba(240,177,42,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(240,177,42,.14), 0 8px 30px rgba(240,177,42,.10);
}
.ps-card-name { text-shadow:0 0 14px rgba(240,177,42,.22); line-height:1.2; }
.ps-card-freq { margin:3px 0 0; } .ps-card-sched { margin:5px 0 2px; }
.ps-card-date { margin-bottom:12px; letter-spacing:.2px; }
.ps-rbox {
  background:linear-gradient(180deg,#151210,#000);
  box-shadow:inset 0 1px 0 rgba(240,177,42,.15), inset 0 -6px 12px rgba(0,0,0,.6);
  color:rgba(240,177,42,.55); font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px rgba(240,177,42,.22);
}
.ps-search-wrap:focus-within .ps-search-ic { opacity:1; }
.ps-search:focus { border-color:var(--gold); background:#111; box-shadow:var(--ring-gold), 0 4px 18px rgba(240,177,42,.12); }
@media (max-width:600px) { .ps-card { padding:14px; border-radius:12px; } }

/* Player market landing — tabs + compact market grid. */
body.view-pasaran:not(.wap) .wrap { max-width:1440px; padding-left:12px; padding-right:12px; }
#pasaranView { width:100%; max-width:none; margin:0 auto; }
.ps-tabs {
  display:flex; align-items:flex-end; justify-content:center; gap:6px;
  border-bottom:1px solid rgba(240,177,42,.35); margin:0 0 16px;
}
.ps-tab {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; gap:5px;
  min-height:40px; margin-bottom:-1px; padding:8px 12px;
  border:1px solid #303038; border-bottom-color:rgba(240,177,42,.35); border-radius:8px 8px 0 0;
  background:#111116; color:#e4e4e6; font-size:14px; font-weight:400; white-space:nowrap; cursor:pointer;
}
.ps-tab:hover { border-color:#55515a; color:#fff; }
.ps-tab.active {
  border-color:var(--gold); background:linear-gradient(180deg,#ffd05a,#e9a51f);
  color:#111; font-weight:700; box-shadow:0 2px 10px rgba(240,177,42,.18);
}
.ps-tab-panel { min-height:240px; }
.ps-head { margin:0 0 20px; text-align:center; }
.ps-search-wrap { width:min(100%, 480px); max-width:none; }
.ps-search { height:42px; padding:8px 16px 8px 42px; background:#101012; border-color:rgba(240,177,42,.72); font-size:14px; }
.ps-count { margin-top:8px; }
.ps-list {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; padding:2px 0;
}
.ps-card {
  display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:0; min-height:205px;
  padding:18px; overflow:hidden; border:1px solid #272727; border-radius:12px;
  font-weight:500;
  background:
    linear-gradient(112deg,transparent 0 53%,rgba(240,177,42,.055) 71%,rgba(240,177,42,.12) 100%),
    linear-gradient(180deg,#171717,#101010);
}
.ps-card.ps-card-readonly { min-height:163px; }
.ps-card:last-child { border-bottom:1px solid #272727; }
.ps-card-name {
  min-width:0; overflow:hidden; color:var(--gold); font-size:17px; font-weight:800;
  line-height:1.2; letter-spacing:.1px; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap;
}
.ps-card-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ps-card-stat {
  min-width:0; min-height:46px; padding:6px 7px; border-radius:6px;
  background:rgba(255,255,255,.045); color:#eee;
}
.ps-card-stat span {
  display:block; margin-bottom:3px; overflow:hidden; color:#929292; font-size:11px; font-weight:500;
  line-height:1; text-overflow:ellipsis; white-space:nowrap;
}
.ps-card-stat strong { display:block; overflow:hidden; font-size:14px; font-weight:500; letter-spacing:.8px; text-overflow:ellipsis; white-space:nowrap; }
.ps-card-stat-next { text-align:right; }
.ps-card-result { display:flex; width:100%; gap:1px; }
.ps-rbox {
  flex:1 1 0; width:auto; min-width:0; height:36px; border:0; border-radius:0;
  background:rgba(94,66,14,.42); color:var(--gold); font-size:20px; font-weight:500;
  box-shadow:none; text-shadow:none;
}
.ps-rbox:first-child { border-radius:6px 0 0 6px; }
.ps-rbox:last-child { border-radius:0 6px 6px 0; }
.ps-rbox:only-child { border-radius:6px; }
.ps-card-play {
  display:flex; width:100%; height:34px; min-height:34px; margin-top:auto; padding:7px 14px;
  flex:0 0 34px; justify-content:center; font-size:16px; font-weight:500; line-height:1; white-space:nowrap; box-shadow:none;
}
.ps-empty { grid-column:1 / -1; }
.ps-history-list { max-width:960px; margin:0 auto; overflow:hidden; border:1px solid #28282e; border-radius:10px; }
.ps-history-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 16px; background:#111113; border-bottom:1px solid #252529; }
.ps-history-row:nth-child(even) { background:#18181b; }
.ps-history-row:last-child { border-bottom:0; }
.ps-history-row strong, .ps-history-row span { display:block; }
.ps-history-row span { margin-top:3px; color:#85858c; font-size:12px; }
.ps-history-detail { color:#ddd; text-align:right; }
.ps-history-empty { display:flex; align-items:center; justify-content:center; min-height:220px; color:#85858c; }
.ps-history-panel {
  min-height:calc(100vh - 180px); padding:14px; border:1px solid #2c2c32; border-radius:12px;
  background:#0d0d0f;
}
.ps-history-toolbar { display:flex; align-items:center; margin-bottom:26px; }
.ps-history-market-filter {
  position:relative; display:inline-flex; align-items:center; gap:14px; width:max-content; max-width:100%; height:30px; padding:0 40px 0 10px;
  border:1px solid #303038; border-radius:7px; background:#151518; color:#85858c; cursor:pointer;
}
.ps-history-market-filter:focus-within { border-color:var(--gold); box-shadow:var(--ring-gold); }
.ps-history-market-filter::after {
  content:""; position:absolute; right:17px; top:50%; width:7px; height:7px; pointer-events:none;
  border-right:1.5px solid #a7a7ad; border-bottom:1.5px solid #a7a7ad; transform:translateY(-70%) rotate(45deg);
}
.ps-history-market-filter > span { flex:0 0 auto; font-size:13px; font-weight:500; }
.ps-history-market-filter .ps-history-market-value {
  flex:0 1 auto; min-width:0; max-width:var(--ps-history-market-size, 30ch); overflow:hidden;
  color:#f1f1f3; font-weight:600; text-overflow:ellipsis; white-space:nowrap;
}
.ps-history-market-filter select {
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; outline:0;
  appearance:none; opacity:0; cursor:pointer;
}
.ps-history-market-filter select option { background:#151518; color:#f1f1f3; }
.ps-history-table-wrap { width:100%; overflow-x:auto; border:1px solid #202126; border-radius:7px; }
.ps-history-table { width:100%; min-width:920px; border-collapse:collapse; table-layout:fixed; color:#ededf0; }
.ps-history-table th {
  height:29px; padding:5px 14px; border:0; background:#15181b; color:#777980;
  font-size:13px; font-weight:500; line-height:1; text-align:left;
}
.ps-history-table th + th { border-left:2px solid #111316; }
.ps-history-table td {
  height:66px; padding:10px 14px; border:0; font-size:15px; font-weight:500; vertical-align:middle;
}
.ps-history-table tbody tr:nth-child(odd) { background:#0d0d0f; }
.ps-history-table tbody tr:nth-child(even) { background:#1a1a1c; }
.ps-transaction-table th:nth-child(1) { width:5%; }
.ps-transaction-table th:nth-child(2) { width:10%; }
.ps-transaction-table th:nth-child(3) { width:17%; }
.ps-transaction-table th:nth-child(4) { width:19%; }
.ps-transaction-table th:nth-child(5) { width:13%; }
.ps-transaction-table th:nth-child(6) { width:14%; }
.ps-transaction-table th:nth-child(7), .ps-transaction-table th:nth-child(8) { width:11%; }
.ps-number-table th:nth-child(1) { width:5%; }
.ps-number-table th:nth-child(2) { width:14%; }
.ps-number-table th:nth-child(3) { width:29%; }
.ps-number-table th:nth-child(4) { width:23%; }
.ps-number-table th:nth-child(5) { width:29%; }
.ps-history-session {
  display:inline-flex; align-items:center; min-height:27px; padding:3px 7px; border-radius:6px;
  background:#27272d; color:#efeff1; white-space:nowrap;
}
.ps-history-numbers { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ps-history-numbers span {
  display:inline-flex; align-items:center; justify-content:center; min-width:68px; min-height:28px; padding:3px 10px;
  border:1px solid #53535a; border-radius:6px; background:#29292c; color:#f4f4f5; font-size:13px; font-weight:600;
}
@media (max-width:1150px) { .ps-list { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; } }
@media (max-width:820px) {
  .ps-tabs { margin-bottom:14px; overflow-x:auto; justify-content:flex-start; }
  .ps-tab { flex:0 0 auto; min-height:38px; padding:7px 10px; font-size:13px; }
  .ps-list { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
}
@media (max-width:560px) {
  .ps-list { grid-template-columns:1fr; }
  .ps-card { min-height:190px; padding:14px; }
  .ps-history-panel { min-height:500px; padding:10px; }
  .ps-history-market-filter { max-width:100%; }
  .ps-history-row { align-items:flex-start; flex-direction:column; gap:8px; }
  .ps-history-detail { text-align:left; }
}

/* State UI: disabled / loading / skeleton / empty / error + fokus summary */
button:disabled, button[disabled] { opacity:.55; cursor:not-allowed; box-shadow:none; filter:grayscale(.15); transform:none; }
@keyframes bo-spin { to { transform:rotate(360deg); } }
.is-loading { position:relative; color:transparent !important; pointer-events:none; }
.is-loading::after { content:""; position:absolute; top:50%; left:50%; width:15px; height:15px; margin:-8px 0 0 -8px;
  border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:bo-spin .6s linear infinite; }
@keyframes bo-shimmer { 0% { background-position:100% 0; } 100% { background-position:0 0; } }
.bo-skel { display:grid; gap:8px; }
.bo-skel > div { height:34px; border-radius:8px; background:linear-gradient(90deg,#141418 25%,#1c1c22 37%,#141418 63%); background-size:400% 100%; animation:bo-shimmer 1.2s ease infinite; }
.bo-empty, .ps-empty, .wc-empty, .modal-empty { text-align:center; }
.bo-empty { color:var(--muted-2); padding:28px 12px; font-size:13px; border:1px dashed #2a2a33; border-radius:10px; background:var(--panel-2); }
.bo-empty .bo-empty-ic, .ps-empty-ic { display:block; font-size:26px; margin-bottom:8px; opacity:.7; }
.wc-empty::before { content:"🎯"; display:block; font-size:26px; margin-bottom:8px; opacity:.7; }
.ps-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:56px 16px; }
.modal-empty { color:var(--muted-2); padding:22px 12px; }
.bo-error { color:#ff8a8a; background:rgba(150,30,30,.12); border:1px solid #a33; border-radius:10px; padding:12px 14px; font-size:13px; }
details.tool summary:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; border-radius:8px; }
.calc-out { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.wc-del { width:26px; height:26px; line-height:1; border-radius:var(--r-pill); display:inline-flex; align-items:center; justify-content:center; }
.wc-del:hover { background:rgba(192,69,75,.16); }

/* Login jadi kartu masuk sungguhan + kerapian field form (desktop) */
.login-card { padding:26px 26px 22px; border-radius:14px;
  background:radial-gradient(600px 200px at 50% -40px, rgba(240,177,42,.08), transparent), var(--panel-2);
  box-shadow:0 10px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(240,177,42,.15); }
.login-card h3 { text-align:center; font-size:18px; letter-spacing:.5px; }
.login-card h3::after { content:""; display:block; width:52px; height:3px; margin:8px auto 4px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); border-radius:2px; }
.calc-row .field select.sel-input { min-width:0; width:100%; }
@media (min-width:601px) {
  .calc-row .field { flex:1 1 200px; min-width:160px; }
  .calc-row > .gen-btn { align-self:flex-end; }
}

/* Motion — modal pop, tukar view, stagger kartu, reveal tool */
@keyframes ovFade { from { opacity:0; } to { opacity:1; } }
@keyframes modalPop { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
.modal-overlay.show { animation:ovFade .16s ease; }
.modal-overlay.show .modal { animation:modalPop .2s cubic-bezier(.2,.7,.3,1); }
@keyframes psViewIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
#pasaranView, #betView { animation:psViewIn .26s ease both; }
@keyframes psCardIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.ps-list.ps-anim > .ps-card { animation:psCardIn .34s ease both; animation-delay:calc(min(var(--i,0),12) * 45ms); }
@keyframes toolReveal { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
details.tool[open] > .tool-body { animation:toolReveal .22s ease; }

/* ── Tab back office (1 divisi per tab, tak menumpuk di 1 halaman) ── */
.bo-tabs { display:flex; gap:6px; flex-wrap:wrap; max-width:1120px; margin:16px auto 0; padding:0 16px; }
.bo-tab { background:#141418; color:#c9c9d2; border:1px solid rgba(240,177,42,.28); border-bottom:none;
  border-radius:10px 10px 0 0; padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer;
  transition:background .15s,color .15s; }
.bo-tab:hover:not(:disabled) { color:#fff; border-color:rgba(240,177,42,.55); }
.bo-tab.active { background:linear-gradient(180deg,#ffce4d,#f2ab1f); color:#3a2800; border-color:#f2ab1f; }
.bo-tab:disabled { opacity:.4; cursor:not-allowed; }
.bo-tabs + .wrap { border-top:1px solid rgba(240,177,42,.28); padding-top:18px; }
@media (max-width:600px){ .bo-tabs{ gap:4px; padding:0 8px; } .bo-tab{ padding:9px 11px; font-size:13px; flex:1 1 auto; text-align:center; } }

/* ── Panel operasional back-office (keluaran/settlement/member/integrasi) ── */
.ops-result-tabs { display:flex; align-items:flex-end; gap:8px; overflow-x:auto; border-bottom:1px solid var(--gold); }
.ops-result-tab { flex:0 0 auto; border:1px solid #2e2e36; border-bottom:0; border-radius:8px 8px 0 0;
  padding:10px 14px; background:#101015; color:#e7e7eb; font:inherit; cursor:pointer; white-space:nowrap; }
.ops-result-tab:hover { border-color:rgba(240,177,42,.55); color:#fff; }
.ops-result-tab.active { background:linear-gradient(180deg,#ffce4d,#f2ab1f); border-color:var(--gold);
  color:#17130a; font-weight:700; }
.ops-tab-shell { border:1px solid var(--gold); border-top:0; border-radius:0 8px 8px 8px; overflow:hidden; }
.ops-tab-panel[hidden] { display:none; }
.ops-tab-panel > .ops-sec { margin:0; border:0; border-radius:0; }
.ops-tab-panel > .ops-sec + .ops-sec { border-top:1px solid #2e2e2e; }
.ops-need-sec, .ops-today-sec { padding:12px; }
.ops-need-sec .calc-out, .ops-today-sec .calc-out { margin-top:0; }
.ops-need-sec .ops-dash-h, .ops-today-sec .ops-dash-h { display:none; }
.ops-need-table-wrap { margin-top:0; padding:10px; border:1px solid #28282e; border-radius:8px; background:#101012; }
.ops-need-table { min-width:860px; font-size:14px; }
.ops-need-table th { padding:6px 12px; border:0; background:#15181b; box-shadow:none; color:#74747c;
  font-size:12px; font-weight:400; letter-spacing:normal; text-transform:none; }
.ops-need-table th:first-child { border-radius:6px 0 0 0; }
.ops-need-table th:last-child { border-radius:0 6px 0 0; }
.ops-need-table td { height:56px; box-sizing:border-box; padding:8px 12px; border-bottom:0; color:#ededf0; }
.ops-need-sec .wc-table.ops-need-table tbody tr:nth-child(odd) { background:#0d0d0f; }
.ops-need-sec .wc-table.ops-need-table tbody tr:nth-child(even) { background:#1b1b1d; }
.ops-session-tag { display:inline-block; padding:3px 7px; border-radius:5px; background:#29292f; white-space:nowrap; }
.ops-need-table .ops-fill { display:block; min-width:130px; margin-left:auto; padding:7px 16px; font-size:12px; white-space:nowrap; }
.ops-today-table-wrap { margin-top:0; padding:10px; border:1px solid #28282e; border-radius:8px; background:#101012; }
.ops-today-table { min-width:1000px; font-size:14px; }
.ops-today-table th { padding:6px 12px; border:0; background:#15181b; box-shadow:none; color:#74747c;
  font-size:12px; font-weight:400; letter-spacing:normal; text-transform:none; }
.ops-today-table th:first-child { border-radius:6px 0 0 0; }
.ops-today-table th:last-child { border-radius:0 6px 0 0; }
.ops-today-table td { height:56px; box-sizing:border-box; padding:8px 12px; border-bottom:0; color:#ededf0; }
.ops-today-sec .wc-table.ops-today-table tbody tr:nth-child(odd) { background:#0d0d0f; }
.ops-today-sec .wc-table.ops-today-table tbody tr:nth-child(even) { background:#1b1b1d; }
.ops-today-table .ops-fill { min-width:130px; padding:7px 16px; font-size:12px; white-space:nowrap; }
.ops-results-cell { white-space:nowrap; }
.ops-result-tag { display:inline-block; min-width:50px; margin-right:6px; padding:4px 8px; border:1px solid #505056;
  border-radius:5px; background:#28282b; color:#f2f2f4; font-weight:600; line-height:1; text-align:center; }
.ops-result-draft { display:inline-flex; align-items:center; gap:6px; }
.ops-result-draft .ops-result-tag { margin-right:0; }
.ops-result-draft-label { padding:3px 7px; border:1px solid rgba(240,177,42,.5); border-radius:10px;
  color:var(--gold); font-size:11px; font-weight:600; line-height:1; }
.ops-history-sec { padding:14px 16px 16px; }
.ops-history-sec h3 { margin:0 0 10px; }
.ops-history-sec .ops-actions { margin:0 0 18px; }
.ops-history-filter { position:relative; width:max-content; margin-bottom:18px; }
.ops-history-filter-toggle { display:flex; align-items:center; gap:8px; width:auto; min-width:0; height:22px; max-height:22px;
  box-sizing:border-box; padding:4px 8px; border:1px solid #303038; border-radius:7px; background:#18181c;
  color:#717179; font:inherit; cursor:pointer; }
.ops-history-filter-toggle span { font-size:12px; font-weight:400; line-height:12px; white-space:nowrap; }
.ops-history-filter-toggle strong { color:#ededf0; font-size:12px; font-weight:500; line-height:12px; white-space:nowrap; }
.ops-history-filter-toggle i { width:5px; height:5px; margin-left:auto; border-right:1.5px solid #8d8d95;
  border-bottom:1.5px solid #8d8d95; transform:translateY(-2px) rotate(45deg); }
.ops-history-filter-toggle[aria-expanded="true"] { border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 2px rgba(240,177,42,.12); }
.ops-history-filter-toggle.has-value { border-color:#EBAE17; }
.ops-history-filter-toggle.has-value span { color:#8D680E; }
.ops-history-filter-toggle.has-value strong { color:#EBAE17; }
.ops-history-filter-toggle.has-value i { border-color:#EBAE17; }
.ops-history-date-panel { position:absolute; top:28px; left:0; z-index:20; display:grid; grid-template-columns:1fr 1fr;
  gap:12px; width:300px; box-sizing:border-box; padding:12px; border:1px solid #34343b; border-radius:8px;
  background:#17191c; box-shadow:0 12px 30px rgba(0,0,0,.55); }
.ops-history-date-panel[hidden] { display:none; }
.ops-history-date-panel label { display:flex; flex-direction:column; gap:6px; margin:0; }
.ops-history-date-panel label span { color:#77777f; font-size:12px; }
.ops-history-date-panel input { width:100%; height:36px; box-sizing:border-box; padding:0 8px; border:1px solid #303038;
  border-radius:6px; background:#0d0c12; color:#ededf0; font-size:13px; color-scheme:dark; }
.ops-history-date-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:8px; }
.ops-history-date-actions button { min-width:76px; padding:7px 14px; font-size:12px; }
.ops-history-sec .calc-out { margin-top:0; }
.ops-history-sec #opsResultsOut > .bo-empty { display:flex; align-items:center; justify-content:center; min-height:100px; box-sizing:border-box; }
.ops-history-table-wrap { margin-top:0; border:1px solid #25252b; border-radius:8px; background:#0d0d0f; }
.ops-history-table { min-width:980px; font-size:14px; }
.ops-history-table th { padding:10px 12px; border:0; background:#4a4a4c; box-shadow:none; color:#f0f0f2;
  font-size:12px; font-weight:700; letter-spacing:.3px; }
.ops-history-table td { height:52px; box-sizing:border-box; padding:8px 12px; border:0; color:#ededf0; }
.ops-history-sec .wc-table.ops-history-table tbody tr:nth-child(odd) { background:#1b1b1d; }
.ops-history-sec .wc-table.ops-history-table tbody tr:nth-child(even) { background:#050506; }
.ops-history-table .ops-history-prizes { letter-spacing:1px; white-space:nowrap; }
.ops-history-table .muted { color:#8b8b94; white-space:nowrap; }
.ops-result-modal-overlay { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:12px; background:rgba(0,0,0,.78); overflow:auto; }
.ops-result-modal-overlay[hidden] { display:none; }
.ops-result-modal { width:min(460px, calc(100vw - 24px)); max-height:calc(100vh - 24px); box-sizing:border-box;
  overflow-y:auto; padding:20px 18px 18px; border-radius:10px; background:#171a1d; color:#f2f2f4;
  box-shadow:0 16px 48px rgba(0,0,0,.62); }
.ops-result-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ops-result-modal-head h2 { margin:0; color:var(--gold); font-size:20px; line-height:1.2; }
.ops-result-close { width:28px; height:28px; padding:0; border:0; background:transparent; color:#aaa;
  font-size:22px; font-weight:300; line-height:1; cursor:pointer; }
.ops-result-close:hover { color:#fff; }
.ops-result-summary { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ops-result-info { min-width:0; }
.ops-result-info-market { grid-column:1 / -1; }
.ops-result-info > span, .ops-result-prize-field > span { display:block; margin-bottom:6px; color:#595959;
  font-size:12px; font-weight:600; }
.ops-result-info strong { display:block; color:#f2f2f4; font-size:14px; font-weight:400; line-height:1.35; }
.ops-result-info #opsResultStake { font-size:14px; }
.ops-result-info strong em { display:inline-block; padding:2px 5px; border-radius:5px; background:#29292f;
  color:#f2f2f4; font-style:normal; }
.ops-result-divider { height:1px; margin:20px 0; background:#27292c; }
.ops-result-prizes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px 18px; }
.ops-result-prize-field { margin:0; min-width:0; }
.ops-result-prize-field input { width:100%; height:42px; box-sizing:border-box; padding:0 15px; border:0;
  border-radius:8px; background:#0d0c12; color:#f2f2f4; font-size:14px; outline:none; }
.ops-result-prize-field input:focus { box-shadow:0 0 0 1px var(--gold); }
.ops-result-submit { width:100%; height:48px; margin-top:32px; border:0; border-radius:9px;
  background:linear-gradient(180deg,#ffcb4c,#efa91e); color:#111; font-size:14px; cursor:pointer; }
.ops-result-submit.is-incomplete { background:#4f4226; color:#131313; }
.ops-result-modal .calc-out:empty { display:none; }
@media (max-width:520px) {
  .ops-result-summary, .ops-result-prizes { grid-template-columns:1fr; }
  .ops-result-info-market { grid-column:auto; }
}
.ops-form { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:end; margin-bottom:10px; }
/* Kembalikan layout label-di-atas (flex kolom) + tinggi kontrol seragam.
   `.box label{display:block}` & `.box input{width:100%}` (spesifisitas lebih tinggi) tadi
   bikin label jadi sebaris & input date full-width → tata letak "loncat". Override berskala .ops-form. */
.ops-form .wc-field { display:flex; flex-direction:column; gap:5px; margin:0; }
.ops-form .sel-input, .ops-form .wc-input { height:36px; box-sizing:border-box; width:auto; }
.ops-form .wc-input { min-width:150px; }
.ops-form .wc-input.wc-prize { width:96px; min-width:0; }
.ops-form .wc-flabel { white-space:nowrap; }
.ops-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.ops-note { margin:6px 0; display:flex; gap:8px; flex-wrap:wrap; }
.ops-chip { display:inline-block; background:rgba(240,177,42,.1); border:1px solid rgba(240,177,42,.3);
  color:#eee; border-radius:var(--r-pill); padding:4px 12px; font-size:12px; }
.ops-note-warn { color:#ffcf8a; font-size:12px; }
.ops-pos { color:var(--pos); font-weight:bold; }
.ops-neg { color:var(--neg); font-weight:bold; }
.ops-integ-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.ops-integ-lbl { color:#bbb; font-size:13px; }
.ops-keybox { margin:8px 0; padding:10px 12px; background:var(--panel-2); border:1px solid var(--gold); border-radius:8px; }
.ops-key { display:block; margin-top:4px; color:var(--gold); font-family:Consolas,monospace; font-size:13px; word-break:break-all; user-select:all; }
.ops-docs { margin-top:12px; }
.ops-docs pre { white-space:pre-wrap; word-break:break-word; background:var(--field-dark); border:1px solid #2a2a33;
  border-radius:8px; padding:10px; font-size:11.5px; color:#cde; font-family:Consolas,monospace; margin-top:6px; }
/* Kartu ringkasan settle: 5 kolom di desktop, ikut responsif .wc-totals di HP (kelas, bukan inline). */
.ops-totals-5 { grid-template-columns:repeat(5, 1fr); }
@media (min-width:761px) { .ops-wallet-totals { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:760px) { .ops-totals-5 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px) {
  .ops-form { flex-direction:column; align-items:stretch; }
  .ops-form .wc-field { width:100%; }
  /* inline min-width (input API key / webhook URL) jangan memaksa layar sempit melebar */
  .ops-form .wc-input, .ops-integ-row + div .wc-input, #opsIntegOut .wc-input { min-width:0 !important; max-width:100%; }
  .ops-totals-5 { grid-template-columns:1fr 1fr; }
}
@media (max-width:380px) { .ops-totals-5 { grid-template-columns:1fr; } }

/* Dashboard operasi */
.ops-dash-stats { display:grid; grid-template-columns:repeat(7, 1fr); gap:10px; margin-bottom:16px; }
.ops-dash-stat { background:linear-gradient(180deg,#141416,#101012); border:1px solid #26262c; border-radius:12px;
  padding:12px 10px; text-align:center; box-shadow:var(--sh-1); }
.ops-dash-stat .ops-dash-val { display:block; font-size:22px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; line-height:1.1; }
.ops-dash-stat .ops-dash-lbl { display:block; color:var(--muted-2); font-size:11px; margin-top:4px; }
.ops-dash-warn { border-color:rgba(207,31,46,.5); background:linear-gradient(180deg,#1c1214,#141012); }
.ops-dash-warn .ops-dash-val { color:var(--neg); }
.ops-dash-h { color:#e6e6ea; font-size:14px; margin:14px 0 8px; border-left:3px solid var(--gold); padding-left:8px; }
.ops-badge { display:inline-block; padding:2px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:bold; letter-spacing:.3px; white-space:nowrap; }
.ops-badge-open { background:rgba(240,177,42,.16); color:var(--gold); }
.ops-badge-closed { background:rgba(207,31,46,.18); color:var(--neg); }
.ops-badge-processing { background:rgba(77,145,210,.18); color:#78b9f4; }
.ops-badge-settled { background:rgba(46,156,87,.18); color:var(--pos); }
@media (max-width:900px) { .ops-dash-stats { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:560px) { .ops-dash-stats { grid-template-columns:repeat(2, 1fr); } .ops-dash-stat .ops-dash-val { font-size:19px; } }

/* Local-only TOTP enrollment: the provisioning URI is encoded into this QR and never sent to a third party. */
.twofa-setup { margin-top:14px; }
.twofa-enrollment { display:grid; justify-items:start; gap:10px; }
.twofa-step-title { color:#f2f2f4; font-weight:600; }
.twofa-qr { width:220px; max-width:100%; box-sizing:border-box; padding:10px; border:1px solid #d7d7d7;
  border-radius:8px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.twofa-qr:empty { display:none; }
.twofa-qr svg { display:block; width:100%; height:auto; }
.twofa-qr-hint { max-width:480px; font-size:12px; }
.twofa-manual { max-width:620px; }
.twofa-manual summary { color:var(--gold); cursor:pointer; font-size:13px; }
.twofa-manual > .muted { margin-top:8px; }
.twofa-manual code { display:block; margin-top:6px; padding:8px 10px; overflow-wrap:anywhere; border:1px solid #34343a;
  border-radius:6px; background:#101014; color:var(--gold); font-size:14px; letter-spacing:1px; user-select:all; }
.twofa-verify-row { margin-top:18px; }

/* Editor payout (back-office) di HP: cegah overflow horizontal halaman (pe-grid/pe-modes/pe-tbl). */
@media (max-width:600px) {
  .pe-modes { grid-template-columns:1fr; }
  .pe-grid { grid-template-columns:1fr; }
  .pe-mode { min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pe-block { overflow-x:hidden; }
  .pe-tbl { min-width:0; }
  .pe-bar { flex-wrap:wrap; }
}

/* Reduced motion — WAJIB paling akhir (netralkan semua animasi/transform) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .ps-card:hover, .ps-card:focus-within { transform:none; }
  button:active, .mode-btn:active, .chip:active, .tab-btn:active, .submit-btn:active { transform:none !important; }
}

/* ── Seamless wallet — play mode (pemain sungguhan) ─────────────────────────── */
.play-bar { position: sticky; top: 0; z-index: 20; background: var(--grad-gold); color: var(--on-gold);
  font-weight: 600; padding: 10px 16px; border-radius: var(--r-pill); margin: 0 0 12px; text-align: center; box-shadow: var(--sh-gold); }
.play-bar .pb-lbl { opacity: .85; margin-right: 4px; }
.play-bar .pb-val { font-size: 1.12em; }
.play-bar .pb-err { color: var(--neg); font-weight: 700; }
/* Pemain sungguhan: sembunyikan alat testing/verifikasi/config (biarkan papan taruhan + ref bayaran). */
body.play-mode .tool, body.play-mode .section-divider { display: none; }

/* Player betting view — selector layout from the current player design. */
body.play-mode .site-head { display:none; }
body.view-bet:not(.wap) .wrap { max-width:1920px; padding:20px 50px 50px; }
body.view-bet .play-bar:not([hidden]) {
  display:flex; align-items:center; justify-content:center; min-height:58px; margin:10px 0 18px;
  padding:10px 20px; font-size:16px;
}
body.view-bet .ps-back {
  display:inline-flex; align-items:center; width:auto; min-width:0; height:40px; min-height:40px; margin:0 0 38px;
  padding:8px 18px; font-size:14px; font-weight:500;
}
.bet-controls {
  display:grid; grid-template-columns:minmax(240px,1.35fr) minmax(210px,.9fr) minmax(24px,.8fr) minmax(230px,1fr);
  gap:16px; align-items:start; margin-bottom:0;
}
.bet-control { min-width:0; }
.bet-control-label { margin-bottom:6px; color:#595959; font-size:13px; font-weight:500; line-height:1; }
.bet-picker { position:relative; min-width:0; }
.bet-picker-source { display:none !important; }
.bet-picker-toggle {
  display:flex; align-items:center; justify-content:space-between; width:100%; height:50px; min-width:0;
  padding:7px 14px; border:1px solid #8d8d91; border-radius:8px; background:#1b1b1c; color:#fff;
  font:inherit; text-align:left; cursor:pointer;
}
.bet-market-picker .bet-picker-toggle, .bet-session-picker .bet-picker-toggle { background:#303030; }
.bet-picker-copy { display:flex; flex:1; min-width:0; flex-direction:column; justify-content:center; gap:2px; }
.bet-picker-toggle strong { overflow:hidden; color:var(--gold); font-size:14px; font-weight:500; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.bet-control-meta { overflow:hidden; color:#f0f0f2; font-size:11px; font-weight:500; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.bet-session-countdown { display:inline-flex; min-width:0; align-items:center; }
.bet-session-countdown::before {
  content:"◷"; margin-right:4px; flex:0 0 auto; font-size:14px; line-height:1; transform:translateY(-.5px);
}
.bet-picker-chevron {
  width:8px; height:8px; margin:-4px 2px 0 14px; flex:0 0 auto; border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(45deg); transition:transform .15s ease;
}
.bet-picker-toggle[aria-expanded="true"] .bet-picker-chevron { margin-top:4px; transform:rotate(225deg); }
.bet-dropdown-menu {
  position:absolute; top:calc(100% + 7px); left:0; z-index:60; display:block; width:100%; min-width:0;
  max-height:295px; padding:7px; overflow-x:hidden; overflow-y:auto; border:1px solid #858589; border-radius:8px;
  background:#14191c; box-shadow:0 12px 28px rgba(0,0,0,.68);
}
.bet-dropdown-menu[hidden] { display:none !important; }
.bet-picker-options { display:grid; gap:1px; }
.bet-picker-option {
  display:flex; width:100%; min-width:0; border:0; background:transparent; color:#f5f5f5; cursor:pointer; text-align:left;
}
.bet-picker-option:hover, .bet-picker-option:focus-visible { background:#202528; outline:0; }
.bet-picker-option.active { background:#202528; color:#fff; }
.bet-market-search-wrap {
  display:flex; align-items:center; height:31px; margin:0 0 6px; padding:0 10px; border:1px solid #9c7515; border-radius:18px;
  background:#0f1112; color:#85858a;
}
.bet-market-search-wrap span { margin-right:7px; font-size:11px; filter:grayscale(1); }
.bet-market-search-wrap input {
  width:100%; min-width:0; padding:0; border:0; outline:0; appearance:none;
  background:transparent; color:#eee; font-size:12px; box-shadow:none;
}
.bet-market-search-wrap input:focus,
.bet-market-search-wrap input:focus-visible {
  border:0; outline:0; outline-offset:0; box-shadow:none;
}
.bet-market-search-wrap:focus-within {
  border-color:var(--gold); box-shadow:0 0 0 1px rgba(240,177,42,.12);
}
.bet-market-search-wrap input::-webkit-search-cancel-button { display:none; }
.bet-market-option { min-height:49px; padding:8px; flex-direction:column; justify-content:center; gap:3px; border-radius:7px; }
.bet-market-option strong, .bet-session-option strong { color:var(--gold); font-size:14px; font-weight:500; line-height:1.1; }
.bet-market-option small, .bet-session-option small { overflow:hidden; color:#f3f3f3; font-size:11px; font-weight:500; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.bet-session-menu { max-height:220px; }
.bet-session-option { min-height:48px; padding:8px; flex-direction:column; justify-content:center; gap:3px; border-radius:7px; }
.bet-picker-empty { padding:10px; color:#8e8e93; font-size:12px; }
.bet-legacy-info { display:none; }

.bet-game-toggle { border-color:#d7a621; background:#3b2a00; }
.bet-game-toggle strong { color:#fff; }
.bet-game-control .chip-row { margin:0; }
.bet-game-menu { padding:7px; }
.bet-game-control .chip {
  position:relative; display:flex; align-items:center; width:100%; height:38px; margin:0; border:0; border-radius:6px;
  background:transparent; color:#f5f5f5; box-shadow:none; font-size:14px; font-weight:500; text-align:left; white-space:nowrap;
  padding:7px 10px;
}
.bet-game-control .chip:hover, .bet-game-control .chip:focus-visible { background:#202528; color:#fff; outline:0; }
.bet-game-control .chip.active { background:#202528; color:#fff; }
.bet-game-menu { max-height:390px; }
body.play-mode.view-bet #tabRow { display:none; }
body.view-bet #tabRow { margin-top:12px; }
body.view-bet .bet-panel { margin-top:12px; }
body.view-bet:not(.play-mode) #tabRow + .bet-panel { margin-top:12px; }
body.view-bet .bet-scroll { border-radius:11px; }
body.view-bet .bet-scroll > table.bet { width:100%; min-width:1080px; }
body.view-bet table.bet thead th { height:58px; padding:12px 16px; font-size:15px; font-weight:600; }
body.view-bet table.bet td { height:72px; padding:10px 16px; font-size:15px; font-weight:500; }
body.view-bet table.bet .no-col { width:76px; }
body.view-bet .digit-box { width:50px; height:40px; margin-right:8px; border-radius:5px; font-size:17px; }
body.view-bet .nominal-input, body.view-bet .free-input { width:310px; height:40px; border-radius:5px; font-size:16px; }
body.view-bet table.bet .sel-input { height:40px; min-width:170px; font-size:15px; }
body.view-bet table.bet td.bet-input-cell { vertical-align:top; }

@media (max-width:1200px) {
  body.view-bet:not(.wap) .wrap { padding-left:24px; padding-right:24px; }
  .bet-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .bet-controls-spacer { display:none; }
  body.view-bet #tabRow { margin-top:12px; }
  body.view-bet .bet-panel { margin-top:12px; }
  body.view-bet:not(.play-mode) #tabRow + .bet-panel { margin-top:12px; }
}
@media (max-width:650px) {
  body.view-bet:not(.wap) .wrap { padding:12px; }
  body.view-bet .play-bar { min-height:46px; margin-top:0; font-size:14px; }
  body.view-bet .ps-back { min-width:0; min-height:38px; margin-bottom:24px; padding:7px 14px; font-size:13px; }
  .bet-controls { grid-template-columns:1fr; gap:14px; }
  .bet-picker-toggle { height:50px; }
  body.view-bet #tabRow { margin-top:12px; }
  body.view-bet .bet-panel { margin-top:12px; }
  body.view-bet:not(.play-mode) #tabRow + .bet-panel { margin-top:10px; }
  body.view-bet .nominal-input, body.view-bet .free-input { width:150px; }
}

/* WAP betting layout: keep every control inside the 480px player canvas. */
body.view-bet.wap .wrap { width:100%; max-width:480px; padding:12px; }
body.view-bet.wap .ps-back { margin-bottom:20px; }
body.view-bet.wap .bet-controls {
  grid-template-columns:minmax(0,1fr); gap:12px; width:100%;
}
body.view-bet.wap .bet-controls-spacer { display:none; }
body.view-bet.wap .bet-picker-toggle { width:100%; height:48px; }
body.view-bet.wap #tabRow {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; margin-top:12px;
}
body.play-mode.view-bet.wap #tabRow { display:none; }
body.view-bet.wap #tabRow .tab-btn {
  width:100%; min-width:0; min-height:38px; padding:8px 10px; font-size:13px; white-space:nowrap;
}
body.view-bet.wap .bet-panel,
body.view-bet.wap .bet-scroll { width:100%; min-width:0; max-width:100%; }
body.view-bet.wap .bet-scroll { overflow-x:auto; }
body.view-bet.wap .bet-scroll > table.bet { width:max-content; min-width:760px; }
body.view-bet.wap table.bet thead th { height:42px; padding:8px 10px; font-size:13px; }
body.view-bet.wap table.bet td { height:52px; padding:8px 10px; font-size:13px; }
body.view-bet.wap table.bet .no-col { width:42px; }
body.view-bet.wap .digit-box { width:36px; height:36px; margin-right:5px; font-size:15px; }
body.view-bet.wap .nominal-input,
body.view-bet.wap .free-input { width:140px; height:36px; font-size:14px; }
body.view-bet.wap table.bet .sel-input { min-width:120px; height:36px; font-size:13px; }