/* KRU — point of sale: rail, keypad, QR card, analytics. */
#pos{height:100vh;overflow:hidden;background:var(--lilac);color:var(--ink);display:grid;grid-template-columns:76px 1fr}
body.admin-bar #pos{height:calc(100vh - 32px)}
.rail{background:var(--violet-deep);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px}
.rail .logo{font-family:var(--display);font-weight:800;font-size:19px;color:#fff;margin-bottom:16px;letter-spacing:-.02em}
.rail button{width:52px;height:52px;border-radius:12px;border:0;background:transparent;color:rgba(255,255,255,.6);cursor:pointer;display:grid;place-items:center;gap:3px;font-size:9.5px;font-family:var(--mono);letter-spacing:.04em}
.rail button svg{width:20px;height:20px}
.rail button:hover{background:rgba(255,255,255,.09);color:#fff}
.rail button.on{background:var(--violet);color:#fff}
.rail .spacer{margin-top:auto}

.main{display:flex;flex-direction:column;min-width:0;background:var(--lilac)}
.bar{height:64px;display:flex;align-items:center;gap:14px;padding:0 20px;background:var(--paper);border-bottom:1px solid var(--lilac-line)}
.bar h2{font-family:var(--display);font-weight:700;font-size:19px;margin:0;letter-spacing:-.02em}
.who{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;margin-left:auto}
.av{width:32px;height:32px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}

.pane{flex:1;min-height:0;padding:16px 20px}
#paneQr{overflow:hidden}
#paneStats{overflow-y:auto;padding-bottom:30px}

/* QR charge screen */
.qr-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,344px);gap:clamp(16px,2vw,26px);align-items:stretch;max-width:1040px;margin:0 auto;height:100%;min-height:0}
.pad-card,.qr-card{background:var(--paper);border:1px solid var(--lilac-line);border-radius:18px;padding:clamp(12px,2vh,20px)}
.pad-card{display:flex;flex-direction:column;overflow:hidden;justify-content:center}

.amt-face{background:#FBF9FF;border:1px solid var(--lilac-line);border-radius:12px;padding:clamp(10px,1.7vh,16px) 16px;margin-bottom:clamp(8px,1.5vh,14px);flex:none}
.amt-face small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.amt-face .val{font-family:var(--display);font-weight:800;font-size:clamp(26px,4.4vh,40px);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.amt-face .val.zero{color:#B3A8D6}
.amt-note{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:8px 0 0}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.1vh,10px);flex:none}
.pad button{padding:clamp(9px,1.9vh,17px) 0;border:1px solid var(--lilac-line);background:#FCFBFF;border-radius:12px;font-size:clamp(16px,2.3vh,20px);font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.pad button:hover{background:var(--lilac);border-color:var(--violet)}
.pad button:active{transform:translateY(1px)}
.pad .fn{font-size:15px;color:var(--muted)}
.presets{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:clamp(8px,1.4vh,14px);flex:none}
.presets button{border:1px solid var(--lilac-line);background:#FCFBFF;border-radius:9px;padding:clamp(5px,1vh,8px) 12px;font-family:var(--mono);font-size:12.5px;cursor:pointer}
.presets button:hover{border-color:var(--violet)}
.charge{display:block;width:100%;padding:clamp(11px,2vh,17px);border-radius:12px;border:0;background:var(--violet);color:#fff;font-weight:600;font-size:16.5px;cursor:pointer;margin:clamp(10px,1.7vh,16px) 0 0;flex:none}
.charge:hover:not([disabled]){background:var(--violet-hi)}
.charge[disabled]{opacity:.4;cursor:not-allowed}

.qr-card{text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden}
.qr-card>*{width:100%}
.qr-card h3{font-family:var(--display);font-weight:700;font-size:19px;margin:0 0 2px;letter-spacing:-.02em}
.qr-card .sub{color:var(--muted);font-size:13.5px;margin:0 0 clamp(8px,1.4vh,14px)}
.qr-box{width:min(100%,clamp(180px,38vh,420px));aspect-ratio:1;margin:0 auto;padding:clamp(8px,1.4vh,14px);background:#fff;border:1px solid var(--lilac-line);border-radius:18px;flex:none}
.qr-box svg{display:block;width:100%;height:100%}
.qr-idle{color:var(--muted);font-size:15px;padding:20px;line-height:1.5}
.qr-idle svg{width:clamp(56px,9vh,88px);height:clamp(56px,9vh,88px);opacity:.3;margin-bottom:16px}
.qr-amt{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.6vh,38px);letter-spacing:-.035em;margin:clamp(8px,1.6vh,14px) 0 2px}
.waiting{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;color:var(--muted);margin-top:4px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--violet);animation:pulse 1.15s ease-in-out infinite;flex:none}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.qr-meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:clamp(7px,1.2vh,13px)}
.qr-acts{display:flex;gap:9px;margin-top:clamp(10px,1.7vh,16px);flex:none}
.qr-acts button{flex:1;border:1px solid var(--lilac-line);background:#FCFBFF;border-radius:10px;padding:clamp(9px,1.6vh,13px);font-size:14px;font-weight:600;cursor:pointer}
.qr-acts button:hover{border-color:var(--violet)}
.qr-acts .go{background:var(--violet);border-color:var(--violet);color:#fff}
.qr-acts .go:hover{background:var(--violet-hi)}
@media (max-width:900px){#paneQr{overflow-y:auto}.qr-wrap{grid-template-columns:1fr;max-width:400px;height:auto}.qr-card,.pad-card{overflow:visible}}

/* paid state */
.done{text-align:center}
.tick{width:64px;height:64px;border-radius:50%;background:var(--mint);display:grid;place-items:center;margin:0 auto 16px;color:#fff;animation:pop .3s cubic-bezier(.2,1.5,.4,1) both}
.tick svg{width:32px;height:32px}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.change{font-family:var(--mono);font-size:14px;color:var(--muted);margin:0 0 22px}
.change b{color:var(--ink);font-size:19px;display:block;margin-top:4px}

/* analytics */
.stats-wrap{max-width:1000px;margin:0 auto;display:grid;gap:14px}
.range{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.range button{border:1px solid var(--lilac-line);background:var(--paper);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer}
.range button.on{background:var(--violet);border-color:var(--violet);color:#fff}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--paper);border:1px solid var(--lilac-line);border-radius:16px;padding:18px 20px}
.kpi small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.kpi b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em;line-height:1}
.kpi .delta{font-family:var(--mono);font-size:12px;margin-top:8px;display:inline-block}
.delta.up{color:#0E9C6B}
.delta.down{color:#D14343}
.delta.flat{color:var(--muted)}

.panels{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.panel{background:var(--paper);border:1px solid var(--lilac-line);border-radius:16px;padding:20px}
.panel h3{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;margin:0 0 3px}
.panel .hint{color:var(--muted);font-size:13.5px;margin:0 0 18px}

.bars{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,14px);height:180px}
.cbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.cbar .fill{width:100%;background:var(--lilac);border-radius:8px 8px 3px 3px;transition:height .5s cubic-bezier(.2,.8,.3,1);position:relative}
.cbar.today .fill{background:var(--violet)}
.cbar:hover .fill{background:var(--violet-hi)}
.cbar .lab{font-family:var(--mono);font-size:11px;color:var(--muted)}
.cbar .val{font-family:var(--mono);font-size:10.5px;color:var(--ink);opacity:0;transition:opacity .15s}
.cbar:hover .val,.cbar.today .val{opacity:1}

.hours{display:grid;gap:9px}
.hrow{display:flex;align-items:center;gap:10px;font-size:13.5px}
.hrow .h{font-family:var(--mono);font-size:11.5px;color:var(--muted);width:56px;flex:none}
.hrow .track{flex:1;height:9px;background:var(--lilac);border-radius:99px;overflow:hidden}
.hrow .track i{display:block;height:100%;background:var(--violet);border-radius:99px;transition:width .5s ease}
.hrow .n{font-family:var(--mono);font-size:12px;color:var(--muted);width:34px;text-align:right}

.payout{background:var(--violet);color:#fff;border:0}
.payout h3{color:#fff}
.payout .hint{color:rgba(255,255,255,.72)}
.payout .amt{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,42px);letter-spacing:-.04em;line-height:1;margin:0 0 6px}
.payout .when{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.75)}
.payout button{margin-top:18px;width:100%;border:0;border-radius:11px;padding:13px;background:var(--amber);color:#1B1033;font-weight:600;font-size:15px;cursor:pointer}
.payout button:hover{background:#FFD166}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:0 0 10px}
.tbl td{padding:11px 0;border-top:1px solid #F1EDFB;font-size:14px}
.tbl td.num{font-family:var(--mono);text-align:right}
.tbl .ref{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pill{display:inline-block;background:var(--lilac);color:var(--violet);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600}
.empty-row{color:var(--muted);font-size:14px;padding:26px 0;text-align:center}

@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .panels{grid-template-columns:1fr}
}
@media (max-width:760px){
  #pos{grid-template-columns:64px 1fr}
  .rail{padding:12px 0}
  .rail button{width:48px;height:48px}
}
/* Additions for the standalone till: it has no WordPress admin bar and needs
   a login error state the marketing auth screen never had. */
.kru-pos-body { margin: 0; overflow: hidden; }
.auth-error {
  background: #FDECEC; color: #A32020; border: 1px solid #F3C9C9;
  border-radius: 10px; padding: 10px 12px; margin: 0 0 14px;
  font-size: 13.5px; line-height: 1.4;
}
.auth-box .btn-solid[disabled] { opacity: .6; cursor: progress; }
.pane[hidden] { display: none !important; }
.qr-box svg { display: block; width: 100%; height: 100%; }