:root {
  --color-apple-blue: #0071e3;
  --color-link-blue: #0066cc;
  --color-signal-blue: #2997ff;
  --color-carbon: #1d1d1f;
  --color-frost: #f5f5f7;
  --color-ice: #f4f8fb;
  --color-ash: #707070;
  --color-pebble: #e2e2e5;
  --paper: var(--color-frost);
  --surface: #ffffff;
  --ink: var(--color-carbon);
  --muted: #6e6e73;
  --line: #d2d2d7;
  --green: var(--color-apple-blue);
  --green-soft: var(--color-ice);
  --amber: #9a6700;
  --danger: #d70015;
  --shadow: none;
  --radius-card: 8px;
  --radius-button: 980px;
}

* { box-sizing: border-box; }
button, a, label { touch-action: manipulation; }
img { pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 400; }
body[data-role="customer"] {
  --paper: var(--color-frost);
  --surface: #ffffff;
  --ink: var(--color-carbon);
  --muted: #6e6e73;
  --line: #d2d2d7;
  --green: var(--color-apple-blue);
  --green-soft: var(--color-ice);
  --shadow: none;
  background: var(--paper);
}
body[data-role="customer"] h1,
body[data-role="customer"] h2,
body[data-role="customer"] h3 { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
body[data-role="customer"] h1,
body[data-role="customer"] h2 { font-weight: 600; }
body[data-role="customer"] button:focus-visible,
body[data-role="customer"] input:focus-visible,
body[data-role="customer"] textarea:focus-visible { outline-color: rgba(0, 113, 227, .24); }
button, input, textarea, select { color: inherit; font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(0, 113, 227, .24); outline-offset: 2px; }
[hidden] { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 76px; padding: 0 clamp(20px, 5vw, 72px); border-bottom: 1px solid rgba(223,225,220,.8); background: rgba(245,245,242,.9); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; font-family: Georgia, serif; font-size: 20px; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: Georgia, "Songti SC", serif; font-size: 18px; font-weight: 600; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: 1.2px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.75); padding: 0; color: var(--ink); }
.theme-toggle .iconify { width: 19px; height: 19px; }
.icon-text-btn, .cart-button, .secondary-button { min-height: 40px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.75); padding: 0 14px; }
.switch-entry-button { display: flex; align-items: center; gap: 7px; min-height: 40px; border: 1px solid #dedede; border-radius: 20px; background: #fff; padding: 0 14px 0 11px; color: #444; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.switch-entry-button .iconify { width: 18px; height: 18px; color: var(--green); }
.cart-button { display: flex; align-items: center; gap: 10px; border-color: var(--green); background: var(--green); color: #fff; }
.cart-button b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--green); font-size: 11px; }
.admin-only, .customer-only { display: none; }
body[data-role="admin"] .admin-only, body[data-role="customer"] .customer-only { display: flex; }

main { min-height: calc(100vh - 76px); }
.view { display: none; width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 56px 0 96px; }
.view.active { display: block; }
.customer-view { padding-top: 34px; }
.eyebrow { margin: 0 0 12px; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; }
h1, h2, h3, p { letter-spacing: 0; }
h1, h2 { font-family: Georgia, "Songti SC", serif; font-weight: 500; }
h1 { margin: 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.12; }

.role-view.active { display: grid; grid-template-columns: .8fr 1.3fr; gap: clamp(40px, 7vw, 100px); align-items: center; min-height: calc(100vh - 76px); padding-top: 40px; }
.role-intro > p:last-child { max-width: 390px; margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.role-card { position: relative; overflow: hidden; display: grid; grid-template-rows: 220px auto; min-height: 450px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 0; text-align: left; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.role-card:hover { box-shadow: 0 20px 48px rgba(0,0,0,.1); }
.role-image { background-size: cover; background-position: center; filter: saturate(.85); }
.role-card.diner .role-image { background-image: linear-gradient(to top, rgba(0,0,0,.18), transparent 60%), url("https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=900&q=85"); }
.role-card.manager .role-image { background-image: linear-gradient(to top, rgba(0,0,0,.18), transparent 60%), url("https://images.unsplash.com/photo-1556911220-e15b29be8c8f?auto=format&fit=crop&w=900&q=85"); }
.role-card > div:nth-child(2) { padding: 24px; }
.role-card span { color: var(--green); font-size: 11px; font-weight: 700; }
.role-card h2 { margin: 10px 0; font-size: 26px; }
.role-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.role-card i { position: absolute; right: 22px; bottom: 22px; font-size: 22px; font-style: normal; }

.menu-heading, .admin-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.menu-heading { margin-bottom: 24px; }
.menu-heading h1 { font-size: clamp(34px, 4vw, 46px); }
.admin-heading h1, .page-title h1 { font-size: clamp(38px, 5vw, 58px); }
.menu-heading > div > p:last-child, .admin-heading > div > p:last-child { margin: 10px 0 0; color: var(--muted); }
.search-box { display: flex; align-items: center; gap: 8px; width: min(330px, 100%); height: 44px; border-bottom: 1px solid #afb3ac; }
.search-box > .iconify { flex: 0 0 auto; width: 20px; height: 20px; color: var(--muted); }
.search-box input { width: 100%; height: 100%; border: 0; background: transparent; outline: 0; }
.weekly-carousel { position: relative; overflow: hidden; height: clamp(190px, 20vw, 250px); margin: 0 0 26px; border-radius: 8px; background: #202020; box-shadow: var(--shadow); }
.weekly-slides, .weekly-slide { position: absolute; inset: 0; }
.weekly-slide { visibility: hidden; opacity: 0; transition: opacity .55s ease, visibility .55s ease; }
.weekly-slide.active { visibility: visible; opacity: 1; }
.weekly-slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.food-image-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; overflow: hidden; background: #ececea; padding: 8px; color: #555954; text-align: center; pointer-events: none; }
.food-image-placeholder span { display: -webkit-box; max-width: 100%; overflow: hidden; font-size: 12px; font-weight: 650; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.food-image-placeholder small { color: #8b8e89; font-size: 9px; font-weight: 500; }
.weekly-slide > .food-image-placeholder { width: 100%; height: 100%; background: #30332f; color: #fff; }
.weekly-slide > .food-image-placeholder span { font-size: 22px; }
.weekly-slide > .food-image-placeholder small { color: rgba(255,255,255,.65); }
.weekly-slide::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,24,20,.82) 0%, rgba(17,24,20,.48) 42%, rgba(17,24,20,.08) 75%); content: ""; }
.weekly-copy { position: absolute; top: 50%; left: clamp(24px, 5vw, 68px); z-index: 2; width: min(470px, calc(100% - 48px)); transform: translateY(-50%); color: #fff; }
.weekly-copy .eyebrow { color: #ffd7d8; }
.weekly-copy h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
.weekly-copy p:not(.eyebrow) { display: -webkit-box; max-width: 410px; margin: 10px 0 15px; overflow: hidden; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.weekly-actions { display: flex; align-items: center; gap: 16px; }
.weekly-actions button { min-height: 42px; border: 1px solid #fff; border-radius: 5px; background: #fff; color: var(--green); padding: 0 18px; font-weight: 700; }
.weekly-actions strong { font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.carousel-controls { position: absolute; right: 24px; bottom: 20px; left: 24px; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.carousel-dots { display: flex; gap: 7px; }
.carousel-dots button { width: 22px; height: 3px; border: 0; border-radius: 0; background: rgba(255,255,255,.42); padding: 0; transition: width .2s ease, background .2s ease; }
.carousel-dots button.active { width: 38px; background: #fff; }
.carousel-arrows { display: flex; gap: 7px; }
.carousel-arrows button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; background: rgba(20,28,23,.32); color: #fff; font-size: 18px; backdrop-filter: blur(8px); }
.carousel-arrows button:hover { background: #fff; color: var(--green); }
.menu-catalog { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 24px; }
.category-tabs { position: sticky; top: 96px; display: grid; align-content: start; gap: 3px; max-height: calc(100vh - 120px); overflow-y: auto; border-left: 1px solid var(--line); padding: 4px 0; scrollbar-width: thin; }
.order-tracker { margin: 0 0 18px; border: 1px solid #ffd1d2; border-radius: 7px; background: var(--green-soft); padding: 17px 20px; }
.tracker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.tracker-head .eyebrow { margin-bottom: 6px; }
.tracker-head h2 { margin: 0; font-size: 20px; }
.tracker-head .close-button { width: 32px; height: 32px; border-color: #ffc8ca; background: transparent; }
.tracker-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 17px 0 12px; }
.tracker-steps::before { position: absolute; top: 7px; right: 16.66%; left: 16.66%; height: 2px; background: #ffc8ca; content: ""; }
.tracker-step { position: relative; display: grid; justify-items: center; gap: 8px; color: #999; font-size: 11px; }
.tracker-step i { z-index: 1; display: block; width: 16px; height: 16px; border: 3px solid var(--green-soft); border-radius: 50%; background: #d7d7d7; box-shadow: 0 0 0 1px #c9c9c9; }
.tracker-step.done, .tracker-step.active { color: var(--green); font-weight: 700; }
.tracker-step.done i, .tracker-step.active i { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.tracker-step.active i { box-shadow: 0 0 0 1px var(--green), 0 0 0 5px rgba(49,92,71,.12); }
.tracker-items { margin: 0 0 6px; color: #555; font-size: 12px; line-height: 1.6; }
.order-tracker > small { color: #999; font-size: 10px; }
.order-tracker.cancelled { border-color: #dfc0bd; background: #f5e8e7; }
.order-tracker.cancelled .tracker-steps { display: none; }
.category-tabs button, .admin-tabs button { flex: 0 0 auto; min-height: 38px; border: 0; border-radius: 5px; background: transparent; padding: 0 16px; color: var(--muted); }
.category-tabs button { min-width: 0; min-height: 46px; border-left: 3px solid transparent; border-radius: 0 5px 5px 0; text-align: left; }
.category-tabs button.active { border-left-color: var(--green); background: var(--green-soft); color: var(--green); font-weight: 700; }
.admin-tabs button.active { background: var(--green); color: #fff; }
.dish-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 20px; }
.dish-card { min-width: 0; }
.dish-image { position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: 7px; background: #e9e9e5; }
.dish-image img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dish-image > .food-image-placeholder { width: 100%; height: 100%; }
.dish-image .availability { position: absolute; top: 12px; left: 12px; border-radius: 4px; background: rgba(255,255,255,.92); padding: 7px 9px; color: var(--green); font-size: 10px; font-weight: 700; backdrop-filter: blur(8px); }
.dish-content { padding: 16px 2px 0; }
.dish-title-row { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.dish-title-row h3 { margin: 0; font-size: 19px; font-weight: 600; }
.dish-title-row strong { flex: 0 0 auto; color: var(--green); font-family: Georgia, serif; font-size: 19px; }
.dish-content p { display: -webkit-box; min-height: 42px; margin: 9px 0 13px; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dish-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dish-tags { display: flex; gap: 5px; overflow: hidden; }
.dish-tags span { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; color: var(--muted); font-size: 10px; }
.add-button { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--green); border-radius: 50%; background: transparent; color: var(--green); font-size: 20px; }
.add-button:hover { background: var(--green); color: #fff; }
.quantity-inline { display: flex; align-items: center; gap: 8px; }
.quantity-inline button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: #fff; }

.cart-dock { position: fixed; right: clamp(20px, 4vw, 64px); bottom: 100px; z-index: 35; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 13px; width: min(430px, calc(100% - 32px)); min-height: 72px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: #20231f; color: #fff; padding: 8px 9px 8px 12px; box-shadow: 0 18px 50px rgba(20,24,21,.25); }
.cart-dock-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green); font-size: 15px; font-weight: 700; }
.cart-dock-summary { display: grid; gap: 3px; min-width: 0; }
.cart-dock-summary strong { overflow: hidden; font-family: Georgia, serif; font-size: 24px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cart-dock-summary span { color: rgba(255,255,255,.7); font-size: 11px; }
.cart-dock > button { min-width: 110px; min-height: 50px; border: 0; border-radius: 5px; background: var(--green); color: #fff; padding: 0 20px; font-weight: 700; }

.customer-tabs { position: fixed; bottom: 18px; left: 50%; z-index: 36; align-items: stretch; width: min(360px, calc(100% - 32px)); min-height: 66px; transform: translateX(-50%); overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.96); padding: 6px; box-shadow: 0 16px 44px rgba(31,33,30,.16); backdrop-filter: blur(16px); }
body[data-role="customer"] .customer-tabs { display: flex; }
.customer-tabs button { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 9px; min-width: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); }
.customer-tabs button > span { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; font-weight: 700; }
.customer-tabs .tab-icon > .iconify { width: 18px; height: 18px; }
.customer-tabs .tab-fallback { font-style: normal; }
.customer-tabs .tab-icon > svg + .tab-fallback { display: none; }
.customer-tabs button > b { font-size: 12px; }
.customer-tabs button.active { background: var(--green-soft); color: var(--green); }
.customer-tabs button.active > span { border-color: var(--green); background: var(--green); color: #fff; }
#meTabDot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #d15145; }

.status-view { max-width: 760px; }
.account-panel { margin-bottom: 14px; border: 1px solid #dedede; border-radius: 8px; background: #fff; padding: 16px 18px; }
.account-panel > div { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 13px; }
.account-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.account-avatar .iconify { width: 25px; height: 25px; }
.account-panel h2 { margin: 0 0 4px; font-size: 17px; }
.account-panel p { margin: 0; color: var(--muted); font-size: 11px; }
.account-panel button { min-height: 36px; border: 1px solid var(--green); border-radius: 5px; background: #fff; color: var(--green); padding: 0 12px; }
.health-plan-entry { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 13px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 16px 18px; }
.health-plan-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-soft); color: var(--green); }
.health-plan-icon .iconify { width: 24px; height: 24px; }
.health-plan-entry h2 { margin: 0 0 4px; font-size: 17px; }
.health-plan-entry p { margin: 0; color: var(--muted); font-size: 11px; }
.health-plan-entry button { display: flex; align-items: center; gap: 3px; min-height: 36px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); padding: 0 10px; color: var(--ink); }
.health-plan-entry button .iconify { width: 15px; height: 15px; }
.apple-health-entry { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 13px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 16px 18px; }
.apple-health-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: #f2edf7; color: #7f56a5; }
.apple-health-icon .iconify { width: 25px; height: 25px; }
.apple-health-entry h2 { margin: 0 0 4px; font-size: 17px; }
.apple-health-entry p { margin: 0; color: var(--muted); font-size: 11px; }
.apple-health-entry button { display: flex; align-items: center; gap: 4px; min-height: 36px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); padding: 0 10px; color: var(--ink); }
.apple-health-entry button .iconify { width: 15px; height: 15px; }
.status-heading { margin-bottom: 24px; }
.status-heading h1 { font-size: clamp(36px, 5vw, 52px); }
.status-heading > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.status-empty { display: grid; justify-items: center; border: 1px dashed #c8cbc5; border-radius: 8px; padding: 70px 24px; text-align: center; }
.status-empty > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 700; }
.status-empty h2 { margin: 18px 0 7px; font-size: 24px; }
.status-empty p { margin: 0; color: var(--muted); font-size: 13px; }
.status-empty button { min-height: 40px; margin-top: 22px; border: 1px solid var(--green); border-radius: 5px; background: var(--green); color: #fff; padding: 0 20px; }
.status-banner { margin-top: 20px; }

body[data-role="customer"] .topbar { border-bottom-color: transparent; background: rgba(243,243,243,.94); }
body[data-role="customer"] .brand-mark { background: var(--green); font-family: inherit; font-weight: 700; }
body[data-role="customer"] .brand strong { font-family: inherit; font-weight: 700; }
body[data-role="customer"] .icon-text-btn { background: rgba(255,255,255,.86); }
body[data-role="customer"] .menu-heading,
body[data-role="customer"] .dish-grid { background: #fff; }
body[data-role="customer"] .category-tabs { background: #f4f4f4; }
body[data-role="customer"] .category-tabs button { color: #898989; }
body[data-role="customer"] .category-tabs button.active { border-left-color: var(--green); background: #fff; color: #1b1b1b; }
body[data-role="customer"] .dish-title-row h3 { color: #111; font-weight: 700; }
body[data-role="customer"] .dish-title-row strong { color: var(--green); font-family: inherit; font-weight: 700; }
body[data-role="customer"] .dish-content p { color: #999; }
body[data-role="customer"] .dish-tags span { border-color: transparent; background: #f4f4f4; color: #8c8c8c; }
body[data-role="customer"] .add-button { border-color: var(--green); border-radius: 6px; background: var(--green); color: #fff; }
body[data-role="customer"] .quantity-inline button { border-color: #ffc4c6; border-radius: 6px; color: var(--green); }
body[data-role="customer"] .quantity-inline button:last-child { border-color: var(--green); background: var(--green); color: #fff; }
body[data-role="customer"] .cart-dock { border-color: #111; background: #111; box-shadow: 0 14px 36px rgba(0,0,0,.25); }
body[data-role="customer"] .cart-dock-icon,
body[data-role="customer"] .cart-dock > button { background: var(--green); }
body[data-role="customer"] .cart-dock-summary strong { font-family: inherit; font-weight: 700; }
body[data-role="customer"] .customer-tabs button.active { background: var(--green-soft); color: var(--green); }
body[data-role="customer"] .customer-tabs button.active > span { border-color: var(--green); background: var(--green); }
body[data-role="customer"] .order-tracker { border-color: #ffd1d2; background: var(--green-soft); }
body[data-role="customer"] .tracker-steps::before { background: #ffc8ca; }
body[data-role="customer"] .tracker-step { color: #a0a0a0; }
body[data-role="customer"] .tracker-step i { border-color: var(--green-soft); background: #d7d7d7; box-shadow: 0 0 0 1px #c9c9c9; }
body[data-role="customer"] .tracker-items { color: #555; }
body[data-role="customer"] .order-tracker > small { color: #999; }
body[data-role="customer"] .status-empty { border-color: #dedede; background: #fff; }
body[data-role="customer"] .weekly-slide::after { background: linear-gradient(90deg, rgba(18,18,18,.82) 0%, rgba(18,18,18,.42) 48%, rgba(18,18,18,.06) 78%); }
body[data-role="customer"] .order-panel { border-color: #ededed; box-shadow: 0 12px 32px rgba(0,0,0,.07); }
body[data-role="customer"] .order-total strong { color: var(--green); font-family: inherit; font-weight: 700; }
body[data-role="customer"] .primary-button:hover { background: #e9363c; }

.back-button { margin-bottom: 35px; border: 0; background: transparent; padding: 0; color: var(--muted); }
.page-title { margin-bottom: 34px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .65fr); gap: 54px; align-items: start; }
.cart-list { display: grid; gap: 2px; }
.cart-item { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding: 18px 0; }
.cart-item img { width: 112px; aspect-ratio: 1; border-radius: 6px; object-fit: cover; }
.cart-item > .food-image-placeholder { width: 112px; aspect-ratio: 1; border-radius: 6px; }
.cart-item h3 { margin: 0 0 8px; font-size: 17px; }
.cart-item p { margin: 0; color: var(--muted); font-size: 12px; }
.cart-item-side { display: grid; justify-items: end; gap: 14px; }
.remove-button { border: 0; background: transparent; color: var(--muted); font-size: 12px; text-decoration: underline; }
.empty-state { border: 1px dashed #c8cbc5; border-radius: 8px; padding: 60px 24px; text-align: center; }
.empty-state h2 { margin: 0 0 8px; }
.empty-state p { color: var(--muted); }
.order-panel { position: sticky; top: 104px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 28px; box-shadow: var(--shadow); }
.order-panel h2 { margin: 0 0 22px; font-size: 26px; }
label { display: grid; gap: 8px; color: #4e524d; font-size: 12px; font-weight: 600; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: 11px 12px; outline: 0; }
textarea { resize: vertical; }
.order-panel label + label { margin-top: 16px; }
.payment-proof-field { position: relative; cursor: pointer; }
.payment-proof-picker { display: grid; place-items: center; min-height: 112px; overflow: hidden; border: 1px dashed #c8cbc5; border-radius: 6px; background: #fafafa; text-align: center; }
.payment-proof-picker > img { width: 100%; height: 132px; object-fit: cover; }
.payment-proof-picker > span { display: grid; justify-items: center; gap: 4px; padding: 14px; }
.payment-proof-picker b { color: var(--danger); font-size: 24px; line-height: 1; }
.payment-proof-picker strong { color: var(--ink); font-size: 13px; }
.payment-proof-picker small { color: var(--muted); font-size: 11px; }
.payment-proof-field input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.order-total { display: flex; justify-content: space-between; margin: 24px 0; border-top: 1px solid var(--line); padding-top: 20px; }
.order-total strong { font-family: Georgia, serif; font-size: 25px; }
.primary-button { min-height: 48px; border: 1px solid var(--green); border-radius: 5px; background: var(--green); color: #fff; padding: 0 22px; font-weight: 600; }
.primary-button:hover { background: #e9363c; }
.primary-button.compact { min-height: 42px; }
.order-panel .primary-button { width: 100%; }

.login-view.active { display: grid; place-items: center; min-height: calc(100vh - 76px); }
.login-panel { width: min(430px, 100%); border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 42px; box-shadow: var(--shadow); }
.login-panel h1 { font-size: 45px; }
.login-panel > p:nth-of-type(2) { margin: 10px 0 26px; color: var(--muted); }
.login-panel .primary-button { width: 100%; margin-top: 16px; }
.form-error { min-height: 18px; margin: 8px 0 0; color: var(--danger); font-size: 12px; }

.admin-heading { align-items: center; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 38px; }
.stat-card { border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 21px; }
.stat-card span { color: var(--muted); font-size: 12px; }
.stat-card strong { display: block; margin-top: 8px; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.admin-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.panel-toolbar h2 { font-size: 25px; }
.search-box.small { width: 220px; height: 38px; }
.admin-list { border-top: 1px solid var(--line); }
.admin-dish-row { display: grid; grid-template-columns: 62px minmax(160px,1.4fr) minmax(100px,.6fr) minmax(90px,.5fr) minmax(210px,.8fr); align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding: 13px 0; }
.admin-dish-row img { width: 62px; height: 54px; border-radius: 5px; object-fit: cover; }
.admin-dish-row > .food-image-placeholder { width: 62px; height: 54px; border-radius: 5px; }
.admin-dish-row h3 { margin: 0 0 4px; font-size: 15px; }
.admin-dish-row p, .admin-dish-row small { margin: 0; color: var(--muted); font-size: 11px; }
.status-pill { justify-self: start; border-radius: 4px; background: var(--green-soft); color: var(--green); padding: 6px 8px; font-size: 11px; }
.status-pill.off { background: #eee; color: var(--muted); }
.row-actions { display: flex; justify-content: flex-end; gap: 7px; }
.row-actions button { min-height: 34px; border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: 0 10px; font-size: 11px; }
.row-actions .danger { color: var(--danger); }
.order-card { display: grid; grid-template-columns: 1fr 1fr 1.5fr 64px auto; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding: 20px 0; }
.order-card h3 { margin: 0 0 6px; font-size: 15px; }
.order-card p, .order-card small { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.order-card select { width: 110px; padding: 8px; }
.payment-proof-thumb { width: 64px; height: 64px; border-radius: 5px; object-fit: cover; }
.payment-proof-missing { color: var(--muted); font-size: 11px; }

.nutrition-view { max-width: 820px; }
.nutrition-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.nutrition-heading h1 { margin: 0; font-size: 36px; }
.nutrition-heading p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.nutrition-settings-button { display: flex; align-items: center; gap: 7px; min-height: 42px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 0 13px; }
.nutrition-settings-button .iconify { width: 18px; height: 18px; }
.nutrition-date-picker { position: relative; z-index: 12; width: min(300px, 100%); margin: 0 auto 12px; }
.nutrition-date-nav { display: grid; grid-template-columns: 40px minmax(0, 220px) 40px; justify-content: center; gap: 8px; }
.nutrition-date-nav > button { display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 0; }
.nutrition-date-nav .iconify { flex: 0 0 auto; width: 18px; height: 18px; color: var(--green); }
.nutrition-date-nav .nutrition-date-trigger { gap: 7px; padding: 0 12px; font-weight: 600; }
.nutrition-calendar { position: absolute; top: 48px; left: 50%; width: min(360px, calc(100vw - 32px)); transform: translateX(-50%); border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.16); }
.nutrition-calendar-head { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; margin-bottom: 10px; }
.nutrition-calendar-head strong { text-align: center; font-size: 14px; }
.nutrition-calendar-head button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 5px; background: transparent; padding: 0; }
.nutrition-calendar-head button:hover { background: #f5f5f5; }
.nutrition-calendar-head .iconify { width: 17px; height: 17px; }
.nutrition-calendar-weekdays, .nutrition-calendar-grid { display: grid; grid-template-columns: repeat(7, 36px); justify-content: space-between; gap: 4px 3px; }
.nutrition-calendar-weekdays span { color: var(--muted); font-size: 10px; text-align: center; }
.nutrition-calendar-grid { margin-top: 6px; }
.nutrition-calendar-grid > i { width: 36px; height: 36px; }
.nutrition-calendar-day { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 0; font-size: 12px; }
.nutrition-calendar-day.today { border-color: #d9d9d9; }
.nutrition-calendar-day.has-record { background: var(--green-soft); color: var(--green); font-weight: 700; }
.nutrition-calendar-day.has-record::after { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--green); content: ""; }
.nutrition-calendar-day.selected { border-color: var(--green); background: var(--green); color: #fff; }
.nutrition-calendar-day.selected::after { background: #fff; }
.nutrition-calendar-legend { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 10px 2px 0; color: var(--muted); font-size: 10px; }
.nutrition-calendar-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.nutrition-overview { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 28px; border: 1px solid #ececec; border-radius: 8px; background: #fff; padding: 24px 28px; }
.calorie-ring { --calorie-progress: 0%; position: relative; display: grid; place-items: center; align-content: center; width: 154px; aspect-ratio: 1; margin: auto; border-radius: 50%; background: conic-gradient(var(--green) var(--calorie-progress), #f0f1ef 0); }
.calorie-ring::before { position: absolute; inset: 13px; border-radius: 50%; background: #fff; content: ""; }
.calorie-ring span, .calorie-ring small { position: relative; z-index: 1; color: var(--muted); font-size: 12px; }
.calorie-ring strong { position: relative; z-index: 1; margin: 3px 0; font-size: 36px; line-height: 1; }
.nutrition-summary { display: grid; gap: 14px; min-width: 0; }
.calorie-plan { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-radius: 6px; background: #f8f8f8; padding: 12px 0; }
.calorie-plan > div { position: relative; display: grid; gap: 3px; padding: 0 14px; }
.calorie-plan > div + div { border-left: 1px solid #ededed; }
.calorie-plan span { color: var(--muted); font-size: 11px; }
.calorie-plan strong { font-size: 24px; line-height: 1.2; }
.calorie-plan small { color: var(--muted); font-size: 10px; }
.calorie-plan .calorie-budget strong { color: var(--green); }
.calorie-status-stack { display: grid; gap: 5px; min-width: 0; }
.calorie-budget-status { display: grid; grid-template-columns: auto 1fr; align-items: baseline; justify-content: start; column-gap: 5px; margin: 0; color: var(--green); line-height: 1.2; }
.calorie-budget-status span { grid-column: 1 / -1; margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
.calorie-budget-status strong { font-size: 25px; }
.calorie-budget-status small { font-size: 10px; font-weight: 500; }
.calorie-budget-status.over { color: var(--amber); }
.nutrition-apple-health-status { display: flex; align-items: center; gap: 6px; margin: 0; color: #7f56a5; font-size: 10px; line-height: 1.5; }
.nutrition-apple-health-status::before { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.macro-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.macro-grid > div { display: grid; gap: 8px; }
.macro-grid span { color: var(--muted); font-size: 12px; }
.macro-grid strong { font-size: 22px; }
.macro-grid strong.over { color: var(--amber); font-size: 15px; }
.macro-grid small { min-height: 14px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.macro-bar { --macro-color: #33b985; --macro-progress: 0%; display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--macro-color) var(--macro-progress), #e8eae8 var(--macro-progress)); }
.macro-bar.protein { --macro-color: #f59da0; }
.macro-bar.fat { --macro-color: #f5c44d; }
.daily-nutrition-evaluation { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.daily-nutrition-evaluate-button { display: grid; grid-template-columns: 38px minmax(0,1fr) 20px; align-items: center; gap: 11px; width: 100%; min-height: 64px; border: 0; background: transparent; padding: 10px 14px; color: var(--ink); text-align: left; }
.daily-nutrition-evaluate-button > .iconify:first-child { width: 24px; height: 24px; color: var(--green); }
.daily-nutrition-evaluate-button > span:nth-child(2) { display: grid; gap: 3px; }
.daily-nutrition-evaluate-button strong { font-size: 14px; }
.daily-nutrition-evaluate-button small { color: var(--muted); font-size: 10px; }
.daily-nutrition-evaluate-arrow { width: 18px; height: 18px; color: var(--muted); }
.daily-nutrition-evaluate-button:disabled { cursor: default; opacity: .58; }
.daily-nutrition-evaluate-button.is-loading > .iconify:first-child { animation: recognition-spin .8s linear infinite; }
.daily-nutrition-evaluation-result { border-top: 1px solid var(--line); padding: 16px 18px 17px; }
.daily-evaluation-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.daily-evaluation-head > small { color: var(--muted); font-size: 10px; }
.daily-evaluation-status { display: inline-flex; align-items: center; min-height: 24px; border-radius: 5px; background: var(--green-soft); padding: 0 8px; color: var(--green); font-size: 10px; font-weight: 750; }
.daily-evaluation-status.attention { background: #fff6df; color: #9a6a00; }
.daily-evaluation-status.insufficient { background: #f0f1ef; color: var(--muted); }
.daily-nutrition-evaluation-result > h3 { margin: 11px 0 13px; font-size: 17px; line-height: 1.45; }
.daily-evaluation-group + .daily-evaluation-group { margin-top: 12px; }
.daily-evaluation-group h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--ink); font-size: 12px; }
.daily-evaluation-group h4 .iconify { width: 16px; height: 16px; color: var(--green); }
.daily-evaluation-group ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.daily-evaluation-disclaimer { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.meal-selector { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 3px; margin-top: 10px; border: 1px solid #e8e8e8; border-radius: 7px; background: #fff; padding: 4px; }
.meal-selector button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; border: 0; border-radius: 5px; background: transparent; padding: 9px 4px; color: #777; }
.meal-selector button .iconify { width: 23px; height: 23px; }
.meal-selector button b { font-size: 11px; }
.meal-selector button.active { background: var(--green); color: #fff; }
.nutrition-repeat-button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--green); border-radius: 5px; background: var(--green); padding: 0; color: #fff; }
.nutrition-repeat-button:disabled { cursor: wait; opacity: .5; }
.nutrition-repeat-button .iconify { width: 17px; height: 17px; }
.nutrition-section { margin-top: 14px; border-top: 1px solid #e5e5e5; background: transparent; padding: 20px 0 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-title h2 { margin: 0; font-size: 23px; }
.section-title p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.section-title > span { color: var(--muted); font-size: 12px; }
.section-actions { display: flex; align-items: center; gap: 7px; }
.section-actions > span { color: var(--muted); font-size: 11px; }
.section-actions button, .section-actions label { display: flex; align-items: center; flex: 0 0 auto; gap: 4px; min-height: 34px; border: 1px solid #e3e3e3; border-radius: 5px; background: #fff; color: #555; padding: 0 8px; cursor: pointer; font-size: 11px; }
.section-actions .icon-only { justify-content: center; width: 34px; padding: 0; color: var(--green); }
.section-actions label { border-color: var(--green); background: var(--green); color: #fff; }
.section-actions .iconify { width: 15px; height: 15px; }
.nutrition-food-list, .nutrition-merchant-list { display: grid; }
.meal-group + .meal-group { margin-top: 10px; }
.meal-group-title { display: grid; grid-template-columns: 24px auto 1fr; align-items: center; gap: 7px; border-top: 1px solid #efefef; padding: 13px 0 5px; }
.meal-group-title .iconify { width: 20px; height: 20px; color: var(--green); }
.meal-group-title h3 { margin: 0; font-size: 15px; }
.meal-group-title strong { justify-self: end; color: var(--muted); font-size: 11px; }
.nutrition-food-row { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid #efefef; }
.nutrition-food-swipe-content { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) 32px; align-items: center; gap: 10px; width: 100%; background: var(--surface); padding: 8px 0; touch-action: pan-y; transition: transform .22s ease; will-change: transform; }
.nutrition-food-row.is-swiping .nutrition-food-swipe-content { transition: none; }
.nutrition-food-row.swipe-open .nutrition-food-swipe-content { transform: translateX(-76px); }
.nutrition-swipe-delete { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; width: 76px; border: 0; border-radius: 0; background: var(--danger); color: #fff; padding: 0; font-size: 11px; font-weight: 650; }
.nutrition-swipe-delete .iconify { width: 19px; height: 19px; }
.nutrition-swipe-delete:disabled { cursor: wait; opacity: .65; }
.nutrition-food-edit { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 14px; min-width: 0; border: 0; background: transparent; padding: 4px 0; color: inherit; text-align: left; }
.nutrition-food-edit > img, .nutrition-merchant-row > img { width: 62px; height: 62px; border-radius: 6px; object-fit: cover; pointer-events: none; }
.nutrition-food-edit > .food-image-placeholder { width: 62px; height: 62px; border-radius: 6px; }
.nutrition-food-row h3, .nutrition-merchant-row h3 { margin: 0 0 5px; font-size: 15px; }
.nutrition-food-row p, .nutrition-food-row small, .nutrition-merchant-row p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.nutrition-food-edit > strong { color: var(--green); font-size: 19px; text-align: right; }
.nutrition-food-edit > strong small { display: block; font-size: 10px; font-weight: 500; }
.nutrition-empty { display: grid; justify-items: center; border-top: 1px solid #efefef; padding: 42px 16px; color: inherit; text-align: center; cursor: pointer; }
.nutrition-empty svg { width: 30px; height: 30px; color: var(--green); }
.nutrition-empty h3 { margin: 10px 0 4px; }
.nutrition-empty p, .nutrition-no-merchant { margin: 0; color: var(--muted); font-size: 12px; }
.nutrition-merchant-row { display: grid; grid-template-columns: 56px minmax(0,1fr) 34px; align-items: center; gap: 13px; border-top: 1px solid #efefef; padding: 12px 0; }
.nutrition-merchant-row > img { width: 56px; height: 56px; }
.nutrition-merchant-row > .food-image-placeholder { width: 56px; height: 56px; border-radius: 6px; }
.nutrition-merchant-row > button { width: 32px; height: 32px; border: 1px solid var(--green); border-radius: 6px; background: var(--green); color: #fff; font-size: 18px; }
.merchant-nutrition-modal-panel { width: min(520px, 100%); }
.nutrition-library-modal-panel { width: min(520px, 100%); }
.nutrition-library-hint { margin: -8px 0 14px; color: var(--muted); font-size: 11px; }
.nutrition-library-meals { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 3px; border: 1px solid var(--line); border-radius: 7px; background: #f7f7f7; margin-bottom: 14px; padding: 4px; }
.nutrition-library-meals button { min-height: 36px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.nutrition-library-meals button.active { background: var(--green); color: #fff; }
.nutrition-library-list { display: grid; max-height: min(55vh, 520px); overflow-y: auto; }
.nutrition-library-row { display: grid; grid-template-columns: 48px minmax(0,1fr) 32px 32px; align-items: center; gap: 10px; border-top: 1px solid #ededed; padding: 10px 0; }
.nutrition-library-row > img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; pointer-events: none; }
.nutrition-library-row > .food-image-placeholder { width: 48px; height: 48px; border-radius: 6px; }
.nutrition-library-row > div:not(.food-image-placeholder) { min-width: 0; }
.nutrition-library-row h3 { overflow: hidden; margin: 0 0 4px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.nutrition-library-row p { overflow: hidden; margin: 0; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.nutrition-library-row > button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 5px; padding: 0; }
.nutrition-library-row > button .iconify { width: 17px; height: 17px; }
.nutrition-library-delete { border: 1px solid var(--line); background: transparent; color: var(--muted); }
.nutrition-library-add { border: 1px solid var(--green); background: var(--green); color: #fff; }
.nutrition-library-row > button:disabled { cursor: wait; opacity: .5; }
.nutrition-library-empty { display: grid; justify-items: center; padding: 42px 16px 30px; text-align: center; }
.nutrition-library-empty .iconify { width: 28px; height: 28px; color: var(--green); }
.nutrition-library-empty h3 { margin: 10px 0 4px; font-size: 15px; }
.nutrition-library-empty p { margin: 0; color: var(--muted); font-size: 11px; }
.nutrition-recognition-preview { position: relative; display: grid; grid-template-columns: 130px 1fr; align-items: center; min-height: 130px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fafafa; margin-bottom: 20px; }
.nutrition-recognition-preview > img { width: 130px; height: 130px; object-fit: cover; pointer-events: none; }
.nutrition-recognition-preview > img[hidden] + #nutritionRecognitionText { grid-column: 1 / -1; }
#nutritionRecognitionText { padding: 18px; }
#nutritionRecognitionText i { display: block; width: 10px; height: 10px; margin-bottom: 8px; border-radius: 50%; background: #aaa; }
#nutritionRecognitionText.processing i { border: 2px solid #ddd; border-top-color: var(--green); background: transparent; animation: recognition-spin .8s linear infinite; }
#nutritionRecognitionText.success i { background: #2fb77d; }
#nutritionRecognitionText.fallback i { background: #e1a42b; }
#nutritionRecognitionText strong { font-size: 13px; }
#nutritionRecognitionText p, .nutrition-disclaimer { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.nutrition-retry-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin-top: 12px; border: 1px solid var(--green); border-radius: 5px; background: #fff; padding: 0 11px; color: var(--green); font-size: 12px; font-weight: 700; }
.nutrition-retry-button .iconify { width: 16px; height: 16px; }
.nutrition-retry-button:disabled { cursor: wait; opacity: .55; }
.nutrition-text-estimate-field { display: grid; gap: 8px; }
.nutrition-text-estimate-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
.nutrition-calorie-estimate-row { grid-template-columns: minmax(0, 1fr) 120px; }
.nutrition-text-estimate-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 43px; border: 1px solid var(--green); border-radius: 5px; background: var(--green-soft); color: var(--green); padding: 0 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.nutrition-text-estimate-button .iconify { width: 17px; height: 17px; }
.nutrition-text-estimate-button:disabled { cursor: wait; opacity: .55; }
.calorie-target-formula { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--green-soft); margin: 0; padding: 13px 14px; }
.calorie-target-formula span { color: var(--muted); font-size: 11px; }
.calorie-target-formula strong { grid-row: 1 / span 2; grid-column: 2; color: var(--green); font-size: 21px; }
.calorie-target-formula small { color: var(--muted); font-size: 10px; }
.calculator-launch { display: grid; grid-template-columns: 36px minmax(0,1fr) 20px; align-items: center; gap: 11px; width: 100%; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--green-soft); padding: 13px 14px; color: var(--ink); text-align: left; }
.calculator-launch > .iconify:first-child { width: 24px; height: 24px; color: var(--green); }
.calculator-launch > span:nth-child(2) { display: grid; gap: 3px; }
.calculator-launch strong { font-size: 13px; }
.calculator-launch small { color: var(--muted); font-size: 10px; font-weight: 500; }
.calculator-launch .calculator-chevron { width: 18px; height: 18px; transition: transform .2s ease; }
.calculator-launch[aria-expanded="true"] .calculator-chevron { transform: rotate(180deg); }
.calorie-calculator-panel { margin: -4px 0 22px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.calculator-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.calculator-grid .wide { grid-column: 1 / -1; }
.calculator-submit { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 16px; }
.calculator-submit .iconify { width: 18px; height: 18px; }
.calculator-result { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); padding: 14px 10px; }
.calculator-result > div { display: grid; gap: 3px; padding: 0 10px; }
.calculator-result > div + div { border-left: 1px solid var(--line); }
.calculator-result span, .calculator-result small { color: var(--muted); font-size: 9px; }
.calculator-result strong { font-size: 20px; }
.calculator-result .recommended strong { color: var(--green); }
.calculator-range-hint { margin: 10px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.nutrition-plan-picker { margin-bottom: 18px; }
.nutrition-plan-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 7px; background: #f1f2ef; padding: 4px; }
.nutrition-plan-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.nutrition-plan-tabs button.active { background: var(--surface); color: var(--green); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.nutrition-plan-tabs .iconify { width: 17px; height: 17px; }
.tanchengyi-plan-panel { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 16px; }
.template-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.template-heading strong, .template-heading small { display: block; }
.template-heading strong { font-size: 14px; }
.template-heading small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.template-heading > span { flex: 0 0 auto; border-radius: 20px; background: var(--green-soft); padding: 5px 8px; color: var(--green); font-size: 9px; font-weight: 700; }
.template-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.template-fields .wide { grid-column: 1 / -1; }
.template-result { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--line); border-radius: 7px; padding: 12px 6px; }
.template-result > div { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 0 6px; }
.template-result > div + div { border-left: 1px solid var(--line); }
.template-result span, .template-result small { color: var(--muted); font-size: 9px; }
.template-result strong { font-size: 17px; }
.template-result > div:last-child strong { color: var(--green); }
.template-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.template-apply { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 13px; }
.template-apply .iconify { width: 17px; height: 17px; }
.apple-health-modal-panel { width: min(620px, 100%); }
.apple-health-connection-status { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); margin-bottom: 18px; padding-bottom: 18px; }
.apple-health-connection-status strong { display: block; margin-bottom: 4px; font-size: 14px; }
.apple-health-connection-status p { margin: 0; color: var(--muted); font-size: 11px; }
.apple-health-generate { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; }
.apple-health-generate .iconify { width: 18px; height: 18px; }
.apple-health-credentials { display: grid; gap: 12px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.apple-health-credentials input { font-family: Consolas, monospace; font-size: 10px; }
.apple-health-credentials button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; }
.apple-health-credentials button .iconify { width: 16px; height: 16px; }
.shortcut-setup { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 20px; }
.shortcut-setup h3 { margin: 0 0 11px; font-size: 15px; }
.shortcut-setup ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.shortcut-setup li + li { margin-top: 5px; }
.danger-text { color: var(--danger); }
.auth-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 20px; border-radius: 6px; background: #f1f2ef; padding: 4px; }
.auth-mode-switch button { min-height: 38px; border: 0; border-radius: 4px; background: transparent; }
.auth-mode-switch button.active { background: #fff; color: var(--green); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.auth-modal-panel > label + label { margin-top: 14px; }
.auth-modal-panel > .primary-button { width: 100%; margin-top: 8px; }
.password-modal-panel { width: min(480px, 100%); }
.password-modal-panel > label { display: grid; gap: 7px; margin-top: 15px; }
.password-security-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; border-radius: 10px; background: var(--paper); padding: 13px 14px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.password-security-note .iconify { flex: 0 0 auto; width: 18px; height: 18px; color: var(--green); }
.password-input { position: relative; display: block; }
.password-input input { width: 100%; padding-right: 48px; }
.password-input button { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 36px; height: 36px; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.password-input button:hover { background: var(--paper); color: var(--ink); }
.password-input .iconify { width: 19px; height: 19px; }
.history-dish-row { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding: 14px 0; }
.history-dish-row img { width: 62px; height: 54px; border-radius: 5px; object-fit: cover; pointer-events: none; }
.history-dish-row > .food-image-placeholder { width: 62px; height: 54px; border-radius: 5px; }
.history-dish-row h3 { margin: 0 0 5px; font-size: 15px; }
.history-dish-row p, #adminHistoryPanel .panel-toolbar p { margin: 0; color: var(--muted); font-size: 11px; }
.history-dish-row button { display: flex; align-items: center; gap: 6px; min-height: 36px; border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: 0 12px; }
.history-dish-row button svg { width: 15px; }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(25,27,24,.48); backdrop-filter: blur(4px); }
.modal-panel { position: relative; width: min(620px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 8px; background: #fff; padding: 30px; box-shadow: 0 30px 90px rgba(0,0,0,.2); }
.modal-header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 24px; }
.modal-header h2 { margin: 0; font-size: 30px; }
.close-button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; }
.form-grid .wide { grid-column: 1 / -1; }
.upload-field { position: relative; gap: 9px; cursor: pointer; }
.upload-field .field-label { color: #4e524d; text-align: left; }
.image-upload-box { position: relative; display: grid; place-items: center; min-height: 210px; overflow: hidden; border: 1px dashed #aeb8b0; border-radius: 7px; background: #f5f7f4; color: var(--muted); text-align: center; }
.image-upload-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.image-upload-box > span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; border: 0; padding: 18px; }
.image-upload-box b { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); font-size: 22px; }
.image-upload-box strong { color: var(--ink); font-size: 14px; }
.image-upload-box small { color: var(--muted); font-size: 11px; font-weight: 500; }
.image-upload-box.has-image::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,20,17,.42), transparent 45%); content: ""; pointer-events: none; }
.image-upload-box.has-image #dishUploadPrompt { align-self: end; color: #fff; }
.image-upload-box.has-image #dishUploadPrompt b { border-color: #fff; color: #fff; }
.image-upload-box.has-image #dishUploadPrompt strong, .image-upload-box.has-image #dishUploadPrompt small { color: #fff; }
.upload-field input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.recognition-status { display: flex; align-items: center; gap: 12px; min-height: 60px; border: 1px solid var(--line); border-radius: 6px; background: #fafbf9; padding: 12px 14px; }
.recognition-status i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #afb5ae; }
.recognition-status strong { display: block; font-size: 12px; }
.recognition-status p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.recognition-status.processing i { border: 2px solid #b7c9bd; border-top-color: var(--green); background: transparent; animation: recognition-spin .8s linear infinite; }
.recognition-status.success { border-color: #bfd2c5; background: var(--green-soft); }
.recognition-status.success i { background: var(--green); }
.recognition-status.fallback { border-color: #e2d5c3; background: #fff9f0; }
.recognition-status.fallback i { background: var(--amber); }
.rice-option { display: flex; align-items: center; gap: 12px; min-height: 58px; border: 1px solid var(--line); border-radius: 6px; background: #fafbf9; padding: 12px 14px; cursor: pointer; }
.rice-option input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.rice-option span { display: grid; gap: 3px; }
.rice-option strong { color: var(--ink); font-size: 13px; }
.rice-option small { color: var(--muted); font-size: 11px; font-weight: 500; }
.modal-actions button:disabled { cursor: wait; opacity: .62; }
.admin-row-cover img, .admin-dish-row img, .cart-item img { pointer-events: none; }
@keyframes recognition-spin { to { transform: rotate(360deg); } }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 26px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; transform: translate(-50%, 30px); border-radius: 5px; background: #242424; color: #fff; padding: 13px 18px; font-size: 13px; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
body[data-role="customer"] .toast { bottom: 100px; }

@media (max-width: 900px) {
  .role-view.active { grid-template-columns: 1fr; align-content: start; }
  .role-intro { padding-top: 30px; }
  .menu-catalog { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
  .dish-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cart-layout { grid-template-columns: 1fr; }
  .order-panel { position: static; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-dish-row { grid-template-columns: 58px 1fr auto; }
  .admin-dish-row .category-cell, .admin-dish-row .price-cell { display: none; }
}

@media (max-width: 600px) {
  .topbar { height: 66px; padding: 0 16px; }
  body[data-role="customer"] .topbar { height: 56px; }
  body[data-role="customer"] .brand-mark { width: 30px; height: 30px; font-size: 16px; }
  body[data-role="customer"] .brand strong { font-size: 16px; }
  body[data-role="customer"] .cart-button { display: grid; place-items: center; width: 40px; min-height: 36px; padding: 0; }
  body[data-role="customer"] .cart-button span { display: none; }
  .brand small { display: none; }
  #switchRole { width: 40px; min-height: 40px; justify-content: center; border-radius: 50%; padding: 0; }
  #switchRole > span:last-child { display: none; }
  .top-actions { gap: 7px; }
  .view { width: min(100% - 28px, 1320px); padding: 36px 0 84px; }
  body[data-role="customer"] .view { padding-bottom: 142px; }
  .customer-view { padding-top: 18px; }
  .role-view.active { min-height: auto; gap: 35px; }
  .role-grid { grid-template-columns: 1fr; }
  .role-card { grid-template-columns: 120px 1fr; grid-template-rows: auto; min-height: 170px; }
  .role-card .role-image { min-height: 170px; }
  .role-card > div:nth-child(2) { padding: 20px 16px; }
  .role-card h2 { font-size: 21px; }
  .role-card i { display: none; }
  .menu-heading, .admin-heading { align-items: stretch; flex-direction: column; margin-bottom: 26px; }
  .menu-heading { display: grid; grid-template-columns: minmax(0, 1fr) 124px; align-items: center; gap: 12px; margin: 0 -14px; border-radius: 8px 8px 0 0; background: #fff; padding: 14px 14px 12px; }
  .menu-heading .eyebrow { display: none; }
  .menu-heading h1 { font-size: 24px; font-weight: 600; }
  .menu-heading h1::after { display: block; width: 30px; height: 3px; margin-top: 10px; background: var(--green); content: ""; }
  .menu-heading > div > p:last-child { margin-top: 5px; font-size: 10px; }
  .menu-heading .search-box { width: 124px; height: 38px; border: 0; border-radius: 20px; background: #f3f4f1; padding: 0 10px; }
  .search-box { width: 100%; }
  .menu-catalog { grid-template-columns: 88px minmax(0, 1fr); gap: 0; margin-right: -14px; margin-left: -14px; }
  .category-tabs { top: 56px; gap: 0; max-height: calc(100vh - 68px); border-left: 0; background: #eceeea; padding: 6px 0 120px; scrollbar-width: none; }
  .category-tabs button { min-height: 52px; border-left-width: 3px; border-radius: 0; padding: 10px 9px; font-size: 12px; line-height: 1.35; }
  .category-tabs button.active { background: #fff; }
  .dish-grid { grid-template-columns: 1fr; gap: 0; padding: 0 14px 120px 12px; background: #fff; }
  .dish-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; min-height: 140px; border-bottom: 1px solid #eceee9; padding: 16px 0; }
  .dish-image { align-self: start; aspect-ratio: 1; border-radius: 6px; }
  .dish-image .availability { display: none; }
  .dish-content { min-width: 0; padding: 0; }
  .dish-title-row { display: block; }
  .dish-title-row h3 { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .dish-title-row strong { display: block; margin-top: 8px; font-size: 18px; }
  .dish-content p { margin: 6px 0 8px; font-size: 11px; line-height: 1.45; -webkit-line-clamp: 2; }
  .dish-meta { align-items: end; }
  .dish-tags { gap: 3px; }
  .dish-tags span { padding: 3px 5px; }
  .add-button { width: 30px; height: 30px; border-radius: 6px; background: var(--green); color: #fff; font-size: 18px; }
  .quantity-inline { gap: 5px; }
  .quantity-inline button { width: 28px; height: 28px; border-radius: 6px; }
  .cart-dock { right: 12px; bottom: 76px; left: 12px; grid-template-columns: 44px minmax(0, 1fr) auto; width: auto; min-height: 64px; border-radius: 7px; padding: 7px 8px 7px 9px; }
  .cart-dock-icon { width: 44px; height: 44px; }
  .cart-dock-summary strong { font-size: 21px; }
  .cart-dock > button { min-width: 98px; min-height: 48px; padding: 0 16px; }
  .customer-tabs { right: 0; bottom: 0; left: 0; width: 100%; min-height: 64px; transform: none; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; padding: 6px 12px max(6px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(31,33,30,.1); }
  .customer-tabs button { gap: 7px; }
  .customer-tabs button > span { width: 28px; height: 28px; }
  .status-view { padding-top: 22px; }
  .nutrition-view { padding-top: 14px; }
  .nutrition-heading { margin-bottom: 10px; }
  .nutrition-heading .eyebrow { display: none; }
  .nutrition-heading h1 { font-size: 26px; }
  .nutrition-heading > div > p:last-child { display: none; }
  .nutrition-settings-button { width: 36px; min-height: 36px; justify-content: center; padding: 0; }
  .nutrition-settings-button > span:last-child { display: none; }
  .nutrition-date-picker { margin-bottom: 10px; }
  .nutrition-date-nav { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 6px; }
  .nutrition-date-nav > button { min-height: 36px; }
  .nutrition-overview { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; }
  .calorie-ring { grid-column: 1; grid-row: 1; width: 108px; }
  .calorie-ring::before { inset: 10px; }
  .calorie-ring span, .calorie-ring small { font-size: 9px; }
  .calorie-ring strong { font-size: 29px; }
  .nutrition-summary { display: contents; }
  .calorie-status-stack { grid-column: 2; grid-row: 1; align-content: center; gap: 7px; }
  .calorie-budget-status { font-size: 13px; text-align: left; }
  .nutrition-apple-health-status { font-size: 9px; }
  .calorie-plan { grid-column: 1 / -1; grid-row: 2; margin-top: 1px; padding: 10px 0; }
  .calorie-plan > div { padding: 0 9px; }
  .calorie-plan span { font-size: 9px; }
  .calorie-plan strong { font-size: 18px; }
  .macro-grid { grid-column: 1 / -1; grid-row: 3; gap: 0; border-top: 1px solid #ededed; padding-top: 13px; }
  .macro-grid > div { gap: 6px; padding: 0 9px; }
  .macro-grid > div + div { border-left: 1px solid #ededed; }
  .macro-grid span { font-size: 10px; }
  .macro-grid strong { font-size: 18px; }
  .macro-grid small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .meal-selector { gap: 2px; margin-top: 9px; padding: 3px; }
  .meal-selector button { flex-direction: column; gap: 3px; padding: 7px 2px 6px; }
  .meal-selector button .iconify { width: 19px; height: 19px; }
  .meal-selector button b { font-size: 10px; }
  .nutrition-section { margin-top: 10px; padding: 16px 0 0; }
  .section-title h2 { font-size: 20px; }
  .section-title p, .section-actions > span { display: none; }
  .section-actions { gap: 5px; }
  .section-actions button, .section-actions label { min-height: 32px; }
  .nutrition-food-swipe-content { grid-template-columns: minmax(0,1fr) 30px; gap: 8px; }
  .nutrition-food-edit { grid-template-columns: 54px minmax(0,1fr) auto; gap: 10px; }
  .nutrition-food-edit > img { width: 54px; height: 54px; }
  .nutrition-food-edit > div small { display: none; }
  .nutrition-food-edit > strong { font-size: 16px; }
  .nutrition-recognition-preview { grid-template-columns: 100px 1fr; min-height: 100px; }
  .nutrition-recognition-preview > img { width: 100px; height: 100px; }
  #nutritionRecognitionText { padding: 12px; }
  #nutritionModal, #nutritionSettingsModal, #authModal, #merchantNutritionModal, #nutritionLibraryModal { align-items: end; padding: 0; }
  .nutrition-modal-panel, .settings-modal-panel, .auth-modal-panel, .merchant-nutrition-modal-panel, .nutrition-library-modal-panel { width: 100%; max-height: 88vh; border-radius: 12px 12px 0 0; padding: 22px 18px max(22px, env(safe-area-inset-bottom)); }
  .account-panel > div { grid-template-columns: 42px minmax(0,1fr) auto; }
  .account-avatar { width: 42px; height: 42px; }
  .account-panel button { padding: 0 9px; font-size: 11px; }
  .health-plan-entry { grid-template-columns: 42px minmax(0,1fr) auto; padding: 14px; }
  .health-plan-icon { width: 42px; height: 42px; }
  .health-plan-entry button > span:first-child { display: none; }
  .apple-health-entry { grid-template-columns: 42px minmax(0,1fr) auto; padding: 14px; }
  .apple-health-icon { width: 42px; height: 42px; }
  .apple-health-entry button { padding: 0 9px; font-size: 11px; }
  .apple-health-entry button .iconify { display: none; }
  .calculator-grid { grid-template-columns: 1fr; }
  .calculator-grid .wide { grid-column: auto; }
  .calculator-result { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 0; }
  .calculator-result > div:nth-child(3) { border-left: 0; }
  .nutrition-plan-tabs button { flex-direction: column; gap: 3px; min-height: 52px; font-size: 10px; }
  .template-result { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 0; }
  .template-result > div:nth-child(3) { border-left: 0; }
  .status-heading { margin-bottom: 16px; }
  .status-heading .eyebrow { display: none; }
  .status-heading h1 { font-size: 30px; }
  .status-heading > p:last-child { margin-top: 6px; font-size: 11px; }
  .status-empty { padding: 54px 18px; }
  .status-empty h2 { font-size: 21px; }
  .status-banner { margin-top: 14px; }
  .weekly-carousel { height: 170px; margin: 0 0 14px; border-radius: 6px; }
  .weekly-slide::after { background: linear-gradient(0deg, rgba(17,24,20,.86) 0%, rgba(17,24,20,.22) 76%); }
  .weekly-copy { top: auto; right: 14px; bottom: 38px; left: 14px; width: auto; transform: none; }
  .weekly-copy .eyebrow, .weekly-copy p:not(.eyebrow) { display: none; }
  .weekly-copy h2 { font-size: 22px; }
  .weekly-actions { gap: 10px; margin-top: 8px; }
  .weekly-actions button { min-height: 32px; padding: 0 12px; font-size: 11px; }
  .weekly-actions strong { font-size: 17px; }
  .carousel-controls { right: 12px; bottom: 8px; left: 12px; }
  .carousel-arrows button { width: 28px; height: 28px; font-size: 14px; }
  .order-tracker { margin: 0 0 12px; padding: 12px 13px; }
  .tracker-head { align-items: center; }
  .tracker-head .eyebrow { display: none; }
  .tracker-head h2 { font-size: 16px; }
  .tracker-head .close-button { width: 28px; height: 28px; font-size: 18px; }
  .tracker-steps { margin: 12px 0 8px; }
  .tracker-step { gap: 5px; font-size: 10px; }
  .tracker-items { overflow: hidden; margin-bottom: 3px; text-overflow: ellipsis; white-space: nowrap; }
  .cart-view { padding-top: 20px; }
  .cart-view .back-button { margin-bottom: 16px; }
  .cart-view .page-title { margin-bottom: 18px; }
  .cart-view .page-title .eyebrow { display: none; }
  .cart-view .page-title h1 { font-size: 30px; }
  .cart-layout .order-panel { order: -1; padding: 18px; }
  .cart-layout .order-panel h2 { margin-bottom: 16px; font-size: 22px; }
  .dish-content p { min-height: 0; }
  .cart-item { grid-template-columns: 82px minmax(0,1fr); }
  .cart-item img { width: 82px; }
  .cart-item > .food-image-placeholder { width: 82px; }
  .cart-item-side { grid-column: 2; justify-items: start; }
  .stats-grid { gap: 8px; }
  .stat-card { padding: 16px; }
  .stat-card strong { font-size: 24px; }
  .panel-toolbar { align-items: stretch; flex-direction: column; }
  .search-box.small { width: 100%; }
  .admin-dish-row { grid-template-columns: 52px minmax(0,1fr); gap: 12px; }
  .admin-dish-row img { width: 52px; height: 48px; }
  .admin-dish-row > .food-image-placeholder { width: 52px; height: 48px; }
  .admin-dish-row .status-pill { grid-column: 2; }
  .row-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .order-card { grid-template-columns: 1fr auto; gap: 12px; }
  .order-card > div:nth-child(3) { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .modal-panel, .login-panel { padding: 24px; }
}

html[data-theme="dark"] { color-scheme: dark; background: #111315; }
html[data-theme="dark"] body,
html[data-theme="dark"] body[data-role="customer"] {
  --paper: #111315;
  --surface: #1a1d20;
  --ink: #f3f4f4;
  --muted: #9ca2a8;
  --line: #30343a;
  --green: #0a84ff;
  --green-soft: #102a43;
  --danger: #ff453a;
  --amber: #ff9f0a;
  --shadow: 0 14px 40px rgba(0,0,0,.3);
  background: var(--paper);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] body[data-role="customer"] .topbar { border-bottom-color: rgba(255,255,255,.07); background: rgba(17,19,21,.9); }
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .icon-text-btn,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .switch-entry-button,
html[data-theme="dark"] .quantity-inline button,
html[data-theme="dark"] .account-panel,
html[data-theme="dark"] .account-panel button,
html[data-theme="dark"] .health-plan-entry,
html[data-theme="dark"] .health-plan-entry button,
html[data-theme="dark"] .apple-health-entry,
html[data-theme="dark"] .apple-health-entry button,
html[data-theme="dark"] .order-panel,
html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .row-actions button,
html[data-theme="dark"] .nutrition-settings-button,
html[data-theme="dark"] .nutrition-date-nav > button,
html[data-theme="dark"] .nutrition-calendar,
html[data-theme="dark"] .nutrition-overview,
html[data-theme="dark"] .meal-selector button,
html[data-theme="dark"] .nutrition-library-meals,
html[data-theme="dark"] .nutrition-library-delete,
html[data-theme="dark"] .nutrition-section,
html[data-theme="dark"] .section-actions button,
html[data-theme="dark"] .nutrition-retry-button,
html[data-theme="dark"] .history-dish-row button,
html[data-theme="dark"] .modal-panel,
html[data-theme="dark"] .close-button,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { border-color: var(--line); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .switch-entry-button { color: var(--ink); box-shadow: none; }
html[data-theme="dark"] .customer-tabs { background: rgba(26,29,32,.96); box-shadow: 0 16px 44px rgba(0,0,0,.38); }
html[data-theme="dark"] body[data-role="customer"] .menu-heading,
html[data-theme="dark"] body[data-role="customer"] .dish-grid,
html[data-theme="dark"] body[data-role="customer"] .category-tabs button.active,
html[data-theme="dark"] body[data-role="customer"] .status-empty { border-color: var(--line); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] body[data-role="customer"] .dish-title-row h3,
html[data-theme="dark"] body[data-role="customer"] .category-tabs button.active { color: var(--ink); }
html[data-theme="dark"] body[data-role="customer"] .category-tabs { background: #171a1d; }
html[data-theme="dark"] body[data-role="customer"] .dish-tags span,
html[data-theme="dark"] .status-pill.off,
html[data-theme="dark"] .auth-mode-switch,
html[data-theme="dark"] .image-upload-box,
html[data-theme="dark"] .payment-proof-picker,
html[data-theme="dark"] .nutrition-recognition-preview,
html[data-theme="dark"] .recognition-status,
html[data-theme="dark"] .rice-option { border-color: var(--line); background: #22262a; color: var(--ink); }
html[data-theme="dark"] .calculator-launch { background: var(--green-soft); }
html[data-theme="dark"] .calculator-result { background: #22262a; }
html[data-theme="dark"] .nutrition-plan-tabs { background: #22262a; }
html[data-theme="dark"] .nutrition-plan-tabs button.active,
html[data-theme="dark"] .tanchengyi-plan-panel { background: var(--surface); box-shadow: none; }
html[data-theme="dark"] .calorie-plan { background: #22262a; }
html[data-theme="dark"] .daily-nutrition-evaluation { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .daily-evaluation-status.attention { background: #3b321f; color: #e4bd61; }
html[data-theme="dark"] .daily-evaluation-status.insufficient { background: #292d31; }
html[data-theme="dark"] .meal-selector { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .meal-selector button.active { border-color: var(--green); background: var(--green); color: #fff; }
html[data-theme="dark"] .apple-health-icon { background: #28202f; color: #b993d6; }
html[data-theme="dark"] .nutrition-apple-health-status { color: #c1a0dc; }
html[data-theme="dark"] .auth-mode-switch button.active { background: #30343a; color: var(--green); box-shadow: none; }
html[data-theme="dark"] .recognition-status.fallback { border-color: #5a4730; background: #2a2118; }
html[data-theme="dark"] .dish-image { background: #24282c; }
html[data-theme="dark"] .food-image-placeholder { background: #24282c; color: #e7e8e5; }
html[data-theme="dark"] .food-image-placeholder small { color: #989d98; }
html[data-theme="dark"] .weekly-slide > .food-image-placeholder { background: #1e211f; color: #fff; }
html[data-theme="dark"] .dish-image .availability { background: rgba(26,29,32,.92); }
html[data-theme="dark"] .calorie-ring { background: conic-gradient(var(--green) var(--calorie-progress), #30343a 0); }
html[data-theme="dark"] .calorie-ring::before { background: var(--surface); }
html[data-theme="dark"] .macro-bar { background: linear-gradient(90deg, var(--macro-color) var(--macro-progress), #34383d var(--macro-progress)); }
html[data-theme="dark"] .calorie-plan,
html[data-theme="dark"] .calorie-plan > div + div,
html[data-theme="dark"] .macro-grid,
html[data-theme="dark"] .macro-grid > div + div,
html[data-theme="dark"] .meal-group-title,
html[data-theme="dark"] .nutrition-food-row,
html[data-theme="dark"] .nutrition-library-row,
html[data-theme="dark"] .nutrition-merchant-row { border-color: var(--line); }
html[data-theme="dark"] .nutrition-calendar-head button:hover { background: #292d31; }
html[data-theme="dark"] .nutrition-section { background: transparent; }
html[data-theme="dark"] label,
html[data-theme="dark"] .upload-field .field-label { color: #c8ccd0; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #737a81; }
html[data-theme="dark"] #meTabDot { border-color: var(--surface); }
html[data-theme="dark"] .toast { background: #f1f2f3; color: #17191b; }

@media (max-width: 600px) {
  html[data-theme="dark"] body[data-role="customer"] .menu-heading { background: var(--surface); }
  html[data-theme="dark"] body[data-role="customer"] .menu-heading .search-box { background: #25292d; }
  html[data-theme="dark"] body[data-role="customer"] .category-tabs { background: #171a1d; }
  html[data-theme="dark"] body[data-role="customer"] .dish-card { border-color: var(--line); }
}

/* Apple-inspired product UI: flat surfaces, hairline structure, one blue action color. */
body,
button,
input,
textarea,
select { letter-spacing: 0; }

h1,
h2,
h3,
.brand strong,
.cart-dock-summary strong,
.stat-card strong,
.order-total strong { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }

h1,
h2 { font-weight: 600; }

.topbar {
  height: 56px;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .86);
  padding: 0 clamp(16px, 4vw, 56px);
  backdrop-filter: saturate(180%) blur(20px);
}
.brand { gap: 9px; }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--surface); font-family: inherit; font-size: 15px; font-weight: 600; }
body[data-role="customer"] .brand-mark { background: var(--ink); color: var(--surface); font-family: inherit; font-weight: 600; }
.brand strong { font-size: 17px; font-weight: 600; }
.brand small { color: var(--muted); letter-spacing: 0; }
.top-actions { gap: 8px; }
.theme-toggle,
.icon-text-btn,
.switch-entry-button,
.cart-button,
.secondary-button,
.nutrition-settings-button,
.section-actions button,
.section-actions label,
.account-panel button,
.health-plan-entry button,
.apple-health-entry button,
.row-actions button,
.back-button,
.nutrition-date-nav > button,
.nutrition-retry-button,
.nutrition-text-estimate-button,
.calculator-submit,
.status-empty button,
.weekly-actions button,
.cart-dock > button,
.primary-button { border-radius: var(--radius-button); box-shadow: none; font-weight: 400; }
.theme-toggle { width: 36px; height: 36px; border-color: var(--line); background: transparent; }
.switch-entry-button { min-height: 36px; border-color: var(--line); background: transparent; padding: 0 14px; color: var(--ink); }
.switch-entry-button .iconify { color: var(--ink); }
.cart-button { min-height: 36px; border-color: var(--green); padding: 0 14px; }
.cart-button b { color: var(--green); }

main { min-height: calc(100vh - 56px); }
.view { width: min(1440px, calc(100% - 48px)); padding: 48px 0 112px; }
.customer-view { width: min(1180px, calc(100% - 48px)); padding-top: 28px; }
.nutrition-view { max-width: 900px; }
.status-view { max-width: 900px; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0; }
h1 { font-size: clamp(34px, 4vw, 44px); line-height: 1.12; }

.role-card,
.weekly-carousel,
.dish-image,
.cart-item img,
.payment-proof-picker,
.login-panel,
.stat-card,
.order-panel,
.nutrition-overview,
.meal-selector,
.modal-panel,
.nutrition-calendar,
.nutrition-recognition-preview,
.image-upload-box,
.payment-proof-picker { border-radius: 8px; box-shadow: none; }
.role-card:hover { box-shadow: none; transform: translateY(-2px); }
.role-card span { color: var(--color-link-blue); }

.menu-heading { align-items: center; margin-bottom: 24px; }
.menu-heading h1 { font-size: 34px; font-weight: 600; }
.search-box { height: 40px; border: 1px solid var(--line); border-radius: var(--radius-button); background: var(--surface); padding: 0 14px; }
.menu-catalog { grid-template-columns: 144px minmax(0, 1fr); gap: 28px; }
.category-tabs { top: 72px; gap: 4px; border: 0; padding: 0; }
.category-tabs button { min-height: 40px; border: 0; border-radius: var(--radius-button); padding: 0 16px; }
.category-tabs button.active,
body[data-role="customer"] .category-tabs button.active { border: 0; background: var(--green); color: #fff; font-weight: 600; }
.dish-grid,
body[data-role="customer"] .dish-grid,
body[data-role="customer"] .menu-heading { background: transparent; }
.dish-grid { gap: 32px 20px; }
.dish-image { border-radius: 8px; background: var(--color-pebble); }
.dish-image .availability { border-radius: var(--radius-button); background: rgba(255, 255, 255, .9); color: var(--ink); }
.dish-content { padding-top: 14px; }
.dish-title-row h3,
body[data-role="customer"] .dish-title-row h3 { color: var(--ink); font-size: 18px; font-weight: 600; }
.dish-title-row strong,
body[data-role="customer"] .dish-title-row strong { color: var(--ink); font-family: inherit; font-weight: 600; }
.dish-content p,
body[data-role="customer"] .dish-content p { color: var(--muted); }
.dish-tags span,
body[data-role="customer"] .dish-tags span { border: 0; border-radius: var(--radius-button); background: var(--color-pebble); color: var(--muted); padding: 4px 8px; }
.add-button,
body[data-role="customer"] .add-button { border-radius: 50%; border-color: var(--green); background: var(--green); color: #fff; }
.quantity-inline button,
body[data-role="customer"] .quantity-inline button { border-radius: 50%; border-color: var(--line); background: var(--surface); color: var(--ink); }
.quantity-inline button:last-child,
body[data-role="customer"] .quantity-inline button:last-child { border-color: var(--green); background: var(--green); color: #fff; }

.cart-dock,
body[data-role="customer"] .cart-dock { border-color: #333; border-radius: 8px; background: var(--color-carbon); box-shadow: none; }
.cart-dock-icon { background: transparent; }
.cart-dock > button { background: var(--green); }
.customer-tabs { bottom: 16px; min-height: 62px; border-color: var(--line); border-radius: 980px; background: rgba(255, 255, 255, .92); box-shadow: none; backdrop-filter: saturate(180%) blur(20px); }
.customer-tabs button { border-radius: var(--radius-button); }
.customer-tabs button > span { border: 0; background: transparent; }
.customer-tabs button.active,
body[data-role="customer"] .customer-tabs button.active { background: transparent; color: var(--ink); }
.customer-tabs button.active > span,
body[data-role="customer"] .customer-tabs button.active > span { border-color: var(--green); background: var(--green); color: #fff; }

.status-heading h1,
.nutrition-heading h1 { font-size: 34px; font-weight: 600; }
.account-panel,
.health-plan-entry,
.apple-health-entry { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 20px 4px; }
.account-avatar,
.health-plan-icon,
.apple-health-icon { background: var(--color-ice); color: var(--ink); }
.account-panel button { border-color: var(--color-link-blue); background: transparent; color: var(--color-link-blue); }
.health-plan-entry button,
.apple-health-entry button { border-color: var(--line); background: transparent; }
.status-empty { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.status-empty > span { background: var(--color-ice); color: var(--ink); }
.status-empty button { border-color: var(--green); background: var(--green); }
.weekly-carousel { box-shadow: none; }
.weekly-actions button { border-color: #fff; background: #fff; color: var(--color-carbon); }

.nutrition-settings-button { border-color: var(--line); background: transparent; }
.nutrition-date-nav > button { border-color: var(--line); background: var(--surface); }
.nutrition-date-nav .iconify { color: var(--ink); }
.nutrition-calendar { border-color: var(--line); box-shadow: none; }
.nutrition-calendar-day { border-radius: 50%; }
.nutrition-calendar-day.has-record { background: var(--color-ice); color: var(--color-link-blue); }
.nutrition-calendar-day.selected { border-color: var(--green); background: var(--green); color: #fff; }
.nutrition-overview { border-color: var(--line); padding: 24px; }
.calorie-ring { background: conic-gradient(var(--color-signal-blue) var(--calorie-progress), var(--color-pebble) 0); }
.calorie-ring::before { background: var(--surface); }
.calorie-plan { border-radius: 8px; background: var(--paper); }
.calorie-plan .calorie-budget strong,
.calorie-budget-status,
.nutrition-food-edit > strong { color: var(--ink); }
.nutrition-apple-health-status { color: var(--muted); }
.macro-bar,
.macro-bar.protein,
.macro-bar.fat { --macro-color: var(--color-signal-blue); }
.meal-selector { border-color: var(--line); padding: 4px; }
.meal-selector button { border-radius: var(--radius-button); }
.meal-selector button.active { background: var(--green); }
.nutrition-section { border-color: var(--line); }
.section-actions button { border-color: var(--line); background: transparent; color: var(--ink); }
.section-actions .icon-only { color: var(--ink); }
.section-actions label { border-color: var(--green); background: var(--green); }
.nutrition-repeat-button,
.nutrition-merchant-row > button,
.nutrition-library-add { border-radius: 50%; }
.nutrition-food-row,
.nutrition-merchant-row,
.nutrition-library-row,
.meal-group-title { border-color: var(--line); }
.nutrition-food-list { gap: 12px; }
.meal-group,
.meal-group + .meal-group {
  overflow: hidden;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.meal-group-title { border-top: 0; padding: 12px 12px 7px; }
.meal-group .nutrition-food-row { padding: 0; }
.meal-group .nutrition-food-row:last-child { border-bottom: 0; }
.meal-group .nutrition-food-swipe-content { padding: 8px 10px; }
.nutrition-food-edit > img,
.nutrition-merchant-row > img,
.nutrition-library-row > img { border-radius: 8px; }
.nutrition-library-meals { border-color: var(--line); border-radius: 8px; background: var(--paper); }
.nutrition-library-meals button { border-radius: var(--radius-button); }

input,
textarea,
select { border-color: var(--line); border-radius: 8px; background: var(--paper); }
.primary-button { border-color: var(--green); background: var(--green); }
.primary-button:hover,
body[data-role="customer"] .primary-button:hover { border-color: #0077ed; background: #0077ed; }
.secondary-button { border-color: var(--color-link-blue); background: transparent; color: var(--color-link-blue); }
.order-panel,
body[data-role="customer"] .order-panel { border-color: var(--line); box-shadow: none; }
.order-total strong,
body[data-role="customer"] .order-total strong { color: var(--ink); }
.payment-proof-picker { border-color: var(--line); background: var(--paper); }
.modal-backdrop { background: rgba(0, 0, 0, .38); }
.modal-panel { border: 1px solid var(--line); box-shadow: none; }
.close-button { border-radius: 50%; }
.auth-mode-switch { border-radius: var(--radius-button); background: var(--paper); }
.auth-mode-switch button { border-radius: var(--radius-button); }
.auth-mode-switch button.active { background: var(--surface); color: var(--ink); box-shadow: none; }

.stat-card { border-color: var(--line); background: var(--surface); }
.admin-tabs button { border-radius: var(--radius-button); }
.admin-tabs button.active { background: var(--green); }
.status-pill { border-radius: var(--radius-button); background: var(--color-ice); color: var(--color-link-blue); }
.row-actions button { border-color: var(--line); background: transparent; }
.order-tracker,
body[data-role="customer"] .order-tracker { border-color: var(--line); background: var(--surface); }
.tracker-steps::before,
body[data-role="customer"] .tracker-steps::before { background: var(--line); }
.tracker-step i,
body[data-role="customer"] .tracker-step i { border-color: var(--surface); background: var(--color-pebble); box-shadow: 0 0 0 1px var(--line); }
.tracker-step.done,
.tracker-step.active { color: var(--color-link-blue); }

html[data-theme="dark"] body,
html[data-theme="dark"] body[data-role="customer"] {
  --paper: #111113;
  --surface: #1c1c1e;
  --ink: #f5f5f7;
  --muted: #98989d;
  --line: #38383a;
  --green: #0a84ff;
  --green-soft: #102a43;
  --danger: #ff453a;
  --shadow: none;
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] body[data-role="customer"] .topbar { border-bottom-color: var(--line); background: rgba(17, 17, 19, .9); }
html[data-theme="dark"] .brand-mark { background: var(--ink); color: #000; }
html[data-theme="dark"] body[data-role="customer"] .brand-mark { background: var(--ink); color: #000; }
html[data-theme="dark"] .customer-tabs { border-color: var(--line); background: rgba(28, 28, 30, .9); box-shadow: none; }
html[data-theme="dark"] .dish-tags span,
html[data-theme="dark"] body[data-role="customer"] .dish-tags span { background: #2c2c2e; }
html[data-theme="dark"] .calorie-ring { background: conic-gradient(var(--color-signal-blue) var(--calorie-progress), #2c2c2e 0); }
html[data-theme="dark"] .calorie-plan,
html[data-theme="dark"] .nutrition-library-meals,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .payment-proof-picker { background: #1c1c1e; }
html[data-theme="dark"] .account-avatar,
html[data-theme="dark"] .health-plan-icon,
html[data-theme="dark"] .apple-health-icon,
html[data-theme="dark"] .status-empty > span { background: #1c1c1e; color: var(--ink); }
html[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .nutrition-calendar-day.has-record { background: var(--green-soft); color: #64aaff; }

@media (max-width: 600px) {
  .topbar,
  body[data-role="customer"] .topbar { height: 52px; padding: 0 14px; }
  body[data-role="customer"] .brand-mark { width: 28px; height: 28px; font-size: 14px; }
  #switchRole { width: 36px; min-height: 36px; border-radius: 50%; }
  .theme-toggle { width: 36px; height: 36px; }
  .view { width: min(100% - 28px, 1440px); padding-top: 28px; }
  .customer-view { padding-top: 12px; }
  .menu-heading { grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin: 0; border-radius: 0; background: transparent; padding: 12px 0; }
  .menu-heading h1 { font-size: 24px; white-space: nowrap; }
  .menu-heading h1::after { display: none; }
  .menu-heading .search-box { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-button); background: var(--surface); }
  .menu-heading .search-box > .iconify { width: 21px; height: 21px; }
  .menu-catalog { grid-template-columns: 84px minmax(0, 1fr); margin-right: -14px; margin-left: -14px; }
  .category-tabs,
  body[data-role="customer"] .category-tabs { top: 58px; align-self: start; max-height: calc(100vh - 150px); overflow-y: auto; border-radius: 0; background: transparent; padding: 8px 6px; }
  .category-tabs button { min-height: 44px; border: 0; border-radius: var(--radius-button); padding: 8px; text-align: center; }
  .dish-grid,
  body[data-role="customer"] .dish-grid { padding: 0 14px 120px; background: var(--surface); }
  .dish-card { grid-template-columns: 96px minmax(0, 1fr); min-height: 132px; border-color: var(--line); padding: 14px 0; }
  .dish-image { border-radius: 8px; }
  .customer-tabs { bottom: 0; min-height: 62px; border-radius: 0; padding: 5px 12px max(5px, env(safe-area-inset-bottom)); }
  .customer-tabs button { flex-direction: column; gap: 2px; }
  .customer-tabs button > span { width: 27px; height: 27px; }
  .customer-tabs button > b { font-size: 10px; }
  .cart-dock { border-radius: 8px; box-shadow: none; }
  .nutrition-heading h1 { font-size: 28px; }
  .nutrition-overview { padding: 16px; }
  .meal-selector button { border-radius: var(--radius-button); }
  .section-actions button,
  .section-actions label { border-radius: 50%; width: 32px; padding: 0; justify-content: center; }
  .section-actions button:not(.icon-only) > span:last-child,
  .section-actions label > span:last-child { display: none; }
  .status-heading h1 { font-size: 30px; }
  .account-panel,
  .health-plan-entry,
  .apple-health-entry { padding: 16px 2px; }
  .modal-panel,
  .nutrition-modal-panel,
  .settings-modal-panel,
  .auth-modal-panel,
  .merchant-nutrition-modal-panel,
  .nutrition-library-modal-panel { border-right: 0; border-bottom: 0; border-left: 0; border-radius: 8px 8px 0 0; box-shadow: none; }
}

html[data-theme="dark"] body[data-role="customer"] .category-tabs {
  border-right: 1px solid var(--line);
  background: transparent;
}
html[data-theme="dark"] body[data-role="customer"] .category-tabs button { color: var(--muted); }
html[data-theme="dark"] body[data-role="customer"] .category-tabs button.active {
  border: 0;
  background: var(--green);
  color: #fff;
  font-weight: 600;
}
html[data-theme="dark"] body[data-role="customer"] .dish-grid { background: var(--surface); }
html[data-theme="dark"] body[data-role="customer"] .menu-catalog { background: var(--surface); }
html[data-theme="dark"] body[data-role="customer"] .menu-heading .search-box {
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .search-box input[type="search"] {
  border: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme="dark"] .nutrition-overview,
html[data-theme="dark"] .meal-selector,
html[data-theme="dark"] .meal-group,
html[data-theme="dark"] .nutrition-food-swipe-content,
html[data-theme="dark"] .nutrition-section { background: var(--surface); }

/* My page: grouped account, health and order modules. */
.status-view.active {
  display: grid;
  gap: 18px;
  max-width: 900px;
}
.status-heading { margin: 0 4px 2px; }
.status-heading h1 { margin: 0; }
.account-panel,
.me-module {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 10px 32px rgba(31, 35, 33, .06);
}
.account-panel { padding: 22px; }
.account-panel > div { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; }
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--color-ice);
  color: var(--color-link-blue);
}
.account-avatar .iconify { width: 28px; height: 28px; }
.account-panel h2 { margin-bottom: 5px; font-size: 19px; }
.account-panel p { font-size: 12px; line-height: 1.5; }
.account-panel button { min-height: 38px; padding: 0 15px; }
.account-actions { display: flex; align-items: center; gap: 8px; }
.account-actions #userLogout { border-color: var(--line); color: var(--muted); }
.me-module { padding: 22px; }
.me-module-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.me-module-heading > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--color-ice);
  color: var(--color-link-blue);
}
.me-module-heading .iconify { width: 20px; height: 20px; }
.me-module-heading h2 { margin: 0 0 3px; font-size: 18px; }
.me-module-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.me-setting-list { margin: 14px -22px -22px; border-top: 1px solid var(--line); }
.me-setting-list .health-plan-entry,
.me-setting-list .apple-health-entry {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 17px 22px;
}
.me-setting-list .apple-health-entry { border-top: 1px solid var(--line); }
.health-plan-icon,
.apple-health-icon { width: 46px; height: 46px; border-radius: 15px; }
.health-plan-icon { background: #eaf4ee; color: #2d7b50; }
.apple-health-icon { background: #f2edf7; color: #7f56a5; }
.me-setting-list .health-plan-entry h2,
.me-setting-list .apple-health-entry h2 { font-size: 16px; }
.me-setting-list .health-plan-entry p,
.me-setting-list .apple-health-entry p { line-height: 1.45; }
.me-setting-list .health-plan-entry button,
.me-setting-list .apple-health-entry button {
  min-height: 36px;
  border: 0;
  background: var(--paper);
  padding: 0 11px;
}
.me-order-module .me-module-heading { margin-bottom: 14px; }
.me-order-module .order-tracker,
.me-order-module .status-empty {
  margin: 0;
  border: 0;
  border-radius: 16px;
}
.me-order-module .order-tracker { background: var(--paper); padding: 18px; }
.me-order-module .status-empty { background: transparent; padding: 32px 20px 26px; }
.me-order-module .status-empty > span {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}
.me-order-module .status-empty > span .iconify { width: 23px; height: 23px; }
.me-order-module .status-empty h2 { margin-top: 14px; font-size: 19px; }
.me-order-module .status-empty button { margin-top: 18px; }
.me-discovery { margin-top: 2px; }
.me-discovery > .me-module-heading { margin: 0 4px 12px; }
.me-discovery .weekly-carousel {
  height: clamp(190px, 22vw, 240px);
  margin: 0;
  border-radius: 22px;
}

html[data-theme="dark"] .account-panel,
html[data-theme="dark"] .me-module { box-shadow: none; }
html[data-theme="dark"] .health-plan-icon { background: #173326; color: #79d69f; }
html[data-theme="dark"] .apple-health-icon { background: #30243c; color: #c8a9e8; }

@media (max-width: 600px) {
  .status-view { gap: 14px; padding-top: 18px; }
  .status-heading { margin: 0 2px; }
  .status-heading > p:last-child { font-size: 12px; }
  .account-panel,
  .me-module { border-radius: 20px; }
  .account-panel { padding: 18px; }
  .account-panel > div { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
  .account-avatar { width: 48px; height: 48px; border-radius: 15px; }
  .account-panel h2 { font-size: 17px; }
  .account-panel p { display: -webkit-box; overflow: hidden; font-size: 10px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .account-panel button { min-height: 34px; padding: 0 11px; font-size: 10px; white-space: nowrap; }
  .account-actions { align-items: stretch; flex-direction: column; gap: 5px; }
  .account-actions button { min-height: 30px; }
  .me-module { padding: 18px; }
  .me-module-heading > span { width: 36px; height: 36px; border-radius: 12px; }
  .me-module-heading h2 { font-size: 17px; }
  .me-module-heading p { font-size: 10px; }
  .me-setting-list { margin: 13px -18px -18px; }
  .me-setting-list .health-plan-entry,
  .me-setting-list .apple-health-entry { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; padding: 15px 18px; }
  .health-plan-icon,
  .apple-health-icon { width: 42px; height: 42px; border-radius: 14px; }
  .me-setting-list .health-plan-entry h2,
  .me-setting-list .apple-health-entry h2 { font-size: 14px; }
  .me-setting-list .health-plan-entry p,
  .me-setting-list .apple-health-entry p { display: -webkit-box; overflow: hidden; font-size: 10px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .me-setting-list .health-plan-entry button,
  .me-setting-list .apple-health-entry button { min-width: 34px; padding: 0 8px; }
  .me-setting-list .health-plan-entry button > span:first-child,
  .me-setting-list .apple-health-entry button > span:first-child { display: none; }
  .me-setting-list .health-plan-entry button .iconify,
  .me-setting-list .apple-health-entry button .iconify { display: block; }
  .me-order-module .status-empty { padding: 26px 14px 22px; }
  .me-order-module .status-empty h2 { font-size: 18px; }
  .me-order-module .status-empty p { max-width: 250px; font-size: 11px; line-height: 1.55; }
  .me-discovery .weekly-carousel { height: 168px; border-radius: 20px; }
}

/* Mobile app shell: keep navigation and page chrome stable while content scrolls. */
@media (max-width: 600px) {
  body[data-role="customer"] { width: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  body[data-role="customer"] .topbar { position: relative; top: auto; flex: 0 0 52px; }
  body[data-role="customer"] main { height: calc(100dvh - 52px); min-height: 0; overflow: hidden; }
  body[data-role="customer"] .view.active { height: 100%; min-height: 0; overflow-x: hidden; overscroll-behavior: contain; }
  body[data-role="customer"] #customerView.active {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  body[data-role="customer"] #customerView .menu-catalog { min-height: 0; overflow: hidden; }
  body[data-role="customer"] #customerView .category-tabs {
    position: relative;
    top: auto;
    align-self: stretch;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body[data-role="customer"] #customerView .dish-grid {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body[data-role="customer"] #nutritionView.active,
  body[data-role="customer"] #meView.active,
  body[data-role="customer"] #cartView.active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}