:root{--primary: #D2691E;--primary-dark: #A0522D;--primary-light: #E8A66D;--secondary: #2D5016;--accent: #F4A460;--accent-light: #FFD4A3;--bg-primary: #FDF8F3;--bg-secondary: #FFFFFF;--bg-card: #FFFFFF;--bg-card-hover: #FFF9F5;--bg-glass: rgba(255, 255, 255, .95);--bg-warm: linear-gradient(135deg, #FDF8F3 0%, #FFF5EB 50%, #FFEEDD 100%);--text-primary: #2D2319;--text-secondary: #5C4A3D;--text-muted: #9B8579;--border-color: #E8DDD5;--border-light: #D4C4B8;--success: #22C55E;--success-bg: #DCFCE7;--warning: #F59E0B;--warning-bg: #FEF3C7;--danger: #EF4444;--danger-bg: #FEE2E2;--info: #0EA5E9;--info-bg: #E0F2FE;--shadow-sm: 0 1px 3px rgba(139, 90, 43, .08);--shadow-md: 0 4px 16px rgba(139, 90, 43, .12);--shadow-lg: 0 12px 40px rgba(139, 90, 43, .15);--shadow-glow: 0 4px 20px rgba(210, 105, 30, .25);--shadow-card: 0 2px 8px rgba(139, 90, 43, .08), 0 4px 16px rgba(139, 90, 43, .04);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);--font-sans: "Inter", "Noto Sans Thai", -apple-system, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{font-size:15px;scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--bg-warm);color:var(--text-primary);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--text-primary)}h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1rem}.text-gradient{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:var(--transition-normal)}.glass-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-elevated{background:var(--bg-card);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.stat-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:1.25rem;position:relative;overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition-normal)}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent-color, var(--primary))}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.menu-card{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition-normal);cursor:pointer}.menu-card:hover{transform:scale(1.03);box-shadow:var(--shadow-glow)}.menu-card:active{transform:scale(.98)}.menu-card-image{position:relative;overflow:hidden}.menu-card-image:after{content:"";position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 100%);pointer-events:none}.menu-card-image img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:var(--transition-slow)}.menu-card:hover .menu-card-image img{transform:scale(1.1)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;border-radius:var(--radius-md);border:none;cursor:pointer;transition:var(--transition-fast);text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--primary)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--border-color);color:var(--text-primary)}.btn-success{background:linear-gradient(135deg,var(--success) 0%,#16A34A 100%);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-warning{background:var(--warning);color:#fff}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-full)}.btn-lg{padding:.875rem 1.75rem;font-size:1rem}.btn-sm{padding:.375rem .75rem;font-size:.8rem}.btn-block{width:100%}.input{width:100%;padding:.625rem .875rem;font-size:.9rem;font-family:inherit;background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);transition:var(--transition-fast)}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #d2691e26}.input::placeholder{color:var(--text-muted)}.chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .625rem;font-size:.7rem;font-weight:600;border-radius:var(--radius-full);background:var(--border-color);color:var(--text-secondary);border:none}.chip-primary{background:var(--primary);color:#fff}.chip-success{background:var(--success-bg);color:#16a34a}.chip-warning{background:var(--warning-bg);color:#b45309}.chip-danger{background:var(--danger-bg);color:var(--danger)}.chip-info{background:var(--info-bg);color:#0284c7}.badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;background:var(--primary);color:#fff;border-radius:var(--radius-full);animation:badgePop .3s var(--transition-bounce)}@keyframes badgePop{0%{transform:scale(0)}to{transform:scale(1)}}.modal-overlay{position:fixed;inset:0;background:#2d231999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.modal-content{background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:slideUp .35s var(--transition-bounce)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-around;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.5rem 1rem;color:var(--text-muted);text-decoration:none;font-size:.65rem;font-weight:500;transition:var(--transition-fast)}.nav-item.active,.nav-item:hover{color:var(--primary)}.nav-item svg{width:22px;height:22px}.sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:var(--bg-secondary);border-right:1px solid var(--border-color);padding:1.25rem;display:flex;flex-direction:column;z-index:100;box-shadow:var(--shadow-sm)}.sidebar-logo{font-size:1.25rem;font-weight:800;margin-bottom:1.5rem;color:var(--primary)}.sidebar-nav{display:flex;flex-direction:column;gap:.375rem;flex:1}.sidebar-item{display:flex;align-items:center;gap:.625rem;padding:.75rem .875rem;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-md);transition:var(--transition-fast);font-size:.875rem;font-weight:500}.sidebar-item:hover{background:var(--border-color);color:var(--text-primary)}.sidebar-item.active{background:linear-gradient(135deg,#d2691e26,#d2691e14);color:var(--primary);font-weight:600}.main-content{margin-left:220px;padding:1.5rem;min-height:100vh}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.loading-dots{display:flex;gap:.5rem}.loading-dots span{width:10px;height:10px;background:var(--primary);border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}.loading-dots span:nth-child(3){animation-delay:0}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.skeleton{background:linear-gradient(90deg,var(--border-color) 0%,var(--bg-card-hover) 50%,var(--border-color) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background:var(--bg-card);border:1px solid var(--border-color);padding:.75rem 1.25rem;border-radius:var(--radius-full);font-size:.875rem;font-weight:500;box-shadow:var(--shadow-lg);z-index:1500;animation:toastIn .35s var(--transition-bounce)}.toast-success{border-color:var(--success);background:var(--success-bg);color:#16a34a}@keyframes toastIn{0%{transform:translate(-50%,100%);opacity:0}to{transform:translate(-50%);opacity:1}}.signature-badge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,var(--warning) 0%,var(--primary) 100%);color:#fff;padding:.2rem .5rem;border-radius:var(--radius-full);font-size:.6rem;font-weight:700;text-transform:uppercase;box-shadow:var(--shadow-sm);z-index:10}.price-tag{display:inline-flex;align-items:baseline;gap:.125rem;color:var(--primary);font-weight:700}.price-tag .currency{font-size:.7em;font-weight:600}.order-card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;border-left:4px solid var(--status-color, var(--border-color))}.order-card-header{padding:.875rem 1rem;background:linear-gradient(to right,var(--bg-card-hover),var(--bg-card));border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.order-card-body{padding:1rem}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.grid{display:grid}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.text-center{text-align:center}.text-right{text-align:right}.text-sm{font-size:.8rem}.text-xs{font-size:.7rem}.text-lg{font-size:1rem}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.animate-scale-in{animation:scaleIn .3s ease-out}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.animate-float{animation:float 3s ease-in-out infinite}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.page{min-height:100vh;padding-bottom:80px}.page-header{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:1rem 1.25rem;border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:50}@media(max-width:768px){html{font-size:14px}.sidebar{display:none}.main-content{margin-left:0;padding:1rem;padding-bottom:80px}h1{font-size:1.5rem}h2{font-size:1.25rem}}