/* ============================================================
   BeadPilot Design System
   ============================================================
   颜色体系 · 间距规范 · 字体层级 · 侧边栏 · 组件样式
   ============================================================ */

/* ---------- 1. 设计 Token ---------- */
:root {
  /* 品牌色 */
  --primary: #245b4b;
  --primary-dark: #1a4a3d;
  --primary-light: #e7f0ed;
  --primary-surface: #f0f7f4;

  /* 中性色 */
  --white: #ffffff;
  --gray-50: #f7f8fa;
  --gray-100: #eef0f2;
  --gray-200: #d6ddd9;
  --gray-300: #aeb9b4;
  --gray-400: #87918c;
  --gray-500: #64675e;
  --gray-600: #505b57;
  --gray-700: #1f2933;

  /* 语义色 */
  --error: #a32626;
  --error-surface: #fde8e8;
  --success: #145a35;
  --success-surface: #e5f6eb;
  --warning: #7a4a00;
  --warning-surface: #fff1d6;
  --info: #245b4b;
  --info-surface: #e7f0ed;

  /* 页面层与交互层 */
  --canvas: #fbf7f0;
  --canvas-warm: #fdfaf4;
  --surface-public: #f7f7f8;
  --emphasis: #b85c38;
  --emphasis-surface: #fbece4;
  --grid-line: #d6ddd9;
  --focus-ring: #f2b84b;
  --primary-hover-surface: #d5e4df;
  --error-dark: #8a1f1f;
  --focus-shadow: 0 0 0 3px rgb(36 91 75 / 15%);
  --error-focus-shadow: 0 0 0 3px rgb(163 38 38 / 15%);
  --skeleton-highlight: rgb(255 255 255 / 55%);

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.1);
  --shadow-selected: inset 0 0 0 1px var(--primary);

  /* 字体 */
  --font-family: ui-sans-serif, system-ui, sans-serif;
  --font-h1: clamp(1.5rem, 4vw, 2.2rem);
  --font-h2: 1.2rem;
  --font-body: .95rem;
  --font-muted: .85rem;
  --font-sm: .75rem;
  --font-eyebrow: .8rem;

  /* 侧边栏 */
  --sidebar-width: 220px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --motion-fast: 150ms;
  --motion-base: 200ms;
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--gray-700);
  background: var(--gray-50);
  line-height: 1.5;
}

/* ---------- 3. 布局：侧边栏 + 内容区 ---------- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* 侧边栏 */
.sidebar {
  width: var(--sidebar-width);
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  padding: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}
.brand-mark { color: var(--primary); }
.sidebar-account { display: block; margin-top: 2px; color: var(--gray-500); font-size: var(--font-sm); font-weight: 400; overflow-wrap: anywhere; }

.sidebar-nav {
  flex: 1;
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.sidebar-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  color: var(--gray-600);
  text-decoration: none;
  font-size: var(--font-body);
  font-weight: 500;
  transition: background .15s, color .15s;
}
.sidebar-link:hover { background: var(--primary-surface); color: var(--primary-dark); }
.sidebar-link.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }

.sidebar-footer {
  padding: var(--space-md) var(--space-sm);
  border-top: 1px solid var(--gray-100);
}

.sidebar-logout {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--gray-500);
  font: inherit;
  font-size: var(--font-muted);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.sidebar-logout:hover { background: var(--error-surface); color: var(--error); }

/* 内容区 */
.content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  padding: var(--space-2xl) var(--space-xl);
  max-width: 1120px;
  width: calc(100% - var(--sidebar-width));
}

/* ---------- 4. 字体层级 ---------- */
h1 { font-size: var(--font-h1); margin: 0 0 var(--space-md); font-weight: 700; line-height: 1.3; }
h2 { font-size: var(--font-h2); margin: 0 0 var(--space-sm); font-weight: 700; line-height: 1.4; }
p { line-height: 1.6; margin: 0 0 var(--space-sm); font-size: var(--font-body); }
.eyebrow {
  color: var(--primary);
  font-size: var(--font-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.muted { color: var(--gray-500); font-size: var(--font-muted); }
strong { font-weight: 600; }

/* ---------- 5. 间距规范 ---------- */
.shell { width: min(100% - 32px, 1120px); margin: auto; padding: var(--space-xl) 0; }

/* ---------- 6. 组件：按钮 ---------- */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  padding: 8px 18px;
  font: inherit;
  font-size: var(--font-body);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
button:hover, .button:hover { background: var(--primary-dark); }
button:active, .button:active { transform: translateY(1px); }
button.secondary, .button.secondary {
  background: var(--primary-light);
  color: var(--primary-dark);
}
button.secondary:hover, .button.secondary:hover { background: var(--primary-hover-surface); }
button.danger { background: var(--error); }
button.danger:hover { background: var(--error-dark); }
button:disabled { cursor: not-allowed; opacity: .5; }
button:disabled:hover { background: var(--primary); }
.link-button {
  color: var(--primary);
  background: transparent;
  padding: 0;
  min-height: auto;
  font-weight: 400;
}
.link-button:hover { background: transparent; color: var(--primary-dark); text-decoration: underline; }

/* ---------- 7. 组件：卡片 ---------- */
.card, fieldset, .auth-card, .landing, .result {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}
.auth-card { width: min(100%, 440px); margin: 8vh auto; }
.landing { width: min(100%, 580px); margin: 8vh auto; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}
.card { display: grid; gap: var(--space-sm); }
.channel-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.channel-card-actions > .button { min-width: 0; }
.share-voucher-settings { gap: var(--space-md); padding: var(--space-lg) var(--space-xl); }
.share-voucher-settings h3, .share-voucher-settings p { margin: 0; }
.share-voucher-settings__control { display: grid; grid-template-columns: minmax(200px, 320px) auto; gap: var(--space-sm) var(--space-lg); align-items: end; }
.share-voucher-settings__control label { grid-column: 1; }
.share-voucher-settings__control select { grid-column: 1; }
.share-voucher-settings__control p { grid-column: 2; grid-row: 2; padding-bottom: 10px; }
.share-voucher-settings__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.share-voucher-settings__actions .form-error, .share-voucher-settings__actions .success-text { margin: 0; }
.share-voucher-settings__actions .success-text { padding: 6px 10px; border-radius: var(--radius-sm); }

/* ---------- 8. 组件：表单 ---------- */
form, fieldset { display: grid; gap: var(--space-md); }
fieldset { margin: var(--space-lg) 0; }
.form-page { max-width: 720px; }
label {
  display: grid;
  gap: var(--space-xs);
  font-weight: 600;
  font-size: var(--font-body);
}
label .muted { font-weight: 400; font-size: var(--font-muted); }
input, select, textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  color: var(--gray-700);
  background: var(--white);
  font: inherit;
  font-size: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: var(--focus-shadow);
}
textarea { min-height: 100px; resize: vertical; }
.form-error { color: var(--error); min-height: 1.4em; font-size: var(--font-body); white-space: pre-line; }
input.field-error, select.field-error, textarea.field-error {
  border-color: var(--error);
  box-shadow: var(--error-focus-shadow);
}
.result { margin-top: var(--space-lg); }

/* ---------- 9. 组件：数据列表 ---------- */
.data-list { display: grid; gap: var(--space-sm); margin: var(--space-md) 0; }
.data-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: box-shadow .15s;
}
.data-row:hover { box-shadow: var(--shadow-sm); }
.data-row > div { flex: 1 1 360px; }
.data-row p { margin: 2px 0; }
.data-row strong { font-size: 1.05rem; }

/* 维护表单（行内编辑） */
.maintenance-form {
  width: 100%;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--gray-200);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
}
.maintenance-form label { min-width: 0; }
.maintenance-form label:only-child { grid-column: 1 / -1; }
.maintenance-form textarea { min-height: 70px; }
.maintenance-form input[name="reason"] { min-height: 36px; }
.assignment-remove-reason { min-width: 0; }
.assignment-remove-reason label { display: block; }
.assignment-remove-reason label span { color: var(--gray-500); font-weight: 400; }
.assignment-remove-reason input { width: 100%; }
.assignment-remove-reason .muted { margin: var(--space-xs) 0 0; }
.maintenance-form .button-row, .maintenance-form .form-error { grid-column: 1 / -1; margin: 0; }
.maintenance-form .button-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- 10. 组件：徽章 ---------- */
.badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-muted);
  font-weight: 700;
  white-space: nowrap;
}
.badge.success, .success-text { color: var(--success); background: var(--success-surface); }
.badge.draft { color: var(--warning); background: var(--warning-surface); }
.badge.archived { color: var(--gray-500); background: var(--gray-100); }
.badge-active { color: var(--info); background: var(--info-surface); }
.badge-success { color: var(--success); background: var(--success-surface); }
.badge-muted { color: var(--gray-500); background: var(--gray-100); }

/* ---------- 11. 组件：色块 ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.swatches span {
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  color: var(--gray-700);
  font-size: .7rem;
  font-weight: 700;
}

/* ---------- 12. 组件：导航标签 ---------- */
.tab-nav, .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}
.tab-nav a {
  padding: 6px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  text-decoration: none;
  color: var(--primary-dark);
  font-size: var(--font-body);
  transition: background .15s, border-color .15s;
}
.tab-nav a:hover { background: var(--primary-surface); border-color: var(--primary); }
.tab-nav a[aria-current] { background: var(--primary); color: var(--white); border-color: var(--primary); font-weight: 600; }
.tab-nav a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- 13. 组件：摘要条 ---------- */
.summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  background: var(--primary-surface);
  border-left: 4px solid var(--primary);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
}
.catalog-view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.catalog-view-controls .muted { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.choice-card { display: block; padding: var(--space-sm); border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-100); }
.choice-card input { margin-right: var(--space-xs); }
.admin-maintenance { margin-top: var(--space-lg); }

/* ---------- UI-05 · 管理员商家列表与开通表单 ---------- */
.admin-page-header .title-row { margin: 0; align-items: end; }
.section-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-md); }
.section-heading h2, .section-heading p { margin-top: 0; }
.tenant-list { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.list-controls, .list-pagination { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-md); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); }
.list-controls label, .list-pagination label { display: grid; gap: .25rem; min-width: min(100%, 12rem); color: var(--gray-600); font-size: var(--font-muted); font-weight: 600; }
.list-controls input, .list-controls select, .list-pagination select { min-height: 2.5rem; }
.list-pagination { justify-content: space-between; align-items: center; }
.list-pagination p { margin: 0; color: var(--gray-600); }
.list-pagination > div { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tenant-list-loading { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); }
.tenant-list-loading .skeleton { min-height: 2.75rem; }
.tenant-row { display: grid; grid-template-columns: minmax(13rem, 1.4fr) minmax(14rem, 1fr) auto; align-items: center; gap: var(--space-lg); padding: var(--space-lg); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.tenant-row:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.tenant-row__identity { min-width: 0; }
.tenant-row__identity h2 { display: inline; margin: 0 var(--space-sm) 0 0; font-size: var(--font-h2); }
.tenant-row__identity p, .tenant-row__action p { margin: var(--space-xs) 0 0; }
.tenant-row__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.tenant-row__fact { display: grid; gap: 2px; min-width: 0; }
.tenant-row__label { color: var(--gray-500); font-size: var(--font-muted); }
.tenant-row__value { color: var(--gray-700); font-size: var(--font-body); overflow-wrap: anywhere; }
.tenant-row__action { display: grid; justify-items: start; min-width: 10rem; }
.tenant-row__action .button { white-space: nowrap; }
.admin-onboarding-page { max-width: 58rem; }
.admin-onboarding-form { gap: var(--space-xl); }
.onboarding-group, .onboarding-review { display: grid; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); background: var(--white); }
.onboarding-group h2, .onboarding-group p, .onboarding-review h2, .onboarding-review ul { margin: 0; }
.onboarding-group .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onboarding-group .form-grid > label { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.onboarding-review { background: var(--primary-surface); border-color: var(--primary-light); }
.onboarding-review ul { display: grid; gap: var(--space-xs); padding-left: var(--space-lg); color: var(--gray-600); }

/* ---------- UI-05 · 商家工作区 ---------- */
.admin-workspace { max-width: 70rem; }
.workspace-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.admin-workspace .workspace-section > h2 { margin-top: 0; }
.admin-workspace .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-workspace .metric-value { overflow-wrap: anywhere; }
.danger-zone { padding: var(--space-xl); border: 1px solid var(--error); border-radius: var(--radius-xl); background: var(--error-surface); }
.danger-zone details { padding: var(--space-md); border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); }
.danger-zone details + details { margin-top: var(--space-sm); }
.danger-zone form { margin-top: var(--space-md); }
.admin-catalog-workspace { max-width: 70rem; }
.admin-catalog-workspace .tab-nav { position: sticky; top: var(--space-sm); z-index: 20; padding: var(--space-sm); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.admin-catalog-workspace .workspace-section { margin-top: var(--space-xl); }
.catalog-color-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.catalog-color-table th, .catalog-color-table td { padding: 0.25rem 0.5rem; border: 1px solid var(--gray-200); text-align: left; }
.catalog-color-table th { background: var(--gray-50); }
.catalog-color-table th:nth-last-child(-n + 2), .catalog-color-table td:nth-last-child(-n + 2) { text-align: center; }
.catalog-color-swatch { display: inline-block; width: 1.25rem; height: 1.25rem; border: 1px solid #87918c; border-radius: 0.1875rem; }
.catalog-color-details { width: 100%; margin-top: 0.5rem; }
.catalog-color-details summary { color: #245b4b; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.catalog-color-detail-body { padding: 0.5rem 0; overflow-x: auto; }
.template-library-workspace { max-width: 70rem; }
.template-library-workspace .workspace-section { margin-top: var(--space-xl); }
.template-library-workspace .tab-nav { position: sticky; top: var(--space-sm); z-index: 20; padding: var(--space-sm); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.template-editor { display: grid; gap: var(--space-lg); }
.template-editor .form-group { padding: var(--space-lg); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); }
.template-editor .form-group > h3 { margin-top: 0; }
.template-editor .form-grid > label { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.template-editor .form-grid input, .template-editor .form-grid textarea { width: 100%; box-sizing: border-box; }
.template-version-summary { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.template-version-summary span { padding: 0.25rem 0.5rem; border-radius: var(--radius-pill); background: var(--gray-100); font-size: var(--font-muted); }
.template-version-actions { align-items: flex-start; }
.template-version-details { width: 100%; }
.template-version-details summary { color: var(--primary); }
@media (max-width: 768px) { .template-library-workspace .title-row { align-items: flex-start; } .template-version-actions { width: 100%; } }
.admin-catalog-workspace .title-row { margin-bottom: var(--space-lg); }
.admin-catalog-workspace .card { padding: var(--space-lg); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); }

/* ---------- 14. 组件：折叠面板 ---------- */
details summary { cursor: pointer; font-weight: 600; font-size: var(--font-body); }
details[open] summary { margin-bottom: var(--space-sm); }

/* 模板详情展开 */
.template-details { margin-top: var(--space-sm); width: 100%; }
.template-details summary {
  color: var(--primary);
  font-size: var(--font-muted);
  font-weight: 600;
}
.template-details__body { display: grid; gap: var(--space-sm); padding: var(--space-sm) 0; }
.template-details__section > h3 { margin: 0; font-size: var(--font-body); }
.template-details__color-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.template-color-swatch {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--font-muted);
  font-weight: 700;
}
.template-details__empty { margin: var(--space-xs) 0 0; color: var(--gray-500); font-size: var(--font-muted); }
.template-details ul { margin: 2px 0; padding-left: 18px; }
.template-details li { line-height: 1.5; font-size: var(--font-muted); }
.template-details table { font-size: var(--font-muted); width: 100%; border-collapse: collapse; }
.template-details table th {
  font-weight: 700;
  background: var(--gray-100);
  text-align: left;
}
.template-details table th, .template-details table td {
  padding: 4px 8px;
  border: 1px solid var(--gray-200);
}

/* ---------- 15. 组件：空状态 ---------- */
.empty-state {
  padding: var(--space-lg);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  color: var(--gray-500);
}

/* ---------- 16. 组件：导航（标题行） ---------- */
.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

/* ---------- 17. 组件：工作区区块 ---------- */
.workspace-section { margin-top: var(--space-2xl); scroll-margin-top: var(--space-lg); }

/* ---------- 18. 焦点样式 ---------- */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- 19. 响应式 ---------- */
@media (max-width: 768px) {
  .list-controls, .list-pagination { align-items: stretch; }
  .list-controls label, .list-pagination label { width: 100%; }
  .list-controls button, .list-pagination > div { width: 100%; }
  .list-pagination > div button { flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .admin-page-header .title-row { align-items: start; }
  .tenant-row { grid-template-columns: 1fr; gap: var(--space-md); }
  .tenant-row__facts { max-width: 26rem; }
  .tenant-row__action { justify-items: stretch; min-width: 0; }
  .tenant-row__action .button { text-align: center; }
  .tenant-list-loading { grid-template-columns: 1fr; }
  .admin-workspace .metric-grid { grid-template-columns: 1fr; }
  .sidebar {
    width: 100%;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-sm) var(--space-md);
  }
  .sidebar-brand { padding: var(--space-sm); border-bottom: none; }
  .sidebar-nav { flex-direction: row; padding: 0; overflow: visible; }
  .sidebar-link { padding: 4px 10px; font-size: var(--font-muted); }
  .sidebar-footer { border-top: none; padding: 0; }
  .content {
    margin-left: 0;
    width: 100%;
    padding: var(--space-lg);
  }
  .maintenance-form { grid-template-columns: 1fr; }
}

/* ---------- 20. 组件：顾客端确认复选框 ---------- */
/* 顾客端声明样式由 `.workspace-card .consent-*` 统一负责（见 41.x 节） */
.consent-actions .link-button {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: var(--font-muted);
  padding: 0;
  text-decoration: underline;
}
.consent-actions .link-button:hover { color: var(--primary-dark); }

/* ---------- 21. 组件：顾客端尺寸选择 ---------- */
.size-options { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-md) 0; }
.size-options .card {
  display: block;
  padding: var(--space-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.size-options .card:hover { border-color: var(--primary); background: var(--primary-surface); }
.size-options .card input[type="radio"]:checked + strong { color: var(--primary); }
.size-options .card strong { display: block; margin-bottom: 2px; }
.size-options .card span { display: block; font-size: var(--font-muted); color: var(--gray-600); }
.size-options .card small { display: block; font-size: var(--font-sm); color: var(--gray-400); }

.normalized-preview {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: var(--space-md) auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.preview-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) auto;
  max-width: 720px;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--primary-surface);
  color: var(--gray-700);
  font-size: 1rem;
}
.preview-summary strong { grid-column: 1 / -1; font-size: 1.15rem; color: var(--gray-900); }

/* ---------- 22. UI-01: 顾客创作工作流 ---------- */
.public-page {
  min-height: 100vh;
  padding: var(--space-lg);
  background:
    radial-gradient(circle at 15% 0%, var(--primary-light), transparent 34rem),
    var(--gray-50);
}
.public-header, .public-workspace {
  width: min(100%, 580px);
  margin-inline: auto;
}
.public-header {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--primary-dark);
  font-size: 1rem;
  font-weight: 700;
}
.public-brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--white);
  font-size: var(--font-muted);
}
.step-label {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-500);
  font-size: var(--font-muted);
  font-weight: 600;
}
.public-workspace {
  padding: var(--space-xl);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.public-workspace h1 { font-size: clamp(1.5rem, 7vw, 2rem); letter-spacing: -.02em; }
.public-workspace > h2 { margin-top: var(--space-lg); }
.public-workspace fieldset {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--gray-50);
}
.public-workspace legend { padding: 0 var(--space-xs); color: var(--gray-600); font-size: var(--font-muted); font-weight: 700; }
.public-workspace .crop-preview {
  overflow: hidden;
  margin: var(--space-md) 0;
  padding: var(--space-sm);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  background: var(--gray-50);
}
.public-workspace .crop-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--white);
}
.public-workspace .crop-preview fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  background: var(--white);
}
.public-workspace .crop-preview fieldset label,
.public-workspace .crop-preview label { display: flex; align-items: center; gap: var(--space-sm); }
.public-workspace .crop-preview input[type="radio"] { width: auto; min-height: auto; }
.public-workspace .size-options { gap: var(--space-sm); }
.public-workspace .size-options .card {
  position: relative;
  padding: var(--space-lg);
  border-width: 1px;
  background: var(--white);
}
.public-workspace .size-options .card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-surface);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.public-workspace .size-options .card input { position: absolute; opacity: 0; pointer-events: none; }
.public-workspace .size-options .card strong::after {
  content: "";
  float: right;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
}
.public-workspace .size-options .card:has(input:checked) strong::after { border: 5px solid var(--primary); }
.public-workspace .success-text { padding: var(--space-md); border-radius: var(--radius-md); }
.public-workspace .order-number { font-family: ui-monospace, monospace; color: var(--gray-600); }
.generation-status {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: var(--space-lg) auto;
  border: 6px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  color: var(--primary-dark);
  font-size: 1.2rem;
  animation: generation-spin 1.4s linear infinite;
}
@keyframes generation-spin { to { transform: rotate(360deg); } }
.generation-status span { animation: generation-spin-reverse 1.4s linear infinite; }
@keyframes generation-spin-reverse { to { transform: rotate(-360deg); } }
.preview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preview-summary span { padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--white); font-size: var(--font-muted); }

@media (max-width: 480px) {
  .public-page { padding: var(--space-sm) var(--space-md) 92px; }
  .public-workspace { padding: var(--space-lg); border-radius: var(--radius-lg); }
  .public-workspace form > button:last-of-type, .public-workspace #generate-preview-btn {
    position: sticky;
    bottom: var(--space-sm);
    width: 100%;
    margin-top: var(--space-lg);
    box-shadow: var(--shadow-md);
  }
  .preview-summary { grid-template-columns: 1fr; }
}

/* UI-07C-R · UI-07B 原型为唯一顾客端视觉基线。
   顾客页面始终是 390px 单列 H5；宽屏只提供居中阅读，不转成后台双栏。 */
.content:has(.customer-h5-page) { max-width: none; padding: 0; }
.customer-h5-page {
  min-height: 100vh;
  padding: 0 16px calc(104px + env(safe-area-inset-bottom));
  background: #FFF9F6;
}
.customer-h5-page .h5-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 390px);
  min-height: 68px;
  margin: 0 auto;
  padding: 16px 0 12px;
}
.customer-h5-page .public-brand-logo { width: 104px; }
.h5-store-chip, .h5-progress {
  color: #776F78;
  font-size: .72rem;
  font-weight: 700;
}
.h5-store-chip { max-width: 164px; overflow: hidden; padding: 7px 10px; border: 1px solid #E8DFDC; border-radius: 999px; background: #fff; text-overflow: ellipsis; white-space: nowrap; }
.h5-progress { color: #E96963; letter-spacing: .06em; }
.customer-h5-page .public-workspace,
.customer-h5-page .customer-upload-page .public-workspace,
.customer-h5-page .customer-preview-page .public-workspace {
  width: min(100%, 390px);
  margin: 0 auto;
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.customer-h5-page .customer-task-heading { margin: 0 0 18px; }
.customer-h5-page .customer-task-heading .eyebrow { margin-bottom: 8px; color: #E96963; font-size: .75rem; letter-spacing: .04em; }
.customer-h5-page .customer-task-heading h1,
.customer-h5-page .generation-panel h1 { margin-bottom: 10px; color: #302E38; font-size: clamp(1.72rem, 8vw, 2.05rem); line-height: 1.18; letter-spacing: -.055em; }
.customer-h5-page .customer-task-heading > p:last-child,
.customer-h5-page .generation-panel > p { margin: 0; color: #6E6974; font-size: .92rem; line-height: 1.65; }
.customer-h5-page .photo-tips { display: none; }
.customer-h5-page .customer-entry-promise { display: grid; gap: 9px; margin: 17px 0 20px; font-size: .8rem; }
.customer-h5-page .customer-entry-promise li { gap: 9px; }
.customer-h5-page .customer-entry-promise span { width: 22px; height: 22px; color: #E96963; background: #FFF0ED; font-size: .62rem; }
.customer-h5-page .customer-upload-grid,
.customer-h5-page .customer-preview-layout,
.customer-h5-page .customer-size-layout,
.customer-h5-page .generation-layout { display: block; }
.customer-h5-page .customer-upload-stage,
.customer-h5-page .upload-stage-trigger,
.customer-h5-page .preview-artwork-stage,
.customer-h5-page .generation-artwork-stage {
  min-height: 318px;
  border: 1px solid #E8DFDC;
  border-radius: 22px;
  background: #F7EFEB;
}
.customer-h5-page .upload-stage-trigger { min-height: 318px; background: radial-gradient(circle at 50% 42%, #FFFDFB 0 74px, transparent 75px); }
.customer-h5-page .upload-stage-trigger::before { width: 112px; height: 112px; border-radius: 30px; }
.customer-h5-page .upload-stage-trigger strong { font-size: 1.08rem; }
.customer-h5-page .customer-upload-controls {
  display: block;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.customer-h5-page .customer-upload-controls .crop-tools { padding: 14px; border: 1px solid #E8DFDC; border-radius: 16px; background: #fff; }
.customer-h5-page .consent-section { margin-top: 14px; padding: 14px; border: 1px solid #E8DFDC; border-radius: 16px; background: #fff; }
.customer-h5-page .consent-heading { margin-bottom: 10px; }
.customer-h5-page .consent-heading h2 { font-size: .92rem; }
.customer-h5-page .consent-box { gap: 0; }
.customer-h5-page .consent-item { padding: 10px 0; font-size: .78rem; }
.customer-h5-page .privacy-details { font-size: .76rem; }
.customer-h5-page .customer-primary-action,
.customer-h5-page .preview-primary-action { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); width: 100%; margin: 12px 0 0; padding: 8px; border: 1px solid #E8DFDC; border-radius: 16px; background: rgb(255 255 255 / 94%); box-shadow: 0 8px 24px rgb(77 52 48 / 12%); backdrop-filter: blur(10px); }
.customer-h5-page .customer-primary-action button,
.customer-h5-page .preview-primary-action > * { width: 100%; min-height: 48px; }
.customer-h5-page .public-store-details { margin-top: 32px; padding-top: 20px; }
.customer-h5-page .public-store-details dl { grid-template-columns: 1fr; gap: 8px; }
.customer-h5-page .retrieval-link { margin-top: 20px; }

/* 尺寸选择：保留真实门店选项，视觉回到单列作品设置卡。 */
.customer-h5-page .size-artwork-summary { grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 20px; padding: 10px; border-color: #E8DFDC; border-radius: 16px; background: #FFF4F1; }
.customer-h5-page .size-artwork-summary img { width: 80px; border-radius: 12px; }
.customer-h5-page .size-artwork-summary p { margin: 0; }
.customer-h5-page .customer-size-form .order-number { margin: 16px 0; font-size: .75rem; }
.customer-h5-page .customer-size-form .option-block { margin: 0; padding: 12px; border: 1px solid #E8DFDC; border-radius: 16px; background: #fff; }
.customer-h5-page .customer-size-form .option-list { margin: 0; }
.customer-h5-page .customer-size-form .option-list { gap: 8px; }
.customer-h5-page .customer-size-form .option-list .cell.size-option__choice { min-height: 48px; justify-content: flex-start; gap: 7px; padding: 10px 12px; border-radius: 13px; }
.customer-h5-page .customer-size-form .option-list .cell .cell-main { flex: 0 1 auto; min-width: 0; cursor: pointer; }
.customer-h5-page .customer-size-form .option-list .cell .cell-main strong { margin: 0; font-size: .9rem; line-height: 1.25; }
.customer-h5-page .customer-size-form .size-option__tip { display: grid; flex: 0 0 16px; place-items: center; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; border: 1px solid #CFC4C0; border-radius: 50%; color: #766C69; background: #fff; box-shadow: none; font-family: ui-serif, Georgia, serif; font-size: .62rem; font-weight: 700; line-height: 1; }
.customer-h5-page .customer-size-form .option-list .cell .check { margin-left: auto; }
.customer-h5-page .customer-size-form .size-option__tip[aria-expanded="true"] { border-color: var(--customer-coral); color: var(--customer-coral-dark); background: #FFF0ED; }
.customer-h5-page .customer-size-form .size-option__details { margin: 6px 4px 2px; padding: 9px 11px; border-left: 2px solid #F2B6AE; color: #766C69; font-size: .72rem; line-height: 1.5; }
.customer-h5-page .customer-size-form .size-recommendation { padding: 13px; border: 1.5px solid var(--customer-coral); border-radius: 14px; background: var(--customer-coral-soft); box-shadow: inset 0 0 0 1px rgb(233 105 99 / 12%); }
.customer-h5-page .customer-size-form .size-recommendation__eyebrow { margin: 0 0 7px; color: var(--customer-coral-dark); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.customer-h5-page .customer-size-form .size-recommendation .cell { padding: 5px 0; border: 0; background: transparent; }
.customer-h5-page .customer-size-form .size-recommendation .cell-main span, .customer-h5-page .customer-size-form .size-recommendation .cell-main small { display: block; margin-top: 3px; color: #766C69; font-size: .76rem; font-weight: 500; line-height: 1.35; }
.customer-h5-page .customer-size-form .size-recommendation__details { margin: 7px 0 0; color: #766C69; font-size: .73rem; }
.customer-h5-page .customer-size-form .size-recommendation__status, .customer-h5-page .customer-size-form .size-option__recommended { color: var(--customer-coral-dark); font-size: .72rem; font-weight: 800; }
.customer-h5-page .customer-size-form .size-recommendation__status { margin-left: auto; }
.customer-h5-page .customer-size-form .size-option__recommended { display: block; margin-top: 2px; }
.customer-h5-page .customer-size-form .size-options-toggle { width: 100%; margin: 4px 0; padding: 9px; border: 0; color: var(--customer-coral-dark); background: transparent; box-shadow: none; font-size: .82rem; }
.customer-h5-page .customer-size-form .size-options-other { display: grid; gap: 8px; margin-top: 4px; }
.customer-h5-page .effect-tuning { margin-top: 14px; border-color: #E8DFDC; border-radius: 16px; }
.customer-h5-page .effect-tuning summary { min-height: 52px; padding: 14px; }

/* 生成等待：作品仍是主体，状态文案不使用虚假百分比。 */
.customer-h5-page .generation-artwork-stage { min-height: 300px; }
.customer-h5-page .generation-panel { display: grid; margin-top: 16px; padding: 20px; border-color: #E8DFDC; border-radius: 20px; }
.customer-h5-page .generation-panel h1 { font-size: 1.56rem; }
.customer-h5-page .generation-panel .button-row { display: grid; grid-template-columns: 1fr; }

/* 受限预览：横向分段 Tab、作品画布、摘要、解锁价值、唯一主操作。 */
.customer-h5-page .customer-preview-artwork { display: block; }
.customer-h5-page .preview-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 12px; background: #F0EAE8; }
.customer-h5-page .preview-mode-tabs button,
.customer-h5-page .preview-mode-tabs span { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 5px 4px; border: 0; border-radius: 9px; color: #827983; background: transparent; box-shadow: none; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.customer-h5-page .preview-mode-tabs button.is-active { color: #302E38; background: #fff; box-shadow: 0 1px 2px rgb(77 52 48 / 8%); }
.customer-h5-page .preview-mode-tabs .is-locked { color: #A0989F; }
.customer-h5-page .preview-mode-tabs b { margin-left: 3px; font-size: .8rem; }
.customer-h5-page .preview-artwork-stage { min-height: 300px; height: auto; padding: 0; border-radius: 20px; background: #fff; }
.customer-h5-page .preview-artwork-stage img { width: 100%; min-height: 300px; max-height: none; aspect-ratio: 1 / .86; object-fit: contain; }
.customer-h5-page .customer-preview-panel { display: block; height: auto; margin-top: 14px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.customer-h5-page .preview-status-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.customer-h5-page .preview-status-heading .order-number { font-size: .7rem; }
.customer-h5-page .preview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.customer-h5-page .preview-metrics .metric-card { min-height: 72px; padding: 11px; border-color: #E8DFDC; border-radius: 13px; background: #fff; }
.customer-h5-page .metric-label { font-size: .68rem; }
.customer-h5-page .metric-value { margin-top: 5px; color: #302E38; font-size: .86rem; }
.customer-h5-page .preview-next-step { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 14px; padding: 14px; border-left: 0; border-radius: 15px; background: #FFF0ED; }
.customer-h5-page .preview-next-step::before { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: #E96963; content: "✦"; font-size: .8rem; }
.customer-h5-page .preview-next-step h2 { grid-column: 2; margin: 0; font-size: .9rem; }
.customer-h5-page .preview-next-step p, .customer-h5-page .preview-next-step .order-display, .customer-h5-page .preview-next-step .visit-code-display { grid-column: 2; }
.customer-h5-page .preview-next-step p { margin: -8px 0 0; font-size: .78rem; }
.customer-h5-page .preview-secondary-actions { margin-top: 18px; }

@media (min-width: 769px) {
  .customer-h5-page { padding-top: 10px; }
}
@media (max-width: 359px) {
  .customer-h5-page { padding-inline: 12px; }
  .customer-h5-page .customer-task-heading h1 { font-size: 1.62rem; }
}

/* ---------- 23. 其他 ---------- */
dl { display: grid; gap: var(--space-xs); }
dt { font-weight: 700; }
dd { margin: 0 0 var(--space-md); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   UI 整改 · 手作工作台设计系统（11 号文档 §7）
   借鉴 Element/Ant 的 Token 语义与交互范式，映射进现有变量体系
   ============================================================ */

/* ---------- 24. 顾客页头部与步骤条（app-header / stepper） ---------- */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: min(100% - 32px, 480px);
  margin: 0 auto;
  padding: var(--space-md) 0;
}
.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 0 auto;
  color: var(--gray-400);
  font-size: var(--font-muted);
  font-weight: 600;
}
.stepper .step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.stepper .step[aria-current] { color: var(--primary-dark); }
.stepper .step:hover { color: var(--primary); }
.stepper .step:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.stepper[aria-busy="true"] { opacity: .7; cursor: progress; }
.stepper[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.stepper[data-state="error"] { color: var(--error); }
.stepper .step-num {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: .7rem;
  line-height: 1;
}
.stepper .step[aria-current] .step-num { background: var(--primary); color: var(--white); }
.stepper .step-sep { color: var(--gray-200); }

/* ---------- 26. 顾客页画布与底部操作栏（action-bar） ---------- */
.public-workspace {
  background: var(--canvas);
}
.workspace-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
}
.action-bar {
  position: sticky;
  bottom: calc(var(--safe-bottom) + var(--space-sm));
  z-index: 40;
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding: var(--space-sm);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.action-bar > button,
.action-bar > a,
.action-bar > .button {
  flex: 1;
  min-height: 44px;
}
.action-bar > .secondary { flex: 0 0 auto; }

/* ---------- 27. 尺寸/难度/背景选项卡（option-card） ---------- */
.option-card {
  position: relative;
  display: block;
  padding: var(--space-lg);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.option-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-surface);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card strong { display: block; margin-bottom: 2px; }
.option-card span { display: block; font-size: var(--font-muted); color: var(--gray-600); }
.option-card small { display: block; font-size: var(--font-sm); color: var(--gray-400); }
.option-card strong::after {
  content: "";
  float: right;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
}
.option-card:has(input:checked) strong::after { border: 5px solid var(--primary); background: var(--white); }

/* ---------- 28. 作品摘要指标卡（metric-card） ---------- */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.metric-card {
  padding: var(--space-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--canvas-warm);
}
.metric-card .metric-label { display: block; font-size: var(--font-sm); color: var(--gray-500); }
.metric-card .metric-value { display: block; margin-top: 2px; font-size: 1.05rem; font-weight: 700; color: var(--gray-700); }

/* ---------- 29. 后台概览指标卡与任务卡（metric-card / task-card / context-chip） ---------- */
.context-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--canvas-warm);
  color: var(--gray-600);
  font-size: var(--font-muted);
  font-weight: 600;
}
.task-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.task-card + .task-card { margin-top: var(--space-sm); }
.task-card .task-meta { color: var(--gray-500); font-size: var(--font-muted); }

/* ---------- 30. 状态徽章（status-chip，统一并扩展 .badge） ---------- */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.4;
}
.status-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.status-chip.success { color: var(--success); background: var(--success-surface); }
.status-chip.pending { color: var(--warning); background: var(--warning-surface); }
.status-chip.archived, .status-chip.neutral { color: var(--gray-500); background: var(--gray-100); }
.status-chip.danger { color: var(--error); background: var(--error-surface); }

/* ---------- 31. 空状态引导（empty-state 扩展变体） ---------- */
.empty-state[data-action-hint]::after {
  content: attr(data-action-hint);
  display: block;
  margin-top: var(--space-xs);
  color: var(--primary);
  font-size: var(--font-muted);
  font-weight: 600;
}

/* ---------- 32. 顾客端移动端适配（追加到现有媒体查询之后） ---------- */
@media (max-width: 480px) {
  .app-header { width: 100%; padding-left: var(--space-md); padding-right: var(--space-md); }
  .stepper .step-label-text { display: none; }
  .stepper .step + .step-sep + .step .step-label-text { display: inline; }
  .public-workspace { padding: var(--space-lg); }
  .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .public-workspace .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 481px) {
  .action-bar { position: static; width: min(100%, 480px); margin-left: auto; margin-right: auto; }
}

/* ============================================================
   UI 整改 · 第二轮优化（11 号文档 §7.4 / §5.1）
   统一难度/背景为紧凑选项组 + 上传表单间距 + 字体层级 + 防溢出
   ============================================================ */

/* ---------- 33. 防横向溢出（全局防御） ---------- */
html, body { overflow-x: clip; }
img, canvas, svg, video { max-width: 100%; height: auto; }
.workspace-card { min-width: 0; overflow-wrap: break-word; }

/* ---------- 34. 上传表单字段间距（问题 1：消除紧贴边框） ---------- */
.workspace-card form { display: grid; gap: var(--space-lg); }
.workspace-card form > label { display: grid; gap: var(--space-xs); font-weight: 600; color: var(--gray-700); }
.workspace-card form > label input,
.workspace-card form > label select,
.workspace-card form > label textarea { min-height: 44px; border-radius: var(--radius-md); }
.workspace-card .crop-preview { margin: var(--space-xs) 0; padding: var(--space-md); border-radius: var(--radius-lg); background: var(--gray-50); }
.workspace-card .crop-preview label { display: flex; align-items: center; gap: var(--space-sm); font-weight: 400; }
.workspace-card .crop-preview input[type="range"] { flex: 1; }
.workspace-card .consent-section { margin: var(--space-sm) 0 0; }
.workspace-card .consent-actions { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.workspace-card .consent-actions .link-button { font-size: var(--font-sm); }
.workspace-card .consent-box {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  background: var(--white);
}
.workspace-card .consent-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: var(--font-sm);
  color: var(--gray-600);
  line-height: 1.3;
  cursor: pointer;
}
.workspace-card .consent-item + .consent-item { border-top: 1px solid var(--gray-100); }
/* 隐藏原生 checkbox：input 覆盖整个 label，避免聚焦时浏览器滚动导致上下窜动；label 点击由浏览器原生驱动 toggle */
.workspace-card .consent-item input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.workspace-card .consent-item .tick {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  background: var(--white);
  position: relative;
  pointer-events: none;
}
.workspace-card .consent-item .tick::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
}
.workspace-card .consent-item input:checked + .tick { border-color: var(--primary); }
.workspace-card .consent-item input:checked + .tick::after { opacity: 1; }
.workspace-card .consent-item .consent-text { flex: 1; pointer-events: none; }
.workspace-card .consent-item input:focus-visible + .tick { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.workspace-card details { padding: 4px 0 0; }
.workspace-card details summary { cursor: pointer; color: var(--gray-400); font-size: var(--font-muted); }

/* ---------- 35. 紧凑选项组（问题 2/3：难度/背景统一为 option-card 风格） ---------- */
.choice-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-sm); }
.choice-card {
  position: relative;
  display: block;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-md);
  background: var(--white);
  font-weight: 600;
  text-align: center;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.choice-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-surface);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--font-sm); color: var(--gray-500); }

/* ---------- 36. 字体层级优化（问题 5） ---------- */
.public-workspace h1 { font-size: 1.4rem; letter-spacing: -.01em; }
.public-workspace .eyebrow { font-size: var(--font-eyebrow); }
.workspace-card p, .workspace-card label { line-height: 1.55; }
.workspace-card .result, .workspace-card .success-text { font-size: var(--font-body); }

/* ---------- 37. 上传页精简布局（问题 4：一屏一个主操作） ---------- */
.public-upload-heading h1, .public-upload-heading h2 { margin: 0 0 var(--space-sm); }
.public-upload-heading h2 { color: var(--gray-600); font-size: 1.05rem; font-weight: 600; }

/* 独立 size 页：选项区块分组间距 */
.option-block { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 0; }
.option-block legend { font-weight: 700; color: var(--gray-700); font-size: var(--font-body); margin-bottom: var(--space-xs); }

/* ============================================================
   UI 整改 · 第三轮：iOS Cupertino 极简风格（对标千岛 App）
   ============================================================ */

/* ---------- 38. 顾客页整体：白底 + Large Title ---------- */
.public-page { background: var(--surface-public); }
.public-workspace { background: transparent; padding-top: var(--space-md); }
.public-workspace .large-title {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.6rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--gray-700);
}
.public-workspace .title-sub {
  margin: -var(--space-sm) 0 var(--space-lg);
  color: var(--gray-500);
  font-size: var(--font-body);
  line-height: 1.5;
}

/* iOS 分段选择（Segment）：替代大卡片——难度/背景用紧凑分段条 */
.segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 3px;
  background: var(--gray-100);
  border-radius: 10px;
}
.segment label {
  position: relative;
  display: block;
  padding: 9px 4px;
  border-radius: 8px;
  text-align: center;
  font-size: var(--font-muted);
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.segment label:has(input:checked) {
  background: var(--white);
  color: var(--gray-700);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.segment input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* 列表式尺寸选项：iOS 圆角列表单元格 */
.option-list { display: grid; gap: var(--space-sm); }
.option-list .cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--white);
  border-radius: 12px;
  cursor: pointer;
}
.option-list .cell input { position: absolute; opacity: 0; pointer-events: none; }
.option-list .cell .cell-main strong { display: block; font-size: var(--font-body); color: var(--gray-700); }
.option-list .cell .cell-main span { display: block; font-size: var(--font-muted); color: var(--gray-500); }
.option-list .cell .cell-main small { display: block; font-size: var(--font-sm); color: var(--gray-400); }
.option-list .cell .check {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1.5px solid var(--gray-300);
  border-radius: 50%;
}
.option-list .cell:has(input:checked) .check { border-color: var(--primary); background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center/14px no-repeat; }

/* iOS 底部固定操作栏（安全区内） */
.ios-action-bar {
  position: sticky;
  bottom: calc(var(--safe-bottom) + 10px);
  z-index: 50;
  margin-top: var(--space-xl);
}
.ios-action-bar button, .ios-action-bar a, .ios-action-bar .button {
  display: block;
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 600;
}

/* 上传页：极简声明三行（问题 3 已实现于 section 34），补充文件选择区为 iOS 浅底大按钮 */
.upload-trigger {
  display: grid;
  place-items: center;
  min-height: 120px;
  border: 1.5px dashed var(--gray-200);
  border-radius: 16px;
  background: var(--gray-50);
  color: var(--gray-500);
  font-weight: 600;
  cursor: pointer;
}

/* size 页 Large Title 下紧凑 */
.size-page-title { margin-bottom: var(--space-sm); }

/* ---------- 39. 上传页裁切交互（iOS 风格） ---------- */
.crop-stage { display: grid; gap: var(--space-md); }
.crop-stage canvas {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: var(--gray-100);
}
.crop-tools { display: grid; gap: var(--space-md); }
.crop-tools > .segment { margin-top: var(--space-xs); }
.crop-slider { display: grid; gap: 2px; }
.crop-slider.is-hidden { display: none; }
.crop-slider span { font-size: var(--font-muted); color: var(--gray-500); }
.crop-slider input[type="range"] { width: 100%; }
.crop-slider .range-val { display: flex; justify-content: space-between; font-size: var(--font-sm); color: var(--gray-400); }
.crop-adjustment-title { margin: 0; color: var(--gray-600); font-size: var(--font-sm); font-weight: 700; }
.customer-crop-preview canvas.crop-gesture-enabled { cursor: grab; touch-action: none; }
.customer-crop-preview canvas.crop-gesture-enabled:active { cursor: grabbing; }

/* ============================================================
   UI-01 · 页面壳与公共状态组件
   新页面应直接复用这些类；旧类保留至对应业务页面迁移完成。
   ============================================================ */
.content--standalone { margin-left: 0; max-width: none; width: 100%; }
.mobile-nav { display: none; }

.page-header {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  max-width: 720px;
}
.page-header__description { color: var(--gray-500); margin: 0; }
.page-header:hover { color: var(--primary-dark); }
.page-header:focus-within { outline: 2px solid var(--focus-ring); outline-offset: var(--space-xs); border-radius: var(--radius-md); }
.page-header[aria-busy="true"] { opacity: .7; cursor: progress; }
.page-header[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.page-header[data-state="error"] .page-header__description { color: var(--error); }

.artwork-stage {
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: var(--space-lg);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-xl);
  background: var(--canvas-warm);
  color: var(--gray-600);
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.artwork-stage:hover { border-color: var(--primary); }
.artwork-stage:focus-within { border-color: var(--primary); box-shadow: var(--focus-shadow); }
.artwork-stage[aria-busy="true"] { cursor: wait; }
.artwork-stage[data-state="error"] { border-color: var(--error); background: var(--error-surface); color: var(--error); }
.artwork-stage[aria-disabled="true"], .artwork-stage.is-disabled { opacity: .6; pointer-events: none; }

.metric-card, .task-card {
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.metric-card:hover, .task-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.metric-card:focus-within, .task-card:focus-within { border-color: var(--primary); box-shadow: var(--focus-shadow); }
.metric-card[aria-busy="true"], .task-card[aria-busy="true"] { cursor: progress; }
.metric-card[data-state="error"], .task-card[data-state="error"] { border-color: var(--error); }
.metric-card[aria-disabled="true"], .task-card[aria-disabled="true"] { opacity: .6; pointer-events: none; }

.status-chip { border: 1px solid transparent; }
.status-chip:hover { filter: brightness(.96); }
.status-chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.status-chip[aria-busy="true"]::before { animation: generation-spin 1s linear infinite; border: 1px solid currentColor; border-top-color: transparent; background: transparent; }
.status-chip[aria-disabled="true"] { opacity: .6; }
.status-chip.error { color: var(--error); background: var(--error-surface); border-color: var(--error); }

.empty-state, .error-state, .success-state {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
}
.empty-state:hover { border-color: var(--primary); }
.empty-state:focus-within, .error-state:focus-within, .success-state:focus-within { box-shadow: var(--focus-shadow); }
.empty-state[aria-busy="true"], .error-state[aria-busy="true"] { cursor: progress; }
.empty-state[aria-disabled="true"], .error-state[aria-disabled="true"], .success-state[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.error-state { border: 1px solid var(--error); background: var(--error-surface); color: var(--error); }
.success-state { border: 1px solid var(--success); background: var(--success-surface); color: var(--success); }
.state-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--white); font-weight: 700; }
.empty-state .state-icon { background: var(--primary); }
.success-state .state-icon { background: var(--success); }
.error-state .state-icon { background: var(--error); }
.result-details { width: 100%; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-md); }
.result-details div { padding: var(--space-sm); border: 1px solid currentColor; border-radius: var(--radius-md); }
.result-details dd { margin: var(--space-xs) 0 0; font-weight: 700; }

.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--gray-100); min-height: 1rem; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent); animation: skeleton-shimmer 1.4s ease-in-out infinite; }
.skeleton:hover { background: var(--gray-200); }
.skeleton:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.skeleton[aria-busy="false"], .skeleton[aria-disabled="true"] { animation: none; opacity: .6; }
.skeleton[data-state="error"] { background: var(--error-surface); }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }

.mobile-action-bar {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding: var(--space-sm);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.mobile-action-bar > * { flex: 1; min-height: 44px; }
.mobile-action-bar:hover { border-color: var(--primary); }
.mobile-action-bar:focus-within { box-shadow: var(--focus-shadow); }
.mobile-action-bar[aria-busy="true"] { cursor: progress; }
.mobile-action-bar[data-state="error"] { border-color: var(--error); }
.mobile-action-bar[aria-disabled="true"] { opacity: .6; pointer-events: none; }

.redeem-page { max-width: 720px; }
.redeem-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-md);
  max-width: 38rem;
}
.redeem-form label { min-width: 0; margin: 0; }
.redeem-form #code-help { grid-column: 1 / -1; margin: 0; }
.redeem-form #redeem-btn { align-self: end; min-width: max-content; white-space: nowrap; }
.visit-code-input { letter-spacing: .18em; text-align: center; font-size: clamp(1rem, 2.6vw, 1.2rem); font-variant-numeric: tabular-nums; }
.result-area { max-width: 32rem; margin-top: var(--space-xl); }
.share-voucher-redemption { display: grid; align-items: stretch; justify-content: stretch; gap: var(--space-lg); margin-top: var(--space-2xl); max-width: 38rem; padding: var(--space-lg); }
.share-voucher-redemption > header { display: grid; gap: var(--space-xs); margin: 0; text-align: left; }
.share-voucher-redemption > header h2, .share-voucher-redemption > header p { margin: 0; }
.share-voucher-redemption .share-scan-launcher { display: grid; gap: var(--space-xs); }
.share-voucher-redemption .share-scan-launcher button, .share-voucher-redemption .redeem-form { width: 100%; max-width: none; }
.share-voucher-redemption .share-voucher-or { display: flex; align-items: center; gap: var(--space-sm); margin: 0; color: var(--gray-500); font-size: var(--font-muted); }
.share-voucher-redemption .share-voucher-or::before, .share-voucher-redemption .share-voucher-or::after { flex: 1; height: 1px; background: var(--gray-200); content: ""; }

@media (max-width: 768px) {
  .app-layout--backoffice { display: block; }
  .app-layout--backoffice .sidebar { display: none; }
  .app-layout--backoffice .content { padding: var(--space-xl) var(--space-lg) calc(5.75rem + var(--safe-bottom)); }
  .app-layout--backoffice .mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + var(--safe-bottom));
    border-top: 1px solid var(--gray-200);
    background: var(--white);
    box-shadow: var(--shadow-md);
  }
  .mobile-nav a, .mobile-nav__more > summary { display: grid; place-items: center; min-height: 40px; border-radius: var(--radius-md); color: var(--gray-600); font-size: var(--font-muted); font-weight: 600; text-decoration: none; }
  .mobile-nav__more { min-width: 0; position: relative; }
  .mobile-nav__more > summary { cursor: pointer; list-style: none; }
  .mobile-nav__more > summary::-webkit-details-marker { display: none; }
  .mobile-nav a:hover, .mobile-nav__more > summary:hover { background: var(--primary-surface); color: var(--primary-dark); }
  .mobile-nav a:focus-visible, .mobile-nav__more > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -2px; }
  .mobile-nav a[aria-current="page"], .mobile-nav__more > summary[aria-current="page"] { background: var(--primary-light); color: var(--primary-dark); }
  .mobile-nav__more-menu { position: absolute; inset-inline-end: 0; inset-block-end: calc(100% + var(--space-sm)); display: grid; gap: var(--space-xs); min-width: max-content; padding: var(--space-sm); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-md); }
  .mobile-nav__more-menu a { justify-items: start; padding: 0 var(--space-sm); }
  .mobile-nav--admin { grid-template-columns: repeat(2, 1fr); }
  .mobile-action-bar { position: sticky; bottom: calc(var(--safe-bottom) + 4.5rem); z-index: 40; }
  .customer-preview-page .mobile-action-bar { position: static; }
}

/* ============================================================
   UI-02 · 三个母版页面
   上传/裁切、预览/等待解锁、门店今日概览
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.customer-upload-page .app-header,
.customer-upload-page .public-workspace,
.customer-preview-page .app-header,
.customer-preview-page .public-workspace {
  width: min(100%, 1120px);
}
.customer-upload-page .public-workspace,
.customer-preview-page .public-workspace {
  padding: var(--space-xl) 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.customer-task-heading { max-width: 46rem; margin-bottom: var(--space-xl); }
.customer-task-heading h1 { margin-bottom: var(--space-sm); }
.customer-task-heading > p:last-child { color: var(--gray-500); }
.photo-tips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.photo-tips li {
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: var(--font-muted);
  font-weight: 600;
}
.photo-tips li::before { content: "✓ "; color: var(--success); }

.customer-page-loading { display: grid; gap: var(--space-lg); }
.skeleton--title { width: min(22rem, 70%); min-height: 2.25rem; }
.skeleton--copy { width: min(34rem, 90%); }
.skeleton--artwork { min-height: 28rem; border-radius: var(--radius-xl); }
.skeleton--metric { min-height: 6rem; }
.skeleton--task { min-height: 5.5rem; margin-top: var(--space-md); }

.customer-upload-form { display: block; }
.customer-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .85fr);
  gap: var(--space-xl);
  align-items: start;
}
.customer-upload-artwork,
.customer-upload-controls,
.customer-crop-preview,
.customer-crop-preview canvas { min-width: 0; }
.customer-upload-stage {
  min-height: 32rem;
  padding: 0;
  overflow: hidden;
  border-style: dashed;
  background: var(--gray-50);
}
.upload-stage-trigger {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 32rem;
  padding: var(--space-xl);
  color: var(--gray-500);
  text-align: center;
  cursor: pointer;
}
.upload-stage-trigger strong { color: var(--primary-dark); font-size: 1.15rem; }
.upload-stage-trigger span:last-child { font-size: var(--font-muted); font-weight: 400; }
.upload-stage-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 1.75rem;
  font-weight: 400;
}
.customer-upload-page .customer-crop-preview {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--gray-100);
}
.customer-upload-page .customer-crop-preview canvas {
  width: 100%;
  margin: 0;
  border-radius: 0;
}
.crop-instruction {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  color: var(--gray-500);
  font-size: var(--font-muted);
  text-align: center;
}
.upload-stage-feedback {
  margin: var(--space-md) 0 0;
  min-height: 0;
}
.form-error.upload-stage-feedback {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--error);
  border-radius: var(--radius-lg);
  background: var(--error-surface);
  font-weight: 600;
}
.replace-image-button { margin-top: var(--space-sm); min-height: 40px; }
.customer-upload-controls {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--white);
}
.customer-upload-controls h2,
.consent-heading h2 { font-size: 1rem; }
.customer-upload-controls .crop-tools { gap: var(--space-md); }
.consent-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.consent-heading h2, .consent-heading p { margin: 0; }
.consent-heading p { color: var(--gray-500); font-size: var(--font-sm); }
.customer-upload-controls .consent-box { border-radius: var(--radius-lg); }
.privacy-details p { margin-top: var(--space-sm); color: var(--gray-500); font-size: var(--font-muted); }
.compact-state {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
}
.compact-state .state-icon { width: 1.75rem; height: 1.75rem; }
.compact-state p { margin: 0; }
.customer-primary-action { margin-top: 0; box-shadow: none; }
.public-store-details {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--gray-200);
}
.public-store-details dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
.public-store-details dt { color: var(--gray-500); font-size: var(--font-sm); }
.public-store-details dd { margin: var(--space-xs) 0 0; }
.retrieval-link { margin-top: var(--space-xl); text-align: center; }

.customer-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr);
  grid-template-areas:
    "heading ."
    "artwork panel";
  gap: var(--space-xl);
  align-items: stretch;
}
.customer-preview-artwork { display: contents; }
.customer-preview-artwork .customer-task-heading { grid-area: heading; }
.preview-artwork-stage {
  grid-area: artwork;
  min-height: 32rem;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--gray-100);
}
.preview-artwork-stage img { display: block; width: 100%; max-height: 44rem; object-fit: contain; }
.customer-preview-panel {
  grid-area: panel;
  display: grid;
  height: 100%;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--white);
}
.preview-status-heading { display: grid; justify-items: start; gap: var(--space-sm); }
.preview-status-heading .order-number { margin: 0; }
.preview-metrics .metric-card { background: var(--canvas-warm); }
.preview-next-step {
  padding: var(--space-lg);
  border-left: var(--space-xs) solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--primary-surface);
}
.preview-next-step h2 { font-size: 1rem; }
.preview-next-step p { margin: 0; color: var(--gray-600); }
.order-display, .visit-code-display {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--primary);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-align: center;
}
.order-display strong, .visit-code-display strong {
  color: var(--primary-dark);
  font-family: ui-monospace, monospace;
  font-size: clamp(1.5rem, 5vw, 2.15rem);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.order-display small, .visit-code-display small { color: var(--gray-500); }
.preview-primary-action {
  align-self: start;
  width: fit-content;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.preview-primary-action > * { flex: 0 1 auto; padding-inline: var(--space-xl); }
.preview-secondary-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.quiet-link { color: var(--gray-500); font-size: var(--font-muted); text-decoration: none; }
.quiet-link:hover { color: var(--primary-dark); text-decoration: underline; }

/* UI-03 · 顾客完整旅程：模板化的设置、等待、取图与正式图纸页面。 */
.customer-size-layout,
.generation-layout,
.pattern-layout {
  display: grid;
  gap: var(--space-xl);
}
.customer-size-layout { grid-template-columns: minmax(12rem, .6fr) minmax(0, 1fr); align-items: start; }
.size-artwork-summary {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--canvas-warm);
}
.size-artwork-summary img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--gray-100);
}
.size-artwork-summary p { margin: 0; font-weight: 700; color: var(--gray-700); }
.customer-size-form { min-width: 0; }
.effect-tuning {
  margin-top: var(--space-lg);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.effect-tuning summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 44px;
  padding: var(--space-md) var(--space-lg);
  color: var(--gray-700);
  cursor: pointer;
  font-weight: 700;
}
.effect-tuning summary small { color: var(--gray-500); font-size: var(--font-muted); font-weight: 400; }
.effect-tuning__content { display: grid; gap: var(--space-md); padding: 0 var(--space-lg) var(--space-lg); }
.generation-layout { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); align-items: stretch; }
.generation-artwork-stage { position: relative; min-height: 28rem; padding: 0; overflow: hidden; background: var(--gray-100); }
.generation-artwork-stage > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.92); }
.generation-artwork-stage::after { position: absolute; inset: 0; background: var(--surface-public); content: ""; opacity: .42; }
.generation-artwork-stage .generation-status { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.generation-panel {
  display: grid;
  align-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--white);
}
.generation-panel h1, .generation-panel p { margin: 0; }
.generation-panel .status-chip { justify-self: start; }
.retrieval-workspace { max-width: 36rem; }
.retrieval-card { display: grid; gap: var(--space-lg); padding: var(--space-xl); }
.retrieval-card h1, .retrieval-card p { margin: 0; }
.pattern-layout { max-width: 72rem; }
.pattern-viewer { display: grid; gap: var(--space-md); }
.pattern-canvas {
  display: grid;
  min-height: min(70vh, 48rem);
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--gray-100);
  cursor: grab;
  touch-action: none;
}
.pattern-canvas:active { cursor: grabbing; }
.pattern-canvas[data-dragging="true"] { cursor: grabbing; }
.pattern-canvas:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: var(--space-xs); }
.pattern-canvas img {
  display: block;
  max-width: 100%;
  max-height: min(70vh, 48rem);
  transform-origin: center;
  transition: transform var(--motion-fast) ease;
  user-select: none;
}
.pattern-drag-help { margin: 0; text-align: center; }
.pattern-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.pattern-controls button { min-width: 44px; }
.pattern-details { display: grid; gap: var(--space-lg); }

@media (max-width: 900px) {
  .customer-size-layout, .generation-layout { grid-template-columns: 1fr; }
  .size-artwork-summary { grid-template-columns: 6rem minmax(0, 1fr); align-items: center; }
  .size-artwork-summary img { width: 6rem; }
  .generation-artwork-stage { min-height: 18rem; }
}

@media (max-width: 480px) {
  .customer-size-page .public-workspace,
  .customer-generating-page .public-workspace,
  .customer-pattern-page .public-workspace,
  .customer-retrieval-page .public-workspace { padding-inline: 0; }
  .effect-tuning summary { align-items: start; flex-direction: column; }
  .generation-panel, .retrieval-card { padding: var(--space-lg); }
  .generation-artwork-stage { min-height: 16rem; }
  .pattern-canvas { min-height: 24rem; }
  .redeem-form { grid-template-columns: 1fr; }
  .redeem-form #code-help { grid-column: auto; }
  .redeem-form #redeem-btn { width: 100%; }
}

.store-dashboard { width: 100%; }
.dashboard-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.dashboard-header h1 { margin-bottom: var(--space-xs); }
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.dashboard-metric { display: grid; align-content: start; min-height: 8rem; background: var(--white); }
.dashboard-metric--priority { border-color: var(--primary); background: var(--primary-surface); }
.dashboard-metric--failure .dashboard-metric-value { color: var(--error); }
.dashboard-metric--credit { background: var(--canvas-warm); }
.dashboard-metric--credit.is-warning { border-color: var(--warning); background: var(--warning-surface); }
.dashboard-metric-value { font-size: 2rem; line-height: 1.2; color: var(--gray-700); }
.metric-note { align-self: end; color: var(--gray-500); font-size: var(--font-sm); }
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
.dashboard-primary, .dashboard-panel {
  padding: var(--space-xl);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--white);
}
.dashboard-secondary { display: grid; gap: var(--space-lg); }
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.section-heading h2, .section-heading p { margin: 0; }
.dashboard-task { align-items: stretch; }
.dashboard-task--primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-lg);
  border-color: var(--primary);
  background: var(--primary-surface);
}
.dashboard-task-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.dashboard-task-heading h3 { margin: 0; font-size: 1rem; }
.dashboard-task .task-meta { margin: var(--space-xs) 0 0; }
.dashboard-task-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.dashboard-alert { padding-inline: 0; border: 0; border-bottom: 1px solid var(--gray-100); border-radius: 0; }
.dashboard-alert:last-child { border-bottom: 0; }
.dashboard-quick-actions { display: grid; gap: var(--space-md); }
.dashboard-quick-actions .button { width: 100%; }
.dashboard-loading { margin-top: var(--space-md); }

/* UI-04 · 门店订单工作台 */
.store-page-header { margin-bottom: var(--space-xl); }
.store-orders-workspace, .store-order-workspace { width: 100%; }
.store-list-loading, .store-order-loading { display: grid; gap: var(--space-md); }
.store-orders-table-wrap {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--white);
}
.store-orders-table { width: 100%; border-collapse: collapse; }
.store-orders-table th, .store-orders-table td {
  padding: var(--space-md);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-100);
}
.store-orders-table th { color: var(--gray-500); font-size: var(--font-sm); font-weight: 600; }
.store-orders-table tbody tr:last-child td { border-bottom: 0; }
.store-orders-table tbody tr:hover { background: var(--canvas-warm); }
.order-list-thumb, .order-card-thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--gray-500);
  background: var(--gray-100);
  font-size: var(--font-muted);
}
.order-list-thumb { width: 3rem; height: 3rem; border-radius: var(--radius-md); }
.order-card-thumb { width: 4.5rem; height: 4.5rem; border-radius: var(--radius-lg); }
.order-list-thumb img, .order-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.store-orders-cards { display: none; gap: var(--space-md); }
.orders-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-lg); }
.orders-pagination label { display: flex; align-items: center; gap: var(--space-sm); margin: 0; color: var(--gray-600); }
.orders-pagination select { min-height: 2.5rem; width: auto; }
.orders-pagination p { margin: 0; color: var(--gray-500); font-size: var(--font-sm); }
.orders-pagination-actions { display: flex; gap: var(--space-sm); margin-left: auto; }
.store-order-card { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.store-order-card-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-md); }
.store-order-card-main .task-meta { margin: var(--space-xs) 0 0; }
.store-order-card-status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.store-order-card > .task-meta { margin: 0; }
.store-order-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, .9fr); gap: var(--space-xl); align-items: stretch; }
.store-order-artwork, .store-order-status-panel, .store-order-specs, .store-unlock-panel, .store-making-panel {
  padding: var(--space-xl);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--white);
}
.store-order-artwork { min-width: 0; }
.store-artwork-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.store-artwork-frame { display: grid; gap: var(--space-sm); margin: 0; color: var(--gray-500); font-size: var(--font-sm); }
.store-artwork-frame img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--radius-lg); background: var(--canvas-warm); }
.compact-empty { min-height: 12rem; grid-column: 1 / -1; }
.store-order-status-panel { display: grid; align-content: start; gap: var(--space-md); background: var(--canvas-warm); }
.store-order-status-panel h2 { margin: 0; }
.store-order-next-step { margin: 0; color: var(--gray-600); }
.store-order-facts { display: grid; gap: var(--space-md); margin: var(--space-sm) 0 0; }
.store-order-facts div { display: grid; gap: var(--space-xs); }
.store-order-facts dt { color: var(--gray-500); font-size: var(--font-sm); }
.store-order-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.store-order-specs, .store-unlock-panel, .store-making-panel { margin-top: var(--space-xl); }
.store-unlock-panel { display: grid; gap: var(--space-md); border-color: var(--primary); background: var(--primary-surface); }
.store-unlock-panel h2, .store-making-panel h2 { margin: 0; }
.store-unlock-panel > p, .store-making-panel > p { margin: 0; }
.store-unlock-panel form { display: grid; gap: var(--space-md); max-width: 36rem; }
.store-unlock-panel fieldset { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.store-unlock-panel legend { padding-inline: var(--space-xs); color: var(--gray-600); font-size: var(--font-sm); }
.store-unlock-panel fieldset label { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; font-size: var(--font-sm); }
.store-unlock-panel fieldset input { width: 1rem; height: 1rem; min-height: 1rem; margin: 0; }
.making-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.making-actions .link-button { margin-left: auto; }

@media (max-width: 900px) {
  .customer-upload-grid, .customer-preview-layout, .dashboard-grid { grid-template-columns: 1fr; }
  .customer-preview-layout { grid-template-areas: "heading" "artwork" "panel"; }
  .customer-upload-stage, .upload-stage-trigger, .preview-artwork-stage { min-height: 24rem; }
  .customer-upload-controls, .customer-preview-panel { padding: var(--space-lg); }
  .public-store-details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric--credit { grid-column: 1 / -1; min-height: auto; }
  .store-order-hero { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .customer-upload-page .public-workspace,
  .customer-preview-page .public-workspace { padding: var(--space-md) 0; }
  .customer-task-heading { margin-bottom: var(--space-lg); }
  .customer-task-heading h1 { font-size: 1.45rem; }
  .customer-upload-stage, .upload-stage-trigger, .preview-artwork-stage { min-height: 21rem; }
  .customer-upload-controls, .customer-preview-panel { padding: var(--space-md); }
  .customer-primary-action, .preview-primary-action { position: sticky; bottom: calc(var(--safe-bottom) + var(--space-sm)); z-index: 50; }
  .public-store-details dl { grid-template-columns: 1fr; }
  .preview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-secondary-actions { justify-content: center; }
  .dashboard-header { align-items: center; }
  .dashboard-header h1 { font-size: 1.6rem; }
  .dashboard-metrics { gap: var(--space-sm); }
  .dashboard-metric { min-height: 7rem; padding: var(--space-md); }
  .dashboard-metric--credit { min-height: auto; }
  .dashboard-primary, .dashboard-panel { padding: var(--space-lg); }
  .dashboard-task, .dashboard-task--primary { display: grid; grid-template-columns: 1fr; }
  .dashboard-task-actions .button, .dashboard-task-actions button { width: 100%; }
  .section-heading { align-items: end; }
  .store-page-header { align-items: start; flex-direction: column; }
  .store-page-header .button { width: 100%; }
  .store-orders-table-wrap { display: none; }
  .store-orders-cards { display: grid; }
  .orders-pagination { align-items: start; flex-direction: column; }
  .orders-pagination-actions { width: 100%; margin-left: 0; }
  .orders-pagination-actions button { flex: 1; }
  .store-order-artwork, .store-order-status-panel, .store-order-specs, .store-unlock-panel, .store-making-panel { padding: var(--space-lg); }
  .store-artwork-pair { grid-template-columns: 1fr; }
  .store-order-specs .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .making-actions { display: grid; grid-template-columns: 1fr; }
  .making-actions .link-button { margin-left: 0; justify-self: start; }
}

/* 保证 HTML hidden 语义不会被组件 display 规则覆盖。 */
[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* UI-07C · BeadPilot 顾客端：仅覆盖顾客创作旅程，不影响门店工作台。 */
.public-page {
  --customer-coral: #E96963;
  --customer-coral-dark: #C9504B;
  --customer-coral-soft: #FFF0ED;
  --customer-canvas: #FFF9F6;
  --customer-paper: #FFFFFF;
  --customer-ink: #302E38;
  --customer-copy: #6E6974;
  --customer-line: #E8DFDC;
  --customer-mint: #56A99A;
  color: var(--customer-ink);
  background: var(--customer-canvas);
}
.public-page a { color: var(--customer-coral-dark); }
/* A bare public button is safe and neutral until it receives a semantic class. */
.public-page button {
  min-height: 44px;
  border: 1px solid var(--customer-line);
  background: var(--customer-paper);
  color: var(--customer-coral-dark);
  box-shadow: none;
}
.public-page button.link-button {
  min-height: auto;
  border: 0;
  background: transparent;
  color: var(--customer-coral-dark);
  box-shadow: none;
}
.public-page button.primary, .public-page .button.primary {
  min-height: 48px;
  border-color: var(--customer-coral);
  background: var(--customer-coral);
  box-shadow: 0 8px 18px rgb(233 105 99 / 18%);
  font-weight: 700;
  color: #fff;
}
.public-page button.primary:hover, .public-page .button.primary:hover { border-color: var(--customer-coral-dark); background: var(--customer-coral-dark); }
.public-page button.primary:disabled, .public-page .button.primary[aria-disabled="true"] { border-color: #E9C9C4; background: #E9C9C4; box-shadow: none; color: #fff; }
.public-page .button.secondary, .public-page button.secondary {
  min-height: 44px;
  border-color: var(--customer-line);
  background: var(--customer-paper);
  color: var(--customer-coral-dark);
  box-shadow: none;
}
.public-page .button.secondary:hover, .public-page button.secondary:hover {
  border-color: var(--customer-coral);
  background: var(--customer-coral-soft);
  color: var(--customer-coral-dark);
}
.public-page .button.secondary[aria-expanded="true"], .public-page button.secondary[aria-expanded="true"] { color: var(--customer-coral-dark); }
.public-page .button.secondary:active, .public-page button.secondary:active {
  background: #FFE2DD;
  color: var(--customer-coral-dark);
}
.public-page .button.secondary:disabled, .public-page button.secondary:disabled {
  border-color: var(--customer-line);
  background: var(--customer-paper);
  color: #A98F8A;
  box-shadow: none;
}
.public-page button.primary:focus-visible, .public-page .button.primary:focus-visible,
.public-page button.secondary:focus-visible, .public-page .button.secondary:focus-visible,
.public-page .link-button:focus-visible {
  outline: 3px solid rgb(233 105 99 / 45%);
  outline-offset: 2px;
}
.public-page .app-header { width: min(100% - 32px, 1120px); padding-block: 20px 16px; }
.public-brand-logo { display: block; width: 118px; height: auto; }
.public-page .stepper { color: #A49BA4; font-size: .75rem; }
.public-page .stepper .step[aria-current] { color: var(--customer-coral-dark); }
.public-page .stepper .step[aria-current] .step-num { background: var(--customer-coral); }
.public-page .stepper .step-sep { color: var(--customer-line); }
.public-page .customer-task-heading { max-width: 38rem; }
.public-page .customer-task-heading .eyebrow, .public-page .generation-panel .eyebrow { color: var(--customer-coral-dark); font-weight: 700; letter-spacing: .06em; }
.public-page .customer-task-heading h1, .public-page .generation-panel h1 { color: var(--customer-ink); letter-spacing: -.035em; }
.public-page .customer-task-heading > p:last-child, .public-page .generation-panel > p { color: var(--customer-copy); }
.customer-entry-promise { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0 0; padding: 0; color: var(--customer-copy); list-style: none; font-size: .82rem; }
.customer-entry-promise li { display: inline-flex; align-items: center; gap: 6px; }
.customer-entry-promise span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--customer-coral-soft); color: var(--customer-coral-dark); font-size: .7rem; font-weight: 800; }
.public-page .photo-tips li { background: #FFF4F1; color: #87504C; }
.public-page .photo-tips li::before { color: var(--customer-mint); }
.public-page .customer-upload-stage, .public-page .preview-artwork-stage, .public-page .generation-artwork-stage {
  border-color: var(--customer-line);
  border-radius: 24px;
  background: #F8F0ED;
}
.public-page .upload-stage-trigger { min-height: 30rem; background: radial-gradient(circle at 50% 43%, #FFFDFC 0 72px, transparent 73px); }
.public-page .upload-stage-trigger::before { width: 110px; height: 110px; border: 1px solid #F0D7D1; border-radius: 30px; background: linear-gradient(135deg, #FDE7E1, #F7EEE7); content: ""; }
.public-page .upload-stage-icon { position: absolute; width: 50px; height: 50px; margin-top: -26px; background: var(--customer-coral); color: #fff; box-shadow: 0 8px 16px rgb(233 105 99 / 22%); }
.public-page .upload-stage-trigger strong { margin-top: 4px; color: var(--customer-ink); }
.public-page .customer-upload-controls, .public-page .customer-preview-panel, .public-page .generation-panel { border-color: var(--customer-line); border-radius: 24px; background: var(--customer-paper); box-shadow: 0 12px 32px rgb(77 52 48 / 5%); }
.public-page .customer-upload-controls { padding: 24px; }
.public-page .customer-upload-controls .consent-box { border: 1px solid var(--customer-line); background: #FFFCFA; }
.public-page .consent-heading p, .public-page .privacy-details p { color: var(--customer-copy); }
.public-page .crop-instruction { color: var(--customer-copy); background: #FFFCFA; }
.public-page .public-store-details { border-color: var(--customer-line); color: var(--customer-copy); }
.public-page .public-store-details dt { color: #938B92; }
.public-page .size-artwork-summary { border-color: var(--customer-line); background: #FFF4F1; }
.public-page .size-artwork-summary p { color: var(--customer-ink); }
.public-page .customer-size-form .option-block, .public-page .effect-tuning { border-color: var(--customer-line); background: var(--customer-paper); }
.public-page .customer-size-form .option-list > label, .public-page .customer-size-form .option-list > .card, .public-page .customer-size-form .option-list .size-option__choice { border-color: var(--customer-line); border-radius: 16px; }
.public-page .customer-size-form .option-list > label:has(input:checked), .public-page .customer-size-form .option-list > .card:has(input:checked), .public-page .customer-size-form .option-list .size-option:has(input:checked) .size-option__choice { border-color: var(--customer-coral); background: var(--customer-coral-soft); box-shadow: inset 0 0 0 1px var(--customer-coral); }
.public-page .effect-tuning summary { color: var(--customer-ink); }
.public-page .generation-artwork-stage::after { background: #FFF9F6; opacity: .35; }
.public-page .generation-status { border-color: #F8D8D2; border-top-color: var(--customer-coral); color: var(--customer-coral-dark); background: rgb(255 255 255 / 85%); box-shadow: 0 8px 24px rgb(77 52 48 / 12%); }
.public-page .generation-panel { padding: 32px; }
.public-page .status-chip { border-color: #CFE5DE; background: #F0F8F5; color: #287A5C; }
.public-page .preview-mode-tabs { grid-area: heading; display: flex; flex-wrap: wrap; gap: 6px; margin: -12px 0 2px; }
.public-page .preview-mode-tabs span { padding: 7px 10px; border: 1px solid var(--customer-line); border-radius: 999px; color: var(--customer-copy); background: var(--customer-paper); font-size: .78rem; font-weight: 650; }
.public-page .preview-mode-tabs .is-active { border-color: #F3B8B1; background: var(--customer-coral-soft); color: var(--customer-coral-dark); }
.public-page .preview-mode-tabs .is-locked { color: #948B91; }
.public-page .preview-mode-tabs b { margin-left: 3px; font-size: .68rem; font-weight: 600; }
.public-page .preview-artwork-stage { box-shadow: 0 12px 32px rgb(77 52 48 / 5%); }
.public-page .preview-metrics .metric-card { border: 1px solid var(--customer-line); border-radius: 16px; background: #FFFCFA; }
.public-page .preview-next-step { border-left-color: var(--customer-coral); background: var(--customer-coral-soft); }
.public-page .preview-next-step p, .public-page .order-number, .public-page .order-display small, .public-page .visit-code-display small { color: var(--customer-copy); }
.public-page .order-display, .public-page .visit-code-display { border-color: #F3B8B1; }
.public-page .order-display strong, .public-page .visit-code-display strong { color: var(--customer-coral-dark); }

@media (max-width: 900px) {
  .public-page .app-header, .customer-upload-page .app-header, .customer-preview-page .app-header { width: min(100% - 32px, 680px); }
  .public-page .customer-upload-stage, .public-page .upload-stage-trigger, .public-page .preview-artwork-stage { min-height: min(76vw, 31rem); }
}
@media (max-width: 480px) {
  /* standalone content already reserves 16px; 抵消它以保证画布两侧各 16px。 */
  .public-page { margin: -16px; padding: 0 16px calc(104px + env(safe-area-inset-bottom)); }
  .public-page .app-header { width: 100%; padding: 14px 0 12px; }
  .public-brand-logo { width: 106px; }
  .public-page .stepper { gap: 3px; font-size: .68rem; }
  .public-page .stepper .step-label-text { display: none; }
  .public-page .stepper .step[aria-current] .step-label-text { display: inline; }
  .customer-upload-page .public-workspace, .customer-preview-page .public-workspace, .customer-size-page .public-workspace, .customer-generating-page .public-workspace { padding: 12px 0; }
  .public-page .customer-task-heading { margin-bottom: 20px; }
  .public-page .customer-task-heading h1, .public-page .generation-panel h1 { font-size: clamp(1.55rem, 7vw, 1.9rem); line-height: 1.22; }
  .customer-entry-promise { gap: 8px 12px; margin-top: 14px; font-size: .76rem; }
  .public-page .customer-upload-stage, .public-page .upload-stage-trigger, .public-page .preview-artwork-stage { min-height: calc(100vw - 32px); border-radius: 20px; }
  .public-page .upload-stage-trigger { padding: 20px; }
  .public-page .customer-upload-controls, .public-page .customer-preview-panel, .public-page .generation-panel { padding: 20px; border-radius: 20px; }
  .public-page .customer-primary-action, .public-page .preview-primary-action { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50; width: 100%; padding: 8px; border: 1px solid var(--customer-line); border-radius: 16px; background: rgb(255 255 255 / 93%); box-shadow: 0 8px 24px rgb(77 52 48 / 12%); backdrop-filter: blur(10px); }
  .public-page .customer-primary-action button, .public-page .preview-primary-action > * { width: 100%; }
  .public-page .preview-mode-tabs { margin: -10px 0 0; }
  .public-page .preview-mode-tabs .is-locked { width: 100%; }
  .public-page .generation-artwork-stage { min-height: calc(100vw - 32px); }
  .public-page .generation-panel { margin-top: 16px; }
}

/* UI-07C-R final cascade: kept last so legacy desktop customer CSS cannot override H5. */
.content:has(.customer-h5-page) { max-width: none; padding: 0; }
.customer-h5-page { min-height: 100vh; padding: 0 16px calc(104px + env(safe-area-inset-bottom)); background: #FFF9F6; }
.customer-h5-page .h5-topbar { display:flex; align-items:center; justify-content:space-between; width:min(100%,390px); min-height:68px; margin:0 auto; padding:16px 0 12px; }
.customer-h5-page .public-brand-logo { width:104px; }.h5-store-chip,.h5-progress{color:#776F78;font-size:.72rem;font-weight:700}.h5-progress{color:#E96963;letter-spacing:.06em}.h5-store-chip{max-width:164px;overflow:hidden;padding:7px 10px;border:1px solid #E8DFDC;border-radius:999px;background:#fff;text-overflow:ellipsis;white-space:nowrap}
.customer-h5-page .public-workspace,.customer-upload-page .public-workspace,.customer-preview-page .public-workspace { width:min(100%,390px); margin:0 auto; padding:8px 0 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.customer-h5-page .customer-task-heading { max-width:none; margin:0 0 18px; }.customer-h5-page .customer-task-heading .eyebrow{margin-bottom:8px;color:#E96963;font-size:.75rem;letter-spacing:.04em}.customer-h5-page .customer-task-heading h1,.customer-h5-page .generation-panel h1{margin-bottom:10px;color:#302E38;font-size:clamp(1.72rem,8vw,2.05rem);line-height:1.18;letter-spacing:-.055em}.customer-h5-page .customer-task-heading>p:last-child,.customer-h5-page .generation-panel>p{margin:0;color:#6E6974;font-size:.92rem;line-height:1.65}.customer-h5-page .photo-tips{display:none}
.customer-h5-page .customer-entry-promise{display:grid;gap:9px;margin:17px 0 20px;font-size:.8rem}.customer-h5-page .customer-entry-promise li{gap:9px}.customer-h5-page .customer-entry-promise span{width:22px;height:22px;color:#E96963;background:#FFF0ED;font-size:.62rem}
.customer-h5-page .customer-upload-grid,.customer-h5-page .customer-preview-layout,.customer-h5-page .customer-size-layout,.customer-h5-page .generation-layout{display:block}.customer-h5-page .customer-upload-stage,.customer-h5-page .upload-stage-trigger,.customer-h5-page .preview-artwork-stage,.customer-h5-page .generation-artwork-stage{min-height:318px;border:1px solid #E8DFDC;border-radius:22px;background:#F7EFEB}.customer-h5-page .upload-stage-trigger{min-height:318px;background:radial-gradient(circle at 50% 42%,#FFFDFB 0 74px,transparent 75px)}.customer-h5-page .upload-stage-trigger::before{width:112px;height:112px;border-radius:30px}.customer-h5-page .upload-stage-trigger strong{font-size:1.08rem}
.customer-h5-page .customer-upload-controls{display:block;margin-top:14px;padding:0;border:0;background:transparent;box-shadow:none}.customer-h5-page .customer-upload-controls .crop-tools,.customer-h5-page .consent-section{margin-top:14px;padding:14px;border:1px solid #E8DFDC;border-radius:16px;background:#fff}.customer-h5-page .consent-heading{margin-bottom:10px}.customer-h5-page .consent-heading h2{font-size:.92rem}.customer-h5-page .consent-box{gap:0}.customer-h5-page .consent-item{padding:10px 0;font-size:.78rem}.customer-h5-page .privacy-details{font-size:.76rem}
.customer-h5-page .customer-primary-action,.customer-h5-page .preview-primary-action{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;width:100%;margin:12px 0 0;padding:8px;border:1px solid #E8DFDC;border-radius:16px;background:rgb(255 255 255 / 94%);box-shadow:0 8px 24px rgb(77 52 48 / 12%);backdrop-filter:blur(10px)}.customer-h5-page .customer-primary-action button,.customer-h5-page .preview-primary-action>*{width:100%;min-height:48px}.customer-h5-page .public-store-details{margin-top:32px;padding-top:20px}.customer-h5-page .public-store-details dl{grid-template-columns:1fr;gap:8px}.customer-h5-page .retrieval-link{margin-top:20px}
.customer-h5-page .size-artwork-summary{grid-template-columns:80px minmax(0,1fr);align-items:center;gap:12px;margin-bottom:20px;padding:10px;border-color:#E8DFDC;border-radius:16px;background:#FFF4F1}.customer-h5-page .size-artwork-summary img{width:80px;border-radius:12px}.customer-h5-page .size-artwork-summary p{margin:0}.customer-h5-page .customer-size-form .order-number{margin:16px 0;font-size:.75rem}.customer-h5-page .customer-size-form .option-block{margin:0;padding:12px;border:1px solid #E8DFDC;border-radius:16px;background:#fff}.customer-h5-page .customer-size-form .option-list{margin:0}.customer-h5-page .customer-size-form .option-list .cell{padding:14px 12px;border-radius:13px}.customer-h5-page .effect-tuning{margin-top:14px;border-color:#E8DFDC;border-radius:16px}.customer-h5-page .effect-tuning summary{min-height:52px;padding:14px}
.customer-h5-page .generation-artwork-stage{min-height:300px}.customer-h5-page .generation-panel{display:grid;margin-top:16px;padding:20px;border-color:#E8DFDC;border-radius:20px}.customer-h5-page .generation-panel h1{font-size:1.56rem}.customer-h5-page .generation-panel .button-row{display:grid;grid-template-columns:1fr}
.customer-h5-page .customer-preview-artwork{display:block}.customer-h5-page .preview-mode-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 14px;padding:4px;border-radius:12px;background:#F0EAE8}.customer-h5-page .preview-mode-tabs button,.customer-h5-page .preview-mode-tabs span{display:flex;align-items:center;justify-content:center;min-height:36px;padding:5px 4px;border:0;border-radius:9px;color:#827983;background:transparent;box-shadow:none;font-size:.75rem;font-weight:700;white-space:nowrap}.customer-h5-page .preview-mode-tabs button.is-active{color:#302E38;background:#fff;box-shadow:0 1px 2px rgb(77 52 48 / 8%)}.customer-h5-page .preview-mode-tabs .is-locked{width:auto;color:#A0989F}.customer-h5-page .preview-mode-tabs b{margin-left:3px;font-size:.8rem}.customer-h5-page .preview-artwork-stage{min-height:300px;height:auto;padding:0;border-radius:20px;background:#fff}.customer-h5-page .preview-artwork-stage img{width:100%;min-height:300px;max-height:none;aspect-ratio:1/.86;object-fit:contain}.customer-h5-page .customer-preview-panel{display:block;height:auto;margin-top:14px;padding:0;border:0;background:transparent;box-shadow:none}.customer-h5-page .preview-status-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.customer-h5-page .preview-status-heading .order-number{font-size:.7rem}.customer-h5-page .preview-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.customer-h5-page .preview-metrics .metric-card{min-height:72px;padding:11px;border-color:#E8DFDC;border-radius:13px;background:#fff}.customer-h5-page .metric-label{font-size:.68rem}.customer-h5-page .metric-value{margin-top:5px;color:#302E38;font-size:.86rem}.customer-h5-page .preview-next-step{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:14px;padding:14px;border-left:0;border-radius:15px;background:#FFF0ED}.customer-h5-page .preview-next-step::before{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;background:#E96963;content:"✦";font-size:.8rem}.customer-h5-page .preview-next-step h2{grid-column:2;margin:0;font-size:.9rem}.customer-h5-page .preview-next-step p,.customer-h5-page .preview-next-step .order-display,.customer-h5-page .preview-next-step .visit-code-display{grid-column:2}.customer-h5-page .preview-next-step p{margin:-8px 0 0;font-size:.78rem}.customer-h5-page .preview-secondary-actions{margin-top:18px}
@media (min-width:769px){.customer-h5-page{padding-top:10px}}@media(max-width:359px){.customer-h5-page{padding-inline:12px}.customer-h5-page .customer-task-heading h1{font-size:1.62rem}}

/* 顾客 H5 已自行保留两侧 16px；不要再以负边距抵消，以免内容贴边或被裁切。 */
@media (max-width:480px){.public-page.customer-h5-page{margin:0}}
.customer-h5-page .upload-action-feedback{margin:8px 4px 2px;min-height:0;text-align:left;font-size:.76rem;line-height:1.45}

/* DEV-REF-05 · one original-order view may reveal its two separate vouchers. */
.share-voucher-entry,.share-voucher-pair{margin-top:18px}.share-voucher-entry,.share-voucher-card{padding:16px;border:1px solid #E8DFDC;border-radius:16px;background:#fff}.share-voucher-entry h2,.share-voucher-card h2{margin:0 0 6px;color:#302E38;font-size:1rem}.share-voucher-entry p:not(.eyebrow),.share-voucher-card p{color:#6E6974;font-size:.78rem}.share-voucher-entry button{width:100%;margin-top:6px}.share-voucher-pair{display:grid;gap:12px}.share-voucher-card{display:grid;justify-items:center;text-align:center}.share-voucher-card .eyebrow{justify-self:start}.share-voucher-qr{display:block;width:min(100%,240px);height:auto;margin:8px auto;border:8px solid #fff;image-rendering:auto}.share-voucher-expiry{margin:2px 0 10px}.share-voucher-card button{width:100%}
/* These components define display values after the generic [hidden] rule. */
.share-voucher-entry[hidden],.share-voucher-pair[hidden],.share-scan-session[hidden],.share-scan-recognized[hidden]{display:none}

/* DEV-REF-05C · the phone is a camera-only helper; final redemption stays on PC. */
.share-scan-launcher,.share-scan-session,.share-scan-recognized{width:100%;margin:12px 0;padding:14px;border:1px solid #E8DFDC;border-radius:14px;background:#FFF9F6;text-align:left}.share-scan-launcher p,.share-scan-session p,.share-scan-recognized p{margin:8px 0 0}.share-scan-session{display:grid;justify-items:center;text-align:center}.share-scan-session h3,.share-scan-recognized h3{margin:0;color:#302E38;font-size:.95rem}.share-scan-session img{width:min(100%,260px);margin:10px 0;border:8px solid #fff}.share-scan-status{min-height:1.4em}.share-scan-recognized{border-color:#9ED7BA;background:#F0FAF4}.share-voucher-or{width:100%;margin:4px 0!important;text-align:center}.share-scan-page{min-height:100vh;padding:28px 16px;background:#FFF9F6}.share-scan-workspace{width:min(100%,390px);margin:0 auto}.share-scan-workspace h1{margin:4px 0 10px;color:#302E38;font-size:clamp(1.7rem,8vw,2.1rem);line-height:1.18}.share-scan-intro,.share-scan-fallback{color:#6E6974;line-height:1.6}.share-scan-upload{margin:22px 0 14px}.share-scan-page button{width:100%;min-height:52px}.share-scan-feedback{min-height:1.5em;margin:12px 0 0;color:#6E6974;text-align:center}.share-scan-feedback[data-state="success"]{color:#287A5C;font-weight:700}.share-scan-feedback[data-state="error"]{color:#B6403B}.share-scan-fallback{margin-top:20px;font-size:.8rem;text-align:center}.share-scan-expired{margin-top:18vh;padding:24px;border:1px solid #E8DFDC;border-radius:20px;background:#fff;text-align:center}.share-scan-expired h1{font-size:1.45rem}
.customer-h5-page .preview-next-step .order-display{justify-self:center;width:min(100%,300px);margin-inline:auto}

/* UX-03B-HF1: this is a disclosure control, not the customer primary CTA. */
.customer-h5-page .customer-size-form .size-options-toggle.link-button {
  align-self: center;
  min-height: 36px;
  margin: 4px 0;
  padding: 8px 10px;
  border: 1px solid #E8DFDC;
  border-radius: 999px;
  color: var(--customer-coral-dark);
  background: #FFFDFB;
  box-shadow: none;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.customer-h5-page .customer-size-form .size-options-toggle.link-button:hover { background: #FFF0ED; }
.customer-h5-page .customer-size-form .size-options-other[hidden] { display: none; }

/* 已交付才启用正式图纸 Tab；主操作使用固定白字以保证对比度。 */
.customer-h5-page .preview-mode-tabs a { text-decoration: none; }
.customer-h5-page .preview-mode-tabs a,
.customer-h5-page .preview-mode-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 5px 4px;
  border: 0;
  border-radius: 9px;
  color: #827983;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.customer-h5-page .preview-mode-tabs .is-locked { pointer-events: none; }
.customer-h5-page .preview-mode-tabs .is-available { color: #302E38; background: #fff; box-shadow: 0 1px 2px rgb(77 52 48 / 8%); }
.customer-h5-page #preview-pattern-link,
.customer-pattern-page #pattern-download { color: #fff; }

/* UI-07D · 单板正式图纸中心。复用顾客 H5 画布，不引入 UI-08 分板结构。 */
.content:has(.customer-pattern-page) { max-width: none; padding: 0; }
.customer-pattern-page { min-height: 100vh; padding: 0 16px calc(104px + env(safe-area-inset-bottom)); background: #FFF9F6; }
.customer-pattern-page .h5-topbar,.customer-pattern-page .customer-pattern-workspace { width: min(100%,390px); margin-inline: auto; }
.customer-pattern-page .h5-topbar { display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:16px 0 12px; }
.pattern-back { min-height:44px; display:inline-flex; align-items:center; color:#302E38!important; font-size:.82rem; font-weight:700; text-decoration:none; }.success-pill{padding:6px 10px;border-radius:999px;background:#E8F6EE;color:#287A5C;font-size:.72rem;font-weight:700}
.customer-pattern-page .customer-pattern-workspace { padding-top:8px; }.customer-pattern-page .customer-task-heading{margin-bottom:18px}.customer-pattern-page .customer-task-heading .eyebrow{margin-bottom:8px;color:#E96963;font-size:.75rem;font-weight:700;letter-spacing:.04em}.customer-pattern-page .customer-task-heading h1{margin:0 0 8px;color:#302E38;font-size:clamp(1.62rem,7vw,1.95rem);line-height:1.18;letter-spacing:-.05em}.customer-pattern-page .customer-task-heading>p:last-child{margin:0;color:#6E6974;font-size:.78rem}
.customer-pattern-page .pattern-mode-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 14px;padding:4px;border-radius:12px;background:#F0EAE8}.customer-pattern-page .pattern-mode-tabs button{display:flex;align-items:center;justify-content:center;min-height:36px;padding:5px 3px;border:0;border-radius:9px;background:transparent;color:#827983;font:inherit;font-size:.75rem;font-weight:700;white-space:nowrap;box-shadow:none}.customer-pattern-page .pattern-mode-tabs button.is-active{background:#fff;color:#302E38;box-shadow:0 1px 2px rgb(77 52 48 / 8%)}
.pattern-delivery-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:11px 12px;border:1px solid #E8DFDC;border-radius:14px;background:#fff}.pattern-brand-lockup{display:flex;align-items:center;min-width:0;gap:9px}.pattern-brand-lockup img{width:28px;height:28px;flex:0 0 auto}.pattern-brand-lockup div{display:grid;min-width:0;gap:1px}.pattern-brand-lockup b{color:#302E38;font-size:.82rem;line-height:1.1}.pattern-brand-lockup small{overflow:hidden;color:#6E6974;font-size:.68rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.pattern-delivery-brand>p{max-width:52%;margin:0;color:#6E6974;font-size:.67rem;line-height:1.4;text-align:right}
.pattern-artwork-panel{overflow:hidden;border:1px solid #D8D0CC;border-radius:10px;background:#fff}.pattern-image-stage{margin:0;min-height:300px}.pattern-image-stage img{display:block;width:100%;min-height:300px;object-fit:contain}.pattern-grid-stage{padding:8px;background:#fff}.pattern-grid-viewport{position:relative;overflow:hidden;height:330px;touch-action:none;cursor:grab;background:#fff}.pattern-grid-viewport[data-dragging="true"]{cursor:grabbing}.pattern-grid-viewport:focus-visible{outline:3px solid #E96963;outline-offset:-3px}.customer-pattern-page .pattern-grid{--pattern-columns:1;--pattern-cell-size:22px;display:grid;grid-template-columns:repeat(var(--pattern-columns),var(--pattern-cell-size))!important;grid-auto-rows:var(--pattern-cell-size)!important;width:max-content;min-width:0;transform-origin:top left;transition:transform 100ms ease}.customer-pattern-page .pattern-cell{display:grid;place-items:center;width:var(--pattern-cell-size);height:var(--pattern-cell-size);min-width:var(--pattern-cell-size);min-height:var(--pattern-cell-size);border-right:1px solid #E8DFDC;border-bottom:1px solid #E8DFDC;background:#fff;color:#302E38;font-family:"Source Code Pro","SFMono-Regular",Consolas,monospace;font-size:7px;font-weight:700;line-height:1;text-align:center}.customer-pattern-page .pattern-cell.is-major-column{border-right:2px solid #9E9089}.customer-pattern-page .pattern-cell.is-major-row{border-bottom:2px solid #9E9089}.pattern-cell.is-transparent{background:#FFFDFB;color:transparent}.pattern-cell.is-dimmed{opacity:.22}.pattern-drag-help{margin:8px 0 0;color:#6E6974;text-align:center;font-size:.7rem}.pattern-tool-row{display:flex;justify-content:center;gap:5px;margin-top:10px}.customer-pattern-page .pattern-tool-row button{min-width:38px;height:36px;padding:0 9px;border:1px solid #E8DFDC;border-radius:10px;background:#fff;color:#302E38;font:inherit;font-size:.72rem;font-weight:700;box-shadow:none}.customer-pattern-page .pattern-tool-row button.is-selected{border-color:#E96963;background:#FFF0ED;color:#C9504B}.pattern-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.pattern-metrics .metric-card{min-height:68px;padding:10px;border:1px solid #E8DFDC;border-radius:13px;background:#fff}.pattern-materials{overflow:hidden;border:1px solid #E8DFDC;border-radius:15px;background:#fff}.customer-pattern-page .pattern-materials-heading{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:10px 12px;border:0;background:#fff;color:#302E38;text-align:left;box-shadow:none}.pattern-materials-heading span:first-child{display:grid;gap:3px}.pattern-materials-heading b{font-size:.85rem}.pattern-materials-heading small{color:#6E6974;font-size:.68rem}.pattern-material-list{display:grid;gap:7px;padding:0 12px 12px}.pattern-material-list[hidden]{display:none}.customer-pattern-page .pattern-material-item{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:34px;padding:4px;border:0;border-radius:8px;background:transparent;color:#302E38;text-align:left;box-shadow:none}.customer-pattern-page .pattern-material-item[aria-pressed="true"]{background:#FFF0ED;color:#C9504B}.pattern-material-item i{width:20px;height:20px;border:1px solid rgb(48 46 56 / 14%);border-radius:6px}.pattern-material-item b{font-family:"Source Code Pro","SFMono-Regular",Consolas,monospace;font-size:.78rem}.pattern-material-item span{color:#6E6974;font-size:.74rem}.pattern-primary-action{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;margin-top:12px;padding:8px;border:1px solid #E8DFDC;border-radius:16px;background:rgb(255 255 255 / 94%);box-shadow:0 8px 24px rgb(77 52 48 / 12%);backdrop-filter:blur(10px)}.pattern-primary-action .button{width:100%;min-height:48px}
.pattern-save-image-stage{margin:0}.pattern-save-image-stage img{display:block;width:100%;height:auto;background:#fff;user-select:auto}.pattern-save-image-stage figcaption{display:grid;gap:4px;padding:12px;background:#FFF0ED;color:#70413E;font-size:.78rem;line-height:1.45}.pattern-save-image-stage figcaption span{color:#6E6974;font-size:.7rem}
.pattern-grid-shell{position:relative;padding:22px}.pattern-grid-shell::before{position:absolute;top:0;left:0;z-index:3;width:22px;height:22px;background:#F7F1EE;content:""}.pattern-grid-shell .pattern-grid-viewport{height:330px}.pattern-column-ruler,.pattern-row-ruler,.pattern-right-ruler,.pattern-bottom-ruler{position:absolute;z-index:2;display:grid;overflow:hidden;background:#F7F1EE;color:#6E6974;font-family:"Source Code Pro","SFMono-Regular",Consolas,monospace;font-size:6px;font-weight:700;line-height:1;pointer-events:none;transform-origin:top left}.pattern-column-ruler,.pattern-bottom-ruler{left:22px;grid-auto-flow:column;grid-auto-columns:22px;height:22px}.pattern-column-ruler{top:0}.pattern-bottom-ruler{bottom:0}.pattern-row-ruler,.pattern-right-ruler{top:22px;grid-auto-rows:22px;width:22px}.pattern-row-ruler{left:0}.pattern-right-ruler{right:0}.pattern-column-ruler span,.pattern-row-ruler span,.pattern-right-ruler span,.pattern-bottom-ruler span{display:grid;place-items:center;border-right:1px solid #E8DFDC;border-bottom:1px solid #E8DFDC}.pattern-right-ruler span{border-left:1px solid #E8DFDC}.pattern-bottom-ruler span{border-top:1px solid #E8DFDC}.pattern-column-ruler span.is-major,.pattern-row-ruler span.is-major,.pattern-right-ruler span.is-major,.pattern-bottom-ruler span.is-major{border-color:#9E9089;border-width:2px;color:#302E38}.pattern-making-note{margin:10px 4px 0;color:#6E6974;font-size:.72rem;line-height:1.5}
@media (min-width:769px){.customer-pattern-page{padding-top:10px}}@media(max-width:359px){.customer-pattern-page{padding-inline:12px}.pattern-grid{grid-template-columns:repeat(var(--pattern-columns),20px);grid-auto-rows:20px}.pattern-cell{min-width:20px;min-height:20px;font-size:6px}.pattern-tool-row{gap:3px}.pattern-tool-row button{min-width:35px;padding-inline:7px}}
.pattern-grid[data-major-step="5"] .pattern-cell:nth-child(5n),.pattern-grid[data-major-step="10"] .pattern-cell:nth-child(10n){border-right-color:#C9BAB3;border-right-width:2px}
.customer-pattern-page .pattern-cell{color:#000;text-shadow:1px 1px 0 #fff}
.customer-pattern-page button.pattern-materials-heading{background:#fff;color:#302E38}.customer-pattern-page button.pattern-materials-heading b{color:#302E38}.customer-pattern-page button.pattern-materials-heading small{color:#6E6974}.customer-pattern-page button.pattern-materials-heading:hover{background:#FFF9F6}
.customer-pattern-page button.pattern-material-item{background:#FFF9F6;color:#302E38}.customer-pattern-page button.pattern-material-item b{color:#302E38}.customer-pattern-page button.pattern-material-item span{color:#6E6974}.customer-pattern-page button.pattern-material-item:hover{background:#FFF0ED}.customer-pattern-page button.pattern-material-item[aria-pressed="true"]{background:#E96963;color:#fff}.customer-pattern-page button.pattern-material-item[aria-pressed="true"] b,.customer-pattern-page button.pattern-material-item[aria-pressed="true"] span{color:#fff}

/* UI-08D · delivered composite work switches only; SINGLE keeps UI-07D. */
.pattern-panel-tabs{display:flex;gap:6px;overflow-x:auto;margin:-4px 0 14px;padding:2px;scrollbar-width:thin}.pattern-panel-tabs button{flex:0 0 auto;min-height:36px;padding:6px 13px;border:1px solid #E8DFDC;border-radius:999px;background:#fff;color:#6E6974;font:inherit;font-size:.74rem;font-weight:700;box-shadow:none}.pattern-panel-tabs button.is-active{border-color:#E96963;background:#FFF0ED;color:#C9504B}.customer-pattern-page .pattern-cell{position:relative}.customer-pattern-page .pattern-cell.is-panel-right{border-right:3px solid #5C514D}.customer-pattern-page .pattern-cell.is-panel-bottom{border-bottom:3px solid #5C514D}.pattern-panel-label{position:absolute;z-index:4;padding:2px 3px;border:1px solid #5C514D;border-radius:3px;background:#fff;color:#302E38;font-family:"Source Code Pro","SFMono-Regular",Consolas,monospace;font-size:6px;line-height:1;text-shadow:none;transform:translate(1px,1px)}