:root {
  color-scheme: light;
  --quartz: #fffdf8;
  --paper: #f5f1e9;
  --paper-deep: #eee9df;
  --ink: #232622;
  --muted: #676b66;
  --line: #ded9cf;
  --line-strong: #c9c4b9;
  --teal: #2e8b84;
  --teal-dark: #236d68;
  --mist: #dcefed;
  --danger: #9b3f45;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --header-height: 58px;
  --focus: 0 0 0 3px rgba(46, 139, 132, 0.28);
}

html[lang="zh-CN"] {
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Songti SC", STSong, "Noto Serif CJK SC", "Iowan Old Style", Baskerville, serif;
}

* { box-sizing: border-box; }

html,
body { height: 100%; }

html { background: var(--quartz); }

body {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--quartz);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body.sheet-open { overflow: hidden; }

button,
input,
textarea,
select { color: inherit; font: inherit; }

button,
a,
input,
textarea,
select,
summary { -webkit-tap-highlight-color: transparent; }

button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible { outline: none; box-shadow: var(--focus); }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.studio-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  height: var(--header-height);
  padding: 8px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(222, 217, 207, 0.9);
  background: rgba(255, 253, 248, 0.97);
  backdrop-filter: blur(18px);
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  width: max-content;
  color: var(--ink);
  text-decoration: none;
}

.wordmark strong {
  font-size: 15px;
  font-weight: 740;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.wordmark span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  line-height: 1;
  text-transform: uppercase;
}

.journey-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-dark);
}

.journey-status span {
  padding: 4px 9px;
  border: 1px solid #b8d8d4;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
}

.journey-status strong { display: none; }

.quiet-header-action {
  min-height: 42px;
  padding: 0 0 0 5px;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 720;
}

.quiet-header-action span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 3px;
  border: 1px solid #b8d8d4;
  border-radius: 999px;
  font-size: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-switch {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 740;
  text-decoration: none;
}

html[lang="zh-CN"] .intent-kicker,
html[lang="zh-CN"] .result-eyebrow,
html[lang="zh-CN"] .section-kicker,
html[lang="zh-CN"] .wordmark span {
  letter-spacing: 0.08em;
}

html[lang="zh-CN"] .workspace-tab strong,
html[lang="zh-CN"] .studio-action-row button,
html[lang="zh-CN"] .quick-look-slot button {
  letter-spacing: 0;
}

.workspace-app {
  display: grid;
  grid-template-rows: auto 50px minmax(0, 1fr) 72px;
  width: min(100%, 1180px);
  height: calc(100dvh - var(--header-height));
  margin: 0 auto;
  overflow: hidden;
  background: var(--quartz);
}

.bracelet-workbench {
  min-width: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.intent-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  width: 100%;
  min-height: 46px;
  padding: 5px 1px 7px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}

.intent-kicker {
  grid-column: 1 / -1;
  margin-bottom: 1px;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#intent-display {
  max-width: 30ch;
  overflow: hidden;
  font-size: clamp(12px, 3.6vw, 15px);
  font-weight: 560;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intent-edit {
  padding-left: 10px;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 730;
}

.bracelet-stage {
  position: relative;
  width: 100%;
  height: clamp(205px, 28svh, 292px);
  margin-top: 7px;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
}

.bracelet-stage .bracelet-3d-canvas,
.bracelet-stage .bracelet-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.bracelet-3d-canvas {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  touch-action: manipulation;
}

.bracelet-canvas {
  z-index: 3;
  overflow: visible;
}

.bracelet-ring,
.bracelet-word { display: none; }

.legacy-ring-guide {
  fill: none;
  stroke: rgba(200, 180, 140, 0.16);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.legacy-bracelet-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: min(64vw, 272px);
  height: min(64vw, 272px);
  /* Compact laptops can have a wide workbench but a short stage. The old
     desktop width rule could therefore create a 410px SVG inside a 290px-tall
     stage and let overflow:hidden crop the top and bottom beads. Keep the SVG
     inside both measured axes; preserveAspectRatio keeps the strand circular. */
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
  transform: translate(-50%, -50%);
}

.legacy-bracelet-turntable { will-change: transform; }

.legacy-svg-bead {
  cursor: grab;
  outline: none;
  touch-action: none;
}

.legacy-svg-bead.is-animating,
.legacy-svg-bead.dragging { will-change: transform, opacity; }

.legacy-bead-hit {
  fill: transparent;
  pointer-events: all;
}

.legacy-bead-core {
  opacity: 0.45;
  pointer-events: none;
}

.legacy-bead-photo {
  image-rendering: auto;
  pointer-events: none;
  user-select: none;
}

.legacy-selection-dot {
  fill: var(--teal);
  stroke: var(--quartz);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 1.5px rgba(35, 38, 34, 0.2));
}

.legacy-svg-bead.selected .legacy-selection-dot { opacity: 1; }

.legacy-drop-ring {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.legacy-svg-bead.drop-target .legacy-drop-ring { opacity: 1; }
.legacy-svg-bead.dragging { cursor: grabbing; }
.legacy-svg-bead.dragging .legacy-bead-photo {
  filter: drop-shadow(0 5px 7px rgba(28, 30, 30, 0.2));
}
.legacy-svg-bead:focus-visible .legacy-drop-ring {
  opacity: 1;
  stroke-dasharray: none;
}

.legacy-bead-bloom {
  fill: none;
  stroke-width: 1.5;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.empty-ring {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.stage-coach {
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 9px;
  display: grid;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 9px;
  background: rgba(255, 253, 248, 0.86);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(35, 38, 34, 0.09);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.stage-coach strong { font-size: 9px; }
.stage-coach span { color: var(--muted); font-size: 9px; }
.stage-coach.dismissed { display: none; }
/* 空串没有珠子可点:未生成时不显示"点任意一颗"提示 */
body[data-user-generated="false"] .stage-coach { display: none; }

.studio-tools {
  width: min(100%, 420px);
  margin: -2px auto 5px;
}

.studio-action-row,
.quick-look-slots {
  display: grid;
  gap: 5px;
}

.studio-action-row { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.quick-look-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 5px; }

.studio-action-row button,
.quick-look-slot > button:first-child {
  min-width: 0;
  min-height: 44px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.78);
  color: var(--ink);
  font-size: 12px;
  font-weight: 740;
  letter-spacing: 0.01em;
}

.studio-action-row .lucky-action {
  border-color: var(--teal);
  background: var(--mist);
  color: var(--teal-dark);
}

.studio-action-row button:disabled,
.quick-look-slot button:disabled { opacity: 0.34; cursor: default; }

.quick-look-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.quick-look-slot > button:first-child {
  min-height: 40px;
  border-radius: 8px;
  color: var(--teal-dark);
}

.quick-look-slot.filled > button:first-child {
  border-color: rgba(64, 139, 132, 0.48);
  background: rgba(232, 245, 241, 0.78);
}

.quick-look-slot-clear {
  min-width: 42px;
  min-height: 40px;
  margin-left: 3px;
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.workbench-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(130px, 0.65fr);
  gap: 12px;
  min-height: 112px;
  padding: 9px 1px 10px;
}

.result-copy { min-width: 0; }

.result-eyebrow,
.section-kicker {
  margin: 0 0 2px;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 790;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.result-copy h1 {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--serif);
  font-size: clamp(25px, 7vw, 35px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.result-copy #result-reason {
  display: -webkit-box;
  max-width: 48ch;
  margin: 7px 0 0;
  overflow: hidden;
  color: #353833;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 520;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.result-contract {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.result-contract > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 22px;
  padding: 4px 7px;
  border: 1px solid rgba(64, 139, 132, 0.2);
  border-radius: 999px;
  background: rgba(232, 245, 241, 0.54);
  white-space: nowrap;
}

.result-contract small {
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 790;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-contract strong { color: #353833; font-size: 9.5px; font-weight: 680; }

.structure-story-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 760;
  text-align: left;
}

.pending-design-notice {
  padding: 16px;
  border: 1px solid #b8d8d4;
  border-radius: 10px;
  background: rgba(232, 245, 241, 0.58);
}

.pending-design-notice h3 { margin: 4px 0 8px; font-family: var(--serif); font-size: 21px; }
.pending-design-notice p:last-child { margin: 0; color: #4a4d48; font-size: 12px; line-height: 1.55; }

body[data-intent-dirty="true"] .bracelet-stage { opacity: 0.72; }
body[data-intent-dirty="true"] .workbench-summary { border-top: 1px dashed #9bcac5; }

.structure-library-card.tier-adapted { border-color: rgba(64, 139, 132, 0.42); }
.structure-library-card.tier-archive { background: #f5f1e9; }
.structure-library-card.tier-archive strong { color: #535852; }
.structure-library-card.tier-archive em { color: #6e716c; }

.structure-story-action b {
  display: inline-grid;
  min-width: 21px;
  height: 18px;
  place-items: center;
  border: 1px solid #b8d8d4;
  border-radius: 999px;
  background: var(--mist);
  font-size: 9px;
}

.result-commerce {
  display: grid;
  align-content: center;
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.fit-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.fit-facts span { display: grid; min-width: 0; }
.fit-facts strong { font-size: 9px; line-height: 1.15; white-space: nowrap; }
.fit-facts small { color: var(--muted); font-size: 9px; }

.exact-build-line {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.exact-build-line i { color: var(--teal-dark); font-style: normal; }

.workspace-tabs {
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--quartz);
}

.workspace-tab[hidden] { display: none; }
body[data-flow-steps="5"] .workspace-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.workspace-tab {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 48px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.workspace-tab span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 780;
}

.workspace-tab strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-tab.active { color: var(--teal-dark); }
.workspace-tab.active span { border-color: var(--teal); background: var(--mist); }

.workspace-tab.active::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  background: var(--teal);
}

.workspace-panels {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}

.workspace-panel {
  height: 100%;
  padding: 16px 15px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.workspace-panel:not(.active) { display: none; }

.panel-intro {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 14px;
}

.step-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #b8d8d4;
  border-radius: 50%;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 780;
}

.panel-intro h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.panel-intro > div > p:last-child {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.choice-block,
.fit-block {
  min-width: 0;
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.choice-block legend,
.fit-block legend {
  display: block;
  width: 100%;
  margin: 0 0 9px;
  padding: 0;
  font-size: 11px;
  font-weight: 760;
}

.quick-moments { padding-top: 14px; }

.moment-examples,
.choice-chips,
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.moment-examples button,
.filter-row button {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--quartz);
  font-size: 10px;
  font-weight: 700;
}

.moment-examples button.active,
.filter-row button.active {
  border-color: var(--teal);
  background: var(--mist);
  color: var(--teal-dark);
}

.moment-field,
.search-field,
.save-current-row label,
.birth-fields > label,
.budget-field,
.wrist-field {
  display: grid;
  gap: 6px;
  color: #4a4d48;
  font-size: 10px;
  font-weight: 720;
}

.moment-field { position: relative; padding: 13px 0; border-top: 1px solid var(--line); }
.moment-field-primary { padding-top: 0; border-top: 0; }
.moment-field-primary > span { color: var(--teal-dark); font-size: 9px; letter-spacing: 0.04em; }

.moment-field textarea,
.search-field input,
.save-current-row input,
.birth-fields input,
.birth-fields select,
.budget-field select,
.wrist-field input,
.code-row input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fffefa;
  font-size: 14px;
}

.moment-field textarea {
  min-height: 64px;
  padding: 11px 44px 11px 12px;
  border-color: rgba(64, 139, 132, 0.46);
  background: rgba(255, 254, 250, 0.96);
  box-shadow: inset 3px 0 0 rgba(64, 139, 132, 0.18);
  resize: vertical;
  line-height: 1.4;
}

.moment-field > small {
  position: absolute;
  right: 10px;
  bottom: 23px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

.free-text-retention-note {
  display: block;
  margin: 0 0 2px;
  padding: 8px 10px;
  border-left: 2px solid rgba(64, 139, 132, 0.54);
  background: rgba(232, 245, 241, 0.32);
  color: #626a67;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
}
.free-text-retention-note > span { display: none; }
html[lang="en"] .free-text-retention-note > span[lang="en"],
html[lang="zh-CN"] .free-text-retention-note > span[lang="zh-CN"] { display: inline; }

.choice-chips label,
.gender-options label,
.mode-grid label,
.size-options label { position: relative; }

.choice-chips input,
.gender-options input,
.mode-grid input,
.size-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice-chips span,
.gender-options span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--quartz);
  font-size: 10px;
  font-weight: 680;
  cursor: pointer;
}

.choice-chips input:checked + span,
.gender-options input:checked + span,
.mode-grid input:checked + span,
.size-options input:checked + span {
  border-color: var(--teal);
  background: var(--mist);
  color: var(--teal-dark);
}

.choice-chips input:focus-visible + span,
.gender-options input:focus-visible + span,
.mode-grid input:focus-visible + span,
.size-options input:focus-visible + span { box-shadow: var(--focus); }

.advanced-guidance,
.design-code-panel,
.community-panel {
  margin: 0;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.advanced-guidance summary,
.design-code-panel summary,
.community-panel summary {
  min-height: 42px;
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
}

.advanced-guidance .choice-block { border-top: 0; }
.budget-field { margin-bottom: 12px; }

.style-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.style-follow-choice {
  display: block;
  margin: 8px 0 10px;
}

.style-follow-choice input { position: absolute; opacity: 0; pointer-events: none; }
.style-follow-choice > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.style-follow-choice strong { font-size: 11px; }
.style-follow-choice small { color: var(--muted); font-size: 10px; }
.style-follow-choice input:checked + span { border-color: var(--teal); background: var(--mist); color: var(--teal-deep); }

.style-choice-grid label { position: relative; min-width: 0; }
.style-choice-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.style-choice-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  min-height: 72px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--quartz);
  cursor: pointer;
}

.style-choice-grid input:checked + .style-choice-card {
  border-color: var(--teal);
  background: var(--mist);
  box-shadow: inset 0 0 0 1px rgba(46, 139, 132, 0.16);
}

.style-choice-grid input:focus-visible + .style-choice-card { box-shadow: var(--focus); }
.style-choice-stones {
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  width: 56px;
}
.style-choice-stones img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 2px 2px rgba(35, 38, 34, 0.15));
}
.style-choice-stones img + img { margin-left: -13px; }
.style-choice-card strong { align-self: end; font-size: 10.5px; line-height: 1.2; }
.style-choice-card small { align-self: start; margin-top: 2px; color: var(--muted); font-size: 8.5px; line-height: 1.3; }

.mode-grid { display: grid; gap: 7px; }

.path-choice-grid {
  display: grid;
  gap: 8px;
}

.path-choice-grid label { position: relative; }
.path-choice-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.path-choice-grid label > span {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 94px;
  padding: 15px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--quartz);
  cursor: pointer;
}

.path-choice-grid label:first-child > span { padding-top: 37px; }
.path-choice-grid b {
  position: absolute;
  top: 11px;
  left: 13px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--teal-dark);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.path-choice-grid strong { font-size: 12px; }
.path-choice-grid small { color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.path-choice-grid input:checked + span {
  border-color: var(--teal);
  background: linear-gradient(145deg, rgba(232, 245, 241, 0.84), rgba(255, 253, 248, 0.98));
  box-shadow: inset 3px 0 0 rgba(64, 139, 132, 0.34);
}
.path-choice-grid input:focus-visible + span { box-shadow: var(--focus); }
.path-choice-note,
.spec-contract-note,
.stone-edit-contract,
.bead-safety-note {
  margin: 9px 0 0;
  padding: 9px 10px;
  border-left: 2px solid var(--teal);
  background: rgba(232, 245, 241, 0.42);
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.5;
}

.mode-grid label > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--quartz);
  cursor: pointer;
}

.mode-grid strong { font-size: 10px; }
.mode-grid small { color: var(--muted); font-size: 9px; }

.birth-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.birth-location-field,
.unknown-hour-choice,
.unknown-hour-switch { grid-column: 1 / -1; }

.unknown-hour-switch {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(232, 245, 241, 0.38);
  color: var(--ink);
  text-align: left;
}
.unknown-hour-switch strong { color: var(--teal-dark); font-size: 11px; }
.unknown-hour-switch small { color: var(--muted); font-size: 9.5px; font-weight: 500; line-height: 1.45; }
.unknown-hour-switch:hover { border-color: var(--teal); background: var(--mist); }

.personalization-story {
  display: grid;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid rgba(64, 139, 132, 0.34);
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(232, 245, 241, 0.55), rgba(255, 254, 250, 0.94));
}
.personalization-story > header { display: grid; gap: 5px; }
.personalization-story h3 { margin: 0; font: 400 clamp(26px, 3.1vw, 40px)/1.12 var(--display); }
.personalization-story header > p:not(.section-kicker) { margin: 0; color: #4f534d; line-height: 1.58; }
.personalization-story header > small { color: var(--teal-dark); font-size: 9.5px; }
.personalization-evidence { display: grid; gap: 8px; }
.personalization-observations { display: grid; gap: 8px; }
.personalization-observations > .section-kicker,
.personalization-bridge > .section-kicker,
.personalization-safe-changes > .section-kicker { margin: 0 0 2px; }
.personalization-observation strong { font-size: 12px; line-height: 1.5; }
.personalization-observation .observation-effect { color: var(--teal-dark); }
.personalization-observation .observation-affected { font-size: 10px; }
.personalization-observation .observation-sources {
  color: #8a8d86;
  font-size: 9px;
  line-height: 1.5;
  word-break: break-all;
}
.personalization-safe-changes p { margin: 0; color: #545851; font-size: 10.5px; line-height: 1.62; }
.personalization-palette { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 254, 250, 0.82); }
.personalization-palette p { margin: 0; color: #545851; font-size: 10.5px; line-height: 1.62; }
.personalization-palette .palette-intro { color: var(--teal-dark); }
.empty-stage-guide {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 24px;
  text-align: left;
  background: rgba(255, 253, 248, 0.92);
  z-index: 2;
}
.empty-stage-guide[hidden] { display: none; }
/* 引导卡显示时,压掉画布里的旧占位文案,避免叠字 */
.bracelet-stage:has(.empty-stage-guide:not([hidden])) .empty-ring { display: none; }
.empty-stage-guide ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.empty-stage-guide li { display: grid; gap: 2px; max-width: 300px; }
.empty-stage-guide li strong { font-size: 13px; }
.empty-stage-guide li span { color: #6b6f68; font-size: 10.5px; line-height: 1.55; }
.personalization-domains { display: grid; gap: 8px; }
.personalization-domains > .section-kicker { margin: 0 0 2px; }
.personalization-domain {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 254, 250, 0.82);
}
.personalization-domain .domain-head { display: flex; justify-content: space-between; align-items: baseline; }
.personalization-domain .domain-head strong { font-size: 13px; }
.personalization-domain .domain-verdict {
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.04em;
  color: var(--teal-dark);
}
.personalization-domain[data-verdict="tight"] .domain-verdict { color: #9d5b32; }
.personalization-domain[data-verdict="smooth"] .domain-verdict { color: #6e7c6b; }
.personalization-domain p { margin: 0; color: #545851; font-size: 10.5px; line-height: 1.62; }
.personalization-domain .domain-prescription { color: var(--teal-dark); font-weight: 600; }
.personalization-stones .lane-intro {
  margin: 4px 0 0;
  color: var(--teal-dark);
  font-size: 10.5px;
  line-height: 1.6;
}
.personalization-evidence article,
.personalization-observation,
.personalization-safe-changes,
.personalization-bridge,
.personalization-stones article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 254, 250, 0.82);
}
.personalization-evidence span,
.personalization-bridge > span {
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.04em;
}
.personalization-evidence strong,
.personalization-bridge strong { font-size: 13px; }
.personalization-evidence p,
.personalization-bridge p,
.personalization-stones p { margin: 0; color: #545851; font-size: 10.5px; line-height: 1.62; }
.personalization-stones { display: grid; gap: 8px; }
.personalization-stones-details {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.personalization-stones-details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  color: var(--teal-dark);
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
  list-style: none;
}
.personalization-stones-details > summary::-webkit-details-marker { display: none; }
.personalization-stones-details > summary::before {
  content: "＋";
  margin-right: 8px;
  color: var(--teal-dark);
}
.personalization-stones-details[open] > summary::before { content: "−"; }
.personalization-stones-details > summary > span { flex: 1; }
.personalization-stones-details > summary > b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border: 1px solid rgba(64, 139, 132, 0.32);
  border-radius: 999px;
  font-size: 9px;
}
.personalization-stones-details[open] .personalization-stones { padding-bottom: 10px; }
.personalization-stones article > div { display: flex; justify-content: space-between; gap: 10px; }
.personalization-stones article strong { font-size: 11px; }
.personalization-stones article span,
.personalization-stones article small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.personalization-boundary {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

body[data-design-mode="builder"] .path-choice-note {
  border-left-color: #8b795f;
  background: rgba(243, 238, 226, 0.56);
}

.unknown-hour-choice { position: relative; }
.unknown-hour-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.unknown-hour-choice > span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 11px 12px 11px 42px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--quartz);
  cursor: pointer;
}
.unknown-hour-choice > span::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 13px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fffefa;
}
.unknown-hour-choice strong { font-size: 10px; }
.unknown-hour-choice small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.4; }
.unknown-hour-choice > input:checked + span { border-color: var(--teal); background: var(--mist); }
.unknown-hour-choice > input:checked + span::before { border: 5px solid var(--teal); }
.unknown-hour-choice > input:focus-visible + span { box-shadow: var(--focus); }

.birth-preview-card,
.design-decision-summary,
.final-fit-summary,
.final-authority-summary {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(64, 139, 132, 0.28);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 253, 248, 0.96), rgba(232, 245, 241, 0.58));
}
.birth-preview-card h3,
.final-fit-summary h3,
.final-authority-summary h3 { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.birth-preview-card > p:last-child,
.final-fit-summary p,
.final-authority-summary p { margin: 0; color: var(--muted); font-size: 9.5px; line-height: 1.55; }
.final-authority-summary > small { color: var(--teal-dark); font-size: 9px; line-height: 1.5; }
.final-fit-summary > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.final-fit-summary > div > span { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 253, 248, 0.8); }
.final-fit-summary small { color: var(--muted); font-size: 8px; }
.final-fit-summary strong { font-size: 11px; }

.design-decision-summary { margin: 0 0 15px; }
.design-decision-summary > #decision-order-summary { display: grid; gap: 8px; }
.design-decision-summary > #decision-order-summary > div {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
}
.design-decision-summary > #decision-order-summary > div + div {
  padding-top: 8px;
  border-top: 1px solid rgba(209, 205, 195, 0.72);
}
.design-decision-summary > #decision-order-summary > div > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--teal);
  border-radius: 50%;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 780;
}
.design-decision-summary > #decision-order-summary > div > strong { font-size: 11px; }
.design-decision-summary > #decision-order-summary > div > small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.refine-heading { margin: 0 0 9px; font-size: 11px; }

.birth-boundary-note {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 10px 11px;
  border-left: 2px solid var(--teal);
  background: rgba(232, 245, 241, 0.52);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.birth-boundary-note strong { display: block; margin-bottom: 2px; color: var(--teal-dark); font-size: 9px; }

.gender-options {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
}

.refine-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.refine-actions button {
  display: grid;
  gap: 2px;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--quartz);
  text-align: left;
}

.refine-actions button.active,
.refine-actions button:hover { border-color: var(--teal); background: var(--mist); }
.refine-actions strong { font-size: 11px; }
.refine-actions small { color: var(--muted); font-size: 9px; }

.direction-proof {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.design-thesis-proof {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 253, 248, 0.96), rgba(240, 247, 244, 0.82));
}

.design-thesis-proof[hidden] { display: none; }

.thesis-proof-header h3 {
  margin: 1px 0 4px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.thesis-proof-header > p:last-child {
  margin: 0;
  color: #353833;
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.45;
}

.thesis-adjustment,
.thesis-bazi-line {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 8px 9px;
  border-left: 2px solid var(--teal);
  background: rgba(220, 239, 237, 0.52);
  color: #363b36;
  font-size: 9.5px;
  line-height: 1.45;
}

.thesis-source-chain {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 9px 10px;
  border-left: 2px solid var(--teal);
  background: rgba(255, 253, 248, 0.74);
}

.thesis-source-chain span {
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.thesis-source-chain strong { font-size: 11.5px; }
.thesis-source-chain p,
.thesis-source-chain small {
  margin: 0;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.45;
}
.thesis-source-chain small { color: var(--teal-dark); }

.structure-evidence-card {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 253, 248, 0.78);
}
.structure-evidence-card h4 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.structure-evidence-card > p:not(.section-kicker),
.structure-evidence-card small { margin: 0; color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.structure-evidence-card small { color: var(--teal-dark); }

.decision-proof-details {
  border-top: 1px solid var(--line);
}
.decision-proof-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
  list-style: none;
}
.decision-proof-details summary::-webkit-details-marker { display: none; }
.decision-proof-details summary::after { content: "+"; font-size: 16px; font-weight: 500; }
.decision-proof-details[open] summary::after { content: "−"; }
.decision-proof-details > div { display: grid; gap: 8px; padding-bottom: 3px; }
.decision-proof-details > div > p {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 9px 10px;
  border-left: 2px solid var(--teal);
  background: rgba(232, 245, 241, 0.42);
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.5;
}
.decision-proof-details > div > p strong { color: var(--teal-dark); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }

.birth-delta-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(64, 139, 132, 0.28);
  border-radius: 9px;
  background: rgba(232, 245, 241, 0.58);
}

.birth-delta-card.confirmed { background: rgba(255, 253, 248, 0.8); }
.birth-delta-card.edited,
.birth-delta-card.unavailable {
  grid-template-columns: minmax(0, 1fr);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.5);
}
.birth-delta-count {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 54px;
  border: 1px solid rgba(64, 139, 132, 0.3);
  border-radius: 50%;
  color: var(--teal-dark);
}
.birth-delta-count strong { font-family: var(--serif); font-size: 23px; line-height: 1; }
.birth-delta-count span { margin-top: 2px; font-size: 8px; font-weight: 760; }
.birth-delta-card h4 { margin: 2px 0 4px; font-size: 11.5px; }
.birth-delta-card p:last-of-type { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.birth-delta-card ul { display: grid; gap: 4px; margin: 7px 0 0; padding: 0; list-style: none; }
.birth-delta-card li { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid rgba(64, 139, 132, 0.18); font-size: 10.5px; }
.birth-delta-card li span { color: var(--teal-dark); text-align: right; }

.intent-priority-note {
  margin: 9px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--teal);
  background: rgba(232, 245, 241, 0.42);
  color: var(--teal-dark);
  font-size: 9px;
  line-height: 1.5;
}

.choice-chips label[data-priority] { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.choice-chips label[data-priority]::after {
  content: attr(data-priority);
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 20px;
  margin-left: 0;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--teal-dark);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.choice-chips label[data-priority="primary"]::after { content: "need 1"; }
.choice-chips label[data-priority="secondary"]::after { content: "need 2"; background: var(--mist); border: 1px solid var(--teal); color: var(--teal-dark); }

.choice-chips label[data-priority="filter"]::after {
  content: "stones";
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal-dark);
}

html[lang="zh-CN"] .choice-chips label[data-priority="primary"]::after { content: "选择1"; }
html[lang="zh-CN"] .choice-chips label[data-priority="secondary"]::after { content: "选择2"; }
html[lang="zh-CN"] .choice-chips label[data-priority="filter"]::after { content: "选石"; }

.thesis-adjustment span,
.thesis-bazi-line span,
.thesis-chain span {
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.thesis-chain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.thesis-chain article:last-child { grid-column: 1 / -1; }

.thesis-chain article {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.78);
}

.thesis-chain strong,
.thesis-chain p { display: block; margin: 0; }
.thesis-chain strong { margin-top: 3px; font-size: 11px; }
.thesis-chain p { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }

.thesis-role-list { display: grid; gap: 5px; }

.thesis-role-list > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 5px 0;
  border-bottom: 1px solid rgba(209, 205, 195, 0.64);
}

.thesis-role-list > div:last-child { border-bottom: 0; }
.thesis-role-list img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.thesis-role-list span { display: grid; min-width: 0; }
.thesis-role-list strong { font-size: 10.5px; }
.thesis-role-list small { margin-top: 2px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.thesis-role-list em {
  margin-top: 3px;
  color: var(--teal-dark);
  font-size: 9.5px;
  font-style: normal;
  line-height: 1.35;
}

.thesis-role-list > div.birth-matched {
  margin: 1px -6px;
  padding: 7px 6px;
  border: 1px solid rgba(64, 139, 132, 0.26);
  border-radius: 8px;
  background: rgba(232, 245, 241, 0.52);
}

.birth-match-badge {
  justify-self: start;
  margin-top: 4px;
  padding: 3px 6px;
  border: 1px solid rgba(64, 139, 132, 0.3);
  border-radius: 999px;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 760;
}

.result-stones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.result-stone-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.72);
}

.result-stone-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.result-stone-row div { display: grid; min-width: 0; }
.result-stone-row strong,
.result-stone-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-stone-row strong { font-size: 10px; }
.result-stone-row small { color: var(--muted); font-size: 9px; }

.primary-action,
.secondary-action,
.text-action,
.close-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  border-radius: 9px;
  font-weight: 720;
  text-decoration: none;
}

.primary-action {
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--quartz);
  font-size: 14px;
}

.primary-action:disabled,
.secondary-action:disabled {
  border-color: var(--line-strong);
  background: #e7e4dc;
  color: #898b85;
  cursor: not-allowed;
  box-shadow: none;
}

.secondary-action {
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  background: var(--quartz);
  color: var(--ink);
  font-size: 11px;
}

.text-action {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 10px;
}

.stones-intro { margin-bottom: 8px; }

.strand-stones {
  padding: 9px 0 12px;
  border-top: 1px solid var(--line);
}

.strand-stones-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 7px;
}

.strand-stones-heading h3 {
  margin: 0;
  font-size: 10px;
  font-weight: 680;
}

.strand-stones-heading > span {
  flex: 0 0 auto;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 720;
}

.strand-stone-list { display: grid; }

.strand-stone-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 76px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.role-stone-row {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.role-stone-row:hover,
.role-stone-row:focus-visible { background: rgba(220, 239, 237, 0.32); }
.role-row-action { color: var(--teal-dark); font-size: 9px; font-weight: 720; white-space: nowrap; }
.stone-editor-entry { width: 100%; margin-top: 11px; }

.strand-stone-row > img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.strand-stone-copy {
  display: grid;
  min-width: 0;
}

.strand-stone-copy strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strand-stone-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-stone-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.selected-bead { min-width: 0; }

.selected-bead:has(img) {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.selected-bead img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.selected-bead h3,
.selected-bead p,
.selected-bead small { margin: 0; }
.selected-bead h3 { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.selected-bead p,
.selected-bead small { display: block; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.selected-bead small { max-width: 40ch; }

.selected-bead .role-reason,
.selected-bead .match-line {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.meaning-chips { display: none; }

.search-field { margin-top: 10px; }
.filter-row { flex-wrap: nowrap; margin: 8px 0; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-row button { min-width: 44px; min-height: 40px; flex: 0 0 auto; padding: 0 10px; font-size: 12px; }

.material-list { display: grid; border-top: 1px solid var(--line); }

.material-card {
  display: grid;
  grid-template-columns: 44px 1fr 8px;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 8px 1px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}

.material-card:hover { background: rgba(220, 239, 237, 0.32); }
.material-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.material-copy { display: grid; min-width: 0; }
.material-copy strong { font-size: 10px; }
.material-copy small,
.material-copy em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
/* 换珠面板里,候选卡必须完整展示四问答案(保留作用/外观/价格/为什么),不允许省略号吃掉内容 */
#bead-sheet .material-copy em {
  white-space: normal;
  display: block;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.5;
  font-size: 9.5px;
}
.swatch { width: 9px; height: 9px; flex: 0 0 auto; border: 1px solid rgb(32 35 31 / 10%); border-radius: 50%; background: #7ba7a1; }
.swatch[data-color-family="white_neutral"] { background: #e8e1d1; }
.swatch[data-color-family="multi"] { background: #9a7cb8; }
.swatch[data-color-family="multicolor"] { background: #8c7fa8; }
.swatch[data-color-family="pink"] { background: #d99eac; }
.swatch[data-color-family="black"] { background: #201d1b; }
.swatch[data-color-family="red"] { background: #9d3f37; }
.swatch[data-color-family="yellow"] { background: #c89d45; }
.swatch[data-color-family="yellow_gold"] { background: #b98a32; }
.swatch[data-color-family="gold"] { background: #c9a96e; }
.swatch[data-color-family="blue"] { background: #5c86a2; }
.swatch[data-color-family="green"] { background: #78946f; }
.swatch[data-color-family="silver"] { background: #b8b6ad; }
.swatch[data-color-family="silver_gray"] { background: #a9adb0; }
.swatch[data-color-family="purple"] { background: #8e6da6; }

.checkout-design-summary { padding: 0 0 12px; }
.checkout-design-summary > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.checkout-design-summary span,
.checkout-design-summary strong { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -0.03em; }
.checkout-design-summary p { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.wrist-field { max-width: 160px; }
.input-with-unit { position: relative; }
.input-with-unit input { padding-right: 38px; }
.input-with-unit i { position: absolute; right: 12px; bottom: 13px; color: var(--muted); font-size: 9px; font-style: normal; }

.size-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
}

.spec-fit-block .wrist-field { max-width: none; }
.style-direction-field { padding-bottom: 6px; }
.spec-contract-note { margin: 8px 0 0; }
.final-fit-summary,
.final-authority-summary { margin: 0 0 10px; }

.size-options span {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 5px 1px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--quartz);
  font-size: 9px;
  font-weight: 760;
  cursor: pointer;
}

.size-options small { color: var(--muted); font-size: 9px; font-weight: 540; }

.fit-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.fit-readout span { display: grid; gap: 1px; }
.fit-readout small { color: var(--muted); font-size: 9px; }
.fit-readout strong { font-size: 10px; }
.fit-readout p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 9px; }
.fit-readout p.fit-warning {
  padding: 8px 10px;
  border-left: 2px solid var(--jade);
  border-radius: 0 6px 6px 0;
  background: rgba(220, 239, 237, 0.42);
  color: var(--ink);
  font-size: 10px;
  line-height: 1.45;
}

.build-promise { padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.build-promise h3 { margin: 0; font-size: 11px; }
.build-promise ul { margin: 8px 0 0; padding-left: 17px; color: #4a4d48; font-size: 9px; }
.build-promise li + li { margin-top: 5px; }
.finish-save { width: 100%; margin-top: 11px; }

.workspace-footer {
  z-index: 7;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 9px max(14px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 -8px 22px rgba(35, 38, 34, 0.06);
  backdrop-filter: blur(14px);
}

.workspace-footer > div { display: grid; min-width: 84px; }
.workspace-footer span { color: var(--muted); font-size: 9px; }
.workspace-footer strong { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.workspace-footer .primary-action { width: 100%; }

.bead-sheet { padding-bottom: 96px; }
.bead-sheet-footer {
  position: sticky;
  z-index: 4;
  bottom: calc(-1 * max(21px, env(safe-area-inset-bottom)));
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  margin: 16px -17px calc(-1 * max(21px, env(safe-area-inset-bottom)));
  padding: 12px 17px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 -8px 22px rgba(35, 38, 34, 0.06);
  backdrop-filter: blur(14px);
}
.bead-sheet-footer .primary-action,
.bead-sheet-footer .secondary-action { width: 100%; min-height: 52px; padding: 0 10px; }

.sheet-backdrop {
  position: fixed;
  z-index: 60;
  inset: 0;
  background: rgba(24, 26, 23, 0.46);
}

.sheet {
  position: fixed;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(92svh, 900px);
  padding: 21px 17px max(21px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  background: var(--quartz);
  box-shadow: 0 -18px 48px rgba(35, 38, 34, 0.16);
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.sheet-header h2 {
  max-width: 19ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(27px, 8vw, 38px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.close-action {
  min-width: 48px;
  padding: 0 2px 0 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.sheet-primary { width: 100%; margin-top: 18px; }
.purchase-ready-label { display: inline-flex; margin: 0; padding: 6px 10px; border: 1px solid #b8d8d4; border-radius: 999px; background: var(--mist); color: var(--teal-dark); font-size: 9px; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; }
.purchase-lead { margin: 13px 0; color: #4a4d48; font-size: 11px; }
.purchase-receipt { display: grid; gap: 8px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.receipt-row { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; }
.receipt-row span { color: var(--muted); }
.receipt-row strong { max-width: 66%; text-align: right; }
.receipt-price-offer { align-items: center; }
.receipt-price-offer strong { display: inline-flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.price-regular { color: var(--muted); font-weight: 500; }
.price-launch { color: #8d3f24; font-weight: 800; }
.price-offer-label { display: inline-block; border: 1px solid rgba(141, 92, 32, .28); border-radius: 3px; background: rgba(201, 155, 47, .12); color: #8d5c20; font: 700 9px/1.2 sans-serif; letter-spacing: .04em; padding: 2px 5px; text-transform: uppercase; white-space: nowrap; }
.purchase-sheet .secondary-action { width: 100%; margin-top: 8px; }
.production-note { margin: 11px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
.live-checkout-form { display: grid; gap: 9px; padding-top: 16px; }
.live-checkout-form[hidden] { display: none; }
.live-checkout-form label { color: var(--ink); font-size: 10px; font-weight: 720; }
.live-checkout-form input { min-height: 48px; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--quartz); padding: 0 13px; color: var(--ink); font: inherit; }
.live-checkout-form input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.live-checkout-form .primary-action { width: 100%; margin-top: 2px; }
.checkout-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 11px; }
.checkout-status.error { color: #8f3f38; }

.strand-card-form { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 14px; }
.strand-card-form[hidden] { display: none; }
.strand-card-form label { color: var(--ink); font-size: 10px; font-weight: 720; }
.strand-card-form input { min-height: 48px; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--quartz); padding: 0 13px; color: var(--ink); font: inherit; }
.strand-card-form input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.strand-card-form .secondary-action { width: 100%; margin-top: 2px; min-height: 46px; border: 1px solid var(--line); border-radius: 8px; background: var(--quartz); font-size: 12px; font-weight: 700; }

.save-current-row { display: grid; gap: 9px; padding-bottom: 16px; }
.code-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.code-row button,
.community-panel > button { min-height: 46px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--quartz); font-size: 12px; font-weight: 700; }
.design-code-panel > p { margin: -2px 0 11px; color: var(--muted); font-size: 9px; }
.memory-panel,
.community-panel { margin-top: 17px; }
.memory-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.memory-heading h3 { margin: 0; font-size: 12px; }
.memory-heading span { color: var(--teal-dark); font-size: 10px; font-weight: 700; }
.saved-list { display: grid; }
.saved-card { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 9px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.saved-card img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.saved-card div { display: grid; min-width: 0; }
.saved-card strong { font-size: 10px; }
.saved-card span,
.saved-card small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.saved-card button { min-height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--teal-dark); font-size: 9px; font-weight: 700; }
.muted-note { margin: 0; padding: 12px 0; color: var(--muted); font-size: 9px; }

.structure-story-card {
  padding: 3px 0 18px;
  border-bottom: 1px solid var(--line);
}

.structure-story-source {
  margin: 0 0 6px;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.structure-story-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(31px, 9vw, 48px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.structure-story-card blockquote {
  margin: 13px 0;
  padding: 0 0 0 13px;
  border-left: 2px solid var(--teal);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 530;
  line-height: 1.55;
}

.structure-story-card > p:last-child {
  margin: 0;
  color: #4a4d48;
  font-size: 10px;
  line-height: 1.65;
}

.structure-library-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  padding: 19px 0 10px;
}

.structure-library-heading h3 { margin: 0; font-size: 15px; }
.structure-library-heading > span {
  color: var(--teal-dark);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
}

.structure-search-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
}

.structure-search-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fffefa;
  font-size: 13px;
}

.structure-library-note {
  margin: 9px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.structure-library-list { display: grid; }

.structure-library-card {
  display: grid;
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.structure-library-card:hover,
.structure-library-card.active { background: rgba(220, 239, 237, 0.32); }
.structure-library-card.active { box-shadow: inset 3px 0 0 var(--teal); }
.structure-library-card > span { display: grid; align-content: start; min-width: 0; }
.structure-library-card strong { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.structure-library-card small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.structure-library-card em { align-self: center; color: #4a4d48; font-size: 9px; font-style: normal; line-height: 1.45; }

.toast {
  position: fixed;
  z-index: 100;
  right: 14px;
  bottom: max(82px, calc(70px + env(safe-area-inset-bottom)));
  left: 14px;
  max-width: 420px;
  margin: 0 auto;
  padding: 11px 13px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--quartz);
  font-size: 10px;
  font-weight: 650;
  text-align: center;
  box-shadow: 0 10px 30px rgba(35, 38, 34, 0.22);
  pointer-events: none;
}

.preview-sheet { overflow: auto; }

.preview-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin: 5px 0 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.preview-mode-switch button {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 740;
}

.preview-mode-switch button.active {
  background: var(--quartz);
  color: var(--ink);
  box-shadow: 0 2px 9px rgba(35, 38, 34, 0.08);
}

.preview-surface {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--quartz);
}

.preview-closeup {
  display: grid;
  place-items: center;
}

.preview-closeup .preview-bracelet-svg {
  display: block;
  width: min(88%, 420px);
  height: min(88%, 420px);
  overflow: visible;
}

.preview-closeup .legacy-bead-hit,
.preview-closeup .legacy-selection-dot,
.preview-closeup .legacy-drop-ring { display: none; }

.preview-wrist canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-note {
  margin: 11px 4px 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
  text-align: center;
}

.error { padding: 11px; border-left: 3px solid var(--danger); background: #fbefef; color: #733238; font-size: 10px; }

@media (max-width: 939px) {
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .bracelet-workbench {
    display: none;
  }

  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-app {
    grid-template-rows: 50px minmax(0, 1fr) 72px;
    height: calc(100dvh - var(--header-height));
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
  }

  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-tabs { grid-row: 1; }
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-panels { grid-row: 2; min-height: 0; overflow: hidden; }
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-footer { grid-row: 3; }
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-panel { height: 100%; overflow-y: auto; }

  .workspace-tab { gap: 3px; padding: 0 1px; }
  .workspace-tab span { width: 17px; height: 17px; font-size: 8px; }
  .workspace-tab strong { font-size: 9px; }
  .workspace-tab.active::after { right: 5px; left: 5px; }

  .path-choice-grid { grid-template-columns: 1fr; }
  .path-choice-grid label > span { min-height: 86px; }
  /* 分组化之后必须保持单列:留着两列会把每个 field-group 压到半宽,年份框只剩 52px(User 截图抓到) */
  .birth-fields { grid-template-columns: minmax(0, 1fr); }
  .bead-sheet-footer { grid-template-columns: 1fr; }
  .personalization-story { padding: 14px 12px; }
  .personalization-story h3 { font-size: 28px; }
  .personalization-story header > p:not(.section-kicker),
  .personalization-evidence p,
  .personalization-bridge p,
  .personalization-stones p { font-size: 12.5px; line-height: 1.58; }
  .personalization-evidence strong,
  .personalization-bridge strong { font-size: 14px; }
  .personalization-stones article strong,
  .personalization-stones-details > summary { font-size: 12px; }
  .personalization-stones article span,
  .personalization-stones article small { font-size: 11px; }

  body[data-workspace="start"][data-user-generated="false"] .studio-tools { display: none; }

  body[data-workspace="start"][data-user-generated="false"] .bracelet-stage {
    height: 136px;
    min-height: 136px;
  }

  body[data-workspace="start"][data-user-generated="false"] .legacy-bracelet-svg {
    width: min(37vw, 142px) !important;
    height: min(37vw, 142px) !important;
  }

  body[data-workspace="start"][data-user-generated="false"] .stage-coach,
  body[data-workspace="start"][data-user-generated="false"] .structure-story-action { display: none; }

  body[data-workspace="start"][data-user-generated="false"] .workbench-summary {
    min-height: 72px;
    padding-top: 4px;
    padding-bottom: 5px;
  }

  body[data-workspace="start"][data-user-generated="false"] .result-copy h1 { font-size: 22px; }

  body[data-workspace="start"][data-user-generated="false"] .result-copy #result-reason {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  body[data-workspace="start"] {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-workspace="start"] .workspace-app {
    grid-template-rows: 50px minmax(0, 1fr) 72px;
    height: calc(100dvh - var(--header-height));
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
  }

  body[data-workspace="start"] .workspace-panels {
    grid-row: 2;
    min-height: 0;
    overflow: hidden;
  }

  body[data-workspace="start"] .workspace-panel {
    height: 100%;
    overflow-y: auto;
  }

  body[data-workspace="start"] .workspace-footer {
    grid-row: 3;
    position: relative;
    z-index: 8;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(35, 38, 34, 0.08);
  }

  #panel-start:has(.advanced-guidance[open]) .panel-intro,
  #panel-start:has(.advanced-guidance[open]) .moment-field,
  #panel-start:has(.advanced-guidance[open]) .quick-moments,
  #panel-start:has(.advanced-guidance[open]) .compact-choice-block { display: none; }

  #panel-start:has(.advanced-guidance[open]) { padding-top: 5px; }
  #panel-start:has(.advanced-guidance[open]) .advanced-guidance { padding-top: 0; border-top: 0; }
  #panel-start:has(.advanced-guidance[open]) .advanced-guidance summary {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 48px;
    background: var(--paper);
  }

  .style-choice-card { grid-template-columns: 48px minmax(0, 1fr); min-height: 66px; padding: 7px; }
  .style-choice-stones { width: 48px; }
  .style-choice-stones img { width: 31px; height: 31px; }

  .result-contract {
    flex-wrap: wrap;
    max-width: 100%;
    overflow: visible;
  }

  .result-contract > span { min-height: 20px; padding: 3px 6px; }

  body:not([data-workspace="start"]) .bracelet-stage {
    height: 218px;
    min-height: 218px;
    margin-top: 3px;
  }

  body:not([data-workspace="start"]) .legacy-bracelet-svg {
    width: min(52vw, 220px) !important;
    height: min(52vw, 220px) !important;
  }

  body:not([data-workspace="start"]) .stage-coach,
  body:not([data-workspace="start"]) .studio-tools { display: none; }

  body:not([data-workspace="start"]) .workbench-summary {
    min-height: 82px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  body:not([data-workspace="start"]) .result-copy h1 { font-size: 21px; }

  body:not([data-workspace="start"]) .result-copy #result-reason {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    -webkit-line-clamp: 1;
  }
}

@media (max-height: 720px) and (max-width: 939px) {
  .intent-line { min-height: 40px; padding-top: 3px; padding-bottom: 5px; }
  .bracelet-stage { height: 140px; min-height: 140px; margin-top: 4px; }
  .stage-coach { right: 6px; bottom: 5px; padding: 5px 7px; }
  .studio-tools { margin-top: -1px; margin-bottom: 2px; }
  .studio-action-row button { min-height: 40px; }
  .quick-look-slots { margin-top: 3px; }
  .quick-look-slot > button:first-child,
  .quick-look-slot-clear { min-height: 40px; }
  .workbench-summary { min-height: 82px; padding-top: 4px; padding-bottom: 4px; }
  .result-copy h1 { font-size: 21px; }
  .result-copy #result-reason { margin-top: 3px; font-size: 12px; line-height: 1.35; -webkit-line-clamp: 2; }
  .structure-story-action { min-height: 40px; margin-top: 2px; }
  body:not([data-workspace="start"]) .bracelet-stage { height: 125px; min-height: 125px; }
  body:not([data-workspace="start"]) .legacy-bracelet-svg { width: 120px !important; height: 120px !important; }
  body:not([data-workspace="start"]) .result-copy #result-reason { display: none; }
  body:not([data-workspace="start"]) .result-contract {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body:not([data-workspace="start"]) .structure-story-action { min-height: 30px; }
}

@media (min-width: 700px) {
  :root { --header-height: 66px; }
  .studio-header { padding-right: 26px; padding-left: 26px; }
  .journey-status strong { display: block; font-size: 11px; }
  .wordmark strong { font-size: 17px; }
  .thesis-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .thesis-chain article:last-child { grid-column: auto; }
  .sheet { top: 0; right: 0; bottom: 0; left: auto; width: min(540px, 92vw); max-height: none; border-top: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 32px 30px; box-shadow: -18px 0 48px rgba(35, 38, 34, 0.16); }
}

@media (min-width: 940px) {
  .workspace-app {
    /* The former 720px + 460px minimums overflowed the app between 940px and
       roughly 1180px, pushing the bracelet and result copy off the left edge.
       Keep the design split, but let the workbench truly shrink while reserving
       enough room for the task panel. */
    grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.82fr);
    grid-template-rows: 58px minmax(0, 1fr) 76px;
    width: min(100%, 1560px);
    gap: 0;
    padding: 22px 28px;
  }

  .bracelet-workbench {
    grid-row: 1 / -1;
    min-height: 0;
    padding: 0 34px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .intent-line { min-height: 56px; }
  .bracelet-stage {
    height: clamp(290px, calc(100dvh - 425px), 560px);
    min-height: 290px;
    margin-top: 14px;
  }
  .legacy-bracelet-svg { width: min(42vw, 410px) !important; height: min(42vw, 410px) !important; }
  .studio-tools { width: min(100%, 520px); }
  .studio-action-row button,
  .quick-look-slot > button:first-child { min-height: 44px; font-size: 12px; }
  .quick-look-slot > button:first-child,
  .quick-look-slot-clear { min-height: 40px; font-size: 12px; }
  .workbench-summary { min-height: 130px; padding-top: 17px; }
  .result-copy h1 { font-size: 48px; }
  .result-copy #result-reason { margin-top: 9px; font-size: 14px; line-height: 1.45; }
  .fit-facts strong { font-size: 12px; }
  .fit-facts small,
  .exact-build-line { font-size: 11px; }
  .result-eyebrow,
  .result-contract small,
  .section-kicker { font-size: 10px; }
  .result-contract strong,
  .structure-story-action { font-size: 12px; }

  .workspace-tabs { grid-column: 2; grid-row: 1; margin-left: 28px; border-top: 1px solid var(--line); }
  .workspace-tab strong { font-size: 12px; }
  .workspace-panels { grid-column: 2; grid-row: 2; margin-left: 28px; }
  .workspace-panel { padding: 22px 20px 28px; }
  .panel-intro h2 { font-size: 29px; }
  .panel-intro > div > p:last-child { font-size: 13px; line-height: 1.55; }
  .choice-block legend,
  .fit-block legend { font-size: 13px; }
  .choice-chips span,
  .moment-examples button,
  .budget-field,
  .advanced-guidance summary { font-size: 12px; }
  .moment-field-primary > span,
  .free-text-retention-note,
  .intent-priority-note,
  .birth-boundary-note,
  .refine-actions small,
  .thesis-chain p,
  .structure-library-card small,
  .structure-library-card em,
  .material-copy em,
  .selected-bead small,
  .fit-readout p,
  .build-promise ul { font-size: 11px; }
  .refine-actions strong,
  .thesis-chain strong,
  .result-stone-row strong,
  .selected-bead h3,
  .material-copy strong { font-size: 12px; }
  .workspace-footer { grid-column: 2; grid-row: 3; margin-left: 28px; padding-right: 0; padding-left: 0; }
  .workspace-footer .primary-action { min-height: 56px; }
}

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

/* ═══ P1-c 手机结果页=自然单列文档流(2026-07-24 codex:不许在嵌套小窗里读长报告)═══
   生成后的 design/stones/finish 三步:释放 100dvh 锁,页面成为唯一滚动容器;
   手串在顶部随页滚离,步骤条 sticky 在顶,主 CTA sticky 在底。start/birth/spec 表单流不变。 */
/* 故事可见时,旧摘要块与 hero 重复——全视口隐藏(v3) */
.workspace-app:has(.personalization-story:not([hidden])) .workbench-summary { display: none; }

/* ═══ v3 外壳:手机=固定应用框(画布常驻顶部,面板内部滚动,底部常驻操作条)
   来自 Phenomenon 结构 DNA(Solora/DailyMe:hero 常驻 + 内容滚动 + 底部 CTA)。
   User 2026-07-25:「老得往上往下刷」——结果态不再是长文档。 ═══ */
@media (max-width: 939px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-app {
    grid-template-rows: auto 44px minmax(0, 1fr) 66px;
    height: calc(100dvh - var(--header-height));
    min-height: 0;
    overflow: hidden;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-workbench {
    grid-row: 1;
    min-height: 0;
    max-height: 46dvh;
    overflow: hidden;
    padding-bottom: 4px;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .intent-line {
    min-height: 0;
    padding: 2px 1px 4px;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-stage {
    height: min(24dvh, 210px);
    min-height: 150px;
    margin-top: 2px;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-tabs { grid-row: 2; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-panels {
    grid-row: 3;
    min-height: 0;
    overflow: hidden;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-panel {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-footer {
    grid-row: 4;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  /* 画布只留身份要素:方案名 + 两个数;钩子/信任条/日照注挪进面板故事 */
  #workbench-hero { padding: 0 2px 4px; }
  #workbench-hero .section-kicker,
  #workbench-hero .hero-plan-hook,
  #workbench-hero .trust-chip-row,
  #workbench-hero .hero-solar-note { display: none; }
  #workbench-hero .hero-plan-name { margin: 0; font-size: 19px; line-height: 1.25; }
  .hero-metric-row { gap: 18px; margin: 4px 0 0; }
  .hero-metric small { margin-bottom: 0; font-size: 10px; }
  .hero-metric strong { font-size: 19px; }
  /* 工具行:一行横滑 ghost 药丸,不占竖向 */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-tools {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-tools::-webkit-scrollbar { display: none; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-action-row,
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .quick-look-slots {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    margin: 0;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-tools button {
    min-height: 30px;
    padding: 4px 11px;
    white-space: nowrap;
    font-size: 11.5px;
    border-radius: 999px;
  }
}

/* P1-f AI 润色知情勾选 */
.ai-voice-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line, #ddd); border-radius: 10px; cursor: pointer; }
.ai-voice-consent input { margin-top: 3px; }
.ai-voice-consent strong { display: block; font-size: 13px; }
.ai-voice-consent small { display: block; margin-top: 2px; opacity: 0.72; line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════════
   方案页 v2 杂志式版面(2026-07-24 User 拍板)
   纪律:主色面积≤10%、颜色=编码、数字前置(大数字中字重)、
   小票折叠、段落行长受限、模块间距≥32px、圆角统一 14px。
   ═══════════════════════════════════════════════════════════════ */

/* —— 线身份色(低饱和,只用在 icon 章与 pill)—— */
:root {
  --line-wealth: #a3833c;
  --line-wealth-bg: #f4eddd;
  --line-career: #5d7391;
  --line-career-bg: #e7edf4;
  --line-love: #b07a80;
  --line-love-bg: #f6e9ea;
  --line-body: #6f8f76;
  --line-body-bg: #e8f0ea;
}

/* —— 版面带 —— */
.personalization-story { background: transparent; border: 0; padding: 0; }
.story-hero { padding: 26px 0 6px; }
.story-hero .section-kicker { margin-bottom: 14px; }
.hero-number-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: end; }
.hero-number strong { display: block; font-size: 15px; font-weight: 640; letter-spacing: 0.02em; }
.hero-number strong b { display: block; font-size: 56px; font-weight: 560; line-height: 1.04; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hero-number small { display: block; margin-top: 6px; color: var(--ink-soft, #6b7370); font-size: 12px; }
.hero-hook h3 { margin: 0; font-size: 21px; font-weight: 620; line-height: 1.35; }
.hero-hook small { display: block; margin-top: 6px; color: var(--ink-soft, #6b7370); font-size: 12px; }
.trust-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.trust-chip { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; color: #3d4441; font-variant-numeric: tabular-nums; }

.story-band { margin-top: 34px; }
.story-band > .section-kicker { margin-bottom: 12px; }

/* —— 四线卡 —— */
.domain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.domain-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.domain-card .domain-head { display: flex; align-items: center; gap: 9px; }
.domain-card .domain-head strong { font-size: 15px; font-weight: 660; }
.domain-chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
.line-wealth .domain-chip { background: var(--line-wealth-bg); color: var(--line-wealth); }
.line-career .domain-chip { background: var(--line-career-bg); color: var(--line-career); }
.line-love .domain-chip { background: var(--line-love-bg); color: var(--line-love); }
.line-body .domain-chip { background: var(--line-body-bg); color: var(--line-body); }
.verdict-pill { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
.verdict-pill[data-verdict="tight"] { background: #f7e8e2; color: #a05a3c; }
.verdict-pill[data-verdict="mixed"] { background: #f4eedd; color: #8a713a; }
.verdict-pill[data-verdict="boost"], .verdict-pill[data-verdict="smooth"] { background: #e7efe9; color: #4f7a5e; }
.domain-lead { margin: 0; font-size: 13.5px; line-height: 1.62; }
.domain-card .domain-prescription { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f6f7f5; font-size: 12.5px; line-height: 1.6; }

/* —— 观察卡 —— */
.observation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.observation-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.observation-card > strong { display: block; font-size: 14px; font-weight: 650; line-height: 1.6; }
.observation-card > p { margin: 8px 0 0; font-size: 13px; line-height: 1.62; color: #3d4441; }

/* —— 折叠(推理/小票)—— */
.reasoning-fold { margin-top: 10px; }
.reasoning-fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--teal-dark); }
.reasoning-fold > summary::before { content: '›'; transition: transform 0.15s; }
.reasoning-fold[open] > summary::before { transform: rotate(90deg); }
.reasoning-fold > summary::-webkit-details-marker { display: none; }
.reasoning-fold > div { margin-top: 8px; }
.reasoning-fold > div p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.62; color: #3d4441; }
.receipt-fold { margin-top: 8px; }
.receipt-fold > summary { cursor: pointer; list-style: none; display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fafbfa; font-size: 11px; color: #5a625e; }
.receipt-fold > summary::-webkit-details-marker { display: none; }
.receipt-fold > div { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #f6f7f5; }
.receipt-fold > div span { font-size: 11px; line-height: 1.55; color: #5a625e; font-variant-numeric: tabular-nums; word-break: break-all; }

/* —— 石头行(成分拆解)—— */
.band-stones .lane-intro { margin: 14px 0 8px; font-size: 12.5px; color: #5a625e; }
.stone-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.stone-row:last-child { border-bottom: 0; }
.stone-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.stone-row-dot { width: 44px; height: 44px; border-radius: 50%; background: #eceeec; }
.stone-row-head { display: flex; align-items: center; gap: 12px; }
.stone-row-head strong { font-size: 14px; font-weight: 650; white-space: nowrap; }
.stone-row-head small { color: #5a625e; font-size: 12px; font-variant-numeric: tabular-nums; }
.stone-share { flex: 1; height: 5px; max-width: 220px; border-radius: 999px; background: #eef0ee; overflow: hidden; }
.stone-share i { display: block; height: 100%; border-radius: 999px; opacity: 0.95; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.stone-row-copy > p { margin: 6px 0 0; font-size: 13px; line-height: 1.62; color: #3d4441; max-width: 62ch; }

/* —— 结构/配色带 —— */
.structure-palette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.structure-cell { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.structure-cell strong { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 660; }
.structure-cell p { margin: 0 0 8px; font-size: 13px; line-height: 1.62; color: #3d4441; }

.band-safe .reasoning-fold > summary { font-size: 12.5px; }
.personalization-boundary { margin-top: 26px; }

/* —— 桌面全宽杂志布局:结果三步释放侧栏,页面单滚动 —— */
/* ═══ v3 外壳:桌面=固定两栏应用框(左画布常驻,右工作栏内部滚动,底部常驻操作条)
   来自 Phenomenon B 端结构 DNA(MarineX/Haulix/AgroControl/Portal:
   画布占主位不动,支撑数据在侧栏各自滚,顶部分段切换,底部/角落常驻动作)。 ═══ */
@media (min-width: 940px) {
  /* 结果态给右栏更多宽度(故事需要行长),但绝不放弃分栏 */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-app {
    grid-template-columns: minmax(0, 1.06fr) minmax(500px, 1fr);
    width: min(100%, 1660px);
  }
  /* 左画布:整栏通高、自身不滚(圆环永远在屏) */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-workbench {
    grid-row: 1 / -1;
    grid-column: 1;
    min-height: 0;
    overflow: hidden;
    align-content: center;
  }
  /* 右栏:分段切换 sticky 顶、面板内部滚、操作条常驻底 */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-panels {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    overflow: hidden;
    background: transparent;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-panel {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 20px 26px 30px;
  }
  /* 杂志故事在右栏里:单列铺满栏宽,行长受限 */
  .personalization-story { max-width: none; margin: 0; }
  .band-stones .stone-rows-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 28px; }
  /* 圆环点珠提示只在杂志故事模式隐藏——自由搭配靠它当入口提示 */
  .workspace-app:has(.personalization-story:not([hidden])) .stage-coach { display: none; }
  /* 自由搭配没有"需求"概念:假默认需求行整体隐藏 */
  body[data-design-mode="builder"] .intent-line { display: none; }
  /* 工具行紧凑化:轻量 ghost,一行收下 */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-action-row,
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .quick-look-slots { display: flex; gap: 8px; margin-top: 6px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-action-row button,
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .quick-look-slots button { min-height: 34px; padding: 5px 14px; font-size: 12px; border-radius: 999px; }
}

/* toast 挪到右下角,不再遮内容 */
.toast { left: auto; right: 22px; bottom: 96px; transform: none; max-width: 340px; }

/* —— 按钮降级(一页一个实心):左侧工具全部转轻量 —— */
.studio-action-row button, .quick-look-slots button {
  background: transparent;
  border: 1px solid var(--line);
  font-weight: 520;
  color: #4a524e;
}
.quick-look-slots { opacity: 0.92; }

/* ═══ v2.1 版面终审修改(codex 2026-07-24 四条)═══ */
/* hero 挂载点(所有视口) */
#workbench-hero { padding: 4px 2px 10px; }
#workbench-hero .hero-plan-name { margin: 6px 0 4px; font-size: 30px; font-weight: 650; line-height: 1.2; }
#workbench-hero .hero-plan-hook { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: #3d4441; }
.hero-metric-row { display: flex; gap: 28px; margin-bottom: 14px; }
.hero-metric small { display: block; margin-bottom: 2px; color: #6b7370; font-size: 12px; }
.hero-metric strong { font-size: 40px; font-weight: 560; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hero-solar-note { display: block; margin-top: 10px; color: #6b7370; font-size: 12px; }

/* 桌面:首屏=圆环左+hero 右(#1 首屏必须知道这是什么方案) */
@media (min-width: 940px) {
  /* 画布栏:圆环 + 身份 hero 纵向居中(v3 外壳后画布栏变窄,不再左右分) */
  .workspace-app:has(.personalization-story:not([hidden])) .bracelet-stage {
    height: clamp(300px, 31vw, 420px);
    min-height: 300px;
  }
  .workspace-app:has(.personalization-story:not([hidden])) .legacy-bracelet-svg {
    width: min(31vw, 400px) !important;
    height: min(31vw, 400px) !important;
  }
  .workspace-app:has(.personalization-story:not([hidden])) #workbench-hero { padding-top: 6px; }
  .workspace-app:has(.personalization-story:not([hidden])) #workbench-hero .hero-plan-name { font-size: 25px; }
  .workspace-app:has(.personalization-story:not([hidden])) #workbench-hero .hero-plan-hook { margin-bottom: 10px; font-size: 13.5px; }
  .hero-metric-row { gap: 24px; margin-bottom: 10px; }
  .hero-metric strong { font-size: 30px; }
  /* 四线卡在右栏:窄了就自动单列,不硬塞 2×2 */
  .domain-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
  .domain-card { padding: 18px 18px 15px; }
  .domain-card .domain-head strong { font-size: 15.5px; }
  .domain-lead { font-size: 14px; line-height: 1.66; }
  .domain-card .domain-prescription { font-size: 13px; line-height: 1.62; padding: 11px 12px; }
  .observation-card > strong { font-size: 14.5px; }
  .observation-card > p { font-size: 13px; }
}

/* AI 措辞被动知情说明(2026-07-24 User 拍板:不设勾选) */
.ai-voice-note { margin-top: 10px; padding: 8px 2px 0; color: #6b7370; font-size: 11.5px; line-height: 1.5; }
.ai-voice-note > span { display: none; }
html[lang="en"] .ai-voice-note > span[lang="en"],
html[lang="zh-CN"] .ai-voice-note > span[lang="zh-CN"] { display: inline; }

/* ===== 自由搭配 inline 石库(2026-07-24 User:点石库=加珠,点珠=取下) ===== */
.builder-palette { margin-top: 28px; }
.builder-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(88px, 100%), 1fr));
  gap: 10px;
  margin-top: 14px;
}
.builder-palette-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border: 1px solid rgba(31, 41, 38, 0.1);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.builder-palette-card:hover { border-color: rgba(31, 41, 38, 0.32); }
.builder-palette-card:active { transform: scale(0.96); }
.builder-palette-card img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.builder-palette-name {
  font-size: 11.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--ink, #1f2926);
  overflow-wrap: anywhere;
}
.builder-palette-add,
.builder-palette-count {
  font-size: 12px;
  line-height: 1;
  color: rgba(31, 41, 38, 0.45);
}
.builder-palette-count {
  position: absolute;
  top: 6px;
  right: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #0f766e);
}
.builder-palette-card.in-strand { border-color: rgba(15, 118, 110, 0.35); }
#builder-capacity-line { font-variant-numeric: tabular-nums; white-space: nowrap; }
#builder-capacity-line.capacity-full { color: #a3833c; }

/* ═══ v3 外壳收尾:全局与手机压缩(必须排在 v2.1 全局字号之后才生效)═══ */
.workspace-app:has(.personalization-story:not([hidden])) #panel-design .panel-intro { display: none; }

@media (max-width: 939px) {
  /* 手机画布=紧凑身份卡(Phenomenon 手机作品:hero 卡 ~30%,内容区拿走其余) */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-workbench {
    max-height: 45dvh;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-stage {
    height: min(21dvh, 186px);
    min-height: 138px;
  }
  #workbench-hero { padding: 2px 2px 0; }
  #workbench-hero .hero-plan-name { margin: 0; font-size: 17.5px; font-weight: 620; line-height: 1.24; }
  .hero-metric-row { gap: 16px; margin: 3px 0 0; }
  .hero-metric small { margin-bottom: 0; font-size: 9.5px; }
  .hero-metric strong { font-size: 17px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-tools button { min-height: 28px; font-size: 11px; }
  /* 面板首屏直接给内容:故事带上边距压紧 */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-panel { padding: 12px 14px 22px; }
  .personalization-story > .story-band:first-child { margin-top: 0; }
}

/* ═══ v3 外壳:空态与死控件(Phenomenon 不摆不能用的按钮)═══ */
/* 未生成前:工具行(预览/撤销/清空/保存)全是禁用态=噪音,整行不出现 */
body[data-user-generated="false"] .studio-tools { display: none; }
/* 未生成前:画布栏=一个居中的"这是什么"空态,不散在四角。
   只在桌面生效——手机表单步(开始/出生/佩戴)本来就不显示画布,
   这条若不限桌面会覆盖掉那条隐藏规则,把空态顶到操作条下面(User 2026-07-25 抓到)。 */
@media (min-width: 940px) {
  body[data-user-generated="false"] .bracelet-workbench {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
  }
  body[data-user-generated="false"] .workbench-summary { border-top: 1px solid var(--line); padding-top: 16px; }
  body[data-user-generated="false"] .bracelet-stage { height: clamp(220px, 26vw, 320px); margin-top: 0; }
}
/* 未生成前:示例手串的"来源/石种0种/结构故事94"是占位数字,不摆(数字必须是真的) */
body[data-user-generated="false"] .result-contract,
body[data-user-generated="false"] .structure-story-action,
body[data-user-generated="false"] .exact-build-line { display: none; }

/* ═══════════════════════════════════════════════════════════════
   v3 表单三步版式(2026-07-25 User:要合理/好看/规整/易操作)
   Phenomenon 表单语言:一屏一问、单栏居中、字段成组、
   小灰标签在上+大号等宽数字、读数 tile 前置、选中态明确。
   ═══════════════════════════════════════════════════════════════ */

/* 步骤条已经编号了,面板里的 01/02/03 圆圈是重复墨水。
   注意:圆圈是 grid 第一列,隐藏后必须收掉那一列,否则正文掉进窄列变成一字一行。 */
.panel-intro .step-mark { display: none; }
.panel-intro { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* —— 字段组:标签在上、输入放大、成组间距 —— */
.field-group + .field-group { margin-top: 22px; }
.field-group-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.field-row { display: grid; gap: 10px; }
.field-row-3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.field-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row-place { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
/* 旧两列布局给城市加过 grid-column: 1/-1,在新分组里会把性别挤下去 */
.field-row .birth-location-field { grid-column: auto; }
.birth-fields .field-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
}
.birth-fields .field-row input,
.birth-fields .field-row select {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.birth-fields .field-row input:focus-visible,
.birth-fields .field-row select:focus-visible { outline: 2px solid var(--teal-dark, #2f6b62); outline-offset: 1px; }
.field-group[data-field-group="time"] .unknown-hour-switch { margin-top: 10px; }

/* —— 佩戴步:读数 tile 前置(数字先说话)—— */
.fit-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.fit-tile {
  display: grid;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.fit-tile small { color: var(--muted); font-size: 10.5px; }
.fit-tile strong {
  font-size: 25px;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.fit-tile strong.fit-warning { color: #a3833c; font-size: 19px; }

/* —— 手围步进器:两端加减,中间大数字 —— */
.wrist-stepper { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 8px; align-items: stretch; }
.wrist-step {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.wrist-step:hover { border-color: rgba(31, 41, 38, 0.34); }
.wrist-stepper .input-with-unit { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.wrist-stepper .input-with-unit input {
  width: 74px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.wrist-stepper .input-with-unit i { position: static; bottom: auto; right: auto; font-size: 12px; }
.wrist-stepper .input-with-unit input:focus-visible { outline: none; }
.wrist-stepper .input-with-unit i { color: var(--muted); font-size: 12px; font-style: normal; }

/* —— 珠径:五档一行等宽 segmented —— */
.size-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.size-options label > span { display: grid; gap: 1px; padding: 9px 2px; text-align: center; }
.size-options label > span small { font-size: 9.5px; }

/* —— 开始步:三张路径卡等高、选中态用左侧竖条 —— */
.path-choice-grid { align-items: stretch; }
.path-choice-grid label > span { position: relative; height: 100%; }
.path-choice-grid input:checked + span::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--teal-dark, #2f6b62);
}

/* —— "它是怎么工作的" 从画布搬到开始面板:横向三条 —— */
.how-it-works-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  transform: none;
  border-radius: 0;
  background: none;
}
.how-it-works-strip .section-kicker { grid-column: 1 / -1; margin: 0; }
.how-it-works-strip ol { display: contents; margin: 0; padding: 0; list-style: none; }
.how-it-works-strip li { display: grid; gap: 3px; }
.how-it-works-strip li strong { font-size: 12.5px; }
.how-it-works-strip li span { color: var(--muted); font-size: 11px; line-height: 1.5; }

@media (min-width: 940px) {
  /* 表单三步:单栏居中(消灭左半屏死区),一屏一问 */
  body[data-user-generated="false"]:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-app,
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 58px minmax(0, 1fr) 76px;
    width: min(100%, 880px);
    padding: 22px 24px;
  }
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .bracelet-workbench { display: none; }
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-tabs { grid-column: 1; grid-row: 1; margin-left: 0; }
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-panels { grid-column: 1; grid-row: 2; margin-left: 0; }
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-footer { grid-column: 1; grid-row: 3; margin-left: 0; }
  body:is([data-workspace="start"], [data-workspace="birth"], [data-workspace="spec"]) .workspace-panel { padding: 26px 30px 32px; }
  .panel-intro h2 { font-size: 27px; line-height: 1.3; }
  .field-row-3 label input { font-size: 17px; }
}
@media (max-width: 939px) {
  .fit-tile strong { font-size: 20px; white-space: nowrap; }
  .fit-tile { padding: 9px 10px; }
  .size-options label > span { padding: 8px 1px; }
}

/* ═══ 手机结果态:手串是主角,给它真正的画面(User 2026-07-25:占的画面太小)═══ */
@media (max-width: 939px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-workbench {
    max-height: 45dvh;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-stage {
    height: min(28dvh, 240px);
    min-height: 168px;
    margin-top: 0;
  }
  /* 旧上限 52vw/220px 是压小手串的元凶;宽高双约束——窄屏按宽、矮屏按高,永不越界 */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .legacy-bracelet-svg {
    width: min(67vw, 29dvh, 262px) !important;
    height: min(67vw, 29dvh, 262px) !important;
  }
  /* 腾地方:工具行与身份行再压紧,省下的高度全给手串 */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-tools { margin-top: 2px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .studio-tools button { min-height: 26px; padding: 3px 10px; font-size: 10.5px; }
  #workbench-hero .hero-plan-name { font-size: 16.5px; }
  .hero-metric small { font-size: 9px; }
  .hero-metric strong { font-size: 16px; }
}

/* 矮屏手机(≤700px 高):画布让位给身份行,手串按高度收 —— 身份被裁比手串小更糟 */
@media (max-height: 700px) and (max-width: 939px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-workbench { max-height: 47dvh; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-stage { height: min(24dvh, 172px); min-height: 132px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .legacy-bracelet-svg {
    width: min(60vw, 25dvh, 190px) !important;
    height: min(60vw, 25dvh, 190px) !important;
  }
  #workbench-hero .hero-plan-name { font-size: 15px; }
  .hero-metric strong { font-size: 14.5px; }
}

/* ═══ 手机身份行:一条横排小字(方案名 + 四个事实),不再占三行 ═══
   User 2026-07-25:「站点/木/珠位有必要么?放一排横着的小字,顺便把手围大小加上」 */
@media (max-width: 939px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) #workbench-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    padding: 4px 2px 0;
  }
  #workbench-hero .hero-plan-name { font-size: 14.5px; font-weight: 640; }
  .hero-metric-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin: 0;
    min-width: 0;
  }
  /* 每个事实=「标签 值」一行小字,之间用细分隔点 */
  .hero-metric {
    display: flex;
    align-items: baseline;
    gap: 3px;
  }
  .hero-metric + .hero-metric::before {
    content: '·';
    margin-right: 7px;
    color: rgba(31, 41, 38, 0.28);
  }
  .hero-metric small { margin: 0; font-size: 10.5px; color: var(--muted); }
  .hero-metric strong { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
  /* 身份行变矮了,把省下的高度还给手串 */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-stage {
    height: min(35dvh, 302px);
    min-height: 176px;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .legacy-bracelet-svg {
    width: min(82vw, 35dvh, 312px) !important;
    height: min(82vw, 35dvh, 312px) !important;
  }
}

/* 矮屏(≤700px 高)必须排在放大规则之后才生效:身份行被裁比手串小更糟 */
@media (max-height: 700px) and (max-width: 939px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-workbench { max-height: 46dvh; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-stage { height: min(29dvh, 200px); min-height: 130px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .legacy-bracelet-svg {
    width: min(68vw, 29dvh, 210px) !important;
    height: min(68vw, 29dvh, 210px) !important;
  }
}

/* 极矮屏(≤600px 高,如 320×568):优先保身份行完整 */
@media (max-height: 600px) and (max-width: 939px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-workbench { max-height: 50dvh; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-stage { height: min(26dvh, 152px); min-height: 118px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .legacy-bracelet-svg {
    width: min(60vw, 26dvh, 162px) !important;
    height: min(60vw, 26dvh, 162px) !important;
  }
}

/* ═══ 身份行=一条行内文字流(User 2026-07-25:两次都不齐)═══
   放弃 flex 基线对齐(嵌套 flex + 伪元素分隔点会各自算基线,必错位);
   改用最朴素的行内流:所有片段都是 inline,浏览器天然把它们放在同一条文字基线上。 */
/* 用 id 提权:后面的 `.hero-metric small { display:block }` 优先级更高,会把短标签放出来 */
#workbench-hero .metric-label-short { display: none; }

@media (max-width: 939px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) #workbench-hero {
    display: block;
    padding: 6px 2px 3px;
    white-space: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    line-height: 1.35;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) #workbench-hero::-webkit-scrollbar { display: none; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) #workbench-hero .hero-plan-name {
    display: inline;
    margin: 0;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 680;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric-row {
    display: inline;
    margin: 0;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric { display: inline; }
  /* 分隔点:每个片段之前一个,统一字号=统一基线 */
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric::before {
    content: '·';
    margin: 0 6px;
    color: rgba(31, 41, 38, 0.32);
    font-size: 11px;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric small {
    font-size: 10.5px;
    color: var(--muted);
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) #workbench-hero .metric-label-full { display: none; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) #workbench-hero .metric-label-short { display: inline; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric strong {
    margin-left: 3px;
    font-size: 11.5px;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
  }
}

/* 超窄屏(≤340px):一行放不下五项,去掉珠径(佩戴步与完成页都还有) */
@media (max-width: 340px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric:last-child { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Phenomenon 优化轮 2(2026-07-25):工具行语义分层 + 面板密度
   —— 状态不是按钮、次级功能不与主操作等权重、卡片更紧更有秩序。
   ═══════════════════════════════════════════════════════════════ */

/* —— 工具行:主操作 ghost 药丸 + 收藏折叠成一组 segmented —— */
.studio-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 560px);
  margin: 2px auto 6px;
}
.studio-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.studio-action-row button[hidden] { display: none !important; }
.studio-action-row button {
  min-height: 32px;
  min-width: 0;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: #4a524e;
  font-size: 12px;
  font-weight: 520;
  white-space: nowrap;
  cursor: pointer;
}
.studio-action-row button:hover { border-color: rgba(31, 41, 38, 0.34); }

/* 收藏 = 一个标签 + 三个编号格,整组的分量等于一个按钮 */
.quick-look-slots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 3px 8px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.quick-look-label { color: var(--muted); font-size: 10.5px; letter-spacing: 0.04em; }
.quick-look-slot { position: relative; display: inline-flex; }
.quick-look-slot > button:first-child {
  position: relative;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b7370;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.quick-look-slot.filled > button:first-child { background: rgba(47, 107, 98, 0.1); color: var(--teal-dark, #2f6b62); font-weight: 640; }
.quick-look-slot > button:first-child i {
  position: absolute;
  right: 3px;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal-dark, #2f6b62);
}
.quick-look-slot-clear {
  min-width: 18px;
  min-height: 18px;
  margin-left: -2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(31, 41, 38, 0.4);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.quick-look-slot-clear:hover { color: var(--ink); }

/* 出生锁定 = 一行状态小字,不是按钮 */
.structure-lock-note {
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  text-align: center;
}

/* —— 面板密度:卡片更紧、行长受控、标题层级更清楚 —— */
.domain-card { padding: 16px 17px 13px; border-radius: 14px; }
.domain-card .domain-head { margin-bottom: 7px; }
.domain-lead { margin: 0; font-size: 13.5px; line-height: 1.58; }
.domain-card .domain-prescription { margin-top: 9px; padding: 10px 11px; font-size: 12.5px; line-height: 1.56; border-radius: 11px; }
.domain-fold-link, .domain-card .domain-fold { margin-top: 9px; font-size: 12px; }
.observation-card { padding: 14px 15px; border-radius: 14px; }
.observation-card > strong { font-size: 14px; }
.observation-card > p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; }
.story-band + .story-band { margin-top: 26px; }
.story-band > .section-kicker { margin-bottom: 9px; }

@media (max-width: 939px) {
  .studio-tools { gap: 6px; }
  .studio-action-row { gap: 5px; }
  .studio-action-row button { min-height: 29px; padding: 0 11px; font-size: 11.5px; }
  .quick-look-slots { padding: 2px 7px 2px 9px; }
  .quick-look-slot > button:first-child { min-width: 23px; min-height: 23px; font-size: 11px; }
  .domain-card { padding: 14px 14px 11px; }
  .domain-lead { font-size: 13px; line-height: 1.55; }
}
/* 手机:锁定状态那行省掉——"珠位 24/24"已经说明每颗都归出生底盘,不重复占一行 */
@media (max-width: 939px) {
  .structure-lock-note { display: none; }
}

/* —— 完成页:去掉"卡中卡"双层边框,数字 tile 用分隔线而非各自描边 —— */
.final-fit-summary,
.final-authority-summary {
  gap: 8px;
  padding: 15px 16px;
  border-color: var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.72);
}
.final-fit-summary > div {
  gap: 0;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.final-fit-summary > div > span {
  gap: 3px;
  padding: 11px 13px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.final-fit-summary > div > span:first-child { border-left: 0; }
.final-fit-summary small { font-size: 10px; }
.final-fit-summary strong { font-size: 17px; font-weight: 560; font-variant-numeric: tabular-nums; }
.final-fit-summary p,
.final-authority-summary p { font-size: 11px; }
.final-authority-summary > small { font-size: 10.5px; }

/* 制作承诺:去项目符号,改细线分隔的清单(每条一件事) */
.build-promise { padding: 14px 0; }
.build-promise h3 { font-size: 11px; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }
.build-promise ul { margin: 9px 0 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.5; }
.build-promise li { padding: 7px 0; border-top: 1px solid var(--line); }
.build-promise li + li { margin-top: 0; }

/* 次级动作降级为描边药丸,不与底部主 CTA 抢 */
.finish-save {
  width: auto;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: #4a524e;
  font-size: 12.5px;
  font-weight: 520;
}

/* —— 面板滚动提示:底部一道极淡渐隐,告诉用户下面还有内容 —— */
.workspace-panels { position: relative; }
.workspace-panels::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 26px;
  background: linear-gradient(to bottom, rgba(255, 253, 248, 0), rgba(255, 253, 248, 0.92));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
body[data-panel-scrollable="true"] .workspace-panels::after { opacity: 1; }

/* —— 四线卡:线条图标(统一笔画),不再是色块+字符 —— */
.domain-chip { width: 28px; height: 28px; border-radius: 999px; }
.domain-chip svg { width: 17px; height: 17px; display: block; }

/* —— 桌面画布栏:圆环+工具+身份当成一个整体垂直居中,不再上挤下空 —— */
@media (min-width: 940px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-workbench {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-stage { margin-top: 0; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) #workbench-hero { flex: 0 0 auto; }
}

/* —— 中英混排:CJK 标签与拉丁数字之间统一留 4px(不靠字体凑合)—— */
.fit-tile small + strong,
.hero-metric small + strong,
.final-fit-summary span small + strong { margin-top: 2px; }
.hero-metric small + strong { margin-top: 0; margin-left: 4px; }
.fit-readout span small + strong { margin-top: 2px; }

/* —— 换珠页水晶行:位置地图 + 大数字(Phenomenon 数据行)—— */
.strand-stone-row { grid-template-columns: 38px minmax(0, 1fr) auto; min-height: 64px; padding: 11px 0; }
.strand-stone-copy { display: grid; gap: 5px; min-width: 0; }
.stone-position-map {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.stone-position-map i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(31, 41, 38, 0.12);
}
.stone-position-map i.on { background: var(--teal-dark, #2f6b62); }
.role-row-count { display: grid; justify-items: end; gap: 1px; }
.role-row-count strong { font-size: 19px; font-weight: 560; line-height: 1; font-variant-numeric: tabular-nums; }
.role-row-count small { color: var(--muted); font-size: 10px; }

/* —— 四线卡:要补的那条应该更醒目(颜色=编码,不是装饰)—— */
.domain-card[data-verdict="tight"] {
  border-color: rgba(160, 90, 60, 0.32);
  box-shadow: inset 3px 0 0 rgba(160, 90, 60, 0.55);
}
.domain-card[data-verdict="mixed"] { box-shadow: inset 3px 0 0 rgba(138, 113, 58, 0.34); }
.domain-card[data-verdict="tight"] .domain-lead { font-weight: 520; }

/* ═══ 空间↔数据双向联动(Haulix 模式)═══
   悬停水晶行 → 圆环上属于它的珠子点亮、其余退到背景;
   选中某颗珠子 → 对应的水晶行标出。颜色不新增,只用明度与描边。 */
#bracelet-canvas .bead { transition: opacity 0.22s ease; }
#bracelet-canvas .bead.sku-dim { opacity: 0.26; }
/* 点亮=柔和光晕,不复用拖拽虚线圈(那是 drop-target 语义) */
#bracelet-canvas .bead.sku-lit .legacy-bead-photo {
  filter: drop-shadow(0 0 7px rgba(47, 107, 98, 0.42));
}
.strand-stone-row.row-selected { background: rgba(47, 107, 98, 0.05); }
.strand-stone-row.row-selected strong { color: var(--teal-dark, #2f6b62); }
.strand-stone-row:hover .stone-position-map i.on,
.strand-stone-row:focus-visible .stone-position-map i.on { background: var(--teal-dark, #2f6b62); }

/* ═══ 手围尺子滑杆(Solora:拖动 → 大数字与下游后果同时变)═══ */
.wrist-ruler { display: block; margin-top: 12px; }
.wrist-ruler input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: grab;
}
.wrist-ruler input[type="range"]:active { cursor: grabbing; }
/* 轨道=刻度尺:每 0.5cm 一根细线,整数刻度更深 */
.wrist-ruler input[type="range"]::-webkit-slider-runnable-track {
  height: 34px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(to right, rgba(31, 41, 38, 0.26) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(to right, rgba(31, 41, 38, 0.1) 0 1px, transparent 1px 5%);
  background-position: center;
  background-size: 100% 16px, 100% 10px;
  background-repeat: no-repeat;
}
.wrist-ruler input[type="range"]::-moz-range-track {
  height: 34px;
  border-radius: 10px;
  background: repeating-linear-gradient(to right, rgba(31, 41, 38, 0.18) 0 1px, transparent 1px 5%);
}
.wrist-ruler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 34px;
  border: 0;
  border-radius: 2px;
  background: var(--teal-dark, #2f6b62);
  box-shadow: 0 0 0 5px rgba(47, 107, 98, 0.1);
}
.wrist-ruler input[type="range"]::-moz-range-thumb {
  width: 3px;
  height: 34px;
  border: 0;
  border-radius: 2px;
  background: var(--teal-dark, #2f6b62);
}
.wrist-ruler input[type="range"]:focus-visible { outline: 2px solid var(--teal-dark, #2f6b62); outline-offset: 3px; }
.wrist-ruler-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}
.wrist-ruler-scale b { font-weight: 500; }
/* 数字随拖动跳动时,tile 有一个极短的强调,提示"这是后果" */
.fit-tile strong { transition: color 0.18s ease; }
.fit-tile.tile-changed strong { color: var(--teal-dark, #2f6b62); }

/* ═══ 两级计时法(Phenomenon 四个获奖站一致的做法)═══
   CSS 只负责离散状态:0.2s、默认缓动、不写 cubic-bezier;
   所有空间位移交给 GSAP(power2/3.out)。这样永远不会出现随手写的时长。 */
:root {
  /* 微交互时长按各设计系统源码校准(2026-07-25 研究):
     Carbon fast-01=70ms / fast-02=110ms;Atlassian 硬规则「一天要触发几十次的动效必须 <150ms」。
     原来统一 200ms 比业界基准慢了近一倍。 */
  --t-state: 0.11s;  /* 颜色/透明度/边框:离散状态(Carbon fast-02) */
  --t-press: 0.07s;  /* 按下:必须近乎瞬时(Carbon fast-01) */
  --t-hover: 0.15s;  /* 复合 hover(Atlassian 上限) */
}
.studio-action-row button,
.quick-look-slot > button:first-child,
.workspace-tab,
.domain-card,
.strand-stone-row,
.builder-palette-card,
.size-options label > span,
.path-choice-grid label > span,
.wrist-step,
.fit-tile { transition: color var(--t-state), background-color var(--t-state), border-color var(--t-state), opacity var(--t-state); }
.material-card,
.style-choice-card { transition: border-color var(--t-state), background-color var(--t-state); }

/* ═══ 会话续做条(72 小时内可接着做)═══ */
.resume-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 11px 14px;
  border: 1px solid rgba(47, 107, 98, 0.28);
  border-radius: 14px;
  background: rgba(232, 245, 241, 0.5);
}
.resume-copy { display: grid; gap: 2px; min-width: 0; }
.resume-copy strong { font-size: 13.5px; font-weight: 620; }
.resume-copy small { color: var(--muted); font-size: 11px; }
.resume-actions { display: flex; gap: 8px; }
.resume-actions button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: #4a524e;
  font-size: 12px;
  cursor: pointer;
  transition: color var(--t-state), border-color var(--t-state), background-color var(--t-state);
}
.resume-actions button[data-resume="continue"] {
  border-color: var(--teal-dark, #2f6b62);
  color: var(--teal-dark, #2f6b62);
  font-weight: 600;
}
.time-cost { color: var(--muted); font-weight: 500; }
.resume-bar { margin-bottom: 18px; }

/* ═══ 步骤条分两段:填写 / 你的手串 ═══
   目的不是改流程,是别让 6 个格子看着像 6 道关——真正的门槛只有"填写"那几步。 */
.workspace-tabs { padding-top: 15px; }
.workspace-tab[data-phase-label]::before {
  content: attr(data-phase-label);
  position: absolute;
  top: -13px;
  left: 3px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
}
/* 两段之间一道细分隔 */
.workspace-tab[data-phase-start="true"]::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -1px;
  width: 1px;
  background: var(--line);
  opacity: 1;
}
/* 激活态的下划线不能被上面的分隔线规则顶掉 */
.workspace-tab.active[data-phase-start="true"]::after { top: auto; bottom: 0; left: 5px; right: 5px; width: auto; height: 2px; }

@media (max-width: 939px) {
  .workspace-tabs { padding-top: 14px; }
  /* 手机上 6 个格子太挤:未选中的只留文字,序号圈只给当前步 */
  .workspace-tab span { display: none; }
  .workspace-tab.active span { display: grid; }
  .workspace-tab strong { font-size: 10.5px; }
  .workspace-tab[data-phase-label]::before { top: -12px; font-size: 9px; }
}
/* 英文标签更长(Main/Chart/Wrist/Bead),窄屏收紧分隔与字号,避免身份行横向溢出 */
@media (max-width: 412px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric::before { margin: 0 4px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric small { font-size: 10px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric strong { margin-left: 2px; font-size: 11px; }
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) #workbench-hero .hero-plan-name { font-size: 13px; }
}
/* 英文标签最长:≤400px 时省掉最后一项(珠径),佩戴步与完成页都还有 */
@media (max-width: 400px) {
  html[lang="en"] body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .hero-metric:last-child { display: none; }
}

/* 起点标记(结绳位):闭环上"第几颗"要有可数的起点 */
.strand-origin-knot { fill: rgba(31, 41, 38, 0.42); }

/* ═══ 故事手串卡(2026-07-26)═══ */
.story-card {
  position: relative;
  margin: 0 0 14px;
  padding: 13px 15px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  background: var(--panel, #fff);
}
.story-card header { display: flex; align-items: baseline; justify-content: space-between; }
.story-card h3 { margin: 0 0 8px; font-size: 12px; font-weight: 760; letter-spacing: 0.06em; color: var(--teal-dark); }
.story-card blockquote {
  margin: 0 0 10px; padding: 0;
  font-family: var(--serif); font-size: 14.5px; line-height: 1.6; white-space: pre-line;
}
.story-card .story-degrade { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft, #555); }
.story-recipe { margin: 0 0 12px; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; }
.story-recipe b { font-variant-numeric: tabular-nums; }
.story-recipe span { display: block; font-size: 11.5px; color: var(--ink-soft, #666); }
.story-card footer { display: flex; align-items: center; gap: 10px; }
.story-card footer small { color: var(--ink-soft, #777); font-size: 11px; }
.story-apply {
  padding: 8px 14px; border: none; background: var(--teal-dark, #0e5a54); color: #fff;
  font-size: 13px; font-weight: 640; cursor: pointer;
}
.story-card-dismiss {
  border: none; background: none; font-size: 16px; line-height: 1;
  color: var(--ink-soft, #888); cursor: pointer; padding: 2px 4px;
}
.story-card--notice { border-left-color: var(--ink-soft, #999); }
.story-card--notice p { margin: 0 18px 0 0; font-size: 13px; line-height: 1.6; white-space: pre-line; }

/* 主动叙事时:加强/视觉 不参与,界面直说 */
/* 主动叙事:预设区整块隐藏(User 2026-07-26:变淡占地方还乱,藏掉,删掉文字即恢复) */
body[data-story-narration="true"] fieldset[data-intention-block],
body[data-story-narration="true"] .style-direction-field {
  display: none !important;
}

/* 故事示例行 */
.story-examples button {
  display: inline-flex;
  align-items: center;      /* baseline 会把文字顶到胶囊上沿,剩一截空底 */
  justify-content: center;
  gap: 6px;
}
.story-examples button i {
  font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--teal-dark, #0e5a54); letter-spacing: 0.04em; white-space: nowrap;
}
.story-examples-block .intent-priority-note { margin-top: 8px; }

/* 方案步 · 叙事块(替代已下掉的视觉微调五按钮) */
.design-narrative { padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.narrative-source { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--teal-dark); }
.narrative-copy {
  margin: 0; padding: 0 0 0 13px; border-left: 2px solid var(--teal);
  font-family: var(--serif); font-size: 15.5px; font-weight: 530; line-height: 1.7; white-space: pre-line;
}
.narrative-degrade { margin: 0; font-size: 13px; color: var(--ink-soft, #555); }

.story-card--pending p { color: var(--teal-dark); }
.story-card--pending::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); margin: 0 8px 1px 0; animation: story-pulse 1.2s ease-in-out infinite;
}
@keyframes story-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .story-card--pending::before { animation: none; } }

/* 出生路径上写了故事:一句话 + 一键切换 */
.story-path-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: -6px 0 14px; padding: 9px 12px;
  border-left: 3px solid var(--teal); background: var(--mist, #eef4f2);
  font-size: 12.5px; line-height: 1.5;
}
.story-path-hint button {
  padding: 5px 12px; border: none; background: var(--teal-dark, #0e5a54); color: #fff;
  font-size: 12.5px; font-weight: 640; cursor: pointer; border-radius: 999px;
}

/* 叙事状态下,输入框下的说明行(预设区藏掉后,得说清楚为什么) */
.story-narration-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: -6px 0 14px; padding: 9px 12px;
  border-left: 3px solid var(--teal); background: var(--mist, #eef4f2);
  font-size: 12.5px; line-height: 1.5;
}

/* 故事生成幕布:盖住画布,免得默认串被当成结果 */
.bracelet-stage { position: relative; }
.story-veil {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  background: var(--quartz);
  text-align: center; padding: 20px;
}
.story-veil-label { margin: 0; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.story-veil small { color: var(--muted); font-size: 12px; }
.story-veil-bar {
  width: min(230px, 62%); height: 3px; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
.story-veil-bar i {
  display: block; height: 100%; background: var(--teal-dark);
  transform-origin: left; transform: scaleX(0);
  animation: story-veil-progress 75s cubic-bezier(0.25, 0.6, 0.3, 1) forwards;
}
/* 缓进不到头:75 秒内匀速逼近 93%,真正到 100% 靠揭幕——进度条不许说谎说"完成" */
@keyframes story-veil-progress {
  0% { transform: scaleX(0); }
  10% { transform: scaleX(0.3); }
  45% { transform: scaleX(0.72); }
  100% { transform: scaleX(0.93); }
}
@media (prefers-reduced-motion: reduce) {
  .story-veil-bar i { animation: none; transform: scaleX(0.5); }
}

/* ═══ 手机结果态收口（2026-07-28）
   非出生故事路径仍使用 workbench-summary。此前摘要的桌面内容被塞进
   46dvh 画布，标题会被下一行步骤条裁掉；底部 CTA 也紧贴视口边缘。
   手机上只保留结构身份和三项实物规格，完整解释继续放在可滚动面板。 ═══ */
@media (max-width: 939px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-app {
    grid-template-rows: auto 44px minmax(0, 1fr) 80px;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .bracelet-workbench {
    max-height: 49dvh;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 48px;
    padding: 3px 0 5px;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .result-eyebrow {
    margin-bottom: 0;
    font-size: 7.5px;
    line-height: 1.15;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .result-copy h1 {
    font-size: 17px;
    line-height: 1.08;
    -webkit-line-clamp: 1;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .result-copy #result-reason,
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .result-contract,
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .structure-story-action,
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .exact-build-line {
    display: none;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .result-commerce {
    padding-left: 8px;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .fit-facts {
    gap: 7px;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .fit-facts strong {
    font-size: 8.5px;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .fit-facts small {
    font-size: 7.5px;
  }

  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workspace-footer {
    min-height: 80px;
    padding-top: 7px;
    padding-bottom: max(15px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 340px) {
  body:is([data-workspace="design"], [data-workspace="stones"], [data-workspace="finish"]) .workbench-summary .result-commerce {
    display: none;
  }
}