@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
:root{--primary:#E8742A;--primary-light:#F5923E;--primary-dark:#D4601A;--secondary:#4A2C2A;--accent:#F5A623;--bg:#FFF9F5;--surface:#fff;--text:#2D1810;--text2:#7C6960;--text3:#B5A59D;--success:#34C759;--error:#FF3B30;--warning:#FFCC00;--border:#F0E6DF;--shadow:0 2px 12px rgba(45,24,16,.08);--shadow-lg:0 8px 32px rgba(45,24,16,.12);--radius:14px;--radius-sm:10px;--radius-lg:20px;--nav-h:64px;--header-h:56px;font-family:'Inter',system-ui,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;overflow-x:hidden}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit}
input,textarea{font-family:inherit;font-size:inherit;border:none;outline:none}
a{text-decoration:none;color:inherit}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--surface);position:relative;overflow:hidden}
.page{min-height:100vh;padding-bottom:80px;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;height:var(--header-h);position:sticky;top:0;background:var(--surface);z-index:100;border-bottom:1px solid var(--border)}
.header-title{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:4px}
.header-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.2rem}
.header-back:active{background:var(--border)}
.header-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.3rem;position:relative}
.cart-badge{position:absolute;top:0;right:0;background:var(--primary);color:#fff;font-size:.65rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}

/* Bottom Nav */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:var(--nav-h);background:var(--surface);display:flex;border-top:1px solid var(--border);z-index:200;padding-bottom:env(safe-area-inset-bottom)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.65rem;font-weight:500;color:var(--text3);transition:.2s}
.nav-item.active{color:var(--primary)}
.nav-item .nav-icon{font-size:1.4rem}

/* Welcome Page */
.welcome{min-height:100vh;display:flex;flex-direction:column;padding-bottom:0}
.welcome-banner{width:100%;height:240px;object-fit:cover;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.welcome-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:32px 24px;text-align:center}
.welcome-title{font-size:1.5rem;font-weight:700;color:var(--primary);margin-bottom:8px}
.welcome-sub{color:var(--text2);margin-bottom:24px;font-size:.9rem}
.welcome-input{width:100%;display:flex;align-items:center;gap:12px;padding:14px 18px;border:2px solid var(--border);border-radius:50px;margin-bottom:20px;transition:.3s}
.welcome-input:focus-within{border-color:var(--primary)}
.welcome-input input{flex:1;font-size:1rem}
.btn-primary{width:100%;padding:15px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-weight:700;font-size:1rem;border-radius:50px;letter-spacing:.5px;transition:.2s;box-shadow:0 4px 16px rgba(232,116,42,.3)}
.btn-primary:active{transform:scale(.97)}
.btn-secondary{color:var(--text2);font-size:.9rem;margin-top:12px;padding:8px}

/* Home Page */
.home-banner{margin:12px;border-radius:var(--radius);overflow:hidden;height:200px;position:relative}
.home-banner img{width:100%;height:100%;object-fit:cover}
.search-bar{margin:0 16px 12px;display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg);border-radius:50px;color:var(--text2);font-size:.9rem}
.section-title{font-size:1rem;font-weight:700;color:var(--primary);padding:8px 16px}
.news-card{margin:0 16px 12px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);height:160px}
.news-card img{width:100%;height:100%;object-fit:cover}

/* Menu Page */
.menu-page{display:flex;flex-direction:column;height:100vh}
.menu-search{padding:8px 12px;border-bottom:1px solid var(--border)}
.menu-search input{width:100%;padding:10px 14px 10px 36px;background:var(--bg);border-radius:var(--radius-sm);font-size:.9rem}
.menu-body{display:flex;flex:1;overflow:hidden}
.cat-sidebar{width:76px;min-width:76px;overflow-y:auto;border-right:1px solid var(--border);padding:4px 0;background:var(--bg)}
.cat-sidebar::-webkit-scrollbar{display:none}
.cat-item{padding:10px 4px;text-align:center;font-size:.65rem;font-weight:500;color:var(--text2);cursor:pointer;border-left:3px solid transparent;transition:.2s;line-height:1.3}
.cat-item.active{color:var(--primary);background:var(--surface);border-left-color:var(--primary);font-weight:700}
.cat-item .cat-icon{font-size:1.4rem;display:block;margin-bottom:2px}
.products-list{flex:1;overflow-y:auto;padding:0 0 80px}
.products-list::-webkit-scrollbar{display:none}
.cat-header{padding:10px 14px;font-weight:700;font-size:1rem;background:linear-gradient(90deg,#FFF3E0,transparent);margin-top:4px;color:var(--secondary)}
.product-card{display:flex;align-items:center;padding:12px 14px;gap:12px;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s}
.product-card:active{background:var(--bg)}
.product-card.locked{opacity:.5}
.product-img{width:72px;height:72px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#f5e6d3,#e8d5c4);display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative}
.product-img img{width:100%;height:100%;object-fit:cover}
.product-badge{position:absolute;bottom:-2px;right:-2px;background:var(--primary);color:#fff;font-size:.55rem;font-weight:800;padding:2px 6px;border-radius:6px}
.product-badge.sale{background:var(--error)}
.product-info{flex:1;min-width:0}
.product-name{font-weight:600;font-size:.9rem;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-price{color:var(--primary);font-weight:700;font-size:.85rem}
.product-add{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:1.2rem;transition:.2s;flex-shrink:0}
.product-add:active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Product Detail Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;opacity:0;transition:.3s;pointer-events:none}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:480px;max-height:92vh;background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:301;transition:transform .35s cubic-bezier(.32,.72,0,1);overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
.modal-overlay.show .modal-sheet{transform:translateX(-50%) translateY(0)}
.modal-close{position:absolute;top:12px;left:12px;z-index:5;width:32px;height:32px;background:var(--surface);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);font-size:1.1rem}
.modal-title{text-align:center;padding:14px;font-weight:700;font-size:1rem;border-bottom:1px solid var(--border)}
.detail-img{width:100%;height:260px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5e6d3,#e8d5c4);font-size:5rem;overflow:hidden}
.detail-img img{width:100%;height:100%;object-fit:cover}
.detail-body{padding:20px 16px}
.detail-name{font-size:1.2rem;font-weight:800}
.detail-price{color:var(--primary);font-weight:700;font-size:1.1rem;margin:4px 0 8px}
.detail-desc{color:var(--text2);font-size:.85rem;line-height:1.6;margin-bottom:16px}
.detail-section{margin-bottom:16px}
.detail-section-title{font-size:.8rem;font-weight:700;color:var(--primary);padding:8px 12px;background:linear-gradient(90deg,#FFF3E0,transparent);border-radius:var(--radius-sm);margin-bottom:8px}
.topping-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.topping-item label{display:flex;align-items:center;gap:8px;cursor:pointer}
.topping-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}
.note-input{width:100%;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;resize:none;min-height:60px;transition:.3s}
.note-input:focus{border-color:var(--primary)}
.qty-control{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0}
.qty-btn{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700}
.qty-btn:active{transform:scale(.9)}
.qty-num{font-size:1.2rem;font-weight:700;min-width:30px;text-align:center}
.add-to-cart-btn{width:calc(100% - 32px);margin:0 16px 16px;padding:15px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-weight:700;font-size:1rem;border-radius:50px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 16px rgba(232,116,42,.3)}
.add-to-cart-btn:active{transform:scale(.97)}

/* Cart Page */
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--text2)}
.cart-empty .empty-icon{font-size:4rem;margin-bottom:16px}
.cart-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.cart-item-img{width:56px;height:56px;border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(135deg,#f5e6d3,#e8d5c4);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-weight:600;font-size:.85rem}
.cart-item-size{color:var(--text3);font-size:.75rem}
.cart-item-price{color:var(--primary);font-weight:700;font-size:.85rem;margin-top:2px}
.cart-item-qty{display:flex;align-items:center;gap:8px}
.cart-qty-btn{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--text2)}
.cart-qty-btn:active{background:var(--primary);color:#fff;border-color:var(--primary)}
.cart-footer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;padding:12px 16px;background:var(--surface);border-top:1px solid var(--border);z-index:100;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.cart-total-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.9rem}
.cart-total-row.total{font-weight:800;font-size:1.1rem;color:var(--primary)}

/* Checkout Page */
.checkout-tabs{display:flex;padding:8px 16px;gap:4px}
.checkout-tab{flex:1;padding:10px 4px;text-align:center;font-size:.75rem;font-weight:600;border-radius:50px;color:var(--text2);transition:.2s}
.checkout-tab.active{background:var(--primary);color:#fff}
.checkout-section{padding:16px;border-bottom:6px solid var(--bg)}
.checkout-section-title{font-weight:700;font-size:.85rem;margin-bottom:10px}
.checkout-field{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;margin-bottom:10px;transition:.3s}
.checkout-field:focus{border-color:var(--primary)}
.checkout-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:.85rem}
.checkout-pay-btn{width:calc(100% - 32px);margin:16px;padding:16px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-weight:800;font-size:1.1rem;border-radius:50px;letter-spacing:1px;box-shadow:0 4px 20px rgba(232,116,42,.35)}
.checkout-pay-btn:active{transform:scale(.97)}

/* Order Method Modal */
.method-option{display:flex;align-items:center;gap:14px;padding:16px;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s}
.method-option:active{background:var(--bg)}
.method-icon{font-size:1.5rem}
.method-label{flex:1;font-weight:600;font-size:.9rem}
.method-action{color:var(--primary);font-size:.85rem;font-weight:600}

/* Toast */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);max-width:420px;width:calc(100% - 32px);padding:14px 20px;background:var(--secondary);color:#fff;border-radius:var(--radius);font-size:.85rem;font-weight:500;z-index:9999;box-shadow:var(--shadow-lg);transition:.4s cubic-bezier(.32,.72,0,1);text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.success{background:var(--success)}
.toast.error{background:var(--error)}

/* Locked Item Popup */
.locked-popup{padding:32px 24px;text-align:center}
.locked-popup .lock-icon{font-size:3rem;margin-bottom:12px}
.locked-popup h3{font-size:1rem;margin-bottom:8px;color:var(--secondary)}
.locked-popup p{color:var(--text2);font-size:.85rem;line-height:1.6;margin-bottom:20px}

/* ===== ADMIN STYLES ===== */
.admin-page{min-height:100vh;background:var(--bg)}
.admin-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--secondary);color:#fff}
.admin-header h1{font-size:1rem;font-weight:700}
.admin-nav{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
.admin-nav::-webkit-scrollbar{display:none}
.admin-nav-item{padding:8px 16px;white-space:nowrap;font-size:.8rem;font-weight:600;border-radius:50px;color:var(--text2);transition:.2s;flex-shrink:0}
.admin-nav-item.active{background:var(--primary);color:#fff}
.hide-scroll::-webkit-scrollbar{display:none}
.hide-scroll{-ms-overflow-style:none;scrollbar-width:none}
.admin-content{padding:12px}
.admin-card{background:var(--surface);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.admin-card h3{font-size:.9rem;font-weight:700;margin-bottom:12px;color:var(--secondary)}
.admin-stat{text-align:center;padding:12px}
.admin-stat .stat-num{font-size:1.8rem;font-weight:800;color:var(--primary)}
.admin-stat .stat-label{font-size:.75rem;color:var(--text2);margin-top:2px}
.admin-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.admin-form label{display:block;font-size:.8rem;font-weight:600;margin-bottom:4px;color:var(--text2)}
.admin-form input,.admin-form textarea,.admin-form select{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:12px;background:var(--bg);transition:.3s}
.admin-form input:focus,.admin-form textarea:focus{border-color:var(--primary);background:var(--surface)}
.admin-form textarea{min-height:80px;resize:vertical}
.admin-btn{padding:10px 20px;border-radius:50px;font-size:.85rem;font-weight:600;transition:.2s}
.admin-btn.primary{background:var(--primary);color:#fff}
.admin-btn.danger{background:var(--error);color:#fff}
.admin-btn.success{background:var(--success);color:#fff}
.admin-btn:active{transform:scale(.95)}
.admin-product-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;background:var(--surface)}
.admin-product-item.locked{opacity:.55;background:#fff5f5}
.admin-product-thumb{width:48px;height:48px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#f5e6d3,#e8d5c4);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.admin-product-thumb img{width:100%;height:100%;object-fit:cover}
.admin-product-info{flex:1;min-width:0}
.admin-product-info .pname{font-weight:600;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-product-info .pprice{font-size:.75rem;color:var(--primary);font-weight:700}
.admin-product-actions{display:flex;gap:4px}
.admin-product-actions button{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;border:1px solid var(--border)}
.admin-product-actions button:active{transform:scale(.9)}
.order-card{background:var(--surface);border-radius:var(--radius);padding:14px;margin-bottom:10px;box-shadow:var(--shadow);border-left:4px solid var(--accent)}
.order-card.pending{border-left-color:var(--warning)}
.order-card.accepted{border-left-color:var(--success)}
.order-card.rejected{border-left-color:var(--error)}
.order-card.completed{border-left-color:var(--text3)}
.order-id{font-weight:800;font-size:.85rem;color:var(--secondary)}
.order-meta{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;font-size:.75rem;color:var(--text2)}
.order-meta span{display:flex;align-items:center;gap:3px}
.order-items-list{font-size:.8rem;padding:8px 0;border-top:1px solid var(--border);margin-top:6px}
.order-total{font-weight:800;color:var(--primary);font-size:.9rem;text-align:right;margin-top:6px}
.order-actions{display:flex;gap:8px;margin-top:10px}
.status-badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:700;color:#fff}
.status-badge.pending{background:var(--warning);color:var(--text)}
.status-badge.accepted{background:var(--success)}
.status-badge.preparing{background:var(--primary)}
.status-badge.completed{background:var(--text3)}
.status-badge.rejected{background:var(--error)}

/* Responsive Desktop */
@media(min-width:768px){.app{box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);margin-top:20px;margin-bottom:20px;min-height:calc(100vh - 40px)}}