:root{--blue:#155eef;--ink:#172033;--muted:#667085;--line:#e4e7ec;--bg:#f6f8fc;--card:#fff;--green:#12b76a;--orange:#f79009;--red:#f04438;--purple:#7f56d9;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,a,input,select{font:inherit}button{cursor:pointer}
.topbar{min-height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:10px 22px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:8px;min-width:0}.logo{width:30px;height:30px;border-radius:9px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:900}.build{font-size:10px;background:#eef4ff;color:var(--blue);padding:5px 8px;border-radius:999px;font-weight:800}.top-actions{display:flex;gap:8px}.ghost{border:1px solid var(--line);background:#fff;color:#344054;padding:9px 12px;border-radius:10px;text-decoration:none;white-space:nowrap}
.wrap{max-width:1280px;margin:auto;padding:22px}.hero{border:1px solid #d8e3ff;background:linear-gradient(135deg,#eef4ff,#fff);border-radius:20px;padding:25px;display:flex;justify-content:space-between;align-items:center;gap:20px}.eyebrow{font-size:11px;color:var(--blue);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.hero h1{font-size:32px;line-height:1.1;margin:7px 0}.hero p{color:var(--muted);margin:0;max-width:850px;line-height:1.55}.hero-build{font-weight:900;color:var(--blue);background:#fff;border:1px solid #d8e3ff;padding:12px 15px;border-radius:999px;white-space:nowrap}
.roles{display:flex;gap:8px;margin:16px 0}.role{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px 14px;font-weight:800;color:#475467}.role.active{background:var(--blue);border-color:var(--blue);color:#fff}
.layout{display:grid;grid-template-columns:250px 1fr;gap:16px}.sidebar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:9px;align-self:start;position:sticky;top:84px}.nav-title{font-size:10px;font-weight:900;color:#98a2b3;text-transform:uppercase;padding:9px}.nav-btn{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:10px;color:#344054;margin-bottom:2px}.nav-btn:hover{background:#f2f4f7}.nav-btn.active{background:#eef4ff;color:var(--blue);font-weight:800}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.panel h2{margin:0 0 5px;font-size:25px}.sub{color:var(--muted);line-height:1.45}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat{border:1px solid var(--line);border-radius:12px;padding:13px;background:#fff}.stat small{color:var(--muted)}.stat b{display:block;font-size:22px;margin-top:5px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.card{border:1px solid var(--line);border-radius:13px;padding:14px;background:#fff}.btn{border:0;background:var(--blue);color:#fff;border-radius:9px;padding:9px 12px;font-weight:800}.btn.secondary{background:#eef4ff;color:#175cd3}.btn.success{background:#ecfdf3;color:#067647}.btn.danger{background:#fff1f0;color:#b42318}.btn.warning{background:#fffaeb;color:#b54708}.btn.small{font-size:12px;padding:7px 9px}.actions{display:flex;gap:8px;flex-wrap:wrap}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:11px 0}.row:last-child{border-bottom:0}.pill{font-size:10px;font-weight:900;border-radius:999px;padding:5px 8px;background:#f2f4f7}.pill.green{background:#ecfdf3;color:#067647}.pill.orange{background:#fffaeb;color:#b54708}.pill.blue{background:#eef4ff;color:#175cd3}.pill.red{background:#fef3f2;color:#b42318}.pill.purple{background:#f4f3ff;color:#6941c6}
.notice{padding:12px;background:#eef4ff;color:#175cd3;border-radius:10px;margin-bottom:12px}.successbox{padding:12px;background:#ecfdf3;color:#067647;border-radius:10px}.warningbox{padding:12px;background:#fffaeb;color:#b54708;border-radius:10px}.input{width:100%;border:1px solid #d0d5dd;border-radius:9px;padding:9px;margin:5px 0 10px}.select{border:1px solid #d0d5dd;border-radius:9px;padding:8px;background:#fff}
.product{display:flex;justify-content:space-between;align-items:center;gap:10px}.product+.product{border-top:1px solid var(--line);padding-top:11px;margin-top:11px}.price{font-weight:800}.qty{display:flex;align-items:center;gap:5px}.qty button{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff}
.bill-person{border:1px solid var(--line);border-radius:14px;padding:14px;margin:12px 0}.bill-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.bill-total{font-size:20px;font-weight:900}.bill-item{display:grid;grid-template-columns:1fr 72px 100px;gap:8px;align-items:center;border-top:1px solid var(--line);padding:9px 0}.bill-item select{border:1px solid var(--line);border-radius:8px;padding:7px}.breakdown{display:grid;grid-template-columns:1fr auto;gap:6px;border-top:1px dashed var(--line);padding-top:10px;margin-top:8px}.breakdown b{font-size:15px}.split-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.summary-box{border:1px solid var(--line);background:#f8fafc;border-radius:11px;padding:11px}.summary-box b{display:block;font-size:18px;margin-top:4px}
.receipt{border:1px dashed #98a2b3;border-radius:12px;padding:16px;max-width:480px;background:#fff}.receipt-line{display:flex;justify-content:space-between;gap:10px;padding:5px 0}.receipt-total{border-top:1px dashed #98a2b3;margin-top:8px;padding-top:9px;font-weight:900;font-size:18px}.pos-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:14px}.category-tabs{display:flex;gap:7px;overflow:auto;margin-bottom:12px}.category-tabs button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 11px}.category-tabs button.active{background:#eef4ff;color:var(--blue);border-color:#cbdcff;font-weight:800}.payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.payment-method{border:1px solid var(--line);border-radius:11px;background:#fff;padding:11px;text-align:left}.payment-method.active{border-color:var(--blue);background:#eef4ff}.kds{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.column{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:9px;min-height:250px}.order{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;margin:7px 0}.timeline{display:flex;gap:5px;align-items:center;overflow:auto;padding:8px 0}.step{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:11px}.step.done{background:#ecfdf3;color:#067647;border-color:#b7ebcf}.step.current{background:#eef4ff;color:#175cd3;border-color:#cbdcff;font-weight:800}
#toast{position:fixed;right:15px;bottom:15px;background:#101828;color:#fff;padding:11px 14px;border-radius:10px;opacity:0;transform:translateY(8px);transition:.2s;z-index:100}.toast-show{opacity:1!important;transform:translateY(0)!important}
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{position:static;display:flex;overflow:auto}.nav-title{display:none}.nav-btn{white-space:nowrap;width:auto}.pos-grid{grid-template-columns:1fr}.kds{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.topbar{flex-direction:column;align-items:stretch;gap:8px}.brand{justify-content:flex-start}.top-actions{display:grid;grid-template-columns:1fr 1fr}.top-actions .ghost{text-align:center;margin:0}.wrap{padding:12px}.hero{display:block}.hero h1{font-size:27px}.hero-build{display:inline-block;margin-top:14px}.cards{grid-template-columns:1fr 1fr}.grid2,.grid3,.payment-methods,.kds,.split-summary{grid-template-columns:1fr}.bill-item{grid-template-columns:1fr 70px}.bill-item strong{grid-column:1/-1}}