/* CHENGA admin: same night palette as the game, laid out for scanning. */
:root{
  --night:#070b16; --panel:#0d1528; --glass-2:rgba(255,255,255,.05); --line:rgba(255,255,255,.09);
  --cream:#f4f1e8; --muted:#9eabc2; --lime:#c8f05a; --gold:#ffc23d; --red:#e3262f; --mpesa:#3fae3a; --blue:#7cc6ff;
  --display:"Big Shoulders Display","Arial Narrow","Arial Black",Impact,sans-serif;
  --body:"Archivo","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--cream);font:15px/1.45 var(--body)}
button{font-family:var(--body);cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
input,select{font:600 15px var(--body);color:var(--cream);background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
input[type=checkbox]{width:auto;accent-color:var(--lime)}
input[type=file]{font-size:13px;padding:8px}
code{font-size:13px;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:6px;user-select:all;word-break:break-all}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:800;font-size:15px;letter-spacing:.03em;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-go{background:linear-gradient(180deg,#dcff7a,var(--lime));color:#13200a}
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.btn:disabled,.mini:disabled{opacity:.55;cursor:default}
.icon-btn{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center}
.icon-btn svg{width:18px;height:18px}
.lbl{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.err{color:#ff8a7a;font-size:13px;margin:0;min-height:1em}
.ok{color:var(--lime);font-size:13px;margin:0;min-height:1em}
.inv-row{display:flex;gap:8px}.inv-row input{flex:1;min-width:0}.inv-row .btn{flex:none}
.empty{padding:16px 8px;color:var(--muted);text-align:center;font-size:14px}
.h2{margin:0;font-size:20px}
/* auth */
.auth{min-height:100%;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right))}
.auth-card{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px}
.qr{display:grid;place-items:center;background:#fff;border-radius:14px;padding:12px;width:max-content;margin:0 auto}
.qr img{width:200px;height:200px;display:block}
/* misc */
.mode{font-size:11px;font-weight:800;letter-spacing:.12em;padding:5px 9px;border-radius:999px;background:rgba(255,194,61,.15);color:var(--gold);border:1px solid rgba(255,194,61,.4)}
.row-inline{display:flex;gap:8px;align-items:center;font-family:var(--body)}
.row-inline input{width:auto;padding:6px 8px;font-size:13px}
.approve{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.approve .lbl{flex:0 1 200px}
.st{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;text-transform:uppercase}
.st.review{background:rgba(255,194,61,.18);color:var(--gold)}.st.paid{background:rgba(63,174,58,.2);color:#6fd16a}
.st.sending,.st.approved{background:rgba(124,198,255,.18);color:var(--blue)}.st.failed,.st.rejected{background:rgba(227,38,47,.2);color:#ff8a7a}
.flag{display:inline-block;font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;background:rgba(227,38,47,.2);color:#ff8a7a;margin:1px}
.addrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:#0b1328;border-left:1px solid var(--line);z-index:30;display:flex;flex-direction:column;box-shadow:-20px 0 40px rgba(0,0,0,.5)}
.drawer header,.mcard header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer h2,.mcard h2{margin:0;font-family:var(--display);font-weight:900;font-size:26px}
.dbody{overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 10px;font-size:14px}.kv span{color:var(--muted)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:40;padding:16px}
.mcard{background:#0b1328;border:1px solid var(--line);border-radius:18px;width:min(420px,100%);max-height:100%;overflow:auto}
.mcard canvas{display:block;width:100%;height:auto;background:#123;border-bottom:1px solid var(--line)}
.rpbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px}
#rpStats{padding:0 16px 16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:#0d1528;border:1px solid rgba(200,240,90,.4);padding:12px 16px;border-radius:14px;font-weight:700;max-width:min(92vw,480px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.toast.bad{border-color:rgba(227,38,47,.6)}
.afoot{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#whoami{font-size:12px;color:var(--muted)}
.feed b{cursor:pointer}
.clickable{cursor:pointer}.clickable:hover td{background:rgba(255,255,255,.03)}
/* Dashboard */
.dash{position:fixed;inset:0;display:flex;background:var(--night)}
.aside{width:240px;flex:none;background:#0b1328;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) 14px calc(18px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));overflow:auto}
.abrand{font-family:var(--display);font-weight:900;font-size:28px;line-height:.9;color:var(--cream);padding:0 6px 16px}
.abrand small{display:block;font-size:13px;letter-spacing:.2em;color:var(--lime)}
.anav{display:flex;flex-direction:column;gap:2px}
.anav p{margin:14px 6px 4px;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#5d6a85}
.anav button{display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:700;color:#c3cbda}
.anav button:hover{background:rgba(255,255,255,.05)}
.anav button.on{background:var(--lime);color:#13200a}
.cnt{font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.1)}
.anav button.on .cnt{background:rgba(0,0,0,.15)}
.afoot{margin-top:auto;font-size:12px;color:#5d6a85;padding:16px 6px 0}
.amain{flex:1;min-width:0;overflow:auto;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.abar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px 16px;background:rgba(7,11,22,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.abar h1{margin:0 auto 0 0;font-family:var(--display);font-weight:900;font-size:28px;line-height:1}
.abar .btn{padding:9px 13px;font-size:13px}
#aMenu{display:none}
.arange select,.lbl select{font:600 14px var(--body);color:var(--cream);background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.aupd{font-size:12px;color:var(--muted)}
.aauto{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.asec{display:flex;flex-direction:column;gap:14px;padding:16px max(16px,env(safe-area-inset-right,0px)) 0 16px;max-width:1200px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.tile{background:var(--glass-2);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tile span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tile b{font-family:var(--display);font-weight:900;font-size:34px;line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile em{font-style:normal;font-size:12px;color:var(--muted);line-height:1.35}
.tile.dark{background:#13264a;border-color:#22407a}
.tile.good{border-color:rgba(63,174,58,.55)} .tile.good em{color:#6fd16a}
.tile.bad{border-color:rgba(227,38,47,.55)} .tile.bad em{color:#ff8a7a}
.panel{background:var(--glass-2);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.panel h3{margin:0;font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.panel h3 span:last-child:not(:first-child){font-family:var(--body);font-size:12px;font-weight:700;color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:12px}
.tscroll{overflow-x:auto}
.atable{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.atable th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px;border-bottom:2px solid rgba(255,255,255,.18);white-space:nowrap}
.atable td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.atable .n{text-align:right;white-space:nowrap}
.atable small{color:var(--muted)}
.atable .muted,.muted{color:var(--muted)}
.atable .acts{white-space:nowrap}
.chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;padding:1px 6px;border-radius:999px;background:rgba(200,240,90,.18);color:var(--lime)}
.chip.red{background:rgba(227,38,47,.2);color:#ff8a7a}.chip.gold{background:rgba(255,194,61,.2);color:var(--gold)}
.mini{border:0;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:800;background:var(--lime);color:#13200a;margin:2px}
.mini.ghost{background:rgba(255,255,255,.06);color:var(--cream);border:1px solid var(--line)}
.mini:disabled{opacity:.6}
#plSearch{max-width:420px}
.feed{display:grid;grid-template-columns:70px minmax(80px,auto) 1fr;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px}
.feed time{color:var(--muted);font-size:12px}
.feed span{color:#c3cbda;min-width:0}
.lrow{display:grid;grid-template-columns:150px 1fr auto;gap:8px;align-items:center;padding:4px 0}
.lrow span{font-weight:700;font-size:14px}
.lrow input{font-size:13px;padding:9px 10px}
.seg{display:inline-flex;gap:4px;padding:3px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.seg button{border:0;background:transparent;padding:7px 12px;border-radius:9px;font-size:13px;font-weight:800;color:var(--muted);font-family:var(--body)}
.seg button.on,.seg button:hover{background:var(--lime);color:#13200a}
.seg.wide{display:flex}.seg.wide button{flex:1}
.god{display:grid;gap:8px}
.god .btn{flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:12px 14px}
.god small{font-weight:600;font-size:12px;color:var(--muted)}
.danger{color:#ff8a7a!important;border-color:rgba(227,38,47,.45)!important}
.gdfeed{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto}
.mrow{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.03);flex-wrap:wrap}
.mrow.admin{background:rgba(255,194,61,.08)}
.mrow p{margin:2px 0 0;font-size:14px;overflow-wrap:anywhere}
.mrow time{color:var(--muted);font-size:12px}
.mrow > div:first-child{min-width:0;flex:1 1 200px}
.tg{display:flex;gap:8px;align-items:center;font-weight:700}
.sp-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.sp-up > div{display:flex;flex-direction:column;gap:8px}
.prev{height:90px;border-radius:12px;background:rgba(0,0,0,.3);border:1px dashed var(--line);display:grid;place-items:center;overflow:hidden}
.prev img{max-height:80px;max-width:100%}
.chart svg{width:100%;height:auto;display:block}
.chart .grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.chart path{fill:#9fc23e}.chart path.today{fill:var(--lime)}
.chart text{fill:var(--muted);font-size:12px;font-family:var(--body)}
.chart .bar:hover path,.chart .bar:focus path{fill:#e2ff8f}
.dnote{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.ptable{display:flex;flex-direction:column;gap:2px;overflow-x:auto}
.prow{display:grid;grid-template-columns:28px minmax(120px,1fr) 90px minmax(130px,auto) 70px;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;font-variant-numeric:tabular-nums;min-width:460px}
.prow:nth-child(odd){background:rgba(255,255,255,.03)}
.prow .rk{font-family:var(--display);font-weight:900;font-size:18px;color:var(--gold)}
.prow .nm{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .nm small{display:block;font-weight:600;color:var(--muted)}
.prow .pz{color:#6fd16a;font-weight:800}
.prow .ph{font-weight:700;user-select:text;-webkit-user-select:text}
.prow .ph.none{color:var(--muted);font-weight:600}
.prow .paid{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:700}
.prow .paid input{width:18px;height:18px;accent-color:var(--lime)}
@media (max-width:900px){
  .aside{position:absolute;left:0;top:0;bottom:0;z-index:5;transform:translateX(-105%);transition:transform .25s ease;box-shadow:20px 0 40px rgba(0,0,0,.5)}
  .dash.navopen .aside{transform:none}
  #aMenu{display:grid}
  .abar h1{font-size:22px}
  .aauto{display:none}
  .lrow{grid-template-columns:1fr auto}.lrow span{grid-column:1/-1}
}