:root{
  --bg:#0c1016; --panel:#131a24; --panel2:#0f141c; --line:#243041;
  --txt:#e8eef7; --mut:#8aa0b8; --red:#e5484d; --green:#30a46c; --amber:#f5a623;
  --meron:#c8363e; --wala:#2f7fd1;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{display:flex;align-items:center;gap:18px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel2);position:sticky;top:0;z-index:5}
.brand{font-weight:700;letter-spacing:.4px}
.brand .v{font-size:11px;color:var(--mut)}
.fightbar{display:flex;gap:14px;align-items:center;margin-left:10px;font-size:14px}
.fightbar .state{font-weight:700}
.state.OPEN{color:var(--green)}.state.CLOSED{color:var(--amber)}.state.SETTLED{color:var(--wala)}.state.DRAFT{color:var(--mut)}
.fightbar .meron b{color:#ff8a8f}.fightbar .wala b{color:#8fc2ff}
.who{margin-left:auto;display:flex;align-items:center;gap:10px}
.muted{color:var(--mut)}
.small{font-size:12px}
.hidden{display:none!important}
main,.tab{padding:16px 18px;max-width:1180px;margin:0 auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.card.center{max-width:420px;margin:8vh auto}
.card h3{margin:0 0 10px;font-size:15px}
label{display:block;margin-bottom:10px;font-size:13px;color:var(--mut)}
input,select{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-size:15px}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--txt);padding:8px 14px;border-radius:8px;font-size:14px}
button.primary{background:var(--green);border-color:var(--green);color:#04110a;font-weight:700}
button.secondary{background:#1b2735}
button.ghost{background:transparent;border-color:transparent;color:var(--mut)}
button.big{width:100%;padding:14px;font-size:17px}
button:disabled{opacity:.5;cursor:not-allowed}
#tabs{display:flex;gap:8px;padding:12px 18px 0;max-width:1180px;margin:0 auto}
#tabs button{border-radius:8px 8px 0 0;border-bottom:none}
#tabs button.active{background:var(--panel);color:#fff;font-weight:700}
.sideBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side.meron{border:2px solid var(--meron);color:#ff9ea3;font-weight:700}
.side.wala{border:2px solid var(--wala);color:#9cc7ff;font-weight:700}
.side.active{box-shadow:inset 0 0 0 3px var(--txt)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.pending{background:#3a2b06;border:1px solid var(--amber);color:#ffd88a;padding:10px;border-radius:8px;margin-top:10px}
.lastref{margin-top:10px;padding:10px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
.warn{margin-bottom:10px;padding:10px;border-radius:8px;background:#3b1214;border:1px solid var(--red);color:#ffb3b6}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{color:var(--mut);font-weight:600}
.tablewrap{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.tag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;border:1px solid var(--line)}
.tag.ACTIVE{border-color:var(--green);color:#7ee2a0}
.tag.VOIDED{color:var(--mut)}
.tag.PAID{border-color:var(--wala);color:#8fc2ff}
.tag.RESERVED{border-color:var(--amber);color:#ffd88a}
.copyrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.smallbtn{padding:4px 10px;font-size:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.ticket{margin-top:10px;padding:0}
.tkt{border:1px dashed var(--amber);border-radius:8px;padding:12px;background:var(--panel2)}
.tkt-title{font-weight:700;letter-spacing:.5px;margin-bottom:8px}
.tkt-row{display:flex;justify-content:space-between;margin-bottom:6px}
.tkt-qr{margin:10px 0;padding:10px;background:var(--bg);border-radius:8px;font-size:12px;word-break:break-all}
.tkt-qr code{font-size:14px;color:#ffd88a}
.tag.UNCERTAIN{border-color:var(--red);color:#ffb3b6}
.tag.CANCELLED{color:var(--mut)}

/* ── sabong teller board ───────────────────────────────────────────────── */
.grid2:has(.card.sabong){grid-template-columns:1fr}
.card.span2{grid-column:1/-1}
.card.sabong{padding:14px;background:linear-gradient(180deg,#101a2b,#0d1420)}
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sb-lbl{font-size:10px;letter-spacing:.14em;color:var(--mut);margin-right:7px}
.sb-id{font-weight:700;letter-spacing:.5px}
.sb-cash{background:#f5c451;color:#241a00;font-size:13px;font-weight:600;padding:5px 12px;border-radius:7px}
.sb-cash b{font-size:15px}
.sb-event{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0a111c;border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:12px}
.sb-ev{font-size:13px;letter-spacing:.06em;color:#cfe0f5}
.sb-ev b{font-size:16px}
.sb-pill{font-size:11px;font-weight:800;letter-spacing:.09em;padding:4px 12px;border-radius:20px;border:1px solid var(--line);color:var(--mut)}
.sb-pill.OPEN{background:#0f3d24;border-color:var(--green);color:#7ee2a0}
.sb-pill.CLOSED{background:#3a2b06;border-color:var(--amber);color:#ffd88a}
.sb-pill.SETTLED{background:#0f2440;border-color:var(--wala);color:#8fc2ff}
.sb-board{border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:12px}
.sb-names{display:grid;grid-template-columns:1fr 1fr}
.sb-name{text-align:center;font-weight:800;letter-spacing:.14em;padding:9px;font-size:14px}
.sb-name.meron{background:linear-gradient(180deg,#8e2027,#6d171d);color:#ffd7d9}
.sb-name.wala{background:linear-gradient(180deg,#1d5a97,#14416e);color:#d6e9ff}
.sb-rows{background:#0a111c}
.sb-row{display:grid;grid-template-columns:1fr 128px 1fr;align-items:center;padding:9px 6px;border-bottom:1px solid #17202e}
.sb-row:last-child{border-bottom:none}
.sb-row b{text-align:center;font-size:16px;font-variant-numeric:tabular-nums}
.sb-row span{text-align:center;font-size:9.5px;letter-spacing:.1em;color:var(--mut)}
.sb-row:nth-child(1) b:first-child,.sb-row:nth-child(3) b:first-child{color:#ff9ea3}
.sb-row:nth-child(1) b:last-child,.sb-row:nth-child(3) b:last-child{color:#9cc7ff}
.sb-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px;background:#0d1420;border-top:1px solid var(--line)}
.sb-btns .side{padding:15px 8px;font-size:15px;font-weight:800;letter-spacing:.05em;border-radius:9px}
.sb-btns .side.meron{background:#7d1d24;border-color:#a52b34;color:#fff}
.sb-btns .side.wala{background:#174f86;border-color:#1f6bb0;color:#fff}
.sb-btns .side.active{box-shadow:inset 0 0 0 3px #fff}
.sb-enter{background:#0a111c;border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:12px}
.sb-enter-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;color:var(--mut);margin-bottom:8px}
.sb-enter input{font-size:22px;font-weight:800;text-align:right;padding:11px 13px;letter-spacing:.02em}
.sb-enter .quick{margin:10px 0 0;grid-template-columns:repeat(4,1fr)}
.sb-enter .quick button{border-radius:50%;aspect-ratio:1;padding:0;font-size:14px;font-weight:800;background:#f5c451;border-color:#d9a92c;color:#241a00}
.sb-enter .quick button:active{background:#ffd97a}

/* ── official brand: CIAODUBAI GAME FARM ─────────────────────────────────── */
.brand{display:flex;align-items:center;gap:12px}
.brand img.logo{height:42px;width:auto;display:block;filter:drop-shadow(0 2px 6px #0009)}
.brand .wm{display:flex;flex-direction:column;line-height:1.05}
.brand .wm b{font-size:18px;letter-spacing:.14em;color:#f5c451;font-weight:800}
.brand .wm small{font-size:9.5px;letter-spacing:.26em;color:var(--mut)}
.brand .v{font-size:11px;color:var(--mut);letter-spacing:.06em}
.login-logo{display:block;margin:0 auto 14px;height:132px;width:auto;filter:drop-shadow(0 6px 18px #000a)}
@media (max-width:430px){.brand img.logo{height:34px}.brand .wm b{font-size:15px}.login-logo{height:104px}}


/* ══ mobile app shell: sticky header · drawer · sticky bottom nav ═══════ */
:root{ --hdr-h:54px; --nav-h:62px; }

.topbar{
  position:sticky; top:0; z-index:30;
  background:var(--panel2); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
header{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; min-height:var(--hdr-h); box-sizing:border-box;
  background:transparent; border-bottom:none; position:static; z-index:auto;
}
header .brand{ flex:1 1 auto; min-width:0; gap:8px; }
header .brand img.logo{ height:32px; }
header .brand .wm{ min-width:0; }
header .brand .wm b{ font-size:15px; letter-spacing:.1em; }
header .brand .wm small{ font-size:8px; letter-spacing:.18em; }
header .brand .v{ display:none; }

.iconbtn{
  display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
  width:38px; height:38px; padding:0 9px; flex:0 0 auto;
  background:transparent; border:1px solid var(--line); border-radius:9px;
}
.iconbtn span{ display:block; height:2px; background:var(--txt); border-radius:2px; }
.iconbtn:active{ background:#1b2431; }

header .who{ margin-left:0; gap:8px; min-width:0; }
header .who #who{
  font-size:12px; max-width:118px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; padding:4px 10px; border:1px solid var(--line); border-radius:20px;
}
header .who .actions{ display:none; }

.fightbar{
  display:flex; align-items:center; gap:10px;
  margin:0; padding:6px 12px; font-size:12px;
  border-top:1px solid var(--line); background:#0d131c;
  overflow-x:auto; white-space:nowrap; scrollbar-width:none;
}
.fightbar::-webkit-scrollbar{ display:none; }
.fightbar.hidden{ display:none; }
.fightbar .muted.small{ display:none; }

main,.tab{ padding:14px 14px calc(var(--nav-h) + 18px + env(safe-area-inset-bottom)); }

#tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; gap:0; padding:0; margin:0; max-width:none;
  background:var(--panel2); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  overflow-x:auto; scrollbar-width:none;
}
#tabs::-webkit-scrollbar{ display:none; }
#tabs button{
  flex:1 0 62px; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 6px 7px; font-size:10.5px; color:var(--mut);
  background:transparent; border:none; border-radius:0;
  border-top:2px solid transparent; min-width:62px;
}
#tabs button::before{ font-size:17px; line-height:1; }
#tabs button.active{
  color:#fff; font-weight:700;
  background:linear-gradient(180deg,#ffffff12,transparent);
  border-top-color:#f5c451;
}

#drawerOverlay{
  position:fixed; inset:0; background:#000a; z-index:40;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
#drawerOverlay.open{ opacity:1; pointer-events:auto; }
#drawer{
  position:fixed; top:0; bottom:0; left:0; z-index:50;
  width:min(84vw,320px);
  background:linear-gradient(180deg,#131a24,#0e131b);
  border-right:1px solid var(--line);
  transform:translateX(-102%); transition:transform .22s ease;
  overflow-y:auto;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
}
#drawer.open{ transform:none; }
.dr-brand{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.dr-brand img{ height:38px; }
.dr-brand .wm{ display:flex; flex-direction:column; line-height:1.05; }
.dr-brand .wm b{ font-size:16px; letter-spacing:.12em; color:#f5c451; font-weight:800; }
.dr-brand .wm small{ font-size:8.5px; letter-spacing:.22em; color:var(--mut); }
.dr-lbl{ display:block; font-size:9.5px; letter-spacing:.16em; color:var(--mut); margin:16px 0 6px; }
.dr-account b{ font-size:15px; }
.dr-actions{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.dr-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 12px; border-radius:10px; background:var(--panel);
  border:1px solid var(--line); color:var(--txt); font-size:14px;
  text-decoration:none; cursor:pointer;
}
.dr-item:active{ background:#1b2431; }
.dr-fight-body{ font-size:13px; }
.dr-row{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px dashed #1c2634; }
.dr-row:last-child{ border-bottom:none; }
.dr-row .meron{ color:#ff9ea3; }
.dr-row .wala{ color:#9cc7ff; }

@media (min-width:760px){
  header{ padding:10px 18px; min-height:0; }
  header .brand img.logo{ height:42px; }
  header .brand .wm b{ font-size:18px; }
  header .brand .wm small{ font-size:9.5px; }
  header .brand .v{ display:inline; }
  .iconbtn{ display:inline-block; }   /* ☰ menu stays on laptops: Terminal setup lives in the drawer */
  header .who #who{ border:none; padding:0; max-width:none; font-size:14px; }
  header .who .actions{ display:flex; align-items:center; gap:10px; }
  .fightbar{ font-size:14px; gap:14px; padding:8px 18px; }
  .fightbar .muted.small{ display:inline; }
  #tabs{
    position:static; background:transparent; border-top:none;
    padding:12px 18px 0; max-width:1180px; margin:0 auto;
    overflow:visible; padding-bottom:0;
  }
  #tabs button{
    flex:0 0 auto; flex-direction:row; gap:7px; min-width:0;
    border:1px solid var(--line); border-bottom:none; border-top:none;
    border-radius:8px 8px 0 0; padding:8px 14px; font-size:14px;
  }
  #tabs button::before{ font-size:14px; }
  #tabs button.active{ background:var(--panel); color:#fff; border-top-color:transparent; }
  main,.tab{ padding:16px 18px; }
  /* the ☰ drawer (Terminal setup, password, sign out) stays available on laptops/desktops */
  #drawer{ width:340px; }
}


/* ══ CIAODUBAI UI handoff (assets in /brand/ui, reference-mockup.png) ═══════ */
:root{ --gold:#f5c451; --gold2:#d9a92c; --gold-glow:0 0 14px #f5c45166; }

/* menu button + role chip (header) */
.iconbtn{
  background:url(/brand/ui/menu.png) center/contain no-repeat; border:none; width:40px; height:40px; padding:0; gap:0;
}
.iconbtn span{ display:none; }
header .who #who{ border:1px solid #2b3a4f; background:#111926; }

/* bottom nav with image icons + active pill */
#tabs button::before{ content:""; width:26px; height:26px; background:center/contain no-repeat; font-size:0; }
#tabs button[data-target="teller"]::before{ background-image:url(/brand/ui/nav-teller.png); }
#tabs button[data-target="controller"]::before{ background-image:url(/brand/ui/nav-controller.png); }
#tabs button[data-target="admin"]::before{ background-image:url(/brand/ui/nav-admin.png); }
#tabs button[data-target="treasury"]::before{ background-image:url(/brand/ui/ic-treasury.png); }
#tabs button[data-target="approver"]::before{ background-image:url(/brand/ui/nav-approver.png); }
#tabs button[data-target="supervisor"]::before{ background-image:url(/brand/ui/nav-supervisor.png); }
#tabs button[data-target="reports"]::before{ background-image:url(/brand/ui/nav-reports.png); }
#tabs button{ position:relative; }
#tabs button.active{
  color:var(--gold); border-top-color:transparent;
  background:url(/brand/ui/nav-pill.png) center/100% 100% no-repeat;
}

/* teller board: wallet cash chip, rooster headers, glowing bet buttons, coins */
.sb-cash{
  display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(180deg,#ffd978,#e3b03a); color:#241a00; border:1px solid #b98a1c;
  box-shadow:var(--gold-glow); padding:5px 12px 5px 8px; border-radius:9px;
}
.sb-cash::before{ content:""; width:22px; height:22px; background:url(/brand/ui/wallet.png) center/contain no-repeat; }
.sb-event{ border-color:#2b3a4f; }
.sb-pill.OPEN{ box-shadow:0 0 10px #30a46c55; } .sb-pill.SETTLED{ box-shadow:0 0 10px #2f7fd155; }
.warn{ display:flex; align-items:center; gap:10px; border-radius:11px; }
.warn::before{ content:"!"; flex:none; width:22px; height:22px; border:2px solid #ff6b70; border-radius:50%; text-align:center; line-height:19px; font-weight:800; color:#ff8a8f; }
.sb-names{ position:relative; }
.sb-name{ position:relative; padding:14px 9px; font-size:16px; letter-spacing:.16em; text-shadow:0 1px 2px #0008; overflow:hidden; }
.sb-name.meron{ padding-left:84px; }
.sb-name.wala{ padding-right:84px; }
.sb-name.meron{ background:linear-gradient(90deg,#b4262f00 0%,#b4262f 32%,#8e2027 100%); }
.sb-name.wala{ background:linear-gradient(270deg,#2a7ed600 0%,#2a7ed6 32%,#1d5a97 100%); }
.sb-name.meron::before,.sb-name.wala::before{
  content:""; position:absolute; top:-8px; width:78px; height:78px; background:center/contain no-repeat; opacity:.95; pointer-events:none;
}
.sb-name.meron::before{ left:-4px; background-image:url(/brand/ui/rooster-meron.png); }
.sb-name.wala::before{ right:-4px; background-image:url(/brand/ui/rooster-wala.png); } /* wala art faces left natively → toward the opponent */
.sb-names::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,#fff1 0%,#0000 40%); pointer-events:none; }
.sb-btns .side{ border-radius:11px; letter-spacing:.08em; transition:box-shadow .15s ease, transform .1s ease; }
.sb-btns .side.meron{ background:linear-gradient(180deg,#c92a33,#7a161c); border:1px solid #ff6b70; }
.sb-btns .side.wala{ background:linear-gradient(180deg,#2c7fd4,#174f86); border:1px solid #5ea4ec; }
.sb-btns .side.active{ box-shadow:0 0 0 2px var(--gold), 0 0 18px #f5c45199; }
.sb-btns .side:active{ transform:scale(.985); }
.sb-enter .quick button{
  background:radial-gradient(circle at 35% 30%,#ffe9a6 0%,#f5c451 45%,#c9932a 100%);
  border:2px solid #b98a1c; box-shadow:inset 0 0 0 3px #ffe08a88, 0 3px 8px #0007; color:#2a1d00; font-size:15px;
}
.sb-enter .quick button:active{ background:radial-gradient(circle at 35% 30%,#fff3c4,#ffd97a 50%,#d9a92c); }
.sb-enter .quick{ justify-items:center; }
.sb-enter .quick button{ width:100%; max-width:96px; }
#sellBtn.primary{ background:linear-gradient(180deg,#38c27c,#1f8a55); border-color:#5ad99a; color:#04110a; letter-spacing:.08em; box-shadow:0 4px 14px #30a46c44; }

/* ticket preview: looks like the thermal printout */
.ticket .tkt{ border:none; background:transparent; padding:0; }
.tkt-paper{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.tkt-paper .rcpt{ border-radius:4px; box-shadow:0 6px 22px #0008; }
.tkt-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.tkt-note{ font-size:12px; color:var(--mut); text-align:center; max-width:58mm; }

/* drawer: terminal setup */
.dr-setup label{ margin-bottom:8px; }
.dr-setup select,.dr-setup input{ font-size:13px; padding:7px 9px; }
.dr-check{ display:flex; align-items:center; gap:8px; color:var(--txt); font-size:13px; }
.dr-check input{ width:auto; }
#prStatus{ margin-top:6px; min-height:16px; }

@media (min-width:760px){
  #tabs button::before{ width:18px; height:18px; }
  #tabs button.active{ background:var(--panel); color:#fff; }
  .sb-name::before{ display:none; }
  .sb-name.meron{ background:linear-gradient(180deg,#8e2027,#6d171d); }
  .sb-name.wala{ background:linear-gradient(180deg,#1d5a97,#14416e); }
  .sb-name.meron::before,.sb-name.wala::before{ display:block; top:-8px; width:64px; height:64px; }
  .sb-name.meron,.sb-name.wala{ padding-left:9px; padding-right:9px; }
}
@media (min-width:760px){ .tkt-paper .rcpt{ zoom:1.45; } .tkt-note{ max-width:420px; } }

/* ── llamado / dehado / sarado ─────────────────────────────────────────── */
.sb-name{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.sb-tag{ font-size:9.5px; letter-spacing:.18em; font-weight:800; padding:2px 8px; border-radius:20px; border:1px solid #ffffff55; color:#fff; min-height:16px; }
.sb-tag:empty{ display:none; }
.sb-tag.LLAMADO{ background:#2a2206; border-color:var(--gold); color:var(--gold); }
.sb-tag.DEHADO{ background:#0a111c; border-color:#8aa0b8; color:#d6e2f0; }
.sb-tag.SARADO{ background:#3a2b06; border-color:var(--amber); color:#ffd88a; }
.sb-call{ text-align:center; font-size:10.5px; letter-spacing:.16em; color:var(--gold); background:#0a111c; padding:5px; border-bottom:1px solid #17202e; }
.sb-call:empty{ display:none; }
.sb-btns .side.sarado{ opacity:.45; filter:grayscale(.6); }
.sb-btns .side.sarado::after{ content:" · SARADO"; font-size:11px; }
.tag.SARADO{ border-color:var(--amber); color:#ffd88a; }

/* ── fight card (contenders) ───────────────────────────────────────────── */
.sb-card{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin:-4px 0 12px; padding:0 4px; }
.sb-card:empty{ display:none; }
.sb-card b{ display:block; font-size:14px; } .sb-card small{ color:var(--mut); font-size:11px; }
.sb-card .m b{ color:#ff9ea3; } .sb-card .w{ text-align:right; } .sb-card .w b{ color:#9cc7ff; }
.sb-card .vs{ font-size:11px; letter-spacing:.2em; color:var(--mut); }
#cardText{ width:100%; font:13px/1.4 ui-monospace,Consolas,monospace; padding:9px 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); }
#cardList table{ margin-top:8px; }

/* ── responsive pass (phones first) ────────────────────────────────────── */
@media (max-width:759px){
  /* all tabs fit on one row, even 7 of them on a 360px phone */
  #tabs{ overflow-x:hidden; }
  #tabs button{ flex:1 1 0; min-width:0; padding:7px 2px 6px; font-size:10px; gap:2px; }
  #tabs button::before{ width:24px; height:24px; }
  #tabs button span,#tabs button{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* forms: stacked inputs, full-width buttons */
  .row3{ grid-template-columns:1fr; }
  .copyrow button{ flex:1 1 auto; }
  .card h3{ font-size:15px; }
  /* tables: hint that they scroll sideways */
  .tablewrap{ position:relative; -webkit-overflow-scrolling:touch; }
  .tablewrap::after{ content:""; position:sticky; right:0; top:0; display:block; width:0; }
  table{ font-size:12.5px; }
  th,td{ padding:6px 7px; }
  .tkt-paper .rcpt{ zoom:1.08; }
  .warn{ font-size:14px; }
  .sb-row b{ font-size:15px; }
  .sb-enter .quick button{ max-width:none; font-size:14px; }
  .sb-card b{ font-size:13px; }
  .fightbar{ font-size:12.5px; }
}
@media (max-width:400px){
  #tabs button{ font-size:9.5px; }
  #tabs button::before{ width:22px; height:22px; }
  .sb-name{ font-size:14px; letter-spacing:.1em; }
  .sb-name.meron{ padding-left:70px; } .sb-name.wala{ padding-right:70px; }
  .sb-name.meron::before,.sb-name.wala::before{ width:66px; height:66px; top:-4px; }
}
/* embedded admin console: no second header inside the Admin tab */
body.embedded .adm-head,body.embedded header{ display:none; }
body.embedded #app{ padding-top:4px; }

/* ══ auth pages (staff sign-in, admin sign-in, bettor sign-in/register) ═════ */
.auth{ position:relative; min-height:calc(100vh - var(--hdr-h) - 2px); display:grid; place-items:center; padding:28px 16px calc(28px + env(safe-area-inset-bottom)); overflow:hidden; isolation:isolate; }
.auth::before,.auth::after{ content:""; position:absolute; top:50%; width:min(46vw,420px); aspect-ratio:1; background:center/contain no-repeat; opacity:.13; pointer-events:none; z-index:-1; transform:translateY(-50%); filter:saturate(1.1) blur(.2px); }
.auth::before{ left:-6%; background-image:url(/brand/ui/rooster-meron.png); }
.auth::after{ right:-6%; background-image:url(/brand/ui/rooster-wala.png); }
.auth-glow{ position:absolute; inset:0; z-index:-2; background:radial-gradient(60% 40% at 20% 30%, #c8363e22, transparent 70%), radial-gradient(60% 40% at 80% 70%, #2f7fd122, transparent 70%), linear-gradient(180deg,#0e141d,var(--bg)); }
.auth-card{ width:100%; max-width:440px; background:linear-gradient(180deg,#151d29,#111823); border:1px solid #2b3a4f; border-radius:22px; padding:28px 26px 22px; box-shadow:0 24px 60px #0009, inset 0 1px 0 #ffffff0d; text-align:center; }
.auth-card .auth-logo{ height:118px; width:auto; display:block; margin:0 auto 10px; filter:drop-shadow(0 10px 24px #000a); }
.auth-card h1{ margin:0; font-size:22px; letter-spacing:.14em; color:var(--gold); font-weight:800; }
.auth-card .auth-sub{ margin:4px 0 18px; font-size:12px; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; }
.auth-card form{ text-align:left; }
.field{ display:block; margin-bottom:12px; color:var(--mut); font-size:12.5px; }
.field > span{ display:block; margin-bottom:6px; letter-spacing:.04em; }
.inp{ position:relative; display:flex; align-items:center; background:#0a111c; border:1px solid var(--line); border-radius:12px; transition:border-color .15s, box-shadow .15s; }
.inp:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px #f5c45126; }
.inp svg{ width:18px; height:18px; flex:none; margin-left:13px; color:#6f8197; }
.inp input{ flex:1; min-width:0; border:none; background:transparent; padding:13px 12px; font-size:16px; color:var(--txt); outline:none; }
.inp .eye{ flex:none; border:none; background:transparent; color:#8aa0b8; padding:0 12px; font-size:13px; cursor:pointer; height:100%; }
.inp .eye:hover{ color:#fff; }
.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 14px; font-size:12.5px; color:var(--mut); }
.auth-row label{ display:flex; align-items:center; gap:7px; margin:0; cursor:pointer; }
.auth-row input{ width:16px; height:16px; margin:0; accent-color:#f5c451; }
.auth-btn{ width:100%; padding:14px; border-radius:12px; font-size:16px; font-weight:800; letter-spacing:.06em; color:#241a00; background:linear-gradient(180deg,#ffd978,#e3b03a); border:1px solid #b98a1c; box-shadow:0 8px 22px #f5c45133; }
.auth-btn:active{ transform:translateY(1px); }
.auth-btn.alt{ background:#1b2735; color:var(--txt); border-color:var(--line); box-shadow:none; }
.auth-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:6px; background:#0a111c; border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:16px; }
.auth-tabs button{ border:none; background:transparent; color:var(--mut); padding:9px; border-radius:9px; font-weight:700; }
.auth-tabs button.active{ background:#1b2735; color:#fff; }
.auth-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-top:16px; font-size:13px; }
.auth-links a{ color:#9cc7ff; text-decoration:none; }
.auth-foot{ margin:12px 0 0; font-size:11.5px; color:var(--mut); line-height:1.5; }
.auth-trust{ display:flex; justify-content:center; gap:14px; margin-top:12px; font-size:11px; letter-spacing:.08em; color:var(--mut); }
.auth-trust b{ color:#7ee2a0; }
.auth-err{ display:none; margin:0 0 12px; padding:9px 12px; border-radius:10px; background:#3b1214; border:1px solid var(--red); color:#ffb3b6; font-size:13px; }
.auth-err.on{ display:block; }
@media (max-width:480px){
  .auth{ padding:16px 12px calc(20px + env(safe-area-inset-bottom)); align-items:start; }
  .auth::before,.auth::after{ width:62vw; top:18%; opacity:.09; }
  .auth-card{ padding:22px 18px 18px; border-radius:18px; }
  .auth-card .auth-logo{ height:92px; }
  .auth-card h1{ font-size:19px; }
}
@media (min-width:760px){ .auth-card .auth-logo{ height:136px; } }

/* ══ native-app feel on phones ══════════════════════════════════════════════
   - no input zoom (16px fields), no double-tap zoom, no tap flash,
   - no rubber-band overscroll, no text selection on chrome,
   - bottom nav hides while the keyboard is open so it never floats mid-screen */
html{ -webkit-text-size-adjust:100%; }
body{ overscroll-behavior:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button,.side,#tabs,#plNav,.topbar,.sb-head,.sb-names,.sb-btns,.quick{ -webkit-user-select:none; user-select:none; }
input,select,textarea,button{ -webkit-tap-highlight-color:transparent; }
@media (max-width:759px){
  input,select,textarea{ font-size:16px !important; }
  input[type=number]{ -moz-appearance:textfield; }
  input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  body.kb-open #tabs,body.kb-open #plNav{ display:none; }
  body.kb-open main,body.kb-open .tab{ padding-bottom:24px; }
  .card{ border-radius:14px; }
}
@media (display-mode: standalone){ .topbar{ padding-top:env(safe-area-inset-top); } }

/* NexusPay deposit sheet: provider QR image + wallet / checkout links styled as buttons */
.dep-qr{width:180px;max-width:100%;display:block;margin:8px auto;background:#fff;padding:6px;border-radius:10px}
a.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;border:1px solid var(--line,#2a2f3a);text-decoration:none;font-weight:600;color:inherit}
a.btn.primary{background:var(--green);border-color:var(--green);color:#04110a;font-weight:700}
a.btn.ghost{background:transparent;border-color:transparent;color:var(--mut)}


/* ══ Cash-out basket, scanners, cash received ═══════════════════════════════ */
.sb-tender{ margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.sb-tender input{ width:100%; font-size:22px; font-weight:700; text-align:right; padding:8px 10px; }
.sb-change{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:13px; letter-spacing:.12em; color:var(--mut); }
.sb-change b{ font-size:26px; letter-spacing:0; color:var(--green); }
.sb-change.short b{ color:var(--red); }
.co-scan{ display:flex; gap:8px; align-items:stretch; margin-bottom:10px; }
.co-scan input{ flex:1; font-size:17px; padding:12px 14px; border-width:2px; }
.co-scan input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px #f5c45133; }
.scan-status{ font-size:12px; color:var(--green); margin-left:8px; }
.cam{ position:relative; margin-bottom:10px; border-radius:12px; overflow:hidden; background:#000; }
.cam video{ width:100%; max-height:320px; display:block; object-fit:cover; }
.cam-bar{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; background:var(--panel2); }
.co-basket{ display:grid; gap:8px; }
.co-row{ display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.co-row .ref{ font-family:ui-monospace,Menlo,monospace; font-weight:700; letter-spacing:.04em; }
.co-row .meta{ color:var(--mut); font-size:13px; }
.co-row .meta b{ color:var(--txt); }
.co-row .amt{ font-size:20px; font-weight:800; text-align:right; min-width:110px; }
.co-row.ok .amt{ color:var(--green); }
.co-row.bad{ opacity:.75; border-style:dashed; }
.co-row.bad .amt{ color:var(--red); font-size:13px; font-weight:600; max-width:200px; text-align:right; }
.co-row .rm{ background:transparent; border:none; color:var(--mut); font-size:18px; padding:4px 6px; }
.co-actions{ margin-top:12px; }
.co-total{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:linear-gradient(135deg,#1b2a1f,#0f1a14); border:1px solid #2f6b45; margin-bottom:10px; }
.co-total span{ color:var(--mut); font-size:12px; letter-spacing:.14em; }
.co-total b{ font-size:30px; color:var(--green); }
.co-pay{ width:100%; font-size:20px; padding:16px; }
.co-done{ padding:12px 14px; border-radius:12px; border:1px solid #2f6b45; background:#10251a; }
.co-done b{ color:var(--green); }
.mscan{ position:fixed; inset:0; z-index:60; background:#000; color:#fff; display:flex; flex-direction:column; padding:calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
.mscan-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mscan-head b{ letter-spacing:.14em; }
.mscan-head button{ margin-left:auto; }
.mscan video{ width:100%; flex:1; min-height:0; object-fit:cover; border-radius:14px; background:#111; }
.mscan-status{ margin:10px 0 6px; font-weight:700; color:var(--gold); min-height:22px; }
.mscan-list{ max-height:28vh; overflow:auto; display:grid; gap:6px; }
.mscan-list div{ padding:8px 10px; border-radius:10px; background:#141a23; font-family:ui-monospace,Menlo,monospace; font-size:13px; display:flex; justify-content:space-between; }
.mscan-list div.ok{ border:1px solid #2f6b45; }
.mscan-list div.fail{ border:1px solid #6b2f2f; }
@media (max-width:759px){ .co-row{ grid-template-columns:1fr auto; } .co-row .meta{ grid-column:1 / -1; } }


/* ══ Teller: timer, keypad, bet slip, balance + fight list, shortcuts ═══════════ */
.sb-timer{ display:flex; flex-direction:column; align-items:center; line-height:1; padding:4px 14px; border-radius:9px; background:#241a00; border:1px solid #f5c451; }
.sb-timer small{ font-size:9px; letter-spacing:.16em; color:#f5c451; }
.sb-timer b{ font-size:22px; font-variant-numeric:tabular-nums; color:#fff; }
.sb-timer.urgent{ background:#3a0f12; border-color:var(--red); } .sb-timer.urgent b{ color:#ff9ea3; }
.fb-timer{ font-variant-numeric:tabular-nums; color:#f5c451; } .fb-timer.urgent{ color:#ff9ea3; }
.sb-entry{ display:grid; grid-template-columns:1fr 280px; gap:12px; margin-bottom:12px; }
.sb-entry .sb-enter{ margin-bottom:0; }
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.keypad button{ padding:14px 0; font-size:22px; font-weight:700; border-radius:10px; background:#141c28; border:1px solid var(--line); color:#fff; }
.keypad button.k-c{ color:#ff9ea3; }
.slip{ background:#0a111c; border:1px solid var(--line); border-radius:11px; padding:11px 12px; display:flex; flex-direction:column; gap:6px; }
.slip-head{ font-size:10px; letter-spacing:.16em; color:var(--mut); margin-bottom:2px; }
.slip-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--mut); padding:4px 0; border-bottom:1px solid #131a24; }
.slip-row b{ color:#fff; font-size:16px; font-variant-numeric:tabular-nums; }
.slip-row b.side-m{ color:#ff9ea3; } .slip-row b.side-w{ color:#9cc7ff; }
.slip-row.big{ border:none; margin-top:4px; } .slip-row.big b{ font-size:26px; color:var(--green); }
.slip-note{ font-size:11px; color:var(--mut); line-height:1.3; }
.sb-keys{ text-align:center; margin-top:8px; }
kbd{ font:600 11px ui-monospace,Menlo,monospace; background:#0a111c; border:1px solid var(--line); border-radius:5px; padding:1px 6px; margin-left:6px; color:var(--mut); }
.tb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tb-bal h3,.tb-list h3{ font-size:12px; letter-spacing:.16em; color:var(--mut); margin:0 0 8px; }
.tb-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #131a24; font-size:14px; color:var(--mut); }
.tb-row b{ color:#fff; font-variant-numeric:tabular-nums; }
.tb-row.total{ border:none; margin-top:4px; } .tb-row.total b{ color:var(--green); font-size:22px; }
.fl{ display:grid; gap:4px; max-height:220px; overflow:auto; }
.fl div{ display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center; padding:5px 8px; border-radius:8px; background:#0a111c; font-size:13px; }
.fl div b{ color:#fff; } .fl div span{ color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl div em{ font-style:normal; font-size:10px; letter-spacing:.12em; padding:2px 8px; border-radius:20px; border:1px solid var(--line); color:var(--mut); }
.fl div.OPEN{ background:#0f3d24; } .fl div.OPEN em{ color:#7ee2a0; border-color:var(--green); }
.fl div.CLOSED em{ color:#ffd88a; border-color:var(--amber); }
.fl div.next em{ color:#f5c451; border-color:#f5c451; }
.fl div.SETTLED em.MERON{ color:#ff9ea3; border-color:var(--meron); } .fl div.SETTLED em.WALA{ color:#9cc7ff; border-color:var(--wala); }
@media (max-width:759px){ .sb-entry{ grid-template-columns:1fr; } .tb-grid{ grid-template-columns:1fr; } .sb-keys{ display:none; } kbd{ display:none; } }


/* ══ Teller POS view (view 2): the reference counter layout, same theme ═══════════════ */
.pos2-only,.p2-only-inline,.pos2-head,.p2-close{ display:none; }
body:not(.pos2) .p2-switch[data-view="classic"]{ display:none; }
body.pos2 .p2-switch[data-view="pos"]{ display:none; }
body.pos2 .classic-only{ display:none; } body.pos2 .p2-only-inline{ display:inline; }
body.pos2 .sb-head, body.pos2 .sb-event{ display:none; }   /* the POS header strip replaces them at every width */
.sb-head .p2-switch{ margin-left:auto; margin-right:10px; }
@media (min-width:1100px){
  body.pos2[data-tab="teller"] .tab[data-name="teller"]{ display:grid !important; grid-template-columns:300px minmax(0,1fr) 300px; grid-template-rows:auto auto auto auto auto; gap:12px;
    grid-template-areas:"head head head" "list board bets" "list entry bal" "tx entry actions" "tx ticket actions" "foot foot foot"; align-items:start; padding:12px 18px; }
  body.pos2 .tab[data-name="teller"] .grid2, body.pos2 .card.sabong, body.pos2 #sellForm, body.pos2 #tellerSide, body.pos2 .tb-grid{ display:contents; }
  body.pos2 .sb-entry{ grid-area:entry; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:12px; margin:0; align-items:start; }
  body.pos2 .pos2-head{ grid-area:head; display:grid; grid-template-columns:auto auto auto 1fr auto auto auto; gap:10px; align-items:stretch; }
  body.pos2 .sb-keys, body.pos2 #noFight.hidden, body.pos2 .sb-card{ display:none; }
  body.pos2 .sb-board{ grid-area:board; margin:0; }
  body.pos2 .sb-enter{ margin:0; }
  body.pos2 .slip{ position:sticky; top:8px; }
  body.pos2 .sb-tender{ display:none; }   /* cash received lives in the bet slip in this view */
  body.pos2 #sellBtn{ grid-area:ticket; margin-top:8px; }
  body.pos2 .slip{ margin-bottom:0; }
  body.pos2 #pendingNote, body.pos2 #lastRef, body.pos2 #ticketPrint{ grid-area:ticket; }
  body.pos2 .tb-list{ grid-area:list; } body.pos2 .tb-bal{ grid-area:bal; }
  body.pos2 .tb-list, body.pos2 .tb-bal, body.pos2 #pos2Bets, body.pos2 #pos2Actions{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; margin:0; }
  body.pos2 .tb-list .fl{ max-height:none; }
  body.pos2 #ticketsCard{ grid-area:tx; margin:0; max-height:420px; overflow:auto; }
  body.pos2 #ticketsCard table th:nth-child(5), body.pos2 #ticketsCard table td:nth-child(5), body.pos2 #ticketsCard table th:nth-child(6), body.pos2 #ticketsCard table td:nth-child(6){ display:none; }
  body.pos2 #ticketsCard table{ font-size:12px; } body.pos2 #ticketsCard td, body.pos2 #ticketsCard th{ padding:5px 4px; }
  body.pos2 #pos2Bets{ grid-area:bets; display:block; } body.pos2 #pos2Actions{ grid-area:actions; display:grid; gap:8px; align-content:start; }
  body.pos2 .pos2-foot{ grid-area:foot; display:flex; }
  body.pos2 #cashoutCard{ display:none; position:fixed; inset:8vh 10vw auto; z-index:70; box-shadow:0 30px 80px #000c; max-height:84vh; overflow:auto; }
  body.pos2.co-open #cashoutCard{ display:block; } body.pos2.co-open .p2-close{ display:inline-block; margin-top:8px; }
  body.pos2 .slip .slip-row.big b{ font-size:34px; }
  body.pos2 .keypad button{ padding:18px 0; font-size:26px; }
  body.pos2 #sellBtn{ font-size:22px; padding:18px; }
}
.pos2-head{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:8px 12px; }
.p2-brand{ display:flex; align-items:center; gap:10px; } .p2-brand img{ height:44px; } .p2-brand span{ display:flex; flex-direction:column; line-height:1.1; }
.p2-brand b{ font-size:16px; letter-spacing:.08em; color:var(--gold); } .p2-brand small{ font-size:9px; letter-spacing:.14em; color:var(--mut); }
.p2-box{ display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:110px; padding:4px 14px; border-radius:10px; background:#0a111c; border:1px solid var(--line); }
.p2-box small{ font-size:10px; letter-spacing:.16em; color:var(--mut); } .p2-box b{ font-size:30px; color:var(--gold); font-variant-numeric:tabular-nums; line-height:1.1; }
.p2-status{ font-size:20px; font-weight:900; letter-spacing:.1em; color:var(--mut); padding:0 22px; }
.p2-status.OPEN{ background:#0f3d24; color:#7ee2a0; border-color:var(--green); } .p2-status.CLOSED{ background:#3a2b06; color:#ffd88a; border-color:var(--amber); }
.p2-status.SETTLED{ background:#0f2440; color:#8fc2ff; border-color:var(--wala); }
.p2-timer b{ color:#fff; } .p2-timer.urgent b{ color:#ff9ea3; } .p2-timer.off{ opacity:.45; }
.p2-who{ display:flex; flex-direction:column; justify-content:center; font-size:12px; color:var(--mut); text-align:right; line-height:1.4; } .p2-who b{ color:#fff; }
.p2-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; } .p2-table th{ font-size:10px; letter-spacing:.14em; color:var(--mut); text-align:right; padding:6px; border-bottom:1px solid var(--line); }
.p2-table th:first-child, .p2-table td:first-child{ text-align:left; font-weight:800; } .p2-table td{ padding:9px 6px; text-align:right; border-bottom:1px solid #131a24; font-size:15px; }
.p2-table tr.m td:first-child{ color:#ff9ea3; } .p2-table tr.w td:first-child{ color:#9cc7ff; } .p2-table tr.t td{ font-weight:800; border:none; font-size:17px; }
.p2-act{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; font-size:15px; font-weight:800; letter-spacing:.06em; border-radius:10px; border:1px solid var(--line); background:#141c28; color:#fff; }
.p2-act kbd{ margin:0; } .p2-act.cashin{ background:#174f86; border-color:#1f6bb0; } .p2-act.cashout{ background:#7a5a0b; border-color:#b8880f; } .p2-act.void{ background:#7d1d24; border-color:#a52b34; }
.pos2-foot{ align-items:center; gap:10px; padding:8px 14px; border-top:1px solid var(--line); font-size:12px; letter-spacing:.12em; color:#7ee2a0; }
.pos2-foot .right{ margin-left:auto; color:var(--mut); } .p2-dot{ width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.pos2-foot.off{ color:#ff9ea3; } .pos2-foot.off .p2-dot{ background:var(--red); box-shadow:0 0 10px var(--red); }
/* POS view on narrow screens: same blocks, single column, the header strip wraps */
@media (max-width:1099px){
  body.pos2 .pos2-head{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
  body.pos2 .p2-brand{ grid-column:1 / -1; } body.pos2 .p2-who{ grid-column:1 / -1; text-align:left; flex-direction:row; gap:12px; flex-wrap:wrap; }
  body.pos2 .p2-switch[data-view="classic"]{ grid-column:1 / -1; }
  body.pos2 #pos2Bets, body.pos2 #pos2Actions{ display:block; } body.pos2 #pos2Actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  body.pos2 .pos2-foot{ display:flex; }
}

/* DRAW bet: a slim full-width bar under MERON/WALA, same grid, so both teller views keep their layout */
.sb-btns .side.draw{grid-column:1 / -1;padding:8px;font-size:13px;letter-spacing:.08em;border-radius:9px;
  background:linear-gradient(180deg,#2f9a55,#17603a);border:1px solid #5fd08a;color:#fff;font-weight:800}
.sb-btns .side.draw small{font-weight:600;opacity:.85;letter-spacing:.04em}
.sb-btns .side.draw.active{box-shadow:0 0 0 2px var(--gold),0 0 14px #f5c45177}
.slip-row b.side-d{color:#8ff0b0}

.fl div.SETTLED em.CANCELLED,.fl div.CANCELLED em{ color:#c9d3df; border-color:#7b8796; }
.fl div.CANCELLED{ opacity:.6; }

/* responsible gaming (bettor page) */
.rg-accept{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;margin:6px 0 10px;color:var(--mut)}
.rg-accept input{width:auto;margin-top:2px}
.rg-accept a,.rg-foot a{color:var(--gold,#f5c451)}
.rg-foot{text-align:center;font-size:11px;color:var(--mut);padding:10px 16px 84px;line-height:1.5}
.rg-text p{margin:0 0 8px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   POS view, one screen (added 2026-10-29). On desktops and tablets the teller sees every panel
   without scrolling the page: the fight bar is dropped (the POS header strip shows the same),
   lists scroll inside their own panel, and the keypad / action buttons stretch to the space left.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width:740px) and (min-height:600px){
  body.pos2[data-tab="teller"]{ height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
  body.pos2[data-tab="teller"] .topbar{ flex:0 0 auto; }
  body.pos2[data-tab="teller"] header{ min-height:44px; padding:4px 12px; }
  body.pos2[data-tab="teller"] header .brand img.logo{ height:28px; }
  body.pos2[data-tab="teller"] #fightbar{ display:none !important; }
  body.pos2[data-tab="teller"] #app{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  body.pos2[data-tab="teller"] #tabs{ flex:0 0 auto; max-width:none; padding:4px 12px 0; }
  body.pos2[data-tab="teller"] #tabs button{ padding:3px 12px; font-size:12px; }
  body.pos2[data-tab="teller"].single-tab #tabs{ display:none; }
  body.pos2[data-tab="teller"] .tab[data-name="teller"]{
    display:grid !important; flex:1 1 auto; min-height:0; max-width:none; width:100%; box-sizing:border-box; margin:0;
    gap:8px; padding:8px 12px; overflow:hidden; align-items:stretch;
    grid-template-columns:minmax(196px,19%) minmax(0,1.08fr) minmax(0,1fr) minmax(224px,21%);
    grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
    grid-template-areas:
      "head head  head   head"
      "list board board  bets"
      "list keys  slip   bal"
      "tx   keys  tender actions"
      "tx   ticket ticket actions"
      "foot foot  foot   foot"; }
  /* the wrappers dissolve so every block is a cell of the one grid */
  body.pos2[data-tab="teller"] .grid2, body.pos2[data-tab="teller"] .card.sabong, body.pos2[data-tab="teller"] #sellForm,
  body.pos2[data-tab="teller"] #tellerSide, body.pos2[data-tab="teller"] .tb-grid, body.pos2[data-tab="teller"] .sb-entry{ display:contents; }
  body.pos2[data-tab="teller"] .pos2-head{ grid-area:head; display:grid; grid-template-columns:auto auto auto minmax(0,1fr) auto auto auto; gap:8px; margin:0; padding:5px 10px; }
  body.pos2[data-tab="teller"] .p2-brand img{ height:34px; }
  body.pos2[data-tab="teller"] .p2-box{ min-width:84px; padding:2px 10px; }
  body.pos2[data-tab="teller"] .p2-box b{ font-size:24px; }
  body.pos2[data-tab="teller"] .p2-status{ font-size:18px; }
  body.pos2[data-tab="teller"] .p2-who{ grid-column:auto; text-align:right; flex-direction:column; gap:0; font-size:11px; line-height:1.3; }
  body.pos2[data-tab="teller"] .p2-switch[data-view="classic"]{ grid-column:auto; align-self:center; }

  body.pos2[data-tab="teller"] .sb-board{ grid-area:board; margin:0; }
  body.pos2[data-tab="teller"] .sb-enter{ grid-area:keys; margin:0; display:flex; flex-direction:column; min-height:0; padding:8px; }
  body.pos2[data-tab="teller"] .sb-enter input{ font-size:22px; padding:7px 12px; }
  body.pos2[data-tab="teller"] .sb-enter .quick{ margin:6px 0; }
  body.pos2[data-tab="teller"] .keypad{ flex:1 1 auto; min-height:0; grid-template-rows:repeat(4,minmax(0,1fr)); }
  body.pos2[data-tab="teller"] .keypad button{ padding:0; min-height:0; font-size:clamp(17px,2.6vh,28px); }
  body.pos2[data-tab="teller"] .slip{ grid-area:slip; position:static; margin:0; padding:8px 10px; }
  body.pos2[data-tab="teller"] .slip .slip-row{ padding:3px 0; }
  body.pos2[data-tab="teller"] .slip .slip-row.big b{ font-size:clamp(22px,3.4vh,34px); }
  body.pos2[data-tab="teller"] .sb-tender{ grid-area:tender; display:block; margin:0; padding:8px 10px; align-self:start; }
  body.pos2[data-tab="teller"] .sb-tender input{ font-size:18px; padding:6px 10px; }
  body.pos2[data-tab="teller"] .sb-tender .quick{ margin:6px 0; }
  body.pos2[data-tab="teller"] #sellBtn{ grid-area:ticket; margin:0; padding:clamp(8px,1.6vh,16px); font-size:clamp(17px,2.4vh,22px); }
  body.pos2[data-tab="teller"] #pendingNote, body.pos2[data-tab="teller"] #lastRef, body.pos2[data-tab="teller"] #ticketPrint{ grid-area:ticket; align-self:center; z-index:2; }
  /* "No OPEN fight" sits where the sell button is, instead of adding a row */
  body.pos2[data-tab="teller"] #noFight{ grid-area:ticket; margin:0; align-self:stretch; display:flex; align-items:center; justify-content:center; z-index:3; }
  body.pos2[data-tab="teller"] #noFight.hidden{ display:none; }

  body.pos2[data-tab="teller"] .tb-list{ grid-area:list; }
  body.pos2[data-tab="teller"] #ticketsCard{ grid-area:tx; }
  body.pos2[data-tab="teller"] .tb-list, body.pos2[data-tab="teller"] #ticketsCard{ min-height:0; max-height:none; overflow:auto; margin:0; padding:8px 10px; overscroll-behavior:contain; }
  body.pos2[data-tab="teller"] .tb-list h3, body.pos2[data-tab="teller"] #ticketsCard h3{ position:sticky; top:-8px; margin:-8px -10px 6px; padding:8px 10px 4px; background:var(--panel); z-index:1; font-size:12px; }
  body.pos2[data-tab="teller"] .tb-list .fl{ max-height:none; }
  body.pos2[data-tab="teller"] #pos2Bets{ grid-area:bets; padding:8px 10px; }
  body.pos2[data-tab="teller"] #pos2Bets .p2-table td{ padding:5px 6px; }
  body.pos2[data-tab="teller"] .tb-bal{ grid-area:bal; padding:8px 10px; }
  body.pos2[data-tab="teller"] .tb-bal h3, body.pos2[data-tab="teller"] #pos2Bets h3{ margin:0 0 4px; font-size:12px; }
  body.pos2[data-tab="teller"] .tb-row{ padding:2px 0; }
  body.pos2[data-tab="teller"] #pos2Actions{ grid-area:actions; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(0,1fr); gap:6px; padding:8px; min-height:0; align-content:stretch; }
  body.pos2[data-tab="teller"] #pos2Actions .p2-act{ padding:4px 10px; min-height:0; font-size:clamp(11px,1.6vh,14px); }
  body.pos2[data-tab="teller"] #pos2Actions .p2-act:last-child{ grid-column:1 / -1; }
  body.pos2[data-tab="teller"] .pos2-foot{ grid-area:foot; display:flex; padding:2px 10px; font-size:11px; }
  body.pos2[data-tab="teller"] .sb-keys, body.pos2[data-tab="teller"] .sb-card{ display:none; }
}
/* shorter screens (768 / 800 px laptops, landscape tablets): tighten the board rows */
@media (min-width:740px) and (min-height:600px) and (max-height:860px){
  body.pos2[data-tab="teller"] .sb-name{ padding:5px; font-size:13px; }
  body.pos2[data-tab="teller"] .sb-row{ padding:4px 6px; }
  body.pos2[data-tab="teller"] .sb-row b{ font-size:15px; }
  body.pos2[data-tab="teller"] .sb-btns{ padding:6px; gap:6px; }
  body.pos2[data-tab="teller"] .sb-btns .side{ padding:8px; font-size:14px; }
  body.pos2[data-tab="teller"] .sb-btns .side.draw{ padding:5px; font-size:12px; }
  body.pos2[data-tab="teller"] .sb-enter .quick button, body.pos2[data-tab="teller"] .sb-tender .quick button{ padding:4px 0; font-size:13px; }
  body.pos2[data-tab="teller"] .slip .slip-head, body.pos2[data-tab="teller"] .sb-enter-head{ margin-bottom:4px; }
  body.pos2[data-tab="teller"] .slip-note{ display:none; }
}
/* portrait tablets: three columns, lists along the bottom */
@media (min-width:740px) and (max-width:1099px) and (orientation:portrait) and (min-height:900px){
  body.pos2[data-tab="teller"] .tab[data-name="teller"]{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.95fr);
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto minmax(150px,24vh) auto;
    grid-template-areas:
      "head  head   head"
      "board board  bets"
      "board board  bal"
      "keys  slip   actions"
      "keys  tender actions"
      "ticket ticket actions"
      "list  tx     tx"
      "foot  foot   foot"; }
  body.pos2[data-tab="teller"] .pos2-head{ grid-template-columns:auto auto auto minmax(0,1fr) auto auto; }
  body.pos2[data-tab="teller"] .p2-brand span{ display:none; }
  body.pos2[data-tab="teller"] .p2-switch[data-view="classic"]{ display:none; }
}

/* one-screen POS: sizes that follow the screen height (coins stay round, sized by height not width) */
@media (min-width:740px) and (min-height:600px){
  body.pos2[data-tab="teller"] .sb-enter .quick{ justify-items:center; align-items:center; }
  body.pos2[data-tab="teller"] .sb-enter .quick button{ aspect-ratio:1; width:auto; max-width:none; height:clamp(32px,5.4vh,58px); font-size:clamp(11px,1.5vh,14px); }
  body.pos2[data-tab="teller"] .keypad{ gap:6px; }
  body.pos2[data-tab="teller"] .slip{ gap:2px; }
  body.pos2[data-tab="teller"] .slip-row{ font-size:13px; }
  body.pos2[data-tab="teller"] .slip-row b{ font-size:15px; }
  /* cash received: input and change side by side, quick cash underneath */
  body.pos2[data-tab="teller"] .sb-tender{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; align-items:center; }
  body.pos2[data-tab="teller"] .sb-tender .sb-enter-head, body.pos2[data-tab="teller"] .sb-tender .quick{ grid-column:1 / -1; }
  body.pos2[data-tab="teller"] .sb-tender .quick{ margin:6px 0 0; }
  body.pos2[data-tab="teller"] .sb-tender .quick button{ padding:5px 0; }
  body.pos2[data-tab="teller"] .sb-change{ grid-column:2; grid-row:2; margin:0; flex-direction:column; align-items:flex-end; gap:0; font-size:10px; }
  body.pos2[data-tab="teller"] .sb-change b{ font-size:clamp(18px,2.6vh,24px); }
  body.pos2[data-tab="teller"] #pos2Actions kbd{ font-size:10px; padding:1px 4px; }
}
/* portrait tablets: balance beside the slip so the board keeps its natural height */
@media (min-width:740px) and (max-width:1099px) and (orientation:portrait) and (min-height:900px){
  body.pos2[data-tab="teller"] .tab[data-name="teller"]{
    grid-template-rows:auto auto auto minmax(0,1fr) auto minmax(110px,18vh) auto;
    grid-template-areas:
      "head  head   head"
      "board board  bets"
      "keys  slip   bal"
      "keys  tender actions"
      "ticket ticket actions"
      "list  tx     tx"
      "foot  foot   foot"; }
  body.pos2[data-tab="teller"] .p2-brand{ grid-column:auto; }
  body.pos2[data-tab="teller"] .p2-box{ min-width:64px; }
  body.pos2[data-tab="teller"] .p2-status{ font-size:15px; padding:0 10px; }
  body.pos2[data-tab="teller"] .sb-name{ padding:5px; font-size:13px; }
  body.pos2[data-tab="teller"] .sb-row{ padding:4px 6px; }
  body.pos2[data-tab="teller"] .sb-btns{ padding:6px; gap:6px; }
  body.pos2[data-tab="teller"] .sb-btns .side{ padding:9px; }
  body.pos2[data-tab="teller"] .sb-btns .side.draw{ padding:5px; }
  body.pos2[data-tab="teller"] .slip-note{ display:none; }
}

/* one-screen POS below 1100 px too: header on one row, cash-out as a pop-up (the narrow rules stack them) */
@media (min-width:740px) and (min-height:600px){
  body.pos2[data-tab="teller"] .p2-brand{ grid-column:auto; }
  body.pos2[data-tab="teller"] #cashoutCard{ display:none; position:fixed; inset:8vh 8vw auto; z-index:70; box-shadow:0 30px 80px #000c; max-height:84vh; overflow:auto; margin:0; }
  body.pos2[data-tab="teller"].co-open #cashoutCard{ display:block; }
  body.pos2[data-tab="teller"].co-open .p2-close{ display:inline-block; margin-top:8px; }
}
@media (min-width:740px) and (max-width:1199px) and (min-height:600px){
  body.pos2[data-tab="teller"] .p2-brand span{ display:none; }
  body.pos2[data-tab="teller"] .p2-box{ min-width:64px; padding:2px 8px; }
  body.pos2[data-tab="teller"] .p2-box b{ font-size:20px; }
  body.pos2[data-tab="teller"] .p2-status{ font-size:15px; padding:0 10px; }
  body.pos2[data-tab="teller"] #pos2Actions .p2-act{ padding:2px 8px; letter-spacing:.02em; }
}

/* idle lock (staff screens) */
#idleLock{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:rgba(6,10,16,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#idleLock.on{display:grid}
#idleLock .il-box{width:min(360px,calc(100vw - 32px));background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;text-align:center;box-shadow:0 30px 80px #000c}
#idleLock .il-ico{font-size:34px}
#idleLock h3{margin:0;letter-spacing:.08em}
#idleLock .il-who{margin:0;color:var(--mut);font-size:13px}
#idleLock .il-pw{font-size:18px;padding:10px 12px;text-align:center}
#idleLock .il-msg{min-height:1em;margin:0}
body.idle-locked{overflow:hidden}

.tb-warn{margin-top:6px;padding:6px 8px;border-radius:8px;background:#3a2b06;border:1px solid var(--amber);color:#ffd88a;font-size:12px;font-weight:700}

/* ═══ Icon set (2026-10-29): one gold-and-navy family for every icon in the app (brand/ui/ic-*.png). ═══ */
.ic{display:inline-block;width:1.35em;height:1.35em;vertical-align:-.32em;background:center/contain no-repeat;flex:0 0 auto}
.ic-cashin{background-image:url(/brand/ui/ic-cashin.png)} .ic-cashout{background-image:url(/brand/ui/ic-cashout.png)}
.ic-void{background-image:url(/brand/ui/ic-void.png)} .ic-reprint{background-image:url(/brand/ui/ic-reprint.png)}
.ic-print{background-image:url(/brand/ui/ic-print.png)} .ic-settings{background-image:url(/brand/ui/ic-settings.png)}
.ic-logout{background-image:url(/brand/ui/ic-logout.png)} .ic-lock{background-image:url(/brand/ui/ic-lock.png)}
.ic-scan{background-image:url(/brand/ui/ic-scan.png)} .ic-mobile{background-image:url(/brand/ui/ic-mobile.png)}
.ic-key{background-image:url(/brand/ui/ic-key.png)} .ic-timer{background-image:url(/brand/ui/ic-timer.png)}
.ic-warning{background-image:url(/brand/ui/ic-warning.png)} .ic-treasury{background-image:url(/brand/ui/ic-treasury.png)}
.ic-ok{background-image:url(/brand/ui/nav-approver.png)} .ic-admin{background-image:url(/brand/ui/nav-admin.png)}
.ic-menu{background-image:url(/brand/ui/menu.png)} .ic-ticket{background-image:url(/brand/ui/nav-teller.png)}
/* side dots for MERON / WALA (instead of coloured emoji) */
.sdot{display:inline-block;width:.7em;height:.7em;border-radius:50%;vertical-align:.02em;margin-right:.25em}
.sdot.m{background:#e2323c;box-shadow:0 0 6px #e2323c99} .sdot.w{background:#2f86e0;box-shadow:0 0 6px #2f86e099}
/* status lines that are set with textContent get their icon from a class */
.st-ok::before,.st-warn::before{content:"";display:inline-block;width:1.2em;height:1.2em;margin-right:.35em;vertical-align:-.28em;background:center/contain no-repeat}
.st-ok::before{background-image:url(/brand/ui/nav-approver.png)} .st-warn::before{background-image:url(/brand/ui/ic-warning.png)}
/* POS action buttons and drawer menu: icon then label */
.p2-act .ic{width:clamp(18px,2.6vh,28px);height:clamp(18px,2.6vh,28px);margin-right:8px}
.p2-act{justify-content:flex-start;gap:0} .p2-act kbd{margin-left:auto}
.dr-item .ic{width:26px;height:26px;margin-right:10px}
#camScanBtn .ic{width:24px;height:24px;vertical-align:middle}
#idleLock .il-ico{display:flex;justify-content:center} #idleLock .il-ico .ic{width:64px;height:64px}
/* mobile footers: bigger icons (they read as tiny at 22–28 px) */
@media (max-width:759px){
  #tabs button{ padding:7px 2px 6px; gap:3px; }
  #tabs button::before{ width:clamp(30px,8.4vw,38px) !important; height:clamp(30px,8.4vw,38px) !important; }
}
@media (max-width:759px) and (max-width:370px){
  #tabs button::before{ width:30px !important; height:30px !important; }
}
/* action labels stay on one line next to their icon */
.p2-act{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:740px) and (min-height:600px){
  body.pos2[data-tab="teller"] #pos2Actions .p2-act{ letter-spacing:.02em; font-size:clamp(11px,1.45vh,14px); }
  body.pos2[data-tab="teller"] #pos2Actions .p2-act .ic{ margin-right:6px; }
}
#camScanBtn .ic{ width:30px; height:30px; }
/* F-key hint sits in the corner so the label keeps the full width */
@media (min-width:740px) and (min-height:600px){
  body.pos2[data-tab="teller"] #pos2Actions .p2-act{ position:relative; padding-right:8px; }
  body.pos2[data-tab="teller"] #pos2Actions .p2-act kbd{ position:absolute; top:4px; right:5px; margin:0; font-size:9px; padding:0 4px; line-height:1.4; opacity:.85; }
}

/* POS one-screen view: after a sale the receipt preview floats on the right instead of stretching the grid,
   and the "committed" line is a notice under the header that fades out. Printing (F3, REPRINT) is unchanged. */
.tp-close{display:none}
@media (min-width:740px) and (min-height:600px){
  body.pos2[data-tab="teller"] .tp-close{display:inline-block}
  body.pos2[data-tab="teller"] #ticketPrint:not(.hidden){ position:fixed; right:12px; top:96px; width:min(340px,30vw); max-height:calc(100dvh - 116px);
    overflow:auto; z-index:65; margin:0; border-radius:12px; box-shadow:0 24px 70px #000d; grid-area:auto; }
  body.pos2[data-tab="teller"] #lastRef:not(.hidden){ position:fixed; top:5px; left:50%; transform:translateX(-50%); z-index:66; margin:0;
    max-width:min(640px,90vw); padding:8px 16px; border-radius:999px; background:var(--panel2); border:1px solid var(--green); box-shadow:0 10px 30px #000b;
    font-size:14px; white-space:nowrap; animation:cp-notice 6s ease forwards; pointer-events:none; grid-area:auto; }
}
@keyframes cp-notice{ 0%,80%{opacity:1} 100%{opacity:0} }

/* NexusPay environment switch */
.gw-envbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 10px}
.gw-envbar .seg{display:inline-flex;border:1px solid var(--line,#2a3550);border-radius:10px;overflow:hidden}
.gw-envbar .seg-b{background:transparent;border:0;padding:8px 18px;font-weight:700;cursor:pointer;color:inherit;min-height:40px}
.gw-envbar .seg-b.on[data-gw-env="test"]{background:#1f7a4d;color:#fff}
.gw-envbar .seg-b.on[data-gw-env="live"]{background:#b3261e;color:#fff}