:root {
  --md-sys-color-primary: #00685f;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #008378;
  --md-sys-color-on-primary-container: #f4fffc;
  --md-sys-color-secondary: #006a63;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #99efe5;
  --md-sys-color-on-secondary-container: #006f67;
  --md-sys-color-tertiary: #924628;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #b05e3d;
  --md-sys-color-on-tertiary-container: #fffbff;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-background: #f8f9ff;
  --md-sys-color-on-background: #0b1c30;
  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-on-surface: #0b1c30;
  --md-sys-color-surface-variant: #d3e4fe;
  --md-sys-color-on-surface-variant: #3d4947;
  --md-sys-color-outline: #6d7a77;
  --md-sys-color-outline-variant: #bcc9c6;
  --md-sys-color-surface-dim: #cbdbf5;
  --md-sys-color-surface-bright: #f8f9ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #eff4ff;
  --md-sys-color-surface-container: #e5eeff;
  --md-sys-color-surface-container-high: #dce9ff;
  --md-sys-color-surface-container-highest: #d3e4fe;
  --md-sys-color-inverse-surface: #213145;
  --md-sys-color-inverse-on-surface: #eaf1ff;
  --md-sys-color-inverse-primary: #6bd8cb;
  --md-ref-font-family: 'Inter', sans-serif;
}
body { font-family:'Inter',sans-serif; background:var(--md-sys-color-background); color:var(--md-sys-color-on-surface); margin:0; padding:0 0 96px; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
*,*::before,*::after { box-sizing:border-box; }
.hide-scrollbar::-webkit-scrollbar { display:none; }
.hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* ═══ M3 TopAppBar ═══ */
.top-app-bar { position:sticky; top:0; z-index:50; background:var(--md-sys-color-surface); border-bottom:1px solid var(--md-sys-color-outline-variant); padding:0 16px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.top-app-bar h1 { font-size:22px; font-weight:600; color:var(--md-sys-color-primary); display:flex; align-items:center; gap:8px; }
.top-app-bar .icon-btn { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:9999px; border:none; background:transparent; color:var(--md-sys-color-on-surface-variant); cursor:pointer; transition:background .2s; }
.top-app-bar .icon-btn:hover { background:var(--md-sys-color-surface-container-high); }
.top-app-bar .icon-btn:active { transform:scale(.92); }

/* ═══ M3 Bottom Navigation ═══ */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:50; background:var(--md-sys-color-surface-container); border-radius:16px 16px 0 0; box-shadow:0 -2px 8px rgba(0,0,0,.06); display:flex; justify-content:space-around; align-items:center; height:72px; padding:0 8px; display:none; }
.bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 16px; border-radius:9999px; text-decoration:none; color:var(--md-sys-color-on-surface-variant); font-size:12px; font-weight:500; transition:all .2s; cursor:pointer; gap:2px; border:none; background:transparent; min-width:64px; }
.bottom-nav a:active { transform:scale(.92); }
.bottom-nav a.active { background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); }
.bottom-nav a .nav-icon { font-size:24px; }
.bottom-nav a.active .nav-icon { font-variation-settings:'FILL' 1; }

/* ═══ Container ═══ */
.container { max-width:800px; margin:0 auto; padding:16px; }
.loading { position:relative; }
.loading::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--md-sys-color-primary) 30%,var(--md-sys-color-tertiary) 60%,var(--md-sys-color-primary) 100%);
  background-size:200% 100%;
  animation:loadingBar 1.2s ease-in-out infinite;
  border-radius:0 0 2px 2px;
  z-index:10;
}
@keyframes loadingBar { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.empty-state { text-align:center; padding:64px 16px; color:var(--md-sys-color-on-surface-variant); font-size:14px; }
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; }

/* ═══ M3 Card ═══ */
.card { background:var(--md-sys-color-surface-container-lowest); border-radius:12px; padding:16px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); border:1px solid var(--md-sys-color-outline-variant); transition:box-shadow .2s; }
.card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
.card-static { background:var(--md-sys-color-surface-container-lowest); border-radius:12px; padding:16px; margin-bottom:12px; border:1px solid var(--md-sys-color-outline-variant); }

/* ═══ M3 Buttons ═══ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); border:none; border-radius:12px; padding:12px 24px; font-size:14px; font-weight:500; font-family:inherit; cursor:pointer; transition:all .2s; text-decoration:none; }
.btn:active { transform:scale(.95); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-secondary { background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); }
.btn-outline { background:transparent; border:1px solid var(--md-sys-color-outline); color:var(--md-sys-color-primary); }
.btn-error { background:var(--md-sys-color-error); color:var(--md-sys-color-on-error); }
.btn-ghost { background:transparent; color:var(--md-sys-color-primary); border:1px solid var(--md-sys-color-outline-variant); }
.btn-sm { padding:8px 16px; font-size:12px; border-radius:8px; }
.btn-xs { padding:4px 10px; font-size:11px; border-radius:8px; }
.btn-full { width:100%; }
.btn-fab { position:fixed; bottom:88px; right:16px; width:56px; height:56px; border-radius:16px; padding:0; z-index:40; box-shadow:0 4px 12px rgba(0,104,95,.3); }
.btn-fab:active { transform:scale(.92); }

/* ═══ M3 Inputs ═══ */
input,textarea,select { width:100%; padding:10px 14px; margin:4px 0 12px; border:1px solid var(--md-sys-color-outline); border-radius:8px; font-size:14px; font-family:inherit; background:var(--md-sys-color-surface-container-low); color:var(--md-sys-color-on-surface); transition:border-color .2s,box-shadow .2s; }
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--md-sys-color-primary); box-shadow:0 0 0 2px var(--md-sys-color-primary-container); }
input::placeholder,textarea::placeholder { color:var(--md-sys-color-outline-variant); }
label { display:block; font-size:12px; font-weight:500; color:var(--md-sys-color-on-surface-variant); margin-bottom:2px; padding-left:4px; }
.input-group { position:relative; margin-bottom:8px; }
.input-group .input-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--md-sys-color-on-surface-variant); font-size:20px; }
.input-group input { padding-left:40px; }

/* ═══ M3 Chips ═══ */
.chip-row { display:flex; gap:8px; overflow-x:auto; padding:8px 0; margin-bottom:8px; }
.chip { display:inline-flex; align-items:center; gap:4px; padding:6px 16px; border-radius:9999px; font-size:12px; font-weight:500; border:none; cursor:pointer; white-space:nowrap; background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface-variant); transition:all .2s; font-family:inherit; }
.chip:active { transform:scale(.93); }
.chip.active { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); box-shadow:0 1px 4px rgba(0,104,95,.2); }

/* ═══ M3 Badges / Status ═══ */
.status-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:9999px; font-size:11px; font-weight:600; }
.status-pending { background:#fff3cd; color:#856404; }
.status-pending_custom { background:#fdeeba; color:#7a5800; }
.status-accepted { background:#d1e7dd; color:#0a3622; }
.status-preparing { background:#cfe2ff; color:#084298; }
.status-out_for_delivery { background:#e2d9f3; color:#41226e; }
.status-delivered { background:#d1e7dd; color:#0a3622; }
.status-cancelled { background:#f8d7da; color:#58151c; }

/* ═══ Quantity Stepper ═══ */
.qty-stepper { display:inline-flex; align-items:center; background:var(--md-sys-color-surface-container); border-radius:9999px; padding:2px; gap:0; }
.qty-stepper button { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; border-radius:9999px; cursor:pointer; font-size:18px; transition:all .15s; }
.qty-stepper button:active { transform:scale(.88); }
.qty-stepper .qty-minus { background:var(--md-sys-color-surface-container-highest); color:var(--md-sys-color-on-surface); }
.qty-stepper .qty-plus { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); }
.qty-stepper .qty-value { min-width:28px; text-align:center; font-weight:600; font-size:14px; }

/* ═══ Toggle Switch ═══ */
.switch { position:relative; display:inline-block; width:48px; height:28px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; margin:0; padding:0; }
.switch .slider { position:absolute; cursor:pointer; inset:0; background:var(--md-sys-color-outline-variant); transition:.3s; border-radius:28px; }
.switch .slider::before { content:""; position:absolute; height:20px; width:20px; left:4px; bottom:4px; background:#fff; transition:.3s; border-radius:50%; }
.switch input:checked + .slider { background:var(--md-sys-color-primary); }
.switch input:checked + .slider::before { transform:translateX(20px); }

/* ═══ Modal / Bottom Sheet ═══ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:flex-end; justify-content:center; z-index:200; }
.modal-overlay.active { display:flex; }
.modal-content { background:var(--md-sys-color-surface-container-lowest); padding:24px; border-radius:16px 16px 0 0; max-width:600px; width:100%; max-height:85vh; overflow-y:auto; animation:slideUp .25s ease; }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

/* ═══ Toast ═══ */
.toast { position:fixed; bottom:88px; left:50%; transform:translateX(-50%); background:#323232; color:#fff; padding:10px 24px; border-radius:24px; font-size:13px; z-index:999; display:none; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.2); }

/* ═══ Offline Banner ═══ */
.offline-banner { background:var(--md-sys-color-error); color:#fff; text-align:center; padding:6px; font-size:12px; display:none; }

/* ═══ Utility ═══ */
.flex { display:flex; gap:8px; align-items:center; }
.flex-wrap { flex-wrap:wrap; }
.flex-1 { flex:1; }
.justify-between { justify-content:space-between; }
.gap-sm { gap:6px; }
.gap-md { gap:12px; }
.gap-lg { gap:16px; }
.mt-1 { margin-top:8px; }
.mt-2 { margin-top:16px; }
.mb-1 { margin-bottom:8px; }
.text-center { text-align:center; }
.text-sm { font-size:13px; }
.text-xs { font-size:11px; }
.text-muted { color:var(--md-sys-color-on-surface-variant); }
.text-primary { color:var(--md-sys-color-primary); }
.text-error { color:var(--md-sys-color-error); }
.font-bold { font-weight:600; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.w-full { width:100%; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rounded-xl { border-radius:12px; }
.overflow-auto { overflow:auto; }

/* ═══ Stitch-style components ═══ */
.search-bar { position:relative; }
.search-bar input { width:100%; height:56px; padding:0 16px 0 48px; background:var(--md-sys-color-surface-container-low); border:none; border-radius:12px; font-size:16px; font-family:inherit; color:var(--md-sys-color-on-surface); }
.search-bar input:focus { outline:none; box-shadow:inset 0 0 0 2px var(--md-sys-color-primary); }
.search-bar .search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--md-sys-color-outline); pointer-events:none; }

.banner-card { position:relative; border-radius:32px; overflow:hidden; height:192px; cursor:pointer; box-shadow:0 4px 16px rgba(0,104,95,.15); }
.banner-card .banner-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .7s; }
.banner-card:hover .banner-bg { transform:scale(1.05); }
.banner-card .banner-overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(11,28,48,.8) 0%, rgba(11,28,48,.4) 60%, transparent 100%); }
.banner-card .banner-content { position:relative; z-index:10; padding:24px; max-width:60%; height:100%; display:flex; flex-direction:column; justify-content:center; }
.banner-card .banner-label { color:var(--md-sys-color-secondary-fixed); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
.banner-card .banner-title { color:#fff; font-size:20px; font-weight:700; line-height:1.2; margin-bottom:12px; }
.banner-card .banner-btn { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); border:none; border-radius:8px; padding:8px 16px; font-size:12px; font-weight:500; cursor:pointer; transition:all .2s; font-family:inherit; align-self:flex-start; }
.banner-card .banner-btn:active { transform:scale(.95); }

.product-card { background:var(--md-sys-color-surface-container-lowest); border-radius:12px; padding:8px; border:1px solid var(--md-sys-color-outline-variant); display:flex; flex-direction:column; transition:box-shadow .3s; }
.product-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
.product-card .prod-img { aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--md-sys-color-surface-container-low); margin-bottom:8px; position:relative; }
.product-card .prod-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.product-card:hover .prod-img img { transform:scale(1.1); }
.product-card .prod-fav { position:absolute; top:6px; right:6px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.8); border:none; cursor:pointer; color:var(--md-sys-color-primary); transition:all .2s; }
.product-card .prod-fav:active { transform:scale(.9); }
.product-card .prod-name { font-size:14px; font-weight:600; padding:0 4px; }
.product-card .prod-unit { font-size:11px; color:var(--md-sys-color-on-surface-variant); padding:0 4px; }
.product-card .prod-bottom { display:flex; align-items:center; justify-content:space-between; padding:4px; margin-top:4px; }
.product-card .prod-price { font-size:14px; font-weight:700; color:var(--md-sys-color-primary); }
.product-card .prod-add { width:36px; height:36px; border-radius:8px; border:none; background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
.product-card .prod-add:active { transform:scale(.9); }

.fab { position:fixed; bottom:96px; right:16px; z-index:40; width:56px; height:56px; border-radius:16px; border:none; background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,104,95,.3); cursor:pointer; transition:all .2s; }
.fab:active { transform:scale(.92); }
.fab .fab-badge { position:absolute; top:-4px; right:-4px; background:var(--md-sys-color-tertiary); color:var(--md-sys-color-on-tertiary); font-size:10px; min-width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-weight:700; }

.bill-summary { background:var(--md-sys-color-surface-container-low); border-radius:16px; padding:16px; border:1px solid var(--md-sys-color-outline-variant); }
.bill-summary h3 { font-size:14px; font-weight:600; color:var(--md-sys-color-on-surface-variant); margin:0 0 12px; padding-bottom:12px; border-bottom:1px solid var(--md-sys-color-outline-variant); }
.bill-summary .bill-row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; color:var(--md-sys-color-on-surface-variant); }
.bill-summary .bill-row.total { border-top:1px dashed var(--md-sys-color-outline-variant); margin-top:8px; padding-top:12px; font-weight:700; color:var(--md-sys-color-primary); font-size:18px; }

.checkout-bar { position:fixed; bottom:72px; left:0; right:0; z-index:40; padding:16px; background:linear-gradient(to top, var(--md-sys-color-surface), transparent); }
.checkout-bar .checkout-btn { width:100%; background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); border:none; border-radius:12px; padding:16px 24px; display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit; box-shadow:0 4px 12px rgba(0,104,95,.2); }
.checkout-bar .checkout-btn:active { transform:scale(.98); }

.promo-section { margin-top:16px; }
.promo-section label { font-size:12px; font-weight:500; color:var(--md-sys-color-on-surface-variant); margin-bottom:8px; display:block; padding-left:8px; }
.promo-row { display:flex; gap:8px; padding:4px; background:var(--md-sys-color-surface-container); border-radius:12px; }
.promo-row input { flex:1; background:transparent; border:none; padding:8px 12px; font-size:14px; font-family:inherit; color:var(--md-sys-color-on-surface); }
.promo-row input:focus { outline:none; }
.promo-row input::placeholder { color:var(--md-sys-color-outline); }
.promo-row button { background:var(--md-sys-color-secondary); color:var(--md-sys-color-on-secondary); border:none; border-radius:8px; padding:8px 16px; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit; }

.payment-radio { display:none; }
.payment-card { display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; border:2px solid var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-lowest); cursor:pointer; transition:all .2s; margin-bottom:8px; }
.payment-card:hover { border-color:var(--md-sys-color-outline); }
.payment-radio:checked + .payment-card { border-color:var(--md-sys-color-primary); background:var(--md-sys-color-primary-container); }
.payment-radio:checked + .payment-card .pay-indicator { border-color:var(--md-sys-color-primary); }
.payment-radio:checked + .payment-card .pay-indicator::after { content:''; display:block; width:10px; height:10px; border-radius:50%; background:var(--md-sys-color-primary); margin:3px; }
.pay-icon { width:40px; height:40px; border-radius:10px; background:var(--md-sys-color-surface-container-high); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--md-sys-color-primary); }
.pay-info { flex:1; }
.pay-info .pay-label { font-size:14px; font-weight:500; }
.pay-info .pay-desc { font-size:11px; color:var(--md-sys-color-on-surface-variant); }
.pay-indicator { width:18px; height:18px; border-radius:50%; border:2px solid var(--md-sys-color-outline-variant); flex-shrink:0; }

.order-filter-chip { display:inline-flex; align-items:center; gap:4px; padding:6px 16px; border-radius:9999px; font-size:12px; font-weight:500; border:none; cursor:pointer; white-space:nowrap; background:var(--md-sys-color-surface-container-high); color:var(--md-sys-color-on-surface-variant); transition:all .2s; font-family:inherit; }
.order-filter-chip:active { transform:scale(.93); }
.order-filter-chip.active { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); box-shadow:0 1px 4px rgba(0,104,95,.2); }

.profile-header { text-align:center; padding:24px 16px; }
.profile-header .profile-avatar { width:100px; height:100px; border-radius:50%; border:4px solid var(--md-sys-color-surface-container-low); margin:0 auto 12px; background:var(--md-sys-color-primary-container); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.profile-header .profile-avatar span { font-size:40px; color:var(--md-sys-color-on-primary-container); }
.profile-header .profile-name { font-size:18px; font-weight:600; }
.profile-header .profile-email { font-size:13px; color:var(--md-sys-color-on-surface-variant); }
.profile-header .profile-badge { display:inline-flex; padding:3px 12px; border-radius:9999px; background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); font-size:11px; font-weight:500; margin-top:8px; }

.profile-menu { margin-top:8px; }
.profile-menu-item { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--md-sys-color-surface-container-lowest); border-radius:12px; margin-bottom:6px; cursor:pointer; transition:all .2s; border:1px solid var(--md-sys-color-outline-variant); }
.profile-menu-item:active { transform:scale(.98); }
.profile-menu-item .pm-icon { width:40px; height:40px; border-radius:10px; background:var(--md-sys-color-surface-container-high); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--md-sys-color-primary); }
.profile-menu-item .pm-content { flex:1; }
.profile-menu-item .pm-label { font-size:14px; font-weight:500; }
.profile-menu-item .pm-desc { font-size:11px; color:var(--md-sys-color-on-surface-variant); }
.profile-menu-item .pm-chevron { color:var(--md-sys-color-outline-variant); }

.delivery-progress { display:flex; align-items:center; gap:4px; margin:12px 0; }
.delivery-progress .dp-step { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; border:2px solid var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-lowest); color:var(--md-sys-color-outline); }
.delivery-progress .dp-step.active { border-color:var(--md-sys-color-primary); background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); }
.delivery-progress .dp-step.done { border-color:var(--md-sys-color-primary); background:var(--md-sys-color-primary-container); color:var(--md-sys-color-primary); }
.delivery-progress .dp-line { flex:1; height:2px; background:var(--md-sys-color-outline-variant); }
.delivery-progress .dp-line.done { background:var(--md-sys-color-primary); }

.bento-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bento-card { background:var(--md-sys-color-surface-container-lowest); border-radius:12px; padding:16px; border:1px solid var(--md-sys-color-outline-variant); }
.bento-card .bc-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.bento-card .bc-label { font-size:11px; color:var(--md-sys-color-on-surface-variant); text-transform:uppercase; letter-spacing:.05em; }
.bento-card .bc-value { font-size:22px; font-weight:700; margin:4px 0; }
.bento-card .bc-trend { font-size:11px; font-weight:600; }

.section-header { display:flex; justify-content:space-between; align-items:center; margin:16px 0 12px; }
.section-header h3 { font-size:18px; font-weight:600; margin:0; }
.section-header a { font-size:12px; color:var(--md-sys-color-primary); text-decoration:none; font-weight:600; cursor:pointer; }

/* ═══ Order Detail Page ═══ */
.order-detail-header { position:sticky; top:0; z-index:50; background:var(--md-sys-color-surface); padding:0 16px; height:64px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--md-sys-color-outline-variant); }
.order-detail-header h1 { font-size:20px; font-weight:600; flex:1; text-align:center; color:var(--md-sys-color-on-surface); }
.order-detail-back { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:9999px; border:none; background:transparent; color:var(--md-sys-color-on-surface); cursor:pointer; transition:background .2s; }
.order-detail-back:active { transform:scale(.92); }
.detail-section { margin-bottom:20px; }
.detail-section h2 { font-size:14px; font-weight:600; margin:0 0 12px; color:var(--md-sys-color-on-surface); }
.detail-label { font-size:12px; color:var(--md-sys-color-on-surface-variant); margin-bottom:4px; }
.detail-order-id { font-size:16px; font-weight:500; }
.detail-card { background:var(--md-sys-color-surface-container-lowest); border-radius:12px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); border:1px solid var(--md-sys-color-outline-variant); }
.detail-card .customer-name { font-weight:500; font-size:15px; }
.detail-card .customer-addr { display:flex; align-items:center; gap:4px; margin-top:4px; color:var(--md-sys-color-on-surface-variant); font-size:13px; }
.detail-actions { display:flex; gap:8px; flex-shrink:0; }
.detail-phone-btn { width:44px; height:44px; border-radius:50%; background:var(--md-sys-color-primary); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,104,95,.3); text-decoration:none; }
.detail-map-btn { width:44px; height:44px; border-radius:50%; background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-secondary); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; }
.detail-phone-btn:active,.detail-map-btn:active { transform:scale(.92); }
.item-row { display:flex; align-items:center; gap:12px; padding:8px 0; }
.item-row + .item-row { border-top:1px solid var(--md-sys-color-outline-variant); }
.item-thumb { width:72px; height:72px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--md-sys-color-surface-container-high); display:flex; align-items:center; justify-content:center; }
.item-thumb .material-symbols-outlined { font-size:28px; color:var(--md-sys-color-on-surface-variant); }
.item-info { flex:1; min-width:0; }
.item-name { font-size:13px; font-weight:500; }
.item-price { font-size:14px; font-weight:600; color:var(--md-sys-color-primary); margin-top:4px; }
.total-row { display:flex; justify-content:flex-end; padding:12px 0 0; margin-top:4px; border-top:1px solid var(--md-sys-color-outline-variant); }
.total-row span { font-size:16px; font-weight:700; }
.order-chip-group { display:flex; flex-wrap:wrap; gap:8px; }
.order-chip-group button { padding:8px 20px; border-radius:9999px; border:1px solid var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface-container-low); color:var(--md-sys-color-on-surface); font-size:13px; font-weight:500; cursor:pointer; transition:all .2s; }
.order-chip-group button:active { transform:scale(.95); }
.order-chip-group button.active { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); border-color:var(--md-sys-color-primary); }
.assign-row { display:flex; gap:8px; align-items:center; }
.assign-row select { flex:1; margin:0; height:44px; }
.assign-row button { height:44px; padding:0 24px; border-radius:12px; border:none; background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); font-weight:500; cursor:pointer; white-space:nowrap; font-family:inherit; font-size:14px; }
.assign-row button:active { transform:scale(.95); }
.bottom-action-bar { background:var(--md-sys-color-surface-container-lowest); border-top:1px solid var(--md-sys-color-outline-variant); padding:12px 16px; display:flex; gap:12px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.bottom-action-bar button { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; border-radius:12px; font-size:14px; font-weight:500; cursor:pointer; transition:all .2s; }
.bottom-action-bar button:active { transform:scale(.97); }
.bottom-action-bar .bab-outline { background:transparent; border:1px solid var(--md-sys-color-outline); color:var(--md-sys-color-on-surface); }
.bottom-action-bar .bab-primary { background:var(--md-sys-color-primary); border:none; color:var(--md-sys-color-on-primary); }
.bottom-action-bar .bab-secondary { background:var(--md-sys-color-secondary-container); border:none; color:var(--md-sys-color-on-secondary-container); }

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/MaterialSymbolsOutlined.ttf') format('truetype');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  font-variation-settings: normal;
}