:root {
  color-scheme: light;
  --ink: #241d19;
  --muted: #766b62;
  --paper: #f7f1e7;
  --panel: #fffaf2;
  --line: #dfd3c2;
  --brand: #8f2f20;
  --brand-dark: #642017;
  --gold: #c48d35;
  --success: #2e7456;
  --warning: #a96016;
  --danger: #ac302a;
  --shadow: 0 18px 50px rgba(70, 42, 24, .11);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 10% 0%, #fff8e9 0, transparent 34rem), var(--paper); min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: white; border-radius: 10px; }
.skip-link:focus { top: 1rem; }

.brand-mark { display: grid; place-items: center; width: 2.8rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #ffe1a4; font: 700 1.35rem serif; }
.brand-mark img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.connection-state { padding: .48rem .7rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: transparent; color: #efe4dc; font-size: .76rem; }
.connection-state::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--warning); }
.connection-state.online::before { background: #6ed39e; }
.connection-state.offline::before { background: #ff716c; }

.product-web-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.8rem; padding: .75rem clamp(1rem, 3vw, 2.5rem); color: #fffaf2; background: #50160f; box-shadow: 0 8px 24px rgba(55, 17, 10, .2); }
.frontdesk-web-shell { background: #3f211d; }
.admin-web-shell > .product-web-header { background: #25211f; }
.owner-combination-shell { background: linear-gradient(105deg, #40251c, #6b321f); }
.web-brand, .web-header-actions { display: flex; align-items: center; gap: .8rem; }
.web-brand strong { font-family: Georgia, "Songti SC", serif; font-size: 1.1rem; letter-spacing: .04em; }
.web-brand p { margin: .18rem 0 0; color: #d9c7bd; font-size: .75rem; }
.shell-account-button { min-height: 2.6rem; padding: .5rem .85rem; border: 1px solid rgba(255,255,255,.36); border-radius: 10px; color: white; background: rgba(255,255,255,.08); font-weight: 800; }

.customer-miniapp-shell { width: 100%; max-width: 480px; margin: 0 auto; }
.customer-miniapp-header { position: sticky; top: 0; z-index: 30; padding: max(.55rem, env(safe-area-inset-top)) .9rem .65rem; border-bottom: 1px solid #ebe4da; color: var(--ink); background: rgba(255,255,255,.96); box-shadow: 0 5px 20px rgba(48,35,26,.07); backdrop-filter: blur(18px); }
.customer-miniapp-titlebar { display: grid; grid-template-columns: 2.45rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 3.2rem; }
.customer-miniapp-header .brand-mark { width: 2.35rem; border-color: color-mix(in srgb, var(--brand) 35%, #e7ddd0); color: var(--brand); background: #fff8ef; font-size: 1rem; }
.customer-title-copy { display: grid; justify-items: center; line-height: 1.15; }
.customer-title-copy strong { font: 800 1.05rem/1.2 Georgia, "Songti SC", serif; }
.customer-title-copy small { max-width: 15rem; margin-top: .2rem; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-miniapp-controls { display: flex; align-items: center; gap: .45rem; }
.customer-miniapp-controls .connection-state { width: .7rem; height: .7rem; padding: 0; overflow: hidden; border: 0; font-size: 0; }
.customer-miniapp-controls .connection-state::before { width: .55rem; height: .55rem; margin: 0; }
.miniapp-menu-button { display: flex; align-items: center; gap: .5rem; min-width: 4.1rem; min-height: 2.2rem; padding: .35rem .55rem; border: 1px solid #e5ddd3; border-radius: 999px; color: var(--ink); background: white; }
.miniapp-menu-button span { letter-spacing: .08em; }
.miniapp-menu-button i { width: .8rem; height: .8rem; border: 2px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2px white; background: currentColor; }

.account-dialog { width: min(27rem, calc(100% - 2rem)); max-height: min(88vh, 48rem); padding: 0; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--panel); box-shadow: 0 28px 90px rgba(42,22,12,.3); }
.account-dialog::backdrop { background: rgba(38,24,17,.5); backdrop-filter: blur(3px); }
.account-dialog > section > header { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem .9rem; border-bottom: 1px solid var(--line); }
.account-dialog h2, .account-dialog p { margin: 0; }
.account-dialog p { margin-top: .35rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.access-form { display: grid; gap: .65rem; padding: 0 1rem 1rem; }
.access-form label { display: grid; gap: .25rem; font-size: .78rem; color: var(--muted); }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .78rem; background: white; color: var(--ink); }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(196,141,53,.38); outline-offset: 2px; }
.access-form button, .primary-button { border: 0; border-radius: 11px; padding: .72rem 1rem; background: var(--brand); color: white; font-weight: 700; }
.access-form small { color: var(--muted); }
.access-form hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
.authenticated-account { display: grid; gap: .45rem; padding: 0 1rem 1rem; }
.authenticated-account[hidden] { display: none; }
.authenticated-account small { color: var(--muted); }

.admin-sidebar { position: fixed; top: 4.8rem; left: 0; bottom: 0; z-index: 18; width: 15rem; padding: 1.15rem 1rem; overflow: auto; border-right: 1px solid #dfd7cb; background: #fffdf8; box-shadow: 8px 0 24px rgba(62,43,31,.05); }
.admin-sidebar > strong { display: block; margin: 0 .55rem .8rem; font: 800 1.05rem Georgia, "Songti SC", serif; }
.admin-sidebar nav { display: grid; gap: .25rem; }
.admin-sidebar a { padding: .62rem .65rem; border-radius: 9px; color: #5f554e; font-size: .78rem; line-height: 1.35; text-decoration: none; }
.admin-sidebar a:hover, .admin-sidebar a:focus-visible { color: var(--brand); background: #f4e8dc; }
body[data-surface="admin"] main { width: calc(100% - 15rem); margin-left: 15rem; }
body[data-surface="admin"] main [id$="-panel"] { scroll-margin-top: 5.5rem; }

body[data-surface="customer"] { padding-bottom: calc(4.65rem + env(safe-area-inset-bottom)); background-color: #ece8e1; }
body[data-surface="customer"] main { width: 100%; max-width: 480px; min-height: calc(100vh - 4.4rem); margin: 0 auto; padding: .8rem .75rem 1.5rem; background: #faf8f4; box-shadow: 0 0 45px rgba(55,39,27,.12); }
body[data-surface="frontdesk"] main { width: min(1800px, 100%); }
body[data-surface="owner"] main { width: min(1240px, 100%); padding-bottom: 5rem; }

main { width: min(1500px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2.5rem); }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.2rem; }
.page-heading h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1; }
.page-heading p { margin: .5rem 0 0; color: var(--muted); }
.eyebrow { display: block; margin-bottom: .4rem; color: var(--brand); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.panel { border: 1px solid rgba(121,92,63,.18); border-radius: var(--radius); background: rgba(255,250,242,.91); box-shadow: var(--shadow); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.panel-header h2, .panel-header h3 { margin: 0; font-size: 1rem; }
.panel-body { padding: 1rem 1.1rem; }
.status-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem; border-radius: 999px; background: #eee6da; color: #594d44; font-size: .72rem; font-weight: 700; }
.status-pill.success { background: #dcefe4; color: #1f6044; }
.status-pill.warning { background: #f6e6c7; color: #82500f; }
.status-pill.danger { background: #f8deda; color: #902923; }
.danger-text { color: #902923; }
.muted { color: var(--muted); }
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: .4rem; color: var(--ink); }
.error-state { padding: 1rem; border: 1px solid #e8aaa4; border-radius: 12px; background: #fff0ed; color: #76231e; }

.customer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.2rem; }
.customer-bottom-tabs { position: fixed; left: 50%; right: auto; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(480px, 100%); padding: .38rem .35rem calc(.38rem + env(safe-area-inset-bottom)); border-top: 1px solid #e4ddd3; background: rgba(255,255,255,.97); box-shadow: 0 -8px 26px rgba(54,37,25,.08); transform: translateX(-50%); backdrop-filter: blur(18px); }
.customer-bottom-tabs button { display: grid; justify-items: center; gap: .12rem; min-height: 3.45rem; padding: .28rem .2rem; border: 0; border-radius: 12px; color: #6f665f; background: transparent; }
.customer-bottom-tabs button > span { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 1px solid currentColor; border-radius: 50%; font: 800 .7rem/1 Georgia, "Songti SC", serif; }
.customer-bottom-tabs button b { font-size: .7rem; }
.customer-bottom-tabs button.active { color: var(--brand); }
.customer-bottom-tabs button.active > span { color: white; background: var(--brand); box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 24%, transparent); }
body[data-surface="customer"] .customer-layout { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
body[data-surface="customer"] .cart-panel { position: static; }
body[data-surface="customer"] .community-grid,
body[data-surface="customer"] .service-grid,
body[data-surface="customer"] .community-compose-grid,
body[data-surface="customer"] .my-grid,
body[data-surface="customer"] .privacy-grid,
body[data-surface="customer"] .form-grid { grid-template-columns: minmax(0, 1fr); }
body[data-surface="customer"] .my-orders,
body[data-surface="customer"] .my-privacy { grid-column: auto; }
body[data-surface="customer"] .top-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-surface="customer"] .customer-manager-tabs { position: sticky; top: 4.55rem; z-index: 12; padding: .3rem 0; background: #faf8f4; }
body[data-surface="customer"] .ai-hero { min-height: 0; padding: 1.15rem; border-radius: 16px; }
body[data-surface="customer"] .ai-hero h1 { font-size: clamp(1.65rem, 8vw, 2.25rem); }
body[data-surface="customer"] .ai-hero::after { right: -3%; font-size: 10rem; }
body[data-surface="customer"] .storefront-home-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.customer-manager-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.customer-manager-tabs button { border: 1px solid var(--line); border-radius: 999px; padding: .52rem .85rem; color: var(--muted); background: rgba(255,250,242,.92); font-weight: 800; }
.customer-manager-tabs button.active { border-color: var(--brand); color: white; background: var(--brand); }
.ai-hero { position: relative; overflow: hidden; min-height: 15rem; padding: clamp(1.3rem, 4vw, 2.5rem); color: white; background: linear-gradient(130deg, #4b1712, #8f2f20 58%, #b77029); }
.ai-hero::after { content: "店"; position: absolute; right: 4%; bottom: -20%; color: rgba(255,255,255,.08); font: 700 14rem/1 serif; }
.ai-hero:not([open]) { min-height: 0; }
.ai-panel-summary { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; color: #fff1d1; cursor: pointer; font-weight: 900; }
.ai-panel-summary small { color: #ead7cb; font-size: .72rem; font-weight: 600; }
.ai-panel-body { position: relative; z-index: 1; margin-top: 1.15rem; }
.ai-hero h1 { max-width: 18ch; margin: 0 0 .8rem; font: 700 clamp(1.8rem, 4vw, 3.5rem)/1.08 Georgia, "Songti SC", serif; }
.ai-hero p { max-width: 42rem; color: #eedbd0; }
.storefront-announcement, .storefront-business-notice { margin: .45rem 0; font-size: .82rem; }
.ai-hero .manual-safe { display: inline-flex; margin-top: 1rem; padding: .5rem .7rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff1d1; font-size: .78rem; }
.storefront-home-entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin-top: 1rem; }
.storefront-home-entries button { display: grid; grid-template-columns: auto 1fr; gap: .15rem .5rem; align-items: center; padding: .7rem; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; color: white; background: rgba(255,255,255,.1); text-align: left; }
.storefront-home-entries button > span { grid-row: 1 / 3; font-size: 1.2rem; }
.storefront-home-entries button small { color: #ead7cb; }
.storefront-home-entries button:disabled { opacity: .55; }
.storefront-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 24rem); gap: .75rem; margin-top: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.storefront-carousel article { display: grid; grid-template-columns: 6rem 1fr; min-height: 7rem; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,250,242,.96); scroll-snap-align: start; }
.storefront-carousel article.no-image { grid-template-columns: 1fr; }
.storefront-carousel img { width: 100%; height: 100%; object-fit: cover; }
.storefront-carousel article > div { display: grid; align-content: center; gap: .35rem; padding: .8rem; }
.storefront-carousel small { color: var(--muted); }
.quick-questions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.quick-questions button { border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .48rem .7rem; background: rgba(255,255,255,.1); color: white; }
.ai-tool-result { position: relative; z-index: 1; display: grid; gap: .45rem; margin-top: 1rem; padding: .85rem; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: rgba(44,15,11,.45); }
.ai-tool-result[hidden] { display: none; }
.ai-tool-result p, .ai-tool-result small { margin: 0; color: #f0ddd1; }
.ai-result-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.ai-result-list > span { display: grid; gap: .15rem; padding: .55rem; border-radius: 9px; background: rgba(255,255,255,.1); }
.ai-result-list small { font-size: .68rem; }
.menu-shell { display: grid; grid-template-columns: 9rem minmax(0, 1fr); min-height: 28rem; }
.category-list { padding: .8rem; border-right: 1px solid var(--line); }
.category-list button { width: 100%; margin-bottom: .35rem; padding: .7rem .55rem; border: 0; border-radius: 10px; background: transparent; text-align: left; color: var(--muted); }
.category-list button.active { color: var(--brand); background: #f3e2d2; font-weight: 800; }
.dish-list { display: grid; gap: .8rem; padding: 1rem; }
.dish-card { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: white; }
.dish-card h3 { margin: 0 0 .3rem; }
.dish-card p { margin: 0 0 .6rem; color: var(--muted); font-size: .86rem; }
.price { color: var(--brand); font-weight: 900; }
.dish-card button, .secondary-button { border: 1px solid var(--brand); border-radius: 10px; padding: .55rem .75rem; background: transparent; color: var(--brand); font-weight: 800; }
.cart-panel { position: sticky; top: 6rem; align-self: start; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .65rem 0; border-bottom: 1px dashed var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-total { display: flex; justify-content: space-between; padding: 1rem 0; font-size: 1.05rem; }
.cart-actions { display: grid; gap: .6rem; }
.visit-form { display: grid; grid-template-columns: 1fr 6rem; gap: .5rem; }
.table-binding { display: grid; place-items: center; min-height: 2.7rem; padding: .55rem; border: 1px dashed var(--warning); border-radius: 10px; color: var(--warning); background: #fff8e8; font-size: .78rem; font-weight: 800; }
.table-binding.bound { border-style: solid; border-color: #8abda4; color: var(--success); background: #eff9f3; }
.inline-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.compact-button { width: auto; min-height: 2.25rem; padding: .45rem .7rem; font-size: .76rem; }
.compact-button:disabled { cursor: wait; opacity: .55; }

.workbench-grid { display: grid; grid-template-columns: minmax(16rem, .9fr) minmax(22rem, 1.25fr) minmax(18rem, 1fr); gap: 1rem; align-items: start; }
.frontdesk-secondary-operations { display: grid; gap: 1rem; margin-top: 1rem; }
.frontdesk-secondary-operations > .shift-panel, .frontdesk-secondary-operations > .availability-panel { margin-bottom: 0; }
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .65rem; }
.table-card, .queue-card, .task-card { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; background: white; }
.table-card strong, .queue-card strong { display: block; margin-bottom: .3rem; }
.table-card.occupied { border-left: 4px solid var(--brand); }
.queue-list, .task-list { display: grid; gap: .65rem; }
.queue-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.order-detail > summary { margin-top: .7rem; color: var(--brand); cursor: pointer; font-weight: 800; }
.order-detail[open] { position: fixed; top: 4.8rem; right: 0; bottom: 0; z-index: 50; width: min(34rem, 100%); padding: 1rem; overflow: auto; border-left: 1px solid var(--line); color: var(--ink); background: #fffdf8; box-shadow: -22px 0 60px rgba(45,28,18,.24); }
.order-detail[open] > summary { position: sticky; top: -1rem; z-index: 2; margin: -1rem -1rem 1rem; padding: 1.1rem; border-bottom: 1px solid var(--line); background: #fffdf8; }
.order-detail[open] > summary::after { content: "关闭"; float: right; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; }
.top-status-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: .65rem; margin-bottom: 1rem; }
.top-status-strip > div { padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,250,242,.9); }
.top-status-strip small { display: block; color: var(--muted); }
.shift-panel { margin-bottom: 1rem; }
.shift-panel .panel-header > div small { display: block; max-width: 52rem; margin-top: .25rem; color: var(--muted); }
.shift-grid { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(22rem, 1.1fr); gap: .8rem; align-items: start; }
.handover-evidence { margin-top: .75rem; padding-top: .65rem; border-top: 1px dashed var(--line); }
.handover-evidence > summary { cursor: pointer; color: var(--brand); font-size: .78rem; font-weight: 800; }
.handover-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: .7rem 0; }
.handover-metrics span { padding: .45rem; border-radius: 8px; background: #f8f1e8; font-size: .72rem; }
.voucher-draft { padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: #fffaf3; }
.voucher-draft h3 { margin-top: 0; }
.availability-panel { margin-bottom: 1rem; }
.availability-panel .panel-header > div small { display: block; margin-top: .25rem; color: var(--muted); }
.availability-panel .panel-body > .task-list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.availability-panel .task-card { display: grid; align-content: start; gap: .4rem; }
.availability-panel .task-card small { color: var(--muted); }
.availability-picker { margin-top: .8rem; padding-top: .75rem; border-top: 1px dashed var(--line); }
.availability-picker > summary { cursor: pointer; color: var(--brand); font-weight: 800; }
.availability-picker > .task-list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: .75rem; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.module-card { min-height: 11rem; padding: 1.1rem; }
.module-card h2 { margin: .3rem 0 .6rem; font-size: 1.05rem; }
.module-card p { color: var(--muted); font-size: .86rem; line-height: 1.6; }
.module-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: #f1dfcd; color: var(--brand); font-weight: 900; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.admin-wide { grid-column: 1 / -1; }
.admin-status-strip { margin-bottom: 1rem; }
.release-summary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; }
.release-summary p { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: .65rem; margin-top: 1rem; }
.check-item { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .45rem; min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; }
.check-item .status-pill { justify-self: start; }
.check-item strong, .check-item small { min-width: 0; overflow-wrap: anywhere; }
.check-item small { color: var(--muted); line-height: 1.45; }
.master-data-admin { display: grid; gap: 1rem; }
.master-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.master-summary .task-card, .master-lists .task-card { display: grid; align-content: start; gap: .45rem; }
.master-summary small, .master-lists small { color: var(--muted); }
.master-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.master-lists > div { display: grid; align-content: start; gap: .6rem; }
.master-lists h3 { margin: 0; }
.master-lists .nested-master { margin-left: 1rem; border-left: 3px solid #d9b981; }
.master-create { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; }
.master-create > summary { color: var(--brand); cursor: pointer; font-weight: 900; }
.master-create .community-compose-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.menu-admin-grid { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(28rem, 1.2fr); gap: 1rem; align-items: start; }
.menu-admin-grid .stack-form { position: sticky; top: 6rem; }
.menu-admin-grid textarea[name="document"] { min-height: 32rem; font: .75rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; }
.ota-admin-grid { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(28rem, 1.2fr); gap: 1rem; align-items: start; }
.ota-admin-forms { display: grid; gap: .8rem; }
.ota-admin-forms textarea { min-height: 8rem; font: .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.knowledge-admin { display: grid; gap: 1rem; }
.capability-warning { padding: 1rem; border: 1px solid #dfb778; border-radius: 12px; background: #fff5df; }
.capability-warning p { margin: .35rem 0 0; color: #6f521f; }
.stack-form { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
.stack-form h3, .two-column-list h3 { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.stack-form label, .period-form label { display: grid; gap: .3rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.stack-form textarea { min-height: 5rem; resize: vertical; }
.two-column-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.two-column-list > div { display: grid; align-content: start; gap: .6rem; }
.two-column-list code { display: block; margin-top: .45rem; overflow-wrap: anywhere; color: var(--muted); font-size: .68rem; }
.diagnostics-panel { margin-top: 1rem; padding: 1rem; }
.diagnostics-panel > summary { cursor: pointer; font-weight: 800; }
.diagnostics-panel .module-grid { margin-top: 1rem; }
.audit-timeline { display: grid; gap: .55rem; }
.audit-timeline article { display: grid; grid-template-columns: 10rem 1fr 1fr; gap: .5rem; padding: .7rem; border-bottom: 1px solid var(--line); }
.audit-timeline time, .audit-timeline small { color: var(--muted); font-size: .72rem; }
.audit-timeline small { grid-column: 2 / -1; }

.admin-operation-grid { display: grid; grid-template-columns: minmax(20rem, .9fr) minmax(28rem, 1.1fr); gap: 1rem; align-items: start; }
.admin-operation-grid > .task-list { max-height: 46rem; overflow: auto; padding-right: .2rem; }
.stack-form-group { display: grid; gap: .8rem; }
.compact-admin-form { margin-top: .8rem; }
.confirm-row { display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: .55rem !important; line-height: 1.45; }
.confirm-row input { width: 1.05rem; height: 1.05rem; margin-top: .12rem; accent-color: var(--brand); }
.json-preview { margin-top: .8rem; }
.json-readonly { max-height: 22rem; margin: .7rem 0 0; padding: .75rem; overflow: auto; border: 1px solid var(--line); border-radius: 10px; color: #4e443d; background: #f8f3eb; font: .72rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.storefront-preview-card { display: grid; gap: .55rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--preview-theme, var(--brand)) 55%, var(--line)); border-left: .45rem solid var(--preview-theme, var(--brand)); border-radius: 14px; background: white; }
.storefront-preview-card h3, .storefront-preview-card p { margin: 0; }
.storefront-preview-card p, .storefront-preview-card small { color: var(--muted); }
.truth-note { margin-top: .65rem; padding: .65rem .75rem; border: 1px solid #a9cdb9; border-radius: 10px; color: #255f46; background: #edf8f1; font-size: .75rem; line-height: 1.55; }
.truth-note.warning { border-color: #dfbd82; color: #76500f; background: #fff6e4; }
.truth-note.danger { border-color: #e6aca6; color: #852923; background: #fff0ee; }
.truth-note strong { display: block; margin-bottom: .15rem; }
.community-governance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.community-governance-grid > div { min-width: 0; }
.community-governance-grid > div > h3 { margin: 0 0 .65rem; }
.community-governance-grid .task-list { max-height: 46rem; overflow: auto; }
.feedback-admin-card { display: grid; gap: .35rem; }
.feedback-admin-card p { margin: .25rem 0; line-height: 1.55; }
.feedback-admin-card small { color: var(--muted); }
#storefront-config-form textarea[name="configuration"], #capacity-profile-form textarea[name="evidence"], #print-device-form textarea, #print-observation-form textarea { min-height: 12rem; font: .74rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
#print-observation-form[hidden] { display: none; }

.period-form { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; padding: 1rem; margin-bottom: 1rem; }
.period-form input { min-width: 13rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.metric-card { padding: 1.1rem; }
.metric-card h2 { margin: .25rem 0; font: 800 clamp(1.5rem, 3vw, 2.2rem)/1.1 Georgia, "Songti SC", serif; }
.metric-card p { min-height: 2.8rem; color: var(--muted); font-size: .78rem; }
.truth-panel { margin-top: 1rem; }
.truth-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.truth-grid > div { padding: .75rem; border-radius: 10px; background: #f8f1e8; }
.truth-grid small { display: block; margin-bottom: .25rem; color: var(--muted); }
.owner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.owner-tool-lab { margin-top: 1rem; }
.owner-tool-lab .panel-header > div small { display: block; margin-top: .25rem; color: var(--muted); }
.owner-tool-result { margin-top: .85rem; }
.owner-ai-truth { margin-top: 1rem; }
.owner-delivery-truth { display: grid; grid-template-columns: minmax(18rem, .75fr) minmax(30rem, 1.25fr); gap: 1rem; margin-bottom: 1rem; padding: 1.15rem; border: 1px solid #dfcda8; border-radius: 18px; background: linear-gradient(130deg, #fffdf8, #f5ead8); box-shadow: var(--shadow); }
.owner-delivery-truth h1, .owner-delivery-truth p { margin: 0; }
.owner-delivery-truth h1 { font: 800 clamp(1.35rem, 3vw, 2rem)/1.15 Georgia, "Songti SC", serif; }
.owner-delivery-truth p { margin-top: .55rem; color: var(--muted); line-height: 1.55; }
.owner-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.owner-channel-grid article { display: flex; align-items: center; justify-content: space-between; gap: .55rem; min-width: 0; padding: .7rem; border: 1px solid #eadfce; border-radius: 12px; background: rgba(255,255,255,.8); }
.owner-channel-grid article > div { min-width: 0; }
.owner-channel-grid strong, .owner-channel-grid small { display: block; }
.owner-channel-grid small { margin-top: .18rem; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.owner-channel-grid .status-pill { flex: 0 0 auto; max-width: 10.5rem; text-align: center; }
.owner-bottom-tabs { position: sticky; top: 5.2rem; z-index: 16; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-bottom: 1.25rem; padding: .35rem; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,250,242,.95); box-shadow: 0 8px 25px rgba(58,38,25,.08); backdrop-filter: blur(14px); }
.owner-bottom-tabs button { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.8rem; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-weight: 800; }
.owner-bottom-tabs button > span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid currentColor; border-radius: 50%; font-size: .68rem; }
.owner-bottom-tabs button.active { color: white; background: var(--brand); }
.owner-my-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.owner-report-panel { margin-top: 1rem; }
.discovery-sections { display: grid; gap: 1rem; }
.discovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }
.discovery-card { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: white; }
.discovery-card h3 { margin: .7rem 0 .35rem; }
.discovery-card p { color: var(--muted); line-height: 1.55; }
.discovery-card details { margin-top: .75rem; font-size: .75rem; color: var(--muted); }
.discovery-card summary { cursor: pointer; color: var(--brand); font-weight: 800; }
.community-grid, .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.community-compose { margin-bottom: 1rem; padding: 1rem; }
.community-compose > summary { cursor: pointer; color: var(--brand); font-weight: 900; }
.community-compose-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.my-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.my-orders, .my-privacy { grid-column: 1 / -1; }
#customer-membership { border-left: .4rem solid var(--membership-card-accent, var(--brand)); color: var(--membership-card-text, var(--ink)); background-color: var(--membership-card-bg, rgba(255,250,242,.91)); background-image: var(--membership-card-image, none); background-size: cover; }
.my-status-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.privacy-grid { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(22rem, 1.2fr); gap: 1rem; align-items: start; }
.checkbox-label { display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: .55rem !important; line-height: 1.5; }
.checkbox-label input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--brand); }
.feed-sort { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .72rem; }
.feed-sort select { width: auto; min-height: 2.4rem; padding: .35rem .5rem; }
.social-feed { display: grid; gap: .8rem; }
.social-card { display: grid; gap: .65rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: white; }
.social-card h3, .social-card p { margin: 0; }
.social-card p { line-height: 1.65; }
.social-author { display: flex; gap: .55rem; align-items: center; }
.social-author small { display: block; color: var(--muted); }
.avatar { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #ead8c4; color: var(--brand); font-weight: 900; }
.avatar.verified { color: #1f6044; background: #dcefe4; }
.rating { color: #d48212; letter-spacing: .12em; }
.service-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.service-type-button { display: grid; gap: .25rem; min-height: 5.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: white; text-align: left; color: var(--ink); }
.service-type-button:hover { border-color: var(--brand); background: #fff8ed; }
.service-type-button small { color: var(--muted); }
.service-note { display: grid; gap: .35rem; margin-top: 1rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.service-note textarea { min-height: 6rem; resize: vertical; }

.menu-dialog { width: min(42rem, 100%); max-height: min(88vh, 56rem); margin: auto auto 0; padding: 0; border: 1px solid var(--line); border-radius: 22px 22px 0 0; color: var(--ink); background: var(--panel); box-shadow: 0 -20px 80px rgba(42,22,12,.28); }
.menu-dialog::backdrop { background: rgba(38,24,17,.54); backdrop-filter: blur(3px); }
.action-dialog { width: min(34rem, calc(100% - 2rem)); margin: auto; border-radius: 20px; }
.action-dialog-form { display: grid; max-height: min(88vh, 52rem); }
.action-dialog-form > header { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.25rem 1rem; border-bottom: 1px solid var(--line); }
.action-dialog-form h2, .action-dialog-form p { margin: 0; }
.action-dialog-form p { margin-top: .45rem; color: var(--muted); line-height: 1.55; white-space: pre-line; }
.action-dialog-fields { display: grid; gap: .85rem; padding: 1rem 1.25rem; overflow: auto; }
.action-dialog-fields label { display: grid; gap: .4rem; color: var(--ink); font-weight: 800; }
.action-dialog-fields label small { color: var(--muted); font-weight: 500; line-height: 1.45; }
.action-dialog-fields textarea { min-height: 6.5rem; resize: vertical; }
.action-dialog-form > footer { display: flex; justify-content: flex-end; gap: .65rem; padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.danger-button { background: var(--danger); }
.configurator-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(88vh, 56rem); }
.configurator-form > header { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.25rem 1rem; border-bottom: 1px solid var(--line); }
.configurator-form h2, .configurator-form p { margin: 0; }
.configurator-form p { margin-top: .35rem; color: var(--muted); }
.dialog-close { align-self: start; min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: 50%; background: #eee4d7; color: var(--ink); font-size: 1.45rem; }
.configurator-scroll { display: grid; gap: .85rem; padding: 1rem 1.25rem; overflow: auto; }
.frontdesk-add-menu .configurator-scroll { align-content: start; }
.frontdesk-menu-category { display: grid; gap: .65rem; }
.frontdesk-menu-category + .frontdesk-menu-category { padding-top: .85rem; border-top: 1px solid var(--line); }
.frontdesk-menu-category h3 { margin: 0; }
.frontdesk-menu-category .task-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .45rem .8rem; }
.frontdesk-menu-category .task-card small { grid-column: 1; color: var(--muted); }
.frontdesk-menu-category .task-card button { grid-column: 2; grid-row: 1 / span 2; }
.option-group { display: grid; gap: .5rem; margin: 0; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: white; }
.option-group legend { padding: 0 .35rem; font-weight: 900; }
.option-group legend span { color: var(--muted); font-size: .7rem; font-weight: 600; }
.option-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 3rem; padding: .5rem; border-radius: 10px; background: #fbf7f0; }
.option-row > label { display: flex; flex: 1; align-items: center; gap: .65rem; cursor: pointer; }
.option-row input[type="radio"], .option-row input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--brand); }
.option-row span { display: grid; gap: .1rem; }
.option-row small { color: var(--muted); }
.option-quantity { width: 4.4rem; min-height: 2.75rem; padding: .45rem; text-align: center; }
.configurator-form > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
.configurator-form > footer strong { color: var(--brand); font-size: 1.05rem; }

.skeleton-page { display: grid; gap: 1rem; }
.skeleton { min-height: 10rem; border-radius: var(--radius); background: linear-gradient(100deg, #eadfce 25%, #f8f0e5 40%, #eadfce 58%); background-size: 300% 100%; animation: shimmer 1.5s infinite; }
.hero-skeleton { min-height: 18rem; }
.skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@keyframes shimmer { to { background-position-x: -150%; } }
.toast-region { position: fixed; top: 5.5rem; right: 1rem; z-index: 60; display: grid; gap: .5rem; width: min(24rem, calc(100vw - 2rem)); }
.toast { padding: .85rem 1rem; border-radius: 12px; color: white; background: #3c332d; box-shadow: var(--shadow); animation: enter .2s ease-out; }
.toast.error { background: var(--danger); }
@keyframes enter { from { opacity: 0; transform: translateY(-.5rem); } }

@media (max-width: 1050px) {
  .admin-sidebar { position: static; width: 100%; padding: .65rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
  .admin-sidebar > strong { display: none; }
  .admin-sidebar nav { display: flex; gap: .3rem; overflow-x: auto; }
  .admin-sidebar a { flex: 0 0 auto; white-space: nowrap; }
  body[data-surface="admin"] main { width: 100%; margin-left: 0; }
  .workbench-grid { grid-template-columns: 1fr 1fr; }
  .workbench-grid > :last-child { grid-column: 1 / -1; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-create .community-compose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-admin-grid, .ota-admin-grid, .admin-operation-grid { grid-template-columns: 1fr; }
  .menu-admin-grid .stack-form { position: static; }
  .privacy-grid, .shift-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .product-web-header { min-height: 4.25rem; padding: .65rem .8rem; }
  .web-brand p { display: none; }
  .web-brand .brand-mark { display: none; }
  .web-header-actions { gap: .35rem; }
  .web-header-actions .connection-state { width: .8rem; height: .8rem; padding: 0; overflow: hidden; border: 0; font-size: 0; }
  .web-header-actions .connection-state::before { margin: 0; }
  main { padding: 1rem; }
  .page-heading { align-items: start; flex-direction: column; }
  .customer-layout, .workbench-grid { grid-template-columns: 1fr; }
  .admin-grid, .owner-grid, .owner-my-grid, .two-column-list, .community-grid, .service-grid, .community-compose-grid, .master-summary, .master-lists, .master-create .community-compose-grid, .my-grid, .community-governance-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-grid > *, .audit-timeline, .audit-timeline article, .audit-timeline article > * { min-width: 0; }
  .admin-wide { grid-column: auto; }
  .my-orders, .my-privacy { grid-column: auto; }
  .cart-panel { position: static; }
  .menu-shell { grid-template-columns: 6.5rem 1fr; }
  .category-list { padding: .5rem; }
  .dish-card { grid-template-columns: 1fr; }
  .top-status-strip { grid-template-columns: repeat(2, 1fr); }
  .handover-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid, .truth-grid, .form-grid { grid-template-columns: 1fr; }
  .audit-timeline article { grid-template-columns: minmax(0, 1fr); }
  .audit-timeline article > * { overflow-wrap: anywhere; word-break: break-word; }
  .audit-timeline small { grid-column: auto; }
  .skeleton-grid { grid-template-columns: 1fr; }
  .menu-dialog { width: 100%; }
  .ai-result-list { grid-template-columns: 1fr; }
  .frontdesk-menu-category .task-card { grid-template-columns: 1fr; }
  .frontdesk-menu-category .task-card button { grid-column: auto; grid-row: auto; }
  .compact-button, .dish-card button, .service-type-button { min-height: 2.75rem; }
  .owner-delivery-truth { grid-template-columns: minmax(0, 1fr); padding: .9rem; }
  .owner-channel-grid { grid-template-columns: minmax(0, 1fr); }
  .owner-bottom-tabs { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 35; margin: 0; padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 0; }
  .owner-bottom-tabs button { display: grid; justify-items: center; gap: .08rem; min-height: 3.25rem; padding: .2rem; font-size: .68rem; }
  .owner-bottom-tabs button > span { width: 1.35rem; height: 1.35rem; }
  body[data-surface="owner"] { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }