@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";:root{--cream: #fdf6ee;--brown-dark: #3e2723;--brown-medium: #5d4037;--brown-light: #8d6e63;--brown-lighter: #bcaaa4;--taro: #9c7bb5;--matcha: #7cb342;--strawberry: #e57373;--mango: #ffb74d;--caramel: #d4a056;--milk: #fff8e1;--boba: #1a1a1a;--shadow: 0 4px 24px rgba(62, 39, 35, .12);--shadow-sm: 0 2px 8px rgba(62, 39, 35, .08);--radius: 16px;--radius-sm: 10px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;font-family:Poppins,ui-sans-serif,system-ui,sans-serif;background:var(--cream);color:var(--brown-dark);line-height:1.6}.header{background:linear-gradient(135deg,var(--brown-dark) 0%,var(--brown-medium) 100%);color:var(--milk);padding:1.5rem 2rem;text-align:center;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px #3e27234d}.header-logo{font-size:2rem;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;gap:.5rem}.header-logo .boba-icon{font-size:2.2rem}.header-subtitle{font-size:.85rem;opacity:.8;margin-top:.25rem;font-weight:400}.app-layout{max-width:1200px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}@media(max-width:768px){.app-layout{grid-template-columns:1fr;padding:1rem}}.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;border:1px solid rgba(141,110,99,.1)}.card-title{font-size:1.25rem;font-weight:600;color:var(--brown-dark);margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem;padding-bottom:.75rem;border-bottom:2px solid var(--milk)}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.85rem;font-weight:600;color:var(--brown-medium);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em}.form-select,.form-input{width:100%;padding:.7rem 1rem;border:2px solid rgba(141,110,99,.2);border-radius:var(--radius-sm);font-family:inherit;font-size:.95rem;color:var(--brown-dark);background:var(--cream);transition:border-color .2s,box-shadow .2s;-moz-appearance:none;appearance:none;-webkit-appearance:none}.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d4037' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}.form-select:focus,.form-input:focus{outline:none;border-color:var(--caramel);box-shadow:0 0 0 3px #d4a05626}.toppings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.topping-chip{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border:2px solid rgba(141,110,99,.15);border-radius:var(--radius-sm);background:var(--cream);cursor:pointer;font-size:.85rem;transition:all .2s;-webkit-user-select:none;user-select:none}.topping-chip:hover{border-color:var(--caramel)}.topping-chip.selected{border-color:var(--caramel);background:#d4a0561a}.topping-chip input{display:none}.topping-check{width:18px;height:18px;border-radius:4px;border:2px solid var(--brown-lighter);display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:all .2s;flex-shrink:0}.topping-chip.selected .topping-check{background:var(--caramel);border-color:var(--caramel);color:#fff}.price-row{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;margin-top:.5rem;border-top:2px dashed rgba(141,110,99,.15);font-weight:600;font-size:1.1rem}.price-amount{color:var(--caramel);font-size:1.3rem}.btn-order{width:100%;padding:.85rem;background:linear-gradient(135deg,var(--brown-dark),var(--brown-medium));color:var(--milk);border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .2s;margin-top:.5rem}.btn-order:hover{transform:translateY(-1px);box-shadow:0 6px 20px #3e272340}.btn-order:active{transform:translateY(0)}.orders-list{display:flex;flex-direction:column;gap:1rem}.order-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid rgba(141,110,99,.1);overflow:hidden;transition:box-shadow .2s}.order-card:hover{box-shadow:var(--shadow)}.order-card-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:var(--milk);border-bottom:1px solid rgba(141,110,99,.08)}.order-id{font-weight:700;font-size:.9rem;color:var(--brown-dark)}.order-time{font-size:.75rem;color:var(--brown-light)}.order-card-body{padding:1rem 1.25rem}.order-detail{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.3rem}.order-detail-label{color:var(--brown-light)}.order-detail-value{font-weight:500;color:var(--brown-dark)}.order-card-footer{padding:1rem 1.25rem;border-top:1px solid rgba(141,110,99,.08)}.status-tracker{display:flex;align-items:center;gap:0;margin-bottom:.75rem}.status-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}.status-dot{width:28px;height:28px;border-radius:50%;background:#8d6e6326;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--brown-lighter);z-index:1;transition:all .3s}.status-step.active .status-dot{background:var(--caramel);color:#fff;box-shadow:0 0 0 4px #d4a05633}.status-step.completed .status-dot{background:var(--matcha);color:#fff}.status-step-label{font-size:.65rem;color:var(--brown-lighter);margin-top:.35rem;text-align:center;font-weight:500;white-space:nowrap}.status-step.active .status-step-label,.status-step.completed .status-step-label{color:var(--brown-medium)}.status-line{flex:1;height:3px;background:#8d6e6326;margin:0 -4px;margin-bottom:1.2rem;position:relative}.status-line.completed{background:var(--matcha)}.status-line.active{background:linear-gradient(90deg,var(--matcha) 0%,rgba(212,160,86,.3) 100%)}.status-text{text-align:center;font-size:.85rem;font-weight:600;padding:.35rem .75rem;border-radius:20px;display:inline-block}.status-text[data-status="0"]{color:var(--brown-light);background:#8d6e6314}.status-text[data-status="1"]{color:var(--caramel);background:#d4a0561f}.status-text[data-status="2"]{color:var(--matcha);background:#7cb3421f}.status-text[data-status="3"]{color:#43a047;background:#43a0471f}.status-center{text-align:center}.empty-state{text-align:center;padding:3rem 1rem;color:var(--brown-lighter)}.empty-state-icon{font-size:3.5rem;margin-bottom:1rem;opacity:.6}.empty-state p{font-size:.9rem}.nav-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem}.nav-tab{flex:1;padding:.65rem;border:2px solid rgba(141,110,99,.15);border-radius:var(--radius-sm);background:#fff;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--brown-light);cursor:pointer;transition:all .2s;text-align:center}.nav-tab:hover{border-color:var(--caramel);color:var(--brown-dark)}.nav-tab.active{background:var(--brown-dark);color:var(--milk);border-color:var(--brown-dark)}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--strawberry);color:#fff;font-size:.7rem;font-weight:700;margin-left:.4rem}.sugar-indicator{display:flex;gap:4px;align-items:center}.sugar-dot{width:12px;height:12px;border-radius:50%;background:#8d6e6326}.sugar-dot.filled{background:var(--caramel)}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.order-card{animation:slideUp .3s ease-out}@keyframes pulse{0%,to{box-shadow:0 0 #d4a0564d}50%{box-shadow:0 0 0 8px #d4a05600}}.status-step.active .status-dot{animation:pulse 2s infinite}.btn-complete{width:100%;padding:.5rem;background:var(--matcha);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s;margin-top:.5rem}.btn-complete:hover{background:#689f38}.btn-delete{background:none;border:none;color:var(--brown-lighter);cursor:pointer;font-size:1.1rem;padding:.25rem;transition:color .2s;line-height:1}.btn-delete:hover{color:var(--strawberry)}.order-header-actions{display:flex;align-items:center;gap:.5rem}