*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}#root{min-height:100vh;display:flex;flex-direction:column;align-items:center}.container{width:100%;max-width:480px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:16px;padding-bottom:env(safe-area-inset-bottom,16px)}.title{font-size:1.8rem;font-weight:800;color:#0ea5e9;margin:16px 0 8px;text-align:center}.subtitle{font-size:1.4rem;font-weight:700;color:#fbbf24;margin:8px 0;text-align:center}.hint-text{color:#94a3b8;font-size:1.1rem;margin:8px 0;text-align:center}.refill-title{color:#8b5cf6}.comm-title{color:#f97316}.pin-dots{font-size:3rem;font-weight:700;color:#475569;margin:12px 0;letter-spacing:12px;text-align:center}.pin-dots.active{color:#10b981}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:360px;margin:12px auto}.key-btn{padding:18px;font-size:1.4rem;font-weight:700;border:none;border-radius:14px;cursor:pointer;transition:transform .1s,background .15s;-webkit-appearance:none}.key-btn:active{transform:scale(.95)}.key-btn.digit{background:#1e293b;color:#e2e8f0}.key-btn.enter{background:#10b981;color:#fff}.key-btn.delete{background:#ef4444;color:#fff;font-size:1rem}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin:20px 0}.menu-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1e293b;border:2px solid #334155;border-radius:16px;padding:24px 12px;cursor:pointer;transition:transform .1s,border-color .2s;-webkit-appearance:none}.menu-btn:active{transform:scale(.96)}.menu-icon{font-size:2.4rem;margin-bottom:8px}.menu-label{font-size:1rem;font-weight:700;color:#e2e8f0}.menu-drinks{border-color:#0ea5e9}.menu-drinks:active{background:#0c4a6e}.menu-refill{border-color:#8b5cf6}.menu-refill:active{background:#4c1d95}.menu-code{border-color:#fbbf24}.menu-code:active{background:#713f12}.menu-commission{border-color:#f97316}.menu-commission:active{background:#7c2d12}.menu-logout{border-color:#ef4444}.menu-logout:active{background:#7f1d1d}.drink-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;padding:8px 0;flex:1;overflow-y:auto}.drink-btn{background:#1e40af;color:#fff;border:none;border-radius:14px;padding:16px 8px;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .1s;-webkit-appearance:none}.drink-btn:active{transform:scale(.96);background:#1e3a8a}.drink-name{font-size:1.1rem;font-weight:700}.drink-price{font-size:1rem;color:#93c5fd}.drink-stock{font-size:.85rem;color:#60a5fa}.cart-item{display:flex;align-items:center;justify-content:space-between;background:#1e293b;border-radius:12px;padding:12px 14px;margin:6px 0;width:100%}.cart-info{display:flex;flex-direction:column;gap:2px}.cart-item .name{font-size:1.1rem;font-weight:700}.cart-item .price{color:#10b981;font-size:1rem;font-weight:600}.cart-btns{display:flex;gap:6px;align-items:center}.cart-qty{font-size:1.3rem;font-weight:800;min-width:30px;text-align:center}.btn-plus{background:#10b981;color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:700;font-size:1.1rem;cursor:pointer;-webkit-appearance:none}.btn-minus{background:#1e293b;color:#e2e8f0;border:1px solid #475569;border-radius:10px;padding:10px 14px;font-weight:700;font-size:1.1rem;cursor:pointer;-webkit-appearance:none}.btn-remove{background:#ef4444;color:#fff;border:none;border-radius:10px;padding:10px 12px;font-weight:700;font-size:1rem;cursor:pointer;-webkit-appearance:none}.btn-primary{background:#10b981;color:#fff;border:none;border-radius:14px;padding:16px 32px;font-size:1.2rem;font-weight:700;cursor:pointer;margin:4px;width:100%;max-width:360px;-webkit-appearance:none}.btn-primary:active{background:#059669}.btn-primary:disabled{background:#334155;color:#64748b}.btn-secondary{background:#1e293b;color:#e2e8f0;border:1px solid #475569;border-radius:14px;padding:16px 32px;font-size:1.2rem;font-weight:700;cursor:pointer;margin:4px;width:100%;max-width:360px;-webkit-appearance:none}.btn-secondary:active{background:#334155}.btn-danger{background:#ef4444;color:#fff;border:none;border-radius:14px;padding:16px 32px;font-size:1.2rem;font-weight:700;cursor:pointer;margin:4px;width:100%;max-width:360px;-webkit-appearance:none}.btn-danger:active{background:#dc2626}.btn-warning{background:#fbbf24;color:#000;border:none;border-radius:14px;padding:14px 24px;font-size:1.1rem;font-weight:700;cursor:pointer;margin:4px;-webkit-appearance:none}.btn-cart{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;border-radius:14px;padding:16px 20px;font-size:1.15rem;font-weight:700;cursor:pointer;margin:10px 0;width:100%;max-width:360px;text-align:center;-webkit-appearance:none}.btn-cart:active{background:linear-gradient(135deg,#d97706,#b45309)}.btn-commission{background:#f97316;color:#fff;border:none;border-radius:14px;padding:14px 24px;font-size:1.1rem;font-weight:700;cursor:pointer;margin:8px 0;width:100%;max-width:360px;-webkit-appearance:none}.btn-commission:active{background:#ea580c}.btn-refill-custom{background:#6d28d9;color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:700;font-size:1rem;cursor:pointer;-webkit-appearance:none}.btn-user{background:#0891b2;color:#fff;border:none;border-radius:14px;padding:16px;font-size:1.15rem;font-weight:700;cursor:pointer;width:100%;margin:5px 0;-webkit-appearance:none}.btn-user:active{background:#0e7490}.debt-amount{font-size:2rem;font-weight:800;margin:12px 0;text-align:center}.debt-red{color:#ef4444}.debt-green{color:#10b981}.total{font-size:1.6rem;font-weight:800;color:#10b981;margin:8px 0;text-align:center}.commission-total{font-size:1.5rem;font-weight:800;color:#f97316;margin:8px 0;text-align:center}.footer{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%;padding:12px 0;margin-top:auto}.scroll-area{width:100%;flex:1;overflow-y:auto;padding:4px 0;-webkit-overflow-scrolling:touch}.refill-item{display:flex;align-items:center;justify-content:space-between;background:#1e293b;border-radius:12px;padding:12px 14px;margin:6px 0;width:100%}.refill-info{display:flex;flex-direction:column;gap:2px}.refill-item .name{font-size:1.1rem;font-weight:700}.refill-item .stock{color:#94a3b8;font-size:.95rem}.refill-btns{display:flex;gap:6px}.refill-btns button{padding:10px 14px;border:none;border-radius:10px;font-weight:700;cursor:pointer;font-size:1rem}.commission-item{display:flex;align-items:center;justify-content:space-between;background:#1e293b;border-radius:12px;padding:12px 14px;margin:6px 0;width:100%;flex-wrap:wrap;gap:8px}.comm-info{display:flex;flex-direction:column;gap:2px}.comm-info .name{font-size:1.1rem;font-weight:700}.comm-detail{color:#94a3b8;font-size:.95rem}.qty-control{display:flex;align-items:center;gap:8px}.qty-display{font-weight:800;font-size:1.3rem;min-width:32px;text-align:center}.return-label{color:#94a3b8;font-size:.9rem}.keypad-display{font-size:4rem;font-weight:800;color:#10b981;margin:16px 0;text-align:center}.msg-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.msg-box{background:#1e293b;border-radius:20px;padding:32px 24px;text-align:center;width:100%;max-width:360px}.msg-box h2{font-size:1.4rem;margin-bottom:12px}.msg-box p{font-size:1.05rem;color:#94a3b8;margin-bottom:20px;line-height:1.5}.msg-box button{width:100%}@media(max-width:400px){.container{padding:12px}.title{font-size:1.5rem}.key-btn{padding:16px;font-size:1.3rem}.drink-grid{gap:8px}.drink-btn{padding:14px 6px}.drink-name{font-size:1rem}.menu-btn{padding:20px 8px}.menu-icon{font-size:2rem}}