:root{--pri:#6c3fb5;--pri2:#ff8a00;--bg:#f6f3fb;--card:#fff;--ink:#231a33;--mut:#7a7189;--line:#e7e1f0;--ok:#1a9b5b;--bad:#d93a3a;--r:14px}
*{box-sizing:border-box}
body{margin:0;font-family:Nunito,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
a{color:var(--pri)}
h1{font-size:1.5rem;margin:.2em 0}h2{font-size:1.2rem;margin:1.4em 0 .5em}h3{margin:0 0 .6em;font-size:1.05rem}
input,select,textarea{font:inherit;width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri)}
label{display:block;font-weight:700;font-size:.85rem;margin-bottom:10px;color:#4a4060}
label input,label select,label textarea{margin-top:4px;font-weight:400}
label small{font-weight:400;color:var(--mut)}
label.check{display:flex;gap:8px;align-items:center}label.check input{width:auto;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--pri)}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}.btn.primary:hover{filter:brightness(1.1)}
.btn.small{padding:6px 10px;font-size:.85rem}.btn.big{padding:14px 20px;font-size:1.05rem}.btn.block{width:100%}
.btn:disabled{opacity:.5}
button.link{background:none;border:0;color:var(--pri);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
button.link.danger{color:var(--bad)}
form.inline{display:inline}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.grow{flex:1}.full{grid-column:1/-1}
.muted{color:var(--mut)}.small{font-size:.85rem}.hide{display:none!important}.nowrap{white-space:nowrap}
.neg{color:var(--bad)}.pos{color:var(--ok)}
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:0 1px 3px rgba(60,30,100,.08);margin-bottom:16px}
.narrow{max-width:460px}
.wrap{padding:16px;max-width:1500px;margin:0 auto}
.head-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:12px;background:#e6f7ee;color:#0d6b3d;font-weight:600}
.flash.err{background:#fde8e8;color:#9b1c1c}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;background:#eee;font-size:.75rem;font-weight:700}
.tag.green,.st-confirmed{background:#dcf5e7;color:#0d6b3d}.tag.red,.st-cancelled{background:#fde1e1;color:#9b1c1c}
.st-pending{background:#fff1d6;color:#8a5300}.st-completed{background:#e5ddf6;color:var(--pri)}
.pill{background:var(--pri2);color:#fff;border-radius:20px;padding:2px 10px;font-size:1rem}
/* topbar */
.topbar{display:flex;align-items:center;gap:16px;background:var(--pri);color:#fff;padding:8px 16px;position:sticky;top:0;z-index:10}
.brand,.brand-big{font-weight:800;font-size:1.4rem;color:#fff;text-decoration:none}.brand span,.brand-big span{color:var(--pri2)}
.topbar nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.topbar nav a{color:#e9defc;text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:700;font-size:.9rem}
.topbar nav a.on,.topbar nav a:hover{background:rgba(255,255,255,.18);color:#fff}
.me{display:flex;gap:10px;align-items:center;font-size:.85rem}.me small{opacity:.7}
.shiftbadge{padding:4px 10px;border-radius:20px;text-decoration:none;font-weight:800;font-size:.75rem}
.shiftbadge.open{background:#2fd17f;color:#063}.shiftbadge.closed{background:#ffcf5c;color:#5a3a00}
.navtoggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem}
/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;color:var(--mut)}
td.num,th.num{text-align:right}
tr.click{cursor:pointer}tr.click:hover{background:#faf7ff}
tr.dim{opacity:.5}tr.void td{text-decoration:line-through;color:var(--mut)}tr.sub td{border-top:0;padding-top:0}
.thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;display:block}
/* layout helpers */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:12px 0 16px}
.kpi{background:#fff;border-radius:var(--r);padding:14px;box-shadow:0 1px 3px rgba(60,30,100,.08);text-decoration:none;color:inherit;display:block}
.kpi span{display:block;font-size:.8rem;color:var(--mut);font-weight:700}.kpi b{font-size:1.25rem;display:block;margin:2px 0}.kpi small{color:var(--mut)}
.kpis.small3{grid-template-columns:repeat(3,1fr)}
.tabs{display:flex;gap:6px;margin-bottom:12px}.tabs a{padding:8px 14px;border-radius:20px;background:#fff;text-decoration:none;font-weight:700}.tabs a.on{background:var(--pri);color:#fff}
.filters label{margin:0}
.bars .bar{display:grid;grid-template-columns:50px 1fr 90px;gap:8px;align-items:center;margin-bottom:5px;font-size:.85rem}
.bars .fill{height:14px;background:linear-gradient(90deg,var(--pri),#a77ee8);border-radius:7px;min-width:3px}.bars .val{text-align:right}
/* POS */
.page-pos .wrap{max-width:none;padding:12px}
.posgrid{display:grid;grid-template-columns:1fr 380px;gap:14px;align-items:start}
.pos-right{position:sticky;top:66px;max-height:calc(100vh - 80px);overflow:auto}
.cust .row label{margin:0}
.kids{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.kid{display:flex;gap:10px;align-items:center;justify-content:space-between;border:2px dashed var(--line);border-radius:12px;padding:8px 10px;min-width:230px;flex:1}
.kid.sel{border:2px solid var(--pri);background:#f6f0ff}
.kid .tag{margin-left:4px}
.stepper{display:flex;align-items:center;gap:6px;font-weight:800;white-space:nowrap}
.stepper button{width:34px;height:34px;border-radius:50%;border:0;background:var(--pri);color:#fff;font-size:1.2rem;cursor:pointer}
.stepper button.x{background:#eee;color:#900;font-size:.9rem}
.stepper.sm button{width:28px;height:28px;font-size:1rem}
.addkid input{flex:1;width:auto}
.cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cats button{border:0;background:#fff;padding:9px 16px;border-radius:20px;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cats button.on{background:var(--pri2);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.tile{background:#fff;border:2px solid transparent;border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font:inherit;box-shadow:0 1px 3px rgba(60,30,100,.08);position:relative}
.tile:hover{border-color:var(--pri)}.tile:active{transform:scale(.97)}
.tile img,.tile .noimg{width:100%;aspect-ratio:1.3;object-fit:cover;border-radius:10px}
.tile .noimg{display:flex;align-items:center;justify-content:center;background:#f0eaf9;font-size:2rem;font-weight:800;color:var(--pri)}
.tile.play .noimg{background:#fff1dd;color:var(--pri2)}
.tile .n{font-weight:800;font-size:.9rem;text-align:center;line-height:1.15}.tile .p{color:var(--pri);font-weight:800;font-size:.85rem}
.tile .s{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;border-radius:8px;padding:1px 6px}
.tile.out{opacity:.45}
.cart{min-height:80px}
.line{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line)}
.line small{display:block;color:var(--mut)}.line .lp{font-weight:800;text-align:right}.line .stepper{grid-column:1/-1;justify-content:flex-end}
.totals>div{display:flex;justify-content:space-between;align-items:center;padding:6px 0}.totals input{width:130px;text-align:right}
.totals .grand{font-size:1.4rem;border-top:2px solid var(--ink);margin-top:4px}
.pay{background:#faf7ff;border-radius:12px;padding:10px;margin:10px 0}.pay label{margin-bottom:6px}
.quick{display:flex;gap:6px;margin:4px 0}
.change{font-size:1.1rem;text-align:right}.change.short b{color:var(--bad)}
.modal{position:fixed;inset:0;background:rgba(20,10,40,.55);display:flex;align-items:center;justify-content:center;z-index:50}
.modal .card{width:min(420px,92vw)}.bigchange{font-size:1.6rem}
/* sessions */
.sessions{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.sess{border-left:6px solid var(--ok);margin:0}.sess.soon{border-left-color:#f5a623}.sess.over{border-left-color:var(--bad);background:#fff4f4}
.sess-top{display:flex;justify-content:space-between;align-items:center}.kidname{font-size:1.2rem}
.timer{font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums}.sess.over .timer{color:var(--bad)}
.sess .row{margin-top:8px}
/* login */
.login-page{display:flex;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(135deg,#6c3fb5,#ff8a00)}
.login-box{width:min(380px,92vw);text-align:center}.login-box form{text-align:left}.brand-big{color:var(--pri);font-size:2.2rem;margin:.2em 0}
.ok{color:var(--ok)}.err{color:var(--bad)}
/* receipt / z report (80mm) */
.receipt-body{background:#fff}
.receipt{width:76mm;margin:0 auto;padding:4mm 2mm;font-family:Arial,sans-serif;font-size:13px;color:#000}
.receipt h2{text-align:center;margin:4px 0;font-size:18px}.receipt h3{margin:8px 0 4px;font-size:16px}
.receipt .c{text-align:center}.receipt .r{display:flex;justify-content:space-between;gap:8px;padding:2px 0}.receipt .r span:last-child{text-align:right;white-space:nowrap}
.receipt .r.big{font-weight:800;font-size:16px}.receipt .hr{border-top:1px dashed #000;margin:6px 0}
@media print{.noprint{display:none}@page{margin:0}}
/* responsive */
@media(max-width:1000px){
  .posgrid{grid-template-columns:1fr}.pos-right{position:static;max-height:none}
  .grid2,.formgrid{grid-template-columns:1fr}
  .navtoggle{display:block}.topbar{flex-wrap:wrap}.topbar nav{display:none;flex-basis:100%;order:3}
  body.navopen .topbar nav{display:flex}.me span{display:none}
}