:root { color-scheme:light; font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; background:#f2f3f5; color:#171719; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; overflow:hidden; }
button, input { font:inherit; }
button { -webkit-appearance:none; appearance:none; background:#fff; border:1px solid #cfd0d4; border-radius:12px; cursor:pointer; font-weight:700; min-height:48px; padding:10px 15px; }
button,
[role="button"],
.catalog-list li:not([aria-disabled="true"]) { -webkit-tap-highlight-color:transparent; }
button:active:not(:disabled),
.catalog-list li:not([aria-disabled="true"]):active { filter:brightness(.92); }
button:focus-visible { box-shadow:0 0 0 3px rgba(26,63,160,.28); outline:none; }
button.primary { background:#f51b28; border-color:#f51b28; color:#fff; }
button.danger { color:#b42318; }
button:disabled { cursor:wait; opacity:.55; }
.app-shell { display:flex; flex-direction:column; height:calc(100vh - var(--store-nav-height, 0px)); height:calc(100dvh - var(--store-nav-height, 0px)); margin:0 auto; max-width:760px; overflow:hidden; padding:18px 18px max(22px, env(safe-area-inset-bottom)); }
#store-navigation[hidden] { display:none !important; }
.app-header { background:#f2f3f5; flex:none; position:relative; z-index:20; }
/* The parent management shell owns the common root title and native safe viewport. */
html.management-embedded-overview .app-shell { padding-top:16px; }
html.management-embedded-overview .topbar,
html.management-embedded-overview #message:empty { display:none; }
/* Embedded root panels follow the same 10px Group radius as the fixed management UI. */
html.management-embedded-overview .overview-panel { border-radius:10px; }
@supports (corner-shape:squircle) {
  html.management-embedded-overview .overview-panel { corner-shape:squircle; }
}
.topbar { align-items:center; display:flex; justify-content:space-between; margin-bottom:8px; }
.topbar h1 { font-size:26px; margin:3px 0 0; }
.eyebrow { color:#73757c; font-size:13px; }
main { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:max(2px, env(safe-area-inset-bottom)); }
.login-panel, .overview-panel, .editor-panel { background:#fff; border-radius:20px; box-shadow:0 8px 30px rgba(0,0,0,.06); padding:18px; }
.authed #login-panel { display:none; }
.login-panel[hidden], .overview-panel[hidden], .editor-panel[hidden] { display:none; }
.login-panel h2 { margin-top:0; }
.message { font-size:14px; margin:8px 4px; min-height:20px; }
.message.success { color:#087443; }
.message.error { color:#b42318; }

.overview-panel { display:flex; flex-direction:column; min-height:100%; }
.overview-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.overview-heading h2 { flex:1; font-size:18px; margin:0; }
.slot-selector { display:grid; gap:8px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:8px; }
.slot-button { align-items:center; background:#f8f8f9; display:flex; flex-direction:column; gap:8px; min-height:76px; justify-content:center; padding:8px 4px; }
.slot-number { font-size:23px; font-weight:850; line-height:1; }
.slot-button[data-slot-id="store-notice"] .slot-number,
.slot-button[data-slot-id="snacks"] .slot-number,
.slot-button[data-slot-id="promotion"] .slot-number { font-size:16px; }
.slot-edit-label { background:#f51b28; border-radius:999px; color:#fff; font-size:11px; line-height:1; min-width:62px; padding:7px 8px; }

.editor-panel { min-height:100%; }
.editor-heading { align-items:center; display:grid; gap:10px; grid-template-columns:auto minmax(0,1fr); margin-bottom:10px; }
.editor-heading[hidden] { display:none; }
.editor-heading h2 { font-size:18px; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.back-button { min-height:42px; padding:7px 12px; }
.preview-wrap { background:#202124; border-radius:14px; margin-bottom:20px; padding:12px; }
.preview-wrap > .auxiliary-card { aspect-ratio:841.89/595.28; }
label { display:block; font-size:14px; font-weight:650; margin-bottom:15px; position:relative; }
input { background:#f7f7f8; border:1px solid #d9dadd; border-radius:12px; display:block; margin-top:7px; outline:none; padding:13px 14px; width:100%; }
input:focus { border-color:#171719; box-shadow:0 0 0 3px rgba(0,0,0,.08); }
input[aria-invalid="true"] { border-color:#d73535; }
.count { color:#8a8c92; float:right; font-size:12px; font-weight:400; }
.suffix { bottom:14px; position:absolute; right:14px; }
.field-row { display:grid; gap:10px; grid-template-columns:repeat(3,1fr); }
.field-errors { color:#b42318; font-size:13px; min-height:22px; }
.field-errors p { margin:4px 0; }
.aux-line-row { align-items:end; display:grid; gap:8px; grid-template-columns:1fr auto; }
.aux-line-row label { margin-bottom:8px; }
.snack-editor-row { display:grid; gap:10px; grid-template-columns:minmax(0,1fr) 92px; }
.snack-editor-row label { margin-bottom:10px; }
.remove-line { color:#b42318; min-height:46px; }
.add-line { margin:4px 0 16px; width:100%; }
.submit-bar { background:rgba(255,255,255,.96); bottom:0; margin:0 -4px -4px; padding:12px 4px max(4px, env(safe-area-inset-bottom)); position:sticky; }
.submit-bar button { width:100%; }

dialog { border:0; border-radius:18px; max-width:min(92vw,460px); padding:22px; width:100%; }
dialog::backdrop { background:rgba(0,0,0,.5); }
dialog h2 { margin-top:0; }
.dialog-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.completion-actions button { width:100%; }

@media (max-width:560px) {
  .app-shell { padding:max(30px, env(safe-area-inset-top)) 8px max(14px, env(safe-area-inset-bottom)); }
  .topbar { margin-left:10px; margin-right:10px; }
  .topbar h1 { font-size:23px; }
  .message { margin:6px 4px; min-height:14px; }
  .login-panel, .overview-panel, .editor-panel { border-radius:17px; padding:12px; }
  .overview-panel, .editor-panel { min-height:100%; }
  .field-row { grid-template-columns:1fr; }
}

/* ---- 从产品库选择 ---- */

.catalog-pick { margin: 0 0 14px; }

.pick-button {
  width: 100%;
  padding: 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #30659b;
  background: #eaf1f8;
  border: 1px solid #30659b;
  border-radius: 10px;
}

.catalog-dialog {
  width: min(560px, 94vw);
  max-height: 82vh;
  border: none;
  border-radius: 14px;
  padding: 16px;
  overflow: hidden;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
}
/* 不覆盖原生 dialog 的关闭隐藏规则，否则 close() 后列表仍会留在页面。 */
.catalog-dialog[open] { display: grid; }
.catalog-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

.catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog-head h2 { margin: 0; font-size: 18px; }

#catalog-search {
  font: inherit;
  font-size: 16px;          /* 手机上小于 16px 会触发缩放 */
  padding: 10px 12px;
  border: 1px solid #d5d5d8;
  border-radius: 10px;
}

.catalog-hint { margin: 0; font-size: 13px; color: #6b6b70; }

.catalog-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.catalog-list li {
  border-bottom: 1px solid #ececee;
  padding: 11px 4px;
  display: grid;
  gap: 3px;
}
.catalog-list li[aria-disabled="true"] { opacity: 0.55; }
.catalog-list .row1 { display: flex; align-items: baseline; gap: 8px; }
.catalog-list .name { font-size: 16px; font-weight: 600; }
.catalog-list .brewery { font-size: 13px; color: #6b6b70; }
.catalog-list .row2 { font-size: 13px; color: #4a4e57; }
.catalog-list .warn { color: #b45309; font-size: 12.5px; }
.catalog-list .empty { color: #6b6b70; border: none; }
/* 风格不符：标出来但照常可选，点的时候再确认一次 */
.catalog-list li.off-category { background: #fffaf0; }
.slot-color-note { margin: 8px 0 0; font-size: 13px; color: #6b6b70; }


/* Account controls now live in the shared “我的” tab; binding remains a menu action. */
#account-bind-display { flex:none; min-height:44px; padding:5px 0; border:0; background:transparent; color:#1a3fa0; font-size:15px; line-height:20px; border-radius:999px; }
#account-bind-display > span { display:block; min-height:34px; padding:6px 8px; border:1px solid #bfd0f6; border-radius:999px; background:#fff; }

.display-pairing-dialog { max-height:92vh; overflow-y:auto; }
.display-pairing-dialog [hidden] { display:none; }
.dialog-hint { color:#666a73; font-size:14px; line-height:1.6; }
.binding-store { background:#f2f5fb; border-radius:10px; color:#1a3fa0; font-weight:700; padding:11px 12px; }
.scan-button { background:#1a3fa0; border-color:#1a3fa0; color:#fff; width:100%; }
.scan-hint { color:#666a73; font-size:13px; line-height:1.5; margin:8px 0; min-height:20px; }
.pairing-divider { align-items:center; color:#8a8c92; display:flex; font-size:12px; gap:10px; margin:12px 0; }
.pairing-divider::before, .pairing-divider::after { background:#e1e2e5; content:''; flex:1; height:1px; }
.pairing-feedback { font-size:14px; line-height:1.5; min-height:21px; }
.pairing-feedback.success { color:#087443; }
.pairing-feedback.error { color:#b42318; }
select { background:#f7f7f8; border:1px solid #d9dadd; border-radius:12px; display:block; font:inherit; margin-top:7px; padding:13px 14px; width:100%; }