*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0;background:#020617;color:#f8fafc;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}.loginPage{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,rgba(14,165,233,.25),transparent 30%),radial-gradient(circle at bottom right,rgba(168,85,247,.2),transparent 35%),#020617}.loginCard{width:min(440px,92vw);background:#0f172af5;border:1px solid rgba(148,163,184,.28);border-radius:28px;padding:30px;box-shadow:0 30px 90px #00000080;text-align:center}.brandMark{width:76px;height:76px;border-radius:24px;background:linear-gradient(135deg,#0ea5e9,#8b5cf6);display:grid;place-items:center;margin:0 auto 16px;font-size:28px;font-weight:900}.loginCard h1{margin:0;font-size:30px}.loginCard p{color:#94a3b8}.pinInput{width:100%;padding:18px;border-radius:18px;border:1px solid rgba(148,163,184,.35);background:#0f172a;color:#fff;font-size:30px;text-align:center;letter-spacing:12px;outline:none}.pinGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.pinGrid button{padding:18px;border:0;border-radius:16px;background:#1e293b;color:#fff;font-size:22px;font-weight:800}.pinGrid .green{background:#16a34a}.hintBox{margin-top:18px;color:#94a3b8;font-size:13px}.appShell{min-height:100vh;display:grid;grid-template-rows:78px 1fr 72px;background:#020617}.topBar{display:grid;grid-template-columns:1.5fr 1fr .8fr 150px;border-bottom:1px solid rgba(148,163,184,.18);background:#0f172af2}.appTitle,.syncStatus,.staffBox{display:flex;align-items:center;gap:14px;padding:0 18px;border-right:1px solid rgba(148,163,184,.18)}.menuButton{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#111827;font-size:26px}.appTitle h1{font-size:21px;margin:0}.appTitle span{color:#facc15;font-weight:700}.syncStatus strong,.staffBox strong{display:block}.syncStatus small,.staffBox small{color:#cbd5e1}.syncStatus.online svg,.syncStatus.online strong{color:#22c55e}.syncStatus.offline svg,.syncStatus.offline strong{color:#ef4444}.lockButton{margin:14px;border:1px solid rgba(148,163,184,.25);background:#111827;color:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;text-transform:uppercase}.mainGrid{display:grid;grid-template-columns:1.45fr 1fr;gap:0;min-height:0}.leftPane,.rightPane{padding:12px;min-height:0;overflow:hidden}.leftPane{border-right:1px solid rgba(148,163,184,.18)}.categoryGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.categoryButton{min-height:92px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,var(--cat),rgba(15,23,42,.8));color:#fff;border-radius:10px;font-weight:900;text-transform:uppercase;display:grid;place-items:center;gap:6px;box-shadow:inset 0 -8px 18px #00000038}.categoryButton.active{outline:3px solid rgba(255,255,255,.45)}.categoryButton span{font-size:12px}.searchBar{margin-top:10px;height:46px;background:#0f172a;border:1px solid rgba(148,163,184,.2);border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 14px}.searchBar input{flex:1;background:transparent;border:0;outline:0;color:#fff}.productGrid{margin-top:10px;height:calc(100vh - 414px);overflow:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-right:4px}.productButton{min-height:132px;background:linear-gradient(180deg,#111827,#0f172a);color:#fff;border:1px solid rgba(148,163,184,.18);border-radius:12px;display:grid;place-items:center;padding:12px;box-shadow:0 8px 18px #00000038}.productButton strong{font-size:17px}.productButton span{font-weight:900}.productIcon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#38bdf81f;color:#38bdf8}.functionRow{height:68px;margin-top:10px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.functionRow button{border:1px solid rgba(148,163,184,.2);background:#0f172a;color:#fff;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:13px}.functionRow .danger{color:#f87171}.orderPanel,.totalPanel,.reportsPanel{background:linear-gradient(180deg,#0f172afa,#020617eb);border:1px solid rgba(56,189,248,.22);border-radius:14px}.orderPanel{height:45vh;overflow:hidden}.orderHead,.reportsHead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(148,163,184,.18)}.orderHead h2,.reportsHead h2{margin:0;color:#38bdf8;font-size:20px}.orderHead span{color:#38bdf8;font-weight:800}.orderList{height:calc(45vh - 57px);overflow:auto}.emptyOrder{height:100%;display:grid;place-items:center;color:#64748b;font-size:22px}.orderItem{display:grid;grid-template-columns:100px 1fr 90px;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid rgba(148,163,184,.15)}.qtyControls{display:grid;grid-template-columns:30px 1fr 30px;align-items:center;gap:6px}.qtyControls button{height:30px;border:0;border-radius:8px;background:#1e293b;color:#fff;display:grid;place-items:center}.qtyControls strong{text-align:center;font-size:20px}.orderName strong{display:block;font-size:18px}.orderName small{color:#94a3b8}.totalPanel{margin-top:10px;padding:14px 16px}.totalPanel div{display:flex;justify-content:space-between;margin-bottom:8px}.grandTotal{font-size:30px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(148,163,184,.18)}.paymentGrid{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.paymentGrid button{height:106px;border:0;color:#fff;border-radius:12px;font-weight:900;text-transform:uppercase;display:grid;place-items:center;font-size:19px}.payCash{background:linear-gradient(135deg,#16a34a,#22c55e)}.payCard{background:linear-gradient(135deg,#2563eb,#38bdf8)}.payRoom{background:linear-gradient(135deg,#7c3aed,#a855f7)}.bigPayButton{width:100%;height:76px;margin-top:12px;border:0;border-radius:12px;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-size:28px;font-weight:1000}.bottomNav{display:grid;grid-template-columns:repeat(5,1fr);background:#0f172afa;border-top:1px solid rgba(148,163,184,.18)}.bottomNav button{border:0;background:transparent;color:#cbd5e1;font-weight:800;font-size:15px}.bottomNav button.active{color:#38bdf8;background:#0ea5e914}.modalBackdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#020617bf;display:grid;place-items:center;z-index:50}.modalCard{width:min(520px,92vw);background:#0f172a;border:1px solid rgba(148,163,184,.25);border-radius:24px;padding:26px;box-shadow:0 30px 90px #0009}.modalCard h2{margin:0;font-size:28px}.modalAmount{margin:18px 0;font-size:52px;font-weight:1000;color:#22c55e}.modalText{color:#cbd5e1;line-height:1.5}.modalCard input{width:100%;padding:16px;border-radius:14px;border:1px solid rgba(148,163,184,.28);background:#020617;color:#fff;outline:none;margin-top:10px}.modalActions{margin-top:22px;display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.modalActions button{height:58px;border-radius:14px;border:1px solid rgba(148,163,184,.25);background:#1e293b;color:#fff;font-weight:900}.modalActions .confirm{background:#16a34a;border:0}.reportsPanel{height:100%;padding-bottom:14px;overflow:auto}.reportsHead button{border:0;border-radius:12px;background:#2563eb;color:#fff;font-weight:900;padding:12px 16px}.summaryCards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:14px}.summaryCards div{background:#111827;border:1px solid rgba(148,163,184,.15);border-radius:14px;padding:18px}.summaryCards span{color:#94a3b8;display:block}.summaryCards strong{font-size:26px}.salesList{padding:0 14px 14px}.saleRow{display:grid;grid-template-columns:1.5fr 1fr 100px 80px;gap:10px;align-items:center;border-bottom:1px solid rgba(148,163,184,.15);padding:12px 0}.saleRow small{display:block;color:#94a3b8}.saleRow em{color:#22c55e;font-style:normal;font-size:13px}@media(max-width:900px){.appShell{grid-template-rows:auto 1fr auto}.topBar{grid-template-columns:1fr}.appTitle,.syncStatus,.staffBox{min-height:64px;border-right:0;border-bottom:1px solid rgba(148,163,184,.18)}.mainGrid{grid-template-columns:1fr}.rightPane{min-height:620px}.categoryGrid{grid-template-columns:repeat(3,1fr)}.productGrid{height:auto;max-height:520px;grid-template-columns:repeat(3,1fr)}}.modifierLine{color:#facc15;font-size:13px;margin-top:4px;line-height:1.35}.modifierModalCard{width:min(780px,94vw);max-height:92vh;overflow:auto}.modifierGroups{display:grid;gap:14px;margin-top:16px}.modifierGroup{background:#0206178c;border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:14px}.modifierGroupHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.modifierGroupHead strong{font-size:18px;color:#38bdf8}.modifierGroupHead span{color:#94a3b8;font-size:13px;font-weight:800}.modifierOptions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.modifierOption{min-height:64px;border-radius:14px;border:1px solid rgba(148,163,184,.25);background:#111827;color:#fff;display:grid;place-items:center;gap:4px;font-weight:900}.modifierOption.active{background:linear-gradient(135deg,#2563eb,#38bdf8);border-color:transparent}.modifierOption span{color:#bbf7d0;font-size:13px}.modalActions .confirm:disabled{background:#475569;cursor:not-allowed;opacity:.65}.dangerText{color:#fecaca}@media(max-width:700px){.modifierOptions{grid-template-columns:repeat(2,1fr)}}