/* ============================================================
   pindou-mosaic-studio/style.css
   BMBrick 拼豆马赛克工作室 — Design System

   Visual DNA (from ux-mockup-v1.html):
   - Wabi-Sabi / Organic: off-white #FDFCF8, moss #5D7052, terra #C67B5C
   - Fraunces (serif headings) / Nunito (sans body)
   - Organic blobs, grain noise, soft colored shadows, rounded-full
   - NO pure black/white, NO neon, NO harsh cards
   ============================================================ */

/* ----------------------------------------------------------
   0. Design Tokens — Provided by styles/design-system.css
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   0.5. Skip Link (accessibility)
   ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  font-size: .85rem;
  z-index: 99999;
  text-decoration: none;
  transition: top .2s;
}

.skip-link:focus {
  top: 0;
}

/* ----------------------------------------------------------
   0.6. Topbar（前置门 = 门，不给岔路）
   ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  max-width: 1180px;
  margin: 0 auto;
}
.topbar .logo { display: flex; align-items: center; gap: var(--sp-2); }
.topbar .name { font-family: var(--font-display); font-size: var(--fs-d3); color: var(--moss); }

/* ----------------------------------------------------------
   1. Reset & Base
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg-soft);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ----------------------------------------------------------
   2. Organic Atmosphere — Blobs + Grain
   ---------------------------------------------------------- */
.blob {
  position: fixed;
  border-radius: 48% 52% 60% 40% / 55% 45% 55% 45%;
  filter: blur(8px);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}

.blob-a {
  width: 520px; height: 480px;
  background: radial-gradient(circle at 35% 35%, #E7EADF, transparent 70%);
  top: -180px; left: -160px;
}

.blob-b {
  width: 460px; height: 420px;
  background: radial-gradient(circle at 60% 40%, #F2DFD2, transparent 72%);
  bottom: -160px; right: -140px;
  border-radius: 60% 40% 45% 55% / 45% 60% 40% 55%;
}

.blob-c {
  width: 300px; height: 300px;
  background: radial-gradient(circle at 50% 50%, #E8E3D2, transparent 70%);
  top: 40%; left: 46%;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------
   3. Typography
   ---------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  line-height: 1.3;
}

/* ----------------------------------------------------------
   4. Header
   ---------------------------------------------------------- */
.app-header {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 34px 32px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
body[data-state="S0"] .app-header,
body[data-state="S1-gate"] .app-header,
body[data-state="S1-ai"] .app-header,
body[data-state="S2"] .app-header,
body[data-state="S2-ai"] .app-header,
body[data-state="S2-failed"] .app-header {
  display: none !important;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.header-actions[hidden] {
  display: none;
}
.header-actions .btn {
  height: 34px;
  padding: 0 14px;
  font-size: 0.82rem;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.logo-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.45), transparent 42%),
    var(--primary);
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.12),
    0 6px 14px -6px rgba(71,87,62,.5);
  flex-shrink: 0;
}

.app-header h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.85rem;
  color: var(--primary-dark);
  letter-spacing: .5px;
}

.brand-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: -2px;
}

.tagline {
  margin-top: 7px;
  font-size: .95rem;
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: .3px;
}

.tagline em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terra);
}

/* ----------------------------------------------------------
   5. Stage — 3-Column Layout (onboarding S0/S1/S2)
   Workspace S3/S4/S6 uses .workspace instead.
   ---------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px 56px;
}

/* ----------------------------------------------------------
   6. Panel Component (generic soft card)
   ---------------------------------------------------------- */
.panel {
  background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--soft-shadow);
}

.panel + .panel {
  margin-top: 20px;
}

.panel-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.step-num {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  background: var(--primary-soft);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   7. Upload / Drop Zone
   ---------------------------------------------------------- */
.drop-zone {
  border: 1.5px dashed var(--primary-soft);
  border-radius: var(--r-md);
  padding: 22px 16px;
  text-align: center;
  background: rgba(139,155,126,.07);
  cursor: pointer;
  transition: .2s;
}

.drop-zone:hover {
  background: rgba(139,155,126,.14);
  border-color: var(--primary);
}

.drop-zone.dragover {
  border-color: var(--primary);
  border-style: solid;
  background: rgba(139,155,126,.18);
}

.drop-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 8px;
  color: var(--primary);
  display: block;
}

.drop-text {
  font-size: .85rem;
  color: var(--text-soft);
  font-weight: 600;
}

.drop-hint {
  font-size: .72rem;
  color: var(--primary-soft);
  display: block;
  margin-top: 2px;
}

.source-preview {
  max-width: 100%;
  border-radius: var(--r-sm);
  margin-top: 12px;
  display: block;
}

.sample-link {
  margin-top: 10px;
  font-size: .76rem;
  color: var(--text-soft);
  text-align: center;
}

.sample-btn {
  background: none;
  border: none;
  color: var(--terra);
  font-weight: 700;
  font-size: .76rem;
  cursor: pointer;
  font-family: var(--sans);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sample-btn:hover {
  color: var(--primary-dark);
}

/* ----------------------------------------------------------
   8. Size Cards (physical product icons + micro-grid)
   ---------------------------------------------------------- */
.size-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.size-card {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 10px 10px;
  background: var(--bg-card-strong);
  cursor: pointer;
  transition: .18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 110px;
}

.size-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--soft-shadow);
  border-color: var(--primary-soft);
}

.size-card.selected {
  border-color: var(--primary);
  border-width: 2px;
  background: linear-gradient(180deg, var(--bg-soft), var(--primary-tint));
  box-shadow: 0 10px 22px -14px rgba(71,87,62,.5);
}

.size-card.selected .card-icon {
  color: var(--primary);
}

.size-card.selected .card-grid-wrap {
  opacity: 1;
}

/* Icon area */
.card-icon {
  width: 40px;
  height: 40px;
  color: var(--text-soft);
  flex-shrink: 0;
  transition: color .15s;
}

.card-icon svg {
  width: 100%;
  height: 100%;
}

.size-card .card-name {
  font-weight: 800;
  font-size: .84rem;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}

.size-card .card-meta {
  font-size: .66rem;
  color: var(--text-soft);
  font-weight: 600;
  text-align: center;
}

/* Micro-grid preview area */
.card-grid-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2px;
  opacity: .55;
  transition: opacity .15s;
}

.size-card:hover .card-grid-wrap {
  opacity: .75;
}

.micro-grid {
  display: block;
}

.custom-size {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.custom-label {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}

.custom-label input {
  width: 60px;
  padding: 5px 8px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: .78rem;
  font-family: var(--sans);
  background: var(--bg-card-strong);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}

.custom-label input:focus {
  border-color: var(--primary);
}

/* ----------------------------------------------------------
   9. Tier Pills (color count)
   ---------------------------------------------------------- */
.tier-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tier-pill {
  font-family: var(--sans);
  font-weight: 800;
  font-size: .8rem;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-card-strong);
  color: var(--text-soft);
  cursor: pointer;
  transition: .15s;
}

.tier-pill:hover {
  border-color: var(--terra-soft);
}

.tier-pill.active {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(198,123,92,.7);
}

/* 白话三档 pill（简约/适中/丰富） */
.tier-group-pill {
  font-family: var(--sans);
  font-weight: 800;
  font-size: .88rem;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-card-strong);
  color: var(--text-soft);
  cursor: pointer;
  transition: .15s;
  letter-spacing: .5px;
}
.tier-group-pill:hover {
  border-color: var(--terra-soft);
}
.tier-group-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(93,112,82,.7);
}

.tier-hint {
  font-size: .72rem;
  color: var(--text-soft);
  margin: 11px 0 16px;
  font-weight: 600;
}

/* ----------------------------------------------------------
   9a. Tier Quick Row (group pills: 简约/适中/丰富)
   ---------------------------------------------------------- */
.tier-quick-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.tier-quick-pill {
  font-family: var(--sans);
  font-weight: 800;
  font-size: .88rem;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-card-strong);
  color: var(--text-soft);
  cursor: pointer;
  transition: .15s;
  letter-spacing: .5px;
}
.tier-quick-pill:hover {
  border-color: var(--terra-soft);
}
.tier-quick-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(93,112,82,.7);
}
.tier-quick-pill.disabled {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}

/* ----------------------------------------------------------
   9b. Tier Numeric Row (6 pills: 24/48/72/96/120/221)
   ---------------------------------------------------------- */
.tier-numeric-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tier-numeric-pill {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  min-width: 44px;
  text-align: center;
  transition: .15s;
}

.tier-numeric-pill.active {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(198,123,92,.7);
}

.tier-numeric-pill:hover:not(.active) {
  border-color: var(--primary);
}

.tier-numeric-pill.disabled {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}

/* ----------------------------------------------------------
   9c. Used/Total display
   ---------------------------------------------------------- */
.tier-used-total {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-soft);
  opacity: .65;
  margin-top: 4px;
  margin-bottom: 4px;
}

.tier-hint small {
  display: block;
  margin-top: 2px;
  font-size: .66rem;
  opacity: .7;
}

/* ----------------------------------------------------------
   9b. Color Budget (adaptive N-color selection)
   ---------------------------------------------------------- */
.color-budget-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
}

.color-budget-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .82rem;
  color: var(--text);
  white-space: nowrap;
}

.color-budget-input {
  width: 72px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-card-strong);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  color: var(--text);
  text-align: center;
  transition: .15s;
  outline: none;
}

.color-budget-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(93,112,82,.15);
}

.color-budget-input::placeholder {
  color: var(--text-soft);
  opacity: .55;
}

.budget-status {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .76rem;
  color: var(--primary-dark);
  white-space: nowrap;
}

.color-budget-hint {
  width: 100%;
  font-size: .66rem;
  color: var(--text-soft);
  opacity: .65;
  margin: -2px 0 0;
  font-weight: 600;
}

/* Mutually exclusive: when budget is active, dim tier pills */
.tier-group-pill.disabled {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}

.tier-budget-hint {
  font-size: .66rem;
  color: var(--text-soft);
  opacity: .7;
  font-weight: 600;
}

/* ----------------------------------------------------------
   10. Generate Button
   ---------------------------------------------------------- */
.btn-generate {
  width: 100%;
  margin-top: 4px;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  padding: 15px;
  border-radius: 999px;
  letter-spacing: 1px;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  box-shadow: 0 16px 30px -14px rgba(71,87,62,.75);
  transition: .18s;
}

.btn-generate:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 36px -14px rgba(71,87,62,.8);
}

.btn-generate:active {
  transform: translateY(0);
}

.btn-generate:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ----------------------------------------------------------
   11. Hero — Board / Canvas Area
   ---------------------------------------------------------- */
.hero {
  position: relative;
}

.board-wrap {
  position: relative;
}

.board {
  position: relative;
  aspect-ratio: 1;
  border-radius: 26px;
  padding: 18px;
  background: linear-gradient(135deg, #F3EEE2, #EAE3D2);
  box-shadow:
    inset 0 3px 10px rgba(120,105,80,.18),
    var(--card-shadow);
  border: 1.5px solid var(--line);
  overflow: hidden;
}

/* DEC-2: Border themes applied to live board (all views) */
.board-theme-stamp {
  border: 4px dashed #C4B89E;
  border-radius: 12px;
  position: relative;
  box-shadow: inset 0 0 0 3px rgba(93,112,82,.15);
}
.board-theme-stamp::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px dotted rgba(93,112,82,.3);
  border-radius: 8px;
  pointer-events: none;
  z-index: 5;
}

.board-theme-polaroid {
  border: none;
  padding: 12px 12px 48px 12px;
  background: #FAFAF6;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}
.board-theme-polaroid::after {
  content: 'by BMBrick';
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-family: var(--serif);
  font-size: .7rem;
  color: #B0A898;
  font-style: italic;
  pointer-events: none;
}

.board-theme-frame {
  border: 6px solid #B8976A;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #D4C4A8,
    inset 0 0 0 4px #8B7355,
    0 4px 16px rgba(0,0,0,.15);
}

.board-theme-washi {
  transform: rotate(-1.5deg);
  border-radius: 6px;
  position: relative;
}
.board-theme-washi::before,
.board-theme-washi::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 24px;
  border-radius: 3px;
  z-index: 5;
  pointer-events: none;
  opacity: .7;
}
.board-theme-washi::before {
  top: 2px;
  left: 12px;
  transform: rotate(-8deg);
  background: rgba(198,123,92,.2);
}
.board-theme-washi::after {
  bottom: 2px;
  right: 12px;
  transform: rotate(5deg);
  background: rgba(93,112,82,.18);
}

.beads-area {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mosaicCanvas {
  max-width: 100%;
  max-height: 65vh;
  border-radius: 8px;
  image-rendering: pixelated;
}

/* Axis labels */
.axis {
  position: absolute;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--sans);
  opacity: .85;
  pointer-events: none;
}

.axis-top {
  top: 4px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
}

.axis-left {
  left: 2px;
  top: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* Info chip below board */
.info-chip {
  position: absolute;
  z-index: 4;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: var(--soft-shadow);
  font-size: .8rem;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}

.info-chip b {
  color: var(--terra);
}

/* ----------------------------------------------------------
   12. Loading State (S2)
   ---------------------------------------------------------- */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  gap: 20px;
}

.loading-state[hidden] {
  display: none;
}

.loading-beads {
  display: flex;
  gap: 8px;
}

.loading-beads span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  animation: loadBounce 1.2s ease-in-out infinite;
}

.loading-beads span:nth-child(1) { animation-delay: 0s; opacity: .4; }
.loading-beads span:nth-child(2) { animation-delay: .15s; opacity: .55; }
.loading-beads span:nth-child(3) { animation-delay: .3s; opacity: .7; }
.loading-beads span:nth-child(4) { animation-delay: .45s; opacity: .85; }
.loading-beads span:nth-child(5) { animation-delay: .6s; opacity: 1; }

@keyframes loadBounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .3; }
  40% { transform: scale(1.1); opacity: 1; }
}

.loading-text {
  font-size: .9rem;
  color: var(--text-soft);
  font-weight: 600;
  font-family: var(--serif);
  font-style: italic;
}

/* ----------------------------------------------------------
   13. Empty State (S0)
   ---------------------------------------------------------- */
.empty-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  gap: 16px;
}

.empty-hero[hidden] {
  display: none;
}

.empty-icon {
  opacity: .6;
}

.empty-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--primary-dark);
  font-weight: 600;
}

.empty-desc {
  font-size: .85rem;
  color: var(--text-soft);
  max-width: 280px;
}

/* Sample thumbnails (S0 center) */
.sample-grid {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sample-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px;
  cursor: pointer;
  transition: .18s;
  font-family: var(--sans);
}

.sample-thumb:hover {
  border-color: var(--primary-soft);
  transform: translateY(-2px);
  box-shadow: var(--soft-shadow);
}

.sample-thumb img,
.sample-thumb svg {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.sample-thumb span {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-soft);
}

/* ----------------------------------------------------------
   14. Editor Toolbar (floating pill)
   ---------------------------------------------------------- */
.toolbar {
  position: relative;
  z-index: 3;
  margin: 0 auto 16px;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,253,248,.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: var(--soft-shadow);
}

.toolbar[hidden] {
  display: none;
}

.tool {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .15s;
}

.tool:hover {
  background: rgba(139,155,126,.16);
  color: var(--primary-dark);
}

.tool.on {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(71,87,62,.7);
}

.tool:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.tool svg {
  width: 19px;
  height: 19px;
}

.tool-sep {
  width: 1px;
  height: 24px;
  background: var(--line);
  margin: 0 4px;
}

.toolbar-palette {
  display: flex;
  gap: 5px;
  margin-left: 4px;
  flex-wrap: wrap;
  max-width: 200px;
  max-height: 140px;
  overflow-y: auto;
  align-content: flex-start;
}

.toolbar-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.18);
  cursor: pointer;
  border: 2px solid transparent;
  transition: .12s;
}

.toolbar-swatch:hover {
  transform: scale(1.2);
}

.toolbar-swatch.selected {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* D-11: Visually distinguish used vs unused colors in editor palette */
.toolbar-swatch.unused {
  opacity: .35;
}

.toolbar-swatch.unused:hover {
  opacity: .7;
}

/* D-11: Editor selected color detail bar */
.editor-color-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 3px 8px;
  background: rgba(93,112,82,.08);
  border-radius: 999px;
  font-size: .68rem;
  white-space: nowrap;
}

.detail-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.15);
}

.detail-id {
  font-weight: 800;
  color: var(--text);
}

.detail-name {
  color: var(--text-soft);
  font-weight: 600;
}

.detail-badge {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .6rem;
  padding: 1px 5px;
  border-radius: 999px;
}

/* D-23: Palette expand/collapse toggle */
.palette-expand-toggle {
  width: 100%;
  margin-top: 4px;
  padding: 3px 0;
  background: none;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--primary);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .62rem;
  cursor: pointer;
  transition: .15s;
  flex-shrink: 0;
}

.palette-expand-toggle:hover {
  background: rgba(93,112,82,.08);
  border-color: var(--primary-soft);
}

/* D-22: Mobile quick export bar (between canvas and materials) */
.mobile-quick-export {
  display: none;
}

/* Edit mode: disable pointer events on post-iron overlay so brush reaches mosaicCanvas */
body[data-state="S4"] .post-iron-area {
  pointer-events: none;
}

@media (max-width: 720px) {
  body[data-state="S3"] .mobile-quick-export,
  body[data-state="S4"] .mobile-quick-export {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 14px 0 0;
  }

  .mobile-quick-export[hidden] {
    display: none !important;
  }

  .mqe-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: 999px;
    border: 1.5px solid var(--primary);
    background: transparent;
    color: var(--primary-dark);
    font-family: var(--sans);
    font-weight: 700;
    font-size: .78rem;
    cursor: pointer;
    transition: .15s;
  }

  .mqe-btn:active {
    background: rgba(93,112,82,.1);
    transform: scale(.97);
  }

  .mqe-btn.mqe-fill {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
  }

  /* Hide grid axis numbers on mobile — they waste space */
  .axis { display: none !important; }

  /* Hide palette strip in view mode on mobile — only show in edit */
  .palette-strip { display: none !important; }
  body[data-state="S4"] .palette-strip { display: flex !important; }

  /* Compact header on mobile */
  .app-header { padding: 12px 16px 8px; }
  .app-header h1 { font-size: 1.2rem; }
  .tagline { font-size: 0.75rem; }
  .header-actions { gap: 4px; }
  .header-actions .btn { height: 30px; padding: 0 10px; font-size: 0.75rem; }

  /* View tabs more compact on mobile */
  .view-tabs--workspace { gap: 4px; padding: 4px 8px; }
  .view-tab { height: 32px; font-size: 0.78rem; }
}

/* ----------------------------------------------------------
   14a. Materials Embedded (M5 redesign)
   Materials list moved from side panel to below canvas in hero area.
   ---------------------------------------------------------- */
.materials-embedded {
  margin-top: 20px;
  background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--soft-shadow);
}

.materials-embedded[hidden] {
  display: none;
}

.materials-embedded-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.mat-embedded-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--primary-dark);
}

.mat-embedded-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* M7: Search input for materials */
.mat-search-wrap {
  margin-bottom: 10px;
}

.mat-search {
  width: 100%;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  font-family: var(--sans);
  background: var(--bg-card-strong);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}

.mat-search:focus {
  border-color: var(--primary);
}

.mat-search::placeholder {
  color: var(--primary-soft);
  opacity: .6;
}

/* ----------------------------------------------------------
   14b. Adjust Config Wrapper (M-A: hidden in S0/S1/S2)
   ---------------------------------------------------------- */
.adjust-config {
  /* Hidden by default; shown via JS toggle */
}
.adjust-config[hidden] {
  display: none;
}

/* ----------------------------------------------------------
   14b1. Background Removal Toggle (D-12)
   ---------------------------------------------------------- */
.panel-bg-removal {
  margin-top: 16px;
}

.bg-removal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bg-removal-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.bg-removal-text {
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background .25s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--bg-card-strong);
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.bg-removal-hint {
  font-size: .72rem;
  color: var(--text-soft);
  font-weight: 500;
  margin: 0;
}

/* M-A: Adjust toggle button in side panel */
.panel-adjust-toggle {
  text-align: center;
  padding: 16px;
}
.panel-adjust-toggle[hidden] {
  display: none;
}
.adjust-toggle-btn {
  width: 100%;
  font-size: .82rem;
  color: var(--primary);
  border-color: var(--primary-soft);
}
.adjust-toggle-btn:hover {
  background: rgba(93,112,82,.08);
}

/* ----------------------------------------------------------
   14a. Author Name Input (S3/S4/S6)
   ---------------------------------------------------------- */
.panel-author {
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

.panel-author[hidden] {
  display: none;
}

.author-label {
  display: block;
  font: 600 13px var(--sans);
  color: var(--text);
  margin-bottom: 6px;
}

.author-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: 400 14px var(--sans);
  color: var(--text);
  background: var(--bg-card-strong);
  transition: border-color 0.2s;
}

.author-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(93, 112, 82, 0.15);
}

.author-input::placeholder {
  color: var(--text-muted);
}

.author-hint {
  display: block;
  font: 400 11px var(--sans);
  color: var(--text-muted);
  margin-top: 4px;
}

/* ----------------------------------------------------------
   14b. Blueprint Section (S6)
   ---------------------------------------------------------- */
.blueprint-section {
  margin-bottom: 16px;
}

.blueprint-section[hidden] {
  display: none;
}

.blueprint-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  justify-content: center;
}

.blueprint-canvas-wrap {
  background: var(--bg-card-strong);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: var(--soft-shadow);
  overflow: auto;
  text-align: center;
}

/* Theme overrides for blueprint canvas wrap (S6) */
.blueprint-canvas-wrap.board-theme-stamp {
  border: 4px dashed #C4B89E;
  border-radius: 12px;
  position: relative;
  box-shadow: inset 0 0 0 3px rgba(93,112,82,.15);
}
.blueprint-canvas-wrap.board-theme-stamp::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px dotted rgba(93,112,82,.3);
  border-radius: 8px;
  pointer-events: none;
  z-index: 5;
}
.blueprint-canvas-wrap.board-theme-polaroid {
  border: none;
  padding: 12px 12px 48px 12px;
  background: #FAFAF6;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}
.blueprint-canvas-wrap.board-theme-frame {
  border: 6px solid #B8976A;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #D4C4A8,
    inset 0 0 0 4px #8B7355,
    0 4px 16px rgba(0,0,0,.15);
}

#blueprintCanvas,
#wsBlueprintCanvas {
  max-width: 100%;
  image-rendering: pixelated;
}

/* ----------------------------------------------------------
   14c. Three-View Tab Bar
   ---------------------------------------------------------- */
.view-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line);
  margin-bottom: 16px;
}

.view-tabs[hidden] {
  display: none;
}

.view-tab {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  font-weight: 600;
}

.view-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
}

.view-tab:hover:not(.active) {
  color: var(--primary);
}

/* Post-iron canvas area */
.post-iron-area {
  position: absolute;
  inset: 0;
  z-index: 2;
}

#postIronCanvas {
  max-width: 100%;
  max-height: 65vh;
  border-radius: 8px;
}

/* Post-iron animation elements */
.iron-icon {
  will-change: transform, opacity;
}

.iron-shimmer {
  will-change: opacity, backdrop-filter;
  border-radius: inherit;
}

/* ----------------------------------------------------------
   15. Right Side — Materials + Info
   ---------------------------------------------------------- */
.side {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.side .panel + .panel {
  margin-top: 20px;
}

/* Empty side placeholder (S0) */
.panel-empty-side {
  text-align: center;
  padding: 32px 22px;
}

.empty-side-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.empty-side-text {
  font-size: .82rem;
  color: var(--text-soft);
  margin-bottom: 16px;
  line-height: 1.5;
}

.empty-side-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.empty-side-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  animation: emptyPulse 2s ease-in-out infinite;
}

.empty-side-dots span:nth-child(2) { animation-delay: .15s; }
.empty-side-dots span:nth-child(3) { animation-delay: .3s; }
.empty-side-dots span:nth-child(4) { animation-delay: .45s; }
.empty-side-dots span:nth-child(5) { animation-delay: .6s; }

@keyframes emptyPulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50% { opacity: .6; transform: scale(1); }
}

/* Total beads row */
.total-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.total-big {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--primary-dark);
  line-height: 1;
}

.total-unit {
  font-size: .78rem;
  color: var(--text-soft);
  font-weight: 600;
}

/* Material list rows */
.material-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mat-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 4px;
  border-bottom: 1px dashed var(--line);
}

.mat-row:last-child {
  border-bottom: none;
}

.mat-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.2);
}

.mat-code {
  font-weight: 800;
  font-size: .8rem;
  width: 34px;
  color: var(--text);
}

.mat-name {
  font-size: .78rem;
  color: var(--text-soft);
  flex: 1;
}

.mat-pct {
  font-size: .72rem;
  color: var(--text-soft);
  width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mat-count {
  font-weight: 700;
  font-size: .82rem;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

/* D-11: Expand/collapse toggle for color list */
.mat-toggle {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 0;
  background: none;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-sm);
  color: var(--primary);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  transition: .15s;
}

.mat-toggle:hover {
  background: rgba(93,112,82,.06);
  border-color: var(--primary-soft);
}

/* D-11: CSV download button */
.mat-csv-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 0;
  background: rgba(198,123,92,.08);
  border: 1.5px solid rgba(198,123,92,.25);
  border-radius: var(--r-sm);
  color: var(--terra);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  transition: .15s;
}

.mat-csv-btn:hover {
  background: rgba(198,123,92,.15);
  border-color: var(--terra);
}

/* Info card */
.info-grid {
  background: rgba(198,123,92,.08);
  border: 1px solid rgba(198,123,92,.2);
  border-radius: var(--r-md);
  padding: 14px 16px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  padding: 3px 0;
  color: var(--text);
}

.info-row b {
  color: var(--terra);
  font-weight: 800;
}

.stars {
  letter-spacing: 2px;
  color: var(--terra);
}

/* Export buttons */
.export-buttons {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.btn {
  /* 根因修复: flex:1 让任何 flex 容器里的按钮被拉成通栏(appbar 巨条事故)。
     需要撑满的局部自己声明(.export-preview-actions .btn 等已有)。 */
  flex: 0 0 auto;
  text-align: center;
  border-radius: 999px;
  padding: 12px;
  font-weight: 800;
  font-size: .86rem;
  cursor: pointer;
  transition: .15s;
  border: 1.5px solid var(--primary);
  font-family: var(--sans);
}

.btn-ghost {
  background: transparent;
  color: var(--primary-dark);
}

.btn-ghost:hover {
  background: rgba(93,112,82,.08);
}

.btn-ghost:active {
  background: rgba(93,112,82,.14);
}

.btn-fill {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  box-shadow: 0 12px 24px -12px rgba(198,123,92,.7);
}

.btn-fill:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(198,123,92,.8);
}

.btn-fill:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px -10px rgba(198,123,92,.6);
}

.export-choice-modal .ds-modal__body {
  gap: 12px;
}

.export-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.export-choice:hover {
  border-color: var(--line-strong);
  background: var(--primary-tint);
  transform: translateY(-1px);
}

.export-choice__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--bg-card-strong);
  font-family: var(--serif);
  font-weight: 800;
}

.export-choice__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.export-choice__text strong {
  font-size: 0.95rem;
}

.export-choice__text small {
  color: var(--text-muted);
  line-height: 1.45;
}

/* Carousel export button */
.export-carousel-btn {
  width: 100%;
  margin-top: 10px;
  font-size: .8rem;
}

/* Cover generation button */
.export-cover-btn {
  width: 100%;
  margin-top: 8px;
  font-size: .8rem;
  color: var(--primary);
  border-color: var(--primary-soft);
}

.export-cover-btn:hover {
  background: rgba(93,112,82,.08);
  border-color: var(--primary);
}

/* ----------------------------------------------------------
   14c. Cover Theme Selector (DEC-2)
   ---------------------------------------------------------- */
.cover-theme-selector {
  margin-top: 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card));
  padding: 10px 14px;
}

.cover-theme-selector[hidden] {
  display: none;
}

.theme-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.theme-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.theme-pill {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .72rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-card-strong);
  color: var(--text-soft);
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}

.theme-pill:hover {
  border-color: var(--terra-soft);
  background: rgba(198,123,92,.04);
}

.theme-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(71,87,62,.5);
}

/* ----------------------------------------------------------
   14d. Cover Text Editor (DEC-3)
   ---------------------------------------------------------- */
.cover-text-editor {
  margin-top: 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card));
  overflow: hidden;
  transition: box-shadow .2s;
}

.cover-text-editor[hidden] {
  display: none;
}

.cover-text-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 14px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .8rem;
  color: var(--primary);
  cursor: pointer;
  transition: background .15s;
}

.cover-text-toggle:hover {
  background: rgba(93,112,82,.06);
}

.toggle-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .2s;
}

.cover-text-toggle[aria-expanded="true"] .toggle-chevron {
  transform: rotate(180deg);
}

.cover-text-fields {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cover-text-fields[hidden] {
  display: none;
}

.cover-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cover-field-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.cover-input {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  font-family: var(--sans);
  font-weight: 600;
  background: var(--bg-card-strong);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.cover-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(93,112,82,.1);
}

.cover-input::placeholder {
  color: var(--primary-soft);
  opacity: .55;
}

.cover-field-hint {
  font-size: .66rem;
  color: var(--primary-soft);
  font-weight: 500;
  padding-left: 6px;
}

.cover-gen-btn {
  margin-top: 4px;
  padding: 11px;
  font-size: .86rem;
}

/* Edit prompt */
.edit-prompt-text {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--primary-dark);
  font-weight: 600;
  margin-bottom: 14px;
  text-align: center;
}

.edit-prompt-actions {
  display: flex;
  gap: 10px;
}

/* ----------------------------------------------------------
   16. Footer
   ---------------------------------------------------------- */
.app-footer {
  display: none;
}

/* ----------------------------------------------------------
   17. Animations & Transitions
   ---------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}

.fade-in {
  animation: fadeIn .3s ease-out;
}

.reveal-up {
  animation: revealUp .5s cubic-bezier(.22,1,.36,1);
}

/* Error toast notification */
.error-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: linear-gradient(180deg, #FFF5F3, #FDEDE8);
  border: 1px solid rgba(198,123,92,.3);
  border-radius: var(--r-md);
  padding: 14px 22px;
  box-shadow: 0 12px 28px -10px rgba(198,123,92,.4);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  animation: toastIn .3s ease-out;
  max-width: 380px;
  text-align: center;
}

.error-toast.hiding {
  animation: toastOut .25s ease-in forwards;
}

.error-toast .toast-icon {
  color: var(--terra);
  margin-right: 6px;
}

/* State transition helper */
.state-enter {
  animation: fadeIn .3s ease-out;
}

/* ----------------------------------------------------------
   18. Scrollbar
   ---------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(93,112,82,.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(93,112,82,.35);
}

/* ----------------------------------------------------------
   19. Responsive — Mobile / Tablet
   ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .stage {
    grid-template-columns: 1fr;
    padding: 0 16px 40px;
    gap: 20px;
  }

  .rail {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .rail .panel + .panel {
    margin-top: 16px;
  }

  .hero {
    order: 1;
  }

  .side {
    order: 3;
  }

  /* On mobile, board goes full width */
  .board {
    padding: 16px;
  }

  .axis {
    display: none;
  }

  /* S3/S4/S5: hide parameter rail on mobile — result is hero.
     D-02 fix: ensures mosaic canvas is the first-screen hero on mobile (375x812).
     Verifier retest confirmed: rail=none, canvasTop=224, scrollY=0. */
  body[data-state="S3"] .rail,
  body[data-state="S4"] .rail,
  body[data-state="S5"] .rail {
    display: none;
  }

  /* S3/S4/S5/S6: side panel comes right after hero */
  body[data-state="S3"] .side,
  body[data-state="S4"] .side,
  body[data-state="S5"] .side,
  body[data-state="S6"] .side {
    order: 2;
  }

  /* S6: blueprint section must appear before side panel on mobile */
  body[data-state="S6"] .blueprint-section {
    order: 1;
  }

  /* S6: hide parameter rail on mobile */
  body[data-state="S6"] .rail {
    display: none;
  }

  /* FR-1: belt-and-suspenders — JS adds .rail-hidden class for S2-S6 states.
     Prevents edge cases where CSS specificity or timing might leave rail visible. */
  .rail.rail-hidden {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .app-header {
    padding: 20px 16px 12px;
  }

  .app-header h1 {
    font-size: 1.35rem;
  }

  .tagline {
    font-size: .82rem;
  }

  /* Toolbar becomes bottom sheet on mobile (only in S4) */
  .toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    justify-content: center;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin: 0;
    width: 100%;
    background: rgba(253, 252, 248, 0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 -8px 32px rgba(0,0,0,.12);
  }

  /* Safe area for notched phones */
  .toolbar {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  /* When toolbar is visible as bottom sheet, add padding to page content */
  .stage {
    padding-bottom: 80px;
  }

  /* When toolbar is visible (S4), add bottom padding to body content */
  .btn-generate {
    margin-bottom: 0;
  }

  .size-cards {
    grid-template-columns: 1fr;
  }

  /* D-12 FIX: ensure 44px min touch target on mobile */
  .size-card {
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Export buttons stack */
  .export-buttons {
    flex-direction: column;
  }

  .edit-prompt-actions {
    flex-direction: column;
  }

  /* Material list scrollable on mobile */
  .material-list {
    max-height: 200px;
    overflow-y: auto;
  }

  /* Blueprint controls stack on mobile */
  .blueprint-controls {
    flex-direction: column;
  }

  .blueprint-canvas-wrap {
    padding: 8px;
  }

  /* Embedded materials on mobile */
  .materials-embedded {
    padding: 14px 16px;
    border-radius: var(--r-md);
    margin-top: 14px;
  }

  .materials-embedded-header {
    flex-direction: column;
    gap: 4px;
  }

  /* Side panels collapse on mobile */
  .panel-info {
    padding: 16px;
  }

  .total-big {
    font-size: 1.3rem;
  }

  /* D-15 FIX: Hide color palette in mobile toolbar to prevent
     blocking canvas and export buttons. Users pick colors via
     the eyedropper tool instead. */
  .toolbar-palette {
    display: none !important;
  }

  /* Touch-friendly toolbar sizing */
  .tool {
    width: 44px;
    height: 44px;
  }

  .tool svg {
    width: 22px;
    height: 22px;
  }

  .tool-sep {
    height: 28px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .app-header h1 {
    font-size: 1.15rem;
  }

  .tagline {
    font-size: .75rem;
  }

  .panel {
    padding: 16px;
    border-radius: var(--r-md);
  }

  .board {
    border-radius: var(--r-md);
    padding: 10px;
  }

  .tier-pills {
    gap: 6px;
  }

  .tier-quick-row {
    gap: 6px;
  }

  .tier-quick-pill {
    padding: 7px 14px;
    font-size: .78rem;
  }

  .tier-numeric-row {
    gap: 4px;
  }

  .tier-numeric-pill {
    padding: 5px 10px;
    font-size: .72rem;
    min-width: 38px;
  }

  .tier-pill {
    padding: 6px 10px;
    font-size: .72rem;
  }
}

/* ----------------------------------------------------------
   20. Focus Visible (accessibility)
   ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
.size-card:focus-visible,
.tier-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   21. Onboarding Tooltip
   ---------------------------------------------------------- */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .3s ease-out;
}

.onboarding-overlay[hidden] { display: none !important; }
.onboarding-overlay.hiding { pointer-events: none; }

.onboarding-card {
  background: var(--bg-card-strong);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 24px 48px rgba(0,0,0,.15);
  animation: revealUp .4s cubic-bezier(.22,1,.36,1);
}

.onboarding-card h3 {
  font-family: var(--serif);
  color: var(--primary-dark);
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.onboarding-card p {
  font-size: .9rem;
  color: var(--text-soft);
  margin-bottom: 20px;
  line-height: 1.6;
}

.onboarding-steps {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  text-align: left;
}

.onboarding-step {
  flex: 1;
  display: flex;
  gap: 8px;
}

.onboarding-step .step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .8rem;
  flex-shrink: 0;
}

.onboarding-step .step-text {
  font-size: .78rem;
  color: var(--text);
  font-weight: 600;
}

.onboarding-step .step-text small {
  display: block;
  font-weight: 400;
  color: var(--text-soft);
  font-size: .72rem;
  margin-top: 2px;
}

.onboarding-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.onboarding-skip {
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: .8rem;
  cursor: pointer;
  font-family: var(--sans);
  padding: 8px 16px;
}

.onboarding-skip:hover { color: var(--primary-dark); }

.onboarding-start {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 28px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  font-family: var(--sans);
}

.onboarding-start:hover { background: var(--primary-dark); }

/* ----------------------------------------------------------
   22. Print (hide non-essential)
   ---------------------------------------------------------- */
@media print {
  .blob, .grain-overlay, .app-header, .rail, .side, .toolbar, .app-footer {
    display: none !important;
  }
  .stage {
    grid-template-columns: 1fr;
  }
  .board {
    box-shadow: none;
    border: 1px solid var(--line);
  }
}

/* ----------------------------------------------------------
   23. Reduced Motion (WCAG 2.3.3)
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------
   24. Onboarding Gate (前置门) — S0 hero + S1 gate + AI config
   ---------------------------------------------------------- */

/* ================================================================
   前置门（P1）— 已迁移到 styles/style2.css
   ================================================================ */

/* Uploaded file info box */
.uploaded-info-box {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 580px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  box-shadow: var(--soft-shadow);
  text-align: left;
  animation: fadeIn 200ms ease;
}

.uploaded-info-box[hidden] {
  display: none !important;
}

.uploaded-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.uploaded-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uploaded-filename {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text);
}

.uploaded-details {
  font-size: 0.76rem;
  color: var(--text-soft);
}

.replace-image-btn {
  height: 32px;
  font-size: 0.78rem;
  padding: 0 12px;
}

/* Onboarding Divider */
.onboard-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  margin: var(--sp-4) auto var(--sp-3);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-soft);
}

.onboard-divider::before,
.onboard-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.divider-leaf, .divider-star {
  color: var(--primary);
  font-style: normal;
}

/* --- Choice Cards Container --- */
.choice-cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  transition: all 250ms ease;
}

body[data-state="S0"] .choice-cards-container {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.8);
}

body[data-state="S0"] .card-lock-footer {
  display: flex !important;
}

body[data-state="S1-gate"] .card-lock-footer {
  display: none !important;
}

/* Choice card card layout */
.choice-card {
  background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card));
  border: 1.8px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--inset-hi), var(--soft-shadow);
}

.choice-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
  border-color: var(--primary-soft);
}

.choice-card.selected {
  border-color: var(--primary);
  background: var(--bg-card-strong);
  box-shadow: 0 0 0 1px var(--primary-soft), var(--card-shadow);
}

.choice-card.selected .choice-card-select-badge {
  display: flex;
}

.choice-card-select-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: none;
}

.choice-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.choice-card-header .card-icon {
  font-size: 1.25rem;
}

.choice-card-header .card-title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
}

.card-desc {
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.45;
  margin-bottom: 12px;
}

/* Previews comparison row */
.card-previews {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0;
  align-self: center;
}

.preview-img-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.preview-img-src, .preview-img-dst {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-img-dst.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: contrast(1.1) saturate(1.15);
}

.preview-img-dst.cartoon {
  border-radius: var(--r-sm);
  filter: contrast(1.05) saturate(1.1);
}

.preview-img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  padding: 1.5px 0;
  letter-spacing: 0.5px;
}

.preview-arrow {
  font-size: 1.1rem;
  color: var(--primary);
  font-weight: 800;
}

.card-meta {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

/* Lock overlay footer */
.card-lock-footer {
  position: absolute;
  inset: 0;
  background: rgba(251, 248, 242, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-soft);
  backdrop-filter: blur(1px);
}

.lock-icon {
  margin-right: 4px;
}

/* AI card styling */
.choice-card.choice-ai {
  border-color: var(--ai-soft);
}

.choice-card.choice-ai.selected {
  border-color: var(--ai);
  box-shadow: 0 0 0 1px var(--ai-soft), var(--card-shadow);
}

.choice-badge-free {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--terra);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  box-shadow: var(--soft-shadow);
}

.choice-card.choice-ai.selected .choice-badge-free {
  right: 42px; /* Shift to avoid checkmark overlap */
}

.card-ai-body {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.card-ai-controls {
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.control-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.control-row.inline-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.control-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-soft);
}

/* Custom styles for radio groups */
.style-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.style-radio-group label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-card-strong);
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms ease;
}

.style-radio-group label input {
  display: none;
}

.style-radio-group label.active {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  box-shadow: var(--soft-shadow);
}

/* Toggle switch styling */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--line-strong);
  transition: .25s;
  border-radius: var(--r-pill);
}

.toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
  box-shadow: var(--soft-shadow);
}

.toggle-switch input:checked + .slider {
  background-color: var(--primary);
}

.toggle-switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* Accordion for custom prompt */
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
}

.accordion-trigger:hover {
  color: var(--primary-dark);
}

.chevron-down {
  transition: transform 200ms ease;
}

.accordion-trigger.expanded .chevron-down {
  transform: rotate(180deg);
}

.custom-prompt-row {
  animation: slideDown 200ms ease;
}

.custom-prompt-row textarea {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  font-size: 0.74rem;
  background: var(--bg-soft);
  resize: vertical;
}

.custom-prompt-row textarea:focus {
  border-color: var(--ai);
  outline: none;
}

.custom-counter {
  text-align: right;
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* --- Generate action button at bottom --- */
.generate-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  width: 100%;
  animation: fadeIn 240ms ease;
}

.generate-action-wrap[hidden] {
  display: none !important;
}

.btn-generate-main {
  width: 100%;
  max-width: 380px;
  height: 48px;
  border-radius: var(--r-pill);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  box-shadow: var(--pill-shadow);
  transition: all 200ms ease;
}

.btn-generate-main:hover {
  background: var(--terra-dark);
  border-color: var(--terra-dark);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(198, 123, 92, 0.45);
}

.btn-generate-main:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-spark {
  margin-right: 4px;
}

.generate-security-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
}
}

.style-radio-group input[type="radio"] {
  display: none;
}

.custom-prompt {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg-card-strong);
  resize: vertical;
  min-height: 48px;
  outline: none;
  transition: border-color .2s;
  margin-bottom: 4px;
}

.custom-prompt:focus {
  border-color: var(--primary);
}

.custom-prompt::placeholder {
  color: var(--primary-soft);
  opacity: .55;
}

.custom-counter {
  font-size: .7rem;
  color: var(--text-soft);
  text-align: right;
  margin-bottom: 12px;
}

.custom-counter[hidden] {
  display: none;
}

.custom-prompt[hidden] {
  display: none;
}

/* Toggle switch */
.bg-toggle {
  margin: 8px 0;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
}

.toggle input[type="checkbox"] {
  width: 44px;
  height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .25s;
  flex-shrink: 0;
}

.toggle input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--bg-card-strong);
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.toggle input[type="checkbox"]:checked {
  background: var(--primary);
}

.toggle input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

.toggle-hint {
  font-size: .72rem;
  color: var(--text-soft);
  font-weight: 500;
  margin: 6px 0 0;
}

/* Primary button */
.primary-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: .18s;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(71,87,62,.7);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(71,87,62,.8);
}

.primary-btn:active {
  transform: translateY(0);
}

.primary-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Text button */
.text-btn {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: var(--text-soft);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  padding: 8px 16px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-btn:hover {
  color: var(--primary-dark);
}

/* --- S2-ai: AI processing --- */
.ai-processing {
  max-width: 400px;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
}

.ai-processing[hidden] {
  display: none;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.processing-text {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 6px;
}

.processing-sub {
  font-size: .8rem;
  color: var(--text-soft);
  font-weight: 500;
}

/* --- S2-failed: AI failure --- */
.ai-failed {
  max-width: 400px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
}

.ai-failed[hidden] {
  display: none;
}

.error-msg {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--terra);
  margin-bottom: 6px;
}

.error-sub {
  font-size: .8rem;
  color: var(--text-soft);
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* --- Mobile responsive for gate UI --- */
@media (max-width: 720px) {
  .hero-title {
    font-size: 1.35rem;
  }

  .hero-title .brand {
    font-size: 1.1rem;
  }

  .upload-zone {
    padding: 28px 20px;
  }

  .sample-grid {
    gap: 8px;
  }

  .sample-thumb img {
    width: 48px;
    height: 48px;
  }

  .choice-cards {
    grid-template-columns: 1fr;
  }

  .choice-card {
    width: 100%;
  }

  .choice-card__preview {
    height: 110px;
  }

  .style-radio-group {
    gap: 6px;
  }

  .style-radio-group label {
    padding: 7px 12px;
    font-size: .78rem;
  }

  .gate-choice {
    padding: 28px 16px;
  }

  .ai-config {
    padding: 24px 16px;
  }
}

/* ----------------------------------------------------------
   28. Sticker Library Panel
   ---------------------------------------------------------- */

.sticker-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg-soft);
  border-left: 1px solid var(--line);
  box-shadow: -4px 0 24px rgba(93,112,82,0.12);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

.sticker-panel[hidden] {
  display: none;
}

.sticker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--line);
}

.sticker-header h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.sticker-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.sticker-close:hover {
  background: var(--bg);
}

.sticker-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: none;
}

.sticker-tab {
  flex: none;
  padding: 5px 10px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  border-radius: var(--r-pill);
}

.sticker-tab:hover {
  color: var(--primary);
}

.sticker-tab.active {
  color: #fff;
  background: var(--primary);
}

.sticker-tab.active::after {
  display: none;
}

.sticker-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-content: start;
}

.sticker-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: grab;
  transition: all 0.15s;
  font-family: var(--sans);
}

.sticker-thumb:hover {
  background: var(--bg-card);
  border-color: var(--line);
}

.sticker-thumb:active {
  cursor: grabbing;
  background: var(--bg);
  border-color: var(--primary-soft);
}

.sticker-thumb canvas,
.sticker-thumb img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  image-rendering: pixelated;
}

.sticker-thumb-label {
  font-size: 11px;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.2;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sticker floating preview during drag */
.sticker-floating {
  position: fixed;
  pointer-events: none;
  z-index: 5000;
  opacity: 0.6;
  transform: translate(-50%, -50%);
}

.sticker-floating[hidden] {
  display: none;
}

.sticker-floating canvas {
  image-rendering: pixelated;
}

/* Sticker selection overlay on canvas (drawn via canvas API, not DOM) */
/* But we add a size label that follows the cursor during resize */
.sticker-size-label {
  position: fixed;
  pointer-events: none;
  z-index: 5001;
  background: var(--primary);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  transform: translate(8px, -100%);
  white-space: nowrap;
}

.sticker-size-label[hidden] {
  display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .sticker-panel {
    width: 100%;
    height: 50vh;
    top: auto;
    bottom: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -4px 24px rgba(93,112,82,0.12);
  }

  .sticker-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .tool-label {
    display: none;
  }
}

/* Sticker toggle button in toolbar */
.sticker-toggle-btn {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sticker-toggle-btn.active {
  background: var(--bg);
  color: var(--primary-dark);
}

.tool-label {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--sans);
  line-height: 1;
}

/* Education cards (S0, greyed out preview) - commented out to prevent conflict with .choice-card
.edu-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 480px;
  margin: 20px auto 0;
  opacity: 0.65;
  pointer-events: none;
  user-select: none;
}
.edu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  text-align: center;
}
.edu-card--ai {
  border-color: var(--ai-soft);
}
.edu-card__icon {
  font-size: 1.3rem;
}
.edu-card__title {
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--text);
}
.edu-card__desc {
  font-size: 0.7rem;
  color: var(--text-muted);
}
*/

/* Share panel (§M) */
.share-btn { border-color: var(--terra); color: var(--terra); }
.share-btn:hover { background: var(--terra); color: #fff; }
.share-panel { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.share-templates { display: flex; gap: 8px; margin-bottom: 12px; }
.share-template { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--line); background: transparent; font-size: 13px; cursor: pointer; font-family: var(--sans); }
.share-template.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.share-preview { margin-bottom: 12px; min-height: 60px; background: var(--bg-soft); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); }
.share-copy-text { display: flex; align-items: center; gap: 8px; }
.share-text { flex: 1; font-size: 13px; color: var(--text); margin: 0; line-height: 1.4; }
.copy-btn { white-space: nowrap; font-size: 12px; }

/* ============================================================
   Floating overlay panels (export / share)
   When .export-preview-panel or .share-panel is visible inside
   the workspace, we lift it to a centered floating card via
   position:fixed + backdrop.  The JS toggle (panel.hidden)
   is unchanged.
   ============================================================ */
.export-preview-panel[hidden],
.share-panel[hidden] {
  display: none;
}

.export-preview-panel,
.share-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  max-width: 480px;
  width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--bg-card-strong) 0%, var(--bg-soft) 100%);
  box-shadow: 0 32px 80px -20px rgba(60, 45, 30, 0.35), 0 0 0 1px var(--line);
  margin: 0;
  overflow: visible;
}

.export-preview-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, transparent 50%, var(--primary-tint) 50%);
  border-radius: 0 var(--r-md) 0 0;
  opacity: 0.5;
  pointer-events: none;
}

/* Overlay backdrop */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(58, 58, 52, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.overlay-backdrop[hidden] {
  display: none;
}

.export-preview-panel h4 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 700;
}

.export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.export-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card-strong);
  overflow: hidden;
  text-align: center;
}
.export-card__preview {
  width: 100%;
  height: 100px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.export-card__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.export-card__info {
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ep-icon {
  font-size: 24px;
}

.ep-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}

.ep-desc {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.export-preview-actions {
  display: flex;
  gap: 10px;
}

.export-preview-actions .btn {
  flex: 1;
}

/* Export cancel — text link style, de-emphasized */
.export-cancel-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 8px 16px;
}
.export-cancel-link:hover {
  color: var(--text);
}

/* Share panel floating overlay */
.share-title {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 700;
}
.share-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.share-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-preview-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.share-preview-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.share-preview-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.share-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.share-preview-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
}
.share-preview-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.share-preview-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.share-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-right-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-soft);
  margin: 0;
}
.share-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.share-template-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  min-height: 80px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-card-strong);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-soft);
  font-family: var(--sans);
  transition: all 140ms ease;
}
.share-template-thumb:hover {
  border-color: var(--primary-soft);
}
.share-template-thumb.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-tint);
}
.share-thumb-icon {
  font-size: 1.6rem;
}
.share-text-area {
  margin-bottom: 12px;
}
.share-text {
  font-size: 0.82rem;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.share-actions {
  display: flex;
  gap: 8px;
}
.share-actions .btn {
  flex: 1;
}

/* Close button for overlay panels */
.overlay-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--bg-card-strong);
  color: var(--text-soft);
  font-size: 16px;
  cursor: pointer;
  transition: all 140ms ease;
  z-index: 1;
}

.overlay-close:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

/* Mobile: full-width overlay */
@media (max-width: 600px) {
  .export-preview-panel,
  .share-panel {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 40px);
    padding: 24px 18px;
  }

  .export-preview-list {
    grid-template-columns: 1fr;
  }
}

/* Export preview panel (§M2) */
.export-preview-panel { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.export-preview-panel h4 { margin: 0 0 12px; font-size: 14px; font-family: var(--serif); color: var(--text); }
.export-preview-list { list-style: none; margin: 0 0 16px; padding: 0; }
.export-preview-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.export-preview-list li:last-child { border-bottom: none; }
.ep-icon { font-size: 16px; }
.ep-name { font-weight: 600; min-width: 100px; }
.ep-desc { color: var(--text-muted); font-size: 12px; }
.export-preview-actions { display: flex; gap: 8px; }
.reset-btn { border-color: var(--line); color: var(--text-muted); font-size: 12px; }
.reset-btn:hover { border-color: var(--accent-red); color: var(--accent-red); }

/* ============================================================
   29. Workspace (P2: appbar + canvas-col + sidebar)
   Token-driven layout from design/samples/workspace.html
   ============================================================ */

/* --- appbar: global header, logo left, actions right --- */
.appbar {
  grid-column: 1 / -1;
  padding: var(--sp-4) 0;
  display: flex; align-items: center; gap: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.appbar .logo { display: flex; align-items: center; gap: var(--sp-2); }
.appbar .logo .name { font-family: var(--font-display); font-size: var(--fs-d3); color: var(--moss); }
.appbar .spacer { flex: 1; }

/* --- Grid container --- */
.workspace {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 25vw, 420px);
  gap: var(--sp-5);
  align-items: start;
}

.workspace[hidden] {
  display: none;
}

/* --- Left: canvas column --- */
.canvas-col {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

/* --- canvas-bar: sticky toolbar --- */
.canvas-bar {
  position: sticky; top: var(--sp-2); z-index: 5;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
}
.canvas-bar .spacer { flex: 1; }
.canvas-bar .seg { border: 0; padding: 0; background: transparent; }
.canvas-bar .zoom-val { font-size: var(--fs-sm); font-weight: 600; }
.canvas-bar .group { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); }
.canvas-bar .divider { width: 1px; height: 18px; background: var(--line); }
.canvas-bar .zoom-btn {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  display: grid; place-items: center; background: transparent;
  font-weight: 700; color: var(--ink-soft); cursor: pointer;
  transition: background var(--t-micro) ease-out;
}
.canvas-bar .zoom-btn:hover { background: var(--moss-tint); color: var(--ink); }

/* [B3] overlay-tools + view-tabs--workspace: consolidated into .canvas-bar */

/* header 翻转钮开启态：实线苔绿描边 + 浅底，表示「镜像已开」 */
.hdr-flip-btn.is-active {
  background: var(--moss-tint);
  border: 1.5px solid var(--moss);
  color: var(--moss-deep);
}

/* canvas-bar mirror chip active state */
.canvas-bar .chip[aria-pressed="true"] {
  background: var(--moss-tint);
  color: var(--moss-deep);
  border-color: var(--moss);
}

/* [HIDE] 贴图库整体下线（右栏 section + 编辑工具栏入口 + 旧浮层 stub），含编辑视图 */
#wsSectionSticker,
#stickerToggleBtn,
#stickerPanel {
  display: none !important;
}

/* --- Stage: pegboard workspace --- */
.stage {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  display: flex; flex-direction: column; align-items: center;
}
.stage .board-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.stage .beads-area {
  flex: 1;
  min-height: 0;
}

/* Color palette strip below canvas */
.palette-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  justify-content: center;
}
.palette-strip:empty {
  display: none;
}
.palette-chip {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1.5px solid var(--line);
  cursor: default;
  position: relative;
  flex-shrink: 0;
}
.palette-chip__label {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Polaroid original photo thumbnail */
.polaroid-thumb {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 15;
  background: #fff;
  padding: 6px 6px 20px;
  border-radius: 2px;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08);
  transform: rotate(3deg);
  max-width: 90px;
}
.polaroid-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1px;
}
.polaroid-label {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--sans);
}
.polaroid-thumb[hidden] {
  display: none;
}

/* [B3] canvas-hud: consolidated into .canvas-bar (zoom controls inline) */

/* --- Right: sidebar (sticky, prop-card stack) --- */
.sidebar {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: var(--sp-4);
}

/* prop-card structure (from reference workspace.html) */
.prop-head { display: flex; align-items: baseline; justify-content: space-between; }
.prop-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.prop-card .card-title { font-size: var(--fs-body); }
.prop-card .cap { font-size: var(--fs-sm); color: var(--ink-soft); }

/* Slider (moss gradient track) */
.slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill);
  --range-progress: 18.75%;
  background: linear-gradient(90deg, var(--moss) 0 var(--range-progress), var(--moss-tint) var(--range-progress) 100%); outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--moss); cursor: pointer; }

/* Presets row */
.presets { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Ladder (color tier chips) */
.ladder { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Beads row (color swatches) */
.beads-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Row between (flex space-between) */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

/* Mini input */
.input--mini { width: 88px; text-align: center; }

/* --- Property section cards --- */
.property-section {
  background: linear-gradient(180deg, var(--bg-card-strong), var(--bg-card));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--soft-shadow);
}

.property-section + .property-section {
  margin-top: 16px;
}

.property-section[hidden] {
  display: none;
}

.property-section__title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.property-section__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Material cost prominence */
.mat-embedded-total {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--terra);
}

/* --- Workspace size inputs --- */
.ws-size-row {
  display: flex;
  gap: 10px;
}

.ws-size-label {
  flex: 1;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ws-size-input {
  width: 60px;
  padding: 6px 8px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: .78rem;
  font-family: var(--sans);
  background: var(--bg-card-strong);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
  text-align: center;
}

.ws-size-input:focus {
  border-color: var(--primary);
}

/* --- Workspace preset buttons --- */
.ws-preset-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-preset {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .72rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-card-strong);
  color: var(--text-soft);
  cursor: pointer;
  transition: .15s;
}

.ws-preset:hover {
  border-color: var(--terra-soft);
}

.ws-preset.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(71,87,62,.5);
}

/* --- Workspace brush tools --- */
.ws-brush-tools {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.ws-brush-tools .tool {
  width: 36px;
  height: 36px;
}

/* --- Workspace sticker button --- */
.ws-sticker-btn {
  width: 100%;
  justify-content: center;
}

/* --- Workspace author input --- */
.ws-author-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .82rem;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg-card-strong);
  outline: none;
  transition: border-color .2s;
}

.ws-author-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(93, 112, 82, 0.15);
}

.ws-author-input::placeholder {
  color: var(--primary-soft);
  opacity: .55;
}

/* --- Workspace export actions --- */
.ws-export-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ws-export-actions .btn {
  flex: 1;
  min-width: 0;
}

.ws-export-extras {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.ws-export-extras .btn {
  width: 100%;
}

/* ============================================================
   30. Color Drawer (B5: slides in from right)
   ============================================================ */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.18);
  transition: opacity var(--t-panel) ease-out;
}
.drawer-backdrop[hidden] { display: none; }

.color-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 90vw;
  z-index: 95;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-panel) ease-out;
}
.color-drawer[hidden] { display: flex; transform: translateX(100%); pointer-events: none; }
.color-drawer:not([hidden]) { transform: translateX(0); pointer-events: auto; }

.drawer-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.drawer-title { font-family: var(--font-display); font-size: var(--fs-d3); color: var(--ink); margin: 0; }
.drawer-summary { font-size: var(--fs-sm); color: var(--ink-soft); flex: 1; }
.drawer-close {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; color: var(--ink-soft); font-size: 18px;
  cursor: pointer; display: grid; place-items: center;
}
.drawer-close:hover { background: var(--moss-tint); }

.drawer-body {
  flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5);
}
.drawer-group-title {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
  margin: var(--sp-4) 0 var(--sp-2);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.drawer-group-title:first-child { margin-top: 0; }

.drawer-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.drawer-row:last-child { border-bottom: none; }
.drawer-row .bead { flex-shrink: 0; }
.drawer-row-id { font-weight: 600; font-size: var(--fs-sm); min-width: 36px; }
.drawer-row-name { flex: 1; font-size: var(--fs-sm); color: var(--ink-soft); }
.drawer-row-count { font-size: var(--fs-sm); font-weight: 600; min-width: 40px; text-align: right; }
.drawer-row-pct { font-size: var(--fs-cap); color: var(--ink-soft); min-width: 40px; text-align: right; }

/* Mobile: bottom sheet */
@media (max-width: 720px) {
  .color-drawer {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; max-width: 100%;
    max-height: 70vh;
    border-radius: var(--r-card) var(--r-card) 0 0;
    transform: translateY(100%);
  }
  .color-drawer:not([hidden]) { transform: translateY(0); }
}

/* ============================================================
   31. Export Overlay (B6: 2×2 polaroid cards)
   ============================================================ */
.export-overlay {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.export-overlay[hidden] { display: none; }

.export-panel {
  background: var(--surface);
  box-shadow: var(--shadow-float);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  max-width: 720px; width: 90vw;
  display: flex; flex-direction: column; gap: var(--sp-4);
}

.export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.export-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: border-color var(--t-micro) ease-out, box-shadow var(--t-micro) ease-out;
}
.export-card:hover {
  border-color: var(--moss);
  box-shadow: var(--shadow-rest);
}
.export-card .export-thumb {
  width: 100%; aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.export-card .export-thumb canvas,
.export-card .export-thumb img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.export-card .export-label {
  font-weight: 600; font-size: var(--fs-sm);
}

/* ============================================================
   32. Workspace Responsive (mobile single-column)
   ============================================================ */
@media (max-width: 1024px) {
  .workspace {
    grid-template-columns: 1fr;
    padding: var(--sp-4) var(--sp-5);
  }
  .sidebar { position: static; }
  .canvas-col { order: 1; }
  .sidebar { order: 2; }
}

@media (max-width: 720px) {

  .ws-size-row {
    flex-direction: column;
    gap: 6px;
  }

  .property-section {
    padding: 10px 12px;
    border-radius: var(--r-md);
  }

  .property-section__title {
    font-size: 0.75rem;
    padding: 2px 0;
  }

  /* Canvas takes more vertical space on mobile */
  #workspaceLayout .board { max-height: 60vh; }

  /* Hide edit toolbar in non-edit views on mobile */
  .edit-toolbar { display: none !important; }
  body[data-state="S4"] .edit-toolbar { display: flex !important; }

  .ws-export-actions {
    flex-direction: column;
  }

  .ws-export-actions .btn {
    flex: none;
  }
}

/* ============================================================================
   [STAGE-1 重建] 主页清创 — 对齐 gpt_ui高保真图/主页.png
   旧 .stage 是三栏(rail/hero/side)Frankenstein。onboarding 态只要居中单列的 hero，
   隐藏左 .rail(旧上传+尺寸残骸) 与右 .side(空材料占位)。S3+ 整个 .stage 被 app.js
   display:none，故这里直接常驻隐藏 rail/side 安全。全部消费 design-system.css token。
   ============================================================================ */
.stage > .rail,
.stage > .side {
  display: none !important;
}
.stage {
  grid-template-columns: 1fr !important;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 24px) 20px 48px;
}
.stage > .hero {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4, 18px);
}
/* hero 内各 onboarding 区块统一卡片化、居中、用设计系统 */
.gate-choice,
.ai-config,
.ai-processing,
.ai-failed,
.loading-state {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* ----------------------------------------------------------------------------
   [STAGE-1 重建] 工作台画布区 — 对齐 gpt_ui高保真图/工作台.png
   画布应填满左栏并居中（之前堆在左上、过小）。app.js 按容器尺寸算 cellSize，
   故让 canvas-stage/board-wrap 占满并居中，重渲后豆子自然变大。
   ---------------------------------------------------------------------------- */
#workspaceLayout .canvas-col {
  min-height: 78vh;
}
#workspaceLayout .stage {
  flex: 1 1 auto;
  width: 100%;
  overflow: auto; /* 放大后可滚动查看 */
}
#workspaceLayout .board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#workspaceLayout .board {
  max-width: 100%;
  max-height: 82vh;
}

/* ----------------------------------------------------------------------------
   [STAGE-1] 右操作栏独立滚动 + 可折叠 —— 修"右栏太长把整页撑高"
   右栏 sticky 固定、自身 overflow-y 滚动；次要区块默认收起。
   ---------------------------------------------------------------------------- */
#workspaceLayout .sidebar {
  align-self: start;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ded8cf transparent;
  padding-right: 4px;
}
#workspaceLayout .sidebar::-webkit-scrollbar { width: 7px; }
#workspaceLayout .sidebar::-webkit-scrollbar-thumb { background: #ded8cf; border-radius: 999px; }

/* 可折叠 property-section */
.property-section__title {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.property-section__title::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-muted);
  border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
  margin-left: 8px;
  flex: 0 0 auto;
}
.property-section.collapsed .property-section__title::after { transform: rotate(-45deg); }
.property-section.collapsed .property-section__body { display: none; }
/* 不可折叠的（无 __body 或不需要）不显示箭头 */
.property-section.no-collapse .property-section__title { cursor: default; }
.property-section.no-collapse .property-section__title::after { display: none; }

/* Edit mode: reorder sidebar — stickers first, brush second, border third */
body[data-state="S4"] #wsSectionSticker { order: -1; }
body[data-state="S4"] #wsSectionBrush { order: 0; }
body[data-state="S4"] #wsSectionBorder { order: 1; }

/* [STAGE-1 修复] 烫后 ≈ 图纸 的根因：.beads-area 的 display:flex 盖过了 [hidden] 属性，
   导致切到烫后时 图纸 canvas(mosaicCanvas) 仍浮在 post-iron canvas 上面。
   让 [hidden] 真正隐藏，烫后才显示真正的融合渲染。 */
.beads-area[hidden],
.post-iron-area[hidden] {
  display: none !important;
}

/* Post-iron canvas: outside board, clean background (no grid lines from board) */
.post-iron-area:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.post-iron-area:not([hidden]) canvas {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 2px;
  box-shadow: var(--shadow-rest);
}

/* Edit mode left toolbar */
.edit-toolbar {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  z-index: 20;
}
.edit-toolbar[hidden] {
  display: none;
}
.edit-tool {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 140ms ease;
}
.edit-tool:hover {
  background: var(--primary-tint);
  color: var(--text);
}
.edit-tool.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Upload main button */
.upload-main-btn {
  margin-top: 12px;
  height: 42px;
  padding: 0 28px;
  font-size: 0.92rem;
}

/* ----------------------------------------------------------------------------
   [STAGE-1] 装饰边框缩略图选择器 — 对齐 GPT 图（看效果选，不是文字）
   保留 .theme-pill + data-theme（app.js 绑定不变），叠加缩略图视觉。
   每个缩略图是一个套了该边框样式的迷你预览（内含一块示意"豆面"）。
   ---------------------------------------------------------------------------- */
.border-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.border-thumbs .theme-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  background: none;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm, 14px);
  cursor: pointer;
  transition: all 140ms ease;
}
.border-thumbs .theme-pill:hover { transform: translateY(-2px); }
.border-thumbs .theme-pill.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}
/* 迷你预览：一块 36x36 的"豆面"，外面套不同边框 */
.border-prev {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg, #E8B07A 0 5px, #D89A63 5px 10px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.border-prev--none { box-shadow: inset 0 0 0 1px var(--line-strong); }
/* 邮票：白底 + 齿孔虚线 */
.border-prev--stamp {
  background:
    repeating-linear-gradient(45deg, #E8B07A 0 5px, #D89A63 5px 10px);
  outline: 3px solid var(--bg-card-strong);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 4px var(--bg-card-strong), inset 0 0 0 5px transparent;
  border: 1.5px dashed var(--text-muted);
}
/* 拍立得：白框 + 底部留白 */
.border-prev--polaroid {
  border: 3px solid #fff;
  border-bottom-width: 9px;
  box-shadow: var(--soft-shadow);
}
/* 相框：原木厚边 */
.border-prev--frame {
  border: 4px solid var(--terra);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
/* 和纸：苔绿胶带角贴 */
.border-prev--washi::after {
  content: "";
  position: absolute;
  top: -3px; right: -5px;
  width: 18px; height: 8px;
  background: var(--primary);
  opacity: .75;
  transform: rotate(40deg);
  border-radius: 1px;
}

/* ============================================================================
   CSS layout repair: desktop onboarding, workspace width, and no-wrap controls.
   This final block intentionally overrides earlier duplicated layout rules.
   ============================================================================ */

.ws-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 10px;
  width: 100%;
}

.ws-export-actions .btn,
.ws-export-extras .btn,
.export-preview-actions .btn,
.share-actions .btn,
.ws-preset,
.sticker-tab,
.theme-pill,
.thumb-pick__label,
.hud-btn--grid .hud-btn-label,
.replace-image-btn,
.btn-generate-main {
  white-space: nowrap;
}

.ws-export-actions .btn,
.ws-export-extras .btn {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-btn--grid {
  width: auto;
  min-width: 64px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--r-pill);
}

@media (min-width: 721px) {
  body[data-state="S0"] .stage,
  body[data-state="S1-gate"] .stage,
  body[data-state="S1-ai"] .stage {
    max-width: min(100%, 1180px);
    padding: clamp(8px, 1.5vw, 20px) clamp(20px, 4vw, 48px) 32px;
  }

  body[data-state="S0"] .stage > .hero,
  body[data-state="S1-gate"] .stage > .hero,
  body[data-state="S1-ai"] .stage > .hero {
    max-width: 1120px;
  }

  .onboard-hero,
  .gate-choice,
  .ai-config {
    max-width: 1120px;
  }

  .onboard-hero {
    padding: clamp(16px, 2vw, 28px) 0 28px;
    gap: clamp(10px, 1.2vw, 16px);
  }

  .hero-header-text {
    margin-bottom: 0;
  }

  .hero-title-main {
    font-size: clamp(2rem, 3vw, 3.3rem);
  }

  .hero-title-sub {
    font-size: clamp(1.45rem, 2.3vw, 2.35rem);
    margin-bottom: 8px;
  }

  .upload-zone,
  .uploaded-info-box {
    max-width: 880px;
  }

  .upload-zone {
    padding: 26px 36px 28px;
  }

  .uploaded-info-box {
    padding: 14px 20px;
  }

  .onboard-divider {
    max-width: 1040px;
    margin: 10px auto 8px;
  }

  #eduCards,
  #gateChoice {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
  }

  .choice-cards-container {
    max-width: 1120px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .choice-card {
    min-height: 0;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "header header"
      "desc desc"
      "preview preview"
      "meta meta";
    align-content: start;
    column-gap: 20px;
  }

  .choice-card-header {
    grid-area: header;
    margin-bottom: 0;
  }

  .card-desc {
    grid-area: desc;
    margin: 0 0 8px;
  }

  .choice-card > .card-previews {
    grid-area: preview;
    justify-content: flex-start;
    margin: 8px 0 0;
  }

  .preview-img-wrap {
    width: clamp(86px, 7vw, 116px);
    height: clamp(86px, 7vw, 116px);
  }

  .card-meta {
    grid-area: meta;
    text-align: left;
    margin-top: 8px;
  }

  .choice-card.choice-ai {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "desc"
      "body";
  }

  .choice-card.choice-ai .card-ai-body {
    grid-area: body;
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr);
    gap: 20px;
    align-items: center;
  }

  .choice-card.choice-ai .card-previews {
    margin: 0;
  }

  .card-ai-controls {
    margin-top: 0;
    gap: 8px;
  }

  .style-radio-group {
    gap: 6px;
  }

  .style-radio-group label {
    min-width: 44px;
    white-space: nowrap;
  }

  .accordion-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .generate-action-wrap {
    margin-top: 16px;
  }

  .sample-grid {
    gap: 16px;
    margin-top: 4px;
  }

  .sample-thumb {
    min-width: 116px;
  }

  .sample-thumb img,
  .sample-thumb svg {
    width: 104px;
    height: 72px;
  }

  #workspaceLayout.workspace {
    width: 100%;
    max-width: none;
    padding: 0 clamp(18px, 2vw, 32px) 48px;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 24vw, 400px);
    gap: clamp(18px, 2vw, 28px);
  }

  #workspaceLayout .canvas-col {
    min-height: calc(100vh - 140px);
  }

  #workspaceLayout .stage {
    min-height: calc(100vh - 250px);
    padding: clamp(12px, 1.6vw, 24px);
  }

  #workspaceLayout .board-wrap {
    min-height: 0;
  }

  #workspaceLayout .board {
    max-width: 100%;
    max-height: calc(100vh - 270px);
  }

  #workspaceLayout .sidebar {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: var(--line-strong) transparent;
  }

  #workspaceLayout .sidebar::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--r-pill);
  }
}

@media (max-width: 720px) {
  body[data-state="S0"] .stage,
  body[data-state="S1-gate"] .stage,
  body[data-state="S1-ai"] .stage {
    max-width: 100%;
    padding: 0 12px 40px;
  }

  .onboard-hero {
    max-width: 100%;
    padding: 28px 16px;
    gap: 16px;
  }

  .upload-zone,
  .uploaded-info-box,
  #eduCards,
  #gateChoice,
  .choice-cards-container {
    max-width: 100%;
  }

  .choice-cards-container {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .choice-card,
  .choice-card.choice-ai {
    display: flex;
    flex-direction: column;
    padding: 18px 16px;
  }

  .choice-card.choice-ai .card-ai-body {
    display: flex;
    flex-direction: column;
  }

  .preview-img-wrap {
    width: 76px;
    height: 76px;
  }

  .sample-thumb {
    min-width: 0;
  }

  .sample-thumb img,
  .sample-thumb svg {
    width: 56px;
    height: 56px;
  }

  #workspaceLayout.workspace {
    max-width: 100%;
    grid-template-columns: 1fr;
    padding: 0 16px 40px;
  }

  .ws-export-actions {
    grid-template-columns: 1fr;
  }

  .ws-export-actions .btn {
    width: 100%;
  }

  .hud-btn--grid {
    min-width: 56px;
    padding: 0 10px;
  }
}

/* Desktop refinement after visual review: compact decision cards, stable header buttons. */
.header-actions .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 86px;
  white-space: nowrap;
}

.header-actions .btn svg {
  flex: 0 0 auto;
}

body[data-state="S3"] .app-header,
body[data-state="S4"] .app-header,
body[data-state="S6"] .app-header {
  padding: 12px 30px 10px;
}

body[data-state="S3"] .app-header h1,
body[data-state="S4"] .app-header h1,
body[data-state="S6"] .app-header h1 {
  font-size: 1.45rem;
}

body[data-state="S3"] .logo-dot,
body[data-state="S4"] .logo-dot,
body[data-state="S6"] .logo-dot {
  width: 26px;
  height: 26px;
}

#workspaceLayout .polaroid-thumb {
  display: none !important;
}

@media (min-width: 721px) {
  .choice-cards-container {
    align-items: stretch;
  }

  .choice-card,
  .choice-card.choice-ai {
    height: clamp(232px, 23vw, 260px);
    max-height: 260px;
  }

  .choice-card.choice-ai:has(.accordion-trigger.expanded) {
    height: auto;
    max-height: none;
  }

  .choice-card > .card-previews {
    margin-top: 10px;
  }

  .choice-card.choice-ai .card-ai-body {
    grid-template-columns: minmax(188px, auto) minmax(240px, 1fr);
    gap: 18px;
  }

  .choice-card.choice-ai .preview-img-wrap {
    width: 90px;
    height: 90px;
  }

  .card-ai-controls:not(:has(.accordion-trigger.expanded)) .custom-prompt-row,
  .card-ai-controls:not(:has(.accordion-trigger.expanded)) .custom-counter {
    display: none !important;
  }

  .style-radio-group label {
    height: 26px;
    padding: 0 9px;
  }

  .control-row.inline-row {
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  .accordion-trigger {
    margin-top: 2px;
  }

  #workspaceLayout .canvas-col {
    height: calc(100vh - 136px);
    min-height: 680px;
    max-height: calc(100vh - 116px);
  }

  #workspaceLayout .stage {
    min-height: 0;
    height: 100%;
    max-height: calc(100vh - 250px);
  }

  #workspaceLayout .blueprint-section {
    max-height: 100%;
    overflow: auto;
  }

  #workspaceLayout #wsBlueprintCanvas {
    width: auto;
    max-width: 100%;
    max-height: none;
  }
}

/* Choice-card IA refinement: cards are compact choices; previews are examples. */
@media (min-width: 721px) {
  .choice-cards-container {
    max-width: 920px;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }

  .choice-card,
  .choice-card.choice-ai {
    height: auto;
    min-height: 168px;
    max-height: none;
    padding: 16px 18px;
  }

  .choice-card > .card-previews {
    margin-top: 8px;
    gap: 10px;
  }

  .choice-card.choice-ai .card-ai-body {
    grid-template-columns: auto minmax(190px, 1fr);
    gap: 14px;
  }

  .choice-card .preview-img-wrap,
  .choice-card.choice-ai .preview-img-wrap {
    width: 72px;
    height: 72px;
    background-size: cover;
    background-position: center;
  }

  .choice-card[data-choice="original"] .preview-img-wrap:first-child,
  .choice-card[data-choice="ai"] .preview-img-wrap:first-child {
    background-image: url("eval/cases/templates/tpl-dog-001.jpg");
  }

  .choice-card[data-choice="original"] .preview-img-wrap:last-child {
    background-image: url("eval/cases/templates/tpl-pixel-heart-001.png");
  }

  .choice-card[data-choice="ai"] .preview-img-wrap:last-child {
    background-image: url("eval/cases/templates/tpl-loopy-001.png");
  }

  .choice-card .preview-img-wrap img {
    opacity: 0;
  }

  .card-ai-controls:not(:has(input[name="style"][value="custom"]:checked)) .custom-prompt-row,
  .card-ai-controls:not(:has(input[name="style"][value="custom"]:checked)) .custom-counter {
    display: none !important;
  }

  .card-ai-controls {
    gap: 7px;
  }

  .accordion-trigger {
    padding: 5px 0 0;
  }

  .generate-action-wrap {
    margin-top: 12px;
  }
}

/* Final choice-card compression: original is a smaller path, AI is the richer path. */
@media (min-width: 721px) {
  .choice-cards-container {
    max-width: 860px;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    gap: 14px;
  }

  .choice-card,
  .choice-card.choice-ai {
    min-height: 0;
    padding: 14px 16px;
  }

  .choice-card[data-choice="original"] {
    max-width: 360px;
  }

  .choice-card.choice-ai {
    max-width: 460px;
  }

  .choice-card .card-desc {
    margin-bottom: 6px;
  }

  .choice-card > .card-previews,
  .choice-card.choice-ai .card-previews {
    gap: 8px;
    margin: 6px 0;
  }

  .choice-card[data-choice="original"] .preview-img-wrap {
    width: 64px;
    height: 64px;
  }

  .choice-card.choice-ai .preview-img-wrap {
    width: 66px;
    height: 66px;
  }

  .choice-card[data-choice="original"] .card-meta {
    display: none;
  }

  .card-ai-controls:has(input[name="style"][value="custom"]:checked) .custom-prompt-row {
    display: grid !important;
  }
}

/* Blueprint view: preserve the square pixel grid and keep it visible in the first viewport. */
@media (min-width: 721px) {
  #workspaceLayout:has(#wsBlueprintSection:not([hidden])) .canvas-col {
    height: auto;
    min-height: 0;
    max-height: none;
    align-self: start;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #workspaceLayout:has(#wsBlueprintSection:not([hidden])) .canvas-stage {
    justify-content: flex-start;
    overflow: visible;
    padding: 0;
  }

  #workspaceLayout:has(#wsBlueprintSection:not([hidden])) .board-wrap {
    justify-content: flex-start;
    height: auto;
    min-height: 0;
  }

  /* S6 标准图纸视图：隐藏画布辅助元素（palette/info），canvas-bar 保留用于切视图 */
  #workspaceLayout:has(#wsBlueprintSection:not([hidden])) .palette-strip,
  #workspaceLayout:has(#wsBlueprintSection:not([hidden])) .info-chip {
    display: none !important;
  }

  #workspaceLayout #wsBlueprintSection {
    width: 100%;
    max-height: none;
    margin-bottom: 0;
    overflow: visible;
  }

  #workspaceLayout #wsBlueprintSection .blueprint-controls {
    position: relative;
    top: auto;
    z-index: 30;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    margin: 0 auto 8px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-card-strong);
    box-shadow: var(--soft-shadow);
  }

  #workspaceLayout #wsBlueprintSection .blueprint-controls .btn {
    flex: 0 0 auto !important;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--r-pill);
    font-size: 0;
    white-space: nowrap;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
  }

  #workspaceLayout #wsBlueprintSection .blueprint-controls .btn::before {
    font-size: 1rem;
    line-height: 1;
  }

  #workspaceLayout #wsBackFromBlueprintBtn::before {
    content: "←";
  }

  #workspaceLayout #wsExportBlueprintPngBtn::before {
    content: "↓";
  }

  #workspaceLayout #wsBlueprintSection .blueprint-canvas-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    max-height: calc(100vh - 132px);
    overflow: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #workspaceLayout #wsBlueprintCanvas {
    max-width: 100%;
    height: auto;
    max-height: none;
  }
}

/* ============================================================================
   AI 优化重构（方案 B）—— 选中框 AI 按钮 / 已优化角标 / 弹窗内组件
   app 层只消费 design-system token，弹窗骨架在 design-system.css(.ds-modal)
   ============================================================================ */

/* S0 上传区下的 AI·免费 承接小字 */
.upload-ai-note {
  margin: var(--sp-2) auto 0;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ai-dark);
}
body:not([data-state="S0"]) .upload-ai-note { display: none; }

/* 选中框：缩略图容器 + 已优化角标 */
.uploaded-thumb-wrap {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
}
.uploaded-thumb-badge {
  position: absolute;
  left: -4px;
  bottom: -6px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--ai);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.4;
  box-shadow: var(--soft-shadow);
  white-space: nowrap;
}
.uploaded-thumb-badge[hidden] { display: none; }

/* 选中框右侧动作组 */
.uploaded-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-optimize-btn {
  height: 32px;
  font-size: 0.78rem;
  padding: 0 12px;
  color: var(--ai-dark);
  border-color: var(--ai-soft);
}
.ai-optimize-btn:hover {
  color: #fff;
  background: var(--ai);
  border-color: var(--ai);
}
.ai-optimize-btn .btn-spark { font-size: 0.85em; }

/* ---- 弹窗内：风格 chip（缩略示意图 + 名称）---- */
.style-chip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.style-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 4px 7px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  background: var(--bg-card-strong);
  transition: all 140ms ease;
}
.style-chip:hover { transform: translateY(-2px); box-shadow: var(--soft-shadow); }
.style-chip.is-active {
  border-color: var(--ai);
  box-shadow: 0 0 0 3px var(--ai-soft);
}
.style-chip__thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--primary-tint);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text-soft);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.style-chip__thumb svg { width: 58%; height: 58%; }
.style-chip__label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-soft);
}
.style-chip:hover .style-chip__thumb { color: var(--ai-dark); }
.style-chip.is-active .style-chip__thumb {
  background: var(--ai-soft);
  border-color: var(--ai);
  color: var(--ai-dark);
}
.style-chip.is-active .style-chip__label { color: var(--ai-dark); }
.style-chip--custom .style-chip__thumb { background: var(--ai-soft); color: var(--ai-dark); }

/* 风格网格下的诚实提示：上游不伪造预览，结果态出真对比 */
.ai-style-hint {
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---- 弹窗内：自定义 prompt ---- */
.ai-custom-field { gap: 6px; }
.ai-custom-textarea {
  min-height: 64px;
  resize: vertical;
  font-family: var(--sans);
}
.ai-custom-counter {
  margin: 0;
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---- 弹窗内：字段行 ---- */
.ai-field { display: flex; flex-direction: column; gap: 10px; }
.ai-field[hidden] { display: none !important; }
.ai-field--row { flex-direction: row; align-items: center; justify-content: space-between; }
.ai-field__label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text);
}

/* ---- 弹窗内：处理中 / 失败态 ---- */
.ai-modal-spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--ai-soft);
  border-top-color: var(--ai);
  animation: aiSpin 800ms linear infinite;
  margin-bottom: var(--sp-2);
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-modal-state-emoji { font-size: 2rem; margin: 0 0 var(--sp-1); }
.ai-modal-state-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
}
.ai-modal-state-sub {
  margin: 2px 0 var(--sp-3);
  font-size: 0.82rem;
  color: var(--text-soft);
}

/* ---- 弹窗内：结果前后对比 ---- */
.ai-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.ai-compare__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ai-compare__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.ai-compare__img--ai { border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-soft); }
.ai-compare__arrow { color: var(--text-muted); font-size: 1.2rem; flex: 0 0 auto; }
.ai-compare__label { font-size: 0.78rem; font-weight: 700; color: var(--text-soft); }
.ai-compare__label--ai { color: var(--ai-dark); }

/* AC8: 移动端弹窗前后对比纵向堆叠，不溢出 */
@media (max-width: 480px) {
  .ai-compare { flex-direction: column; }
  .ai-compare__col { width: 100%; max-width: 200px; }
  .ai-compare__arrow { transform: rotate(90deg); }
  .ds-modal__footer { flex-wrap: wrap; }
  .ds-modal__footer .btn { flex: 1 1 auto; }
  .style-chip__label { font-size: 0.66rem; }
}

/* P1 前置门 · 移动端（<900px）两栏落单列 */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { margin-top: var(--sp-5); }
  .shots { margin-top: var(--sp-5); }
  .topbar { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}