:root {
  --background: #131316;
  --surface: #1b1b1e;
  --surface-2: #1f1f22;
  --surface-3: #2a2a2d;
  --surface-4: #353438;
  --line: #454933;
  --line-soft: rgba(255, 255, 255, .08);
  --text: #e4e1e6;
  --muted: #c6c9ac;
  --dim: rgba(228, 225, 230, .62);
  --primary: #d2f000;
  --primary-dim: #b8d300;
  --on-primary: #191e00;
  --secondary: #7ef4ff;
  --danger: #ffb4ab;
  --radius: 8px;
  --shadow: 0 18px 52px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(210, 240, 0, .06), transparent 36rem),
    radial-gradient(circle, rgba(69, 73, 51, .52) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--background);
  font: 14px/1.45 Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
select, input[type="text"] {
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 14px 32px;
  background: rgba(19, 19, 22, .92);
  border-bottom: 2px solid var(--surface-4);
  box-shadow: 0 0 15px rgba(210, 240, 0, .16);
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: baseline; gap: 12px; min-width: max-content; }
.brand strong {
  font-family: "Bricolage Grotesque", Geist, sans-serif;
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  color: #fff;
}
.brand span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.topnav { display: flex; align-items: center; gap: 26px; }
.topnav button, .ghost-btn {
  color: var(--muted);
  background: transparent;
  border: 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}
.topnav button.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}
.account-area { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.try-pill, .plan-pill, .account-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(210, 240, 0, .25);
  color: var(--primary);
  background: rgba(210, 240, 0, .05);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.plan-pill {
  color: var(--text);
  background: var(--surface-4);
  border-color: var(--line-soft);
}
.account-pill {
  max-width: 190px;
  height: 34px;
  justify-content: center;
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(126,244,255,.35), rgba(210,240,0,.25)),
    var(--surface-4);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 16px 32px 36px;
}
.hero-stepper { padding: 10px 0 18px; }
.stepper-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.stepper-head span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.stepper-head span + span { color: var(--muted); }
.progress-track {
  height: 8px;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: 999px;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
}
#activeStepHint { margin: 12px 0 0; color: var(--muted); text-align: center; }
.step-tabs { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; padding-bottom: 2px; }
.step-tab {
  flex: 1;
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(31,31,34,.82);
  color: var(--muted);
  font-weight: 700;
}
.step-tab.active {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

.step-panel { display: none; }
.step-panel.active { display: block; }
.panel-copy h1 {
  margin: 0;
  max-width: 780px;
  font: 800 48px/1.06 "Bricolage Grotesque", Geist, sans-serif;
  color: #fff;
}
.panel-copy p { max-width: 700px; margin: 12px 0 0; color: var(--muted); font-size: 18px; }
.panel-copy.compact h1 { font-size: 34px; }
.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.concept-grid, .reference-hero, .output-layout, .export-grid, .mark-grid, .below-grid {
  display: grid;
  gap: 16px;
}
.concept-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); align-items: end; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice-card {
  display: grid;
  gap: 12px;
  min-height: 180px;
  padding: 22px;
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.choice-card input { display: none; }
.choice-card.selected, .choice-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 18px rgba(210,240,0,.16);
}
.choice-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: 8px;
  font-weight: 900;
  font-size: 24px;
}
.choice-card strong { font: 700 24px/1.2 "Bricolage Grotesque", Geist, sans-serif; }
.choice-card span:last-child { color: var(--muted); }
.concept-workspace { display: grid; grid-template-columns: 360px 1fr; gap: 16px; margin-top: 24px; }

.workspace-card, .upload-panel, .chat-panel, .task-box, .save-panel {
  background: rgba(31,31,34,.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.upload-panel, .chat-panel, .task-box, .save-panel { padding: 16px; }
.panel-title, .card-head {
  color: var(--text);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.card-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}
.card-head > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.muted { color: var(--dim); font-weight: 500; text-transform: none; letter-spacing: 0; }
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
}
.view-icon {
  min-width: 28px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(126,244,255,.16);
  color: var(--secondary);
  font-size: 11px;
  text-align: center;
}

.upload-zone {
  min-height: 190px;
  margin-top: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.upload-zone input { width: 100%; color: var(--muted); }
.upload-mark {
  color: var(--on-primary);
  background: var(--primary);
  border-radius: 6px;
  padding: 7px 10px;
  font-weight: 800;
}
.upload-zone small, .source-bar { color: var(--dim); }
.source-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; min-height: 58px; }
.source-bar .thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  background: var(--surface-4);
}
.source-bar .thumb.active { border-color: var(--primary); }

.chat-log { display: grid; gap: 12px; margin-top: 12px; max-height: 320px; overflow: auto; }
.chat-msg, .concept-card-mini {
  padding: 14px;
  border-radius: 14px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.chat-msg.user {
  justify-self: end;
  max-width: 74%;
  color: var(--on-primary);
  background: var(--primary);
}
.concept-card-mini { display: grid; gap: 4px; border-color: rgba(126,244,255,.4); }
.concept-card-mini strong { color: var(--secondary); }
.chat-input {
  margin-top: 14px;
  padding: 13px 14px;
  color: var(--dim);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.reference-hero {
  grid-template-columns: minmax(0, 460px) 1fr;
  align-items: stretch;
  min-height: 620px;
}
.reference-stage {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(210,240,0,.06), transparent 45%),
    var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.reference-stage.slim { min-height: 470px; }
.stage-badge {
  position: absolute;
  left: 18px;
  top: 18px;
  padding: 8px 11px;
  color: var(--primary);
  border: 1px solid rgba(210,240,0,.3);
  border-radius: 999px;
  background: rgba(19,19,22,.65);
  font-weight: 800;
}
.iso-figure {
  position: relative;
  width: 270px;
  height: 420px;
  transform: rotate(-8deg) skewY(3deg);
  filter: drop-shadow(0 24px 35px rgba(0,0,0,.45));
}
.iso-figure.small { transform: scale(.82) rotate(-8deg) skewY(3deg); }
.block-head, .block-body, .block-arm, .block-leg {
  position: absolute;
  border: 2px solid rgba(210,240,0,.55);
  background: linear-gradient(145deg, rgba(126,244,255,.18), rgba(210,240,0,.12));
}
.block-head { left: 92px; top: 0; width: 88px; height: 88px; }
.block-body { left: 62px; top: 104px; width: 148px; height: 156px; box-shadow: inset 0 0 60px rgba(210,240,0,.12); }
.block-arm { top: 104px; width: 54px; height: 156px; }
.block-arm.left { left: 0; }
.block-arm.right { right: 0; }
.block-leg { top: 278px; width: 68px; height: 138px; }
.block-leg.left { left: 62px; }
.block-leg.right { right: 62px; }

.output-layout { grid-template-columns: minmax(340px, 1fr) minmax(360px, 560px); align-items: stretch; }
.output-cards { display: grid; gap: 14px; }
.output-card {
  display: grid;
  gap: 8px;
  padding: 22px;
  text-align: left;
  color: var(--text);
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 8px;
}
.output-card strong { font: 700 28px/1.1 "Bricolage Grotesque", Geist, sans-serif; }
.output-card span { color: var(--muted); }
.output-card.active, .output-card:hover {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}
.output-card.active span, .output-card:hover span { color: rgba(25,30,0,.75); }

.mark-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(250px, 2fr); align-items: stretch; }
.marking-card, .preview-card, .task-panel { min-height: 660px; }
.marking-card { position: relative; }
.source-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.source-toolbar label, .controls-box label, .project-open {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.canvas-wrap {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background:
    radial-gradient(circle, rgba(69, 73, 51, .8) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--background);
}
canvas { max-width: 100%; border-radius: 6px; }
canvas#src { cursor: crosshair; }
.floating-tools {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  color: var(--text);
  background: rgba(19,19,22,.74);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.floating-tools button, .small-btn {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface-3);
}
.floating-tools span { min-width: 44px; text-align: center; color: var(--muted); font-size: 12px; }
.view3d {
  position: relative;
  overflow: hidden;
  height: calc(100% - 48px);
  min-height: 612px;
  background:
    radial-gradient(circle at 50% 18%, rgba(126,244,255,.12), transparent 30rem),
    var(--surface);
  cursor: grab;
}
.view3d::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 360px;
  transform: translate(-50%, -50%) rotate(-5deg);
  background:
    linear-gradient(var(--secondary), var(--secondary)) 66px 0 / 58px 58px no-repeat,
    linear-gradient(145deg, rgba(210,240,0,.42), rgba(126,244,255,.24)) 42px 80px / 106px 128px no-repeat,
    linear-gradient(145deg, rgba(126,244,255,.28), rgba(210,240,0,.2)) 0 82px / 36px 126px no-repeat,
    linear-gradient(145deg, rgba(126,244,255,.28), rgba(210,240,0,.2)) 154px 82px / 36px 126px no-repeat,
    linear-gradient(145deg, rgba(210,240,0,.28), rgba(126,244,255,.18)) 46px 228px / 44px 118px no-repeat,
    linear-gradient(145deg, rgba(210,240,0,.28), rgba(126,244,255,.18)) 100px 228px / 44px 118px no-repeat;
  filter: drop-shadow(0 24px 38px rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(210,240,0,.14));
  opacity: .72;
  pointer-events: none;
}
.view3d:active { cursor: grabbing; }
.view3d canvas { position: relative; z-index: 1; display: block; }
.task-panel { display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.task-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.task-title span {
  color: var(--primary);
  background: rgba(210,240,0,.14);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
}
.guided-tasks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guided-tasks li {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: var(--surface);
}
.guided-tasks li.active {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 800;
}
.controls-box { display: grid; gap: 10px; }
.checkline input { accent-color: var(--primary); }
.primary-btn, .secondary-btn, .danger-btn {
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--primary);
  color: var(--on-primary);
  background: var(--primary);
  font-weight: 800;
}
.secondary-btn {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--line);
}
.danger-btn {
  color: var(--danger);
  background: rgba(255, 180, 171, .08);
  border-color: rgba(255, 180, 171, .3);
}
.wide { width: 100%; }

.export-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(300px, .8fr); align-items: start; }
.template-wrap { min-height: 500px; }
.save-panel { display: grid; gap: 12px; }
.project-open { flex-direction: column; align-items: stretch; }

.below-grid {
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.2fr) minmax(320px, 1.2fr);
  margin-top: 16px;
}
#layerList, #jobList { list-style: none; margin: 0; padding: 8px; max-height: 260px; overflow: auto; }
#layerList li, #jobList li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--muted);
}
#layerList li:hover, #jobList li:nth-child(odd) { background: var(--surface); }
#layerList li.active { outline: 1px solid var(--primary); }
#layerList .tag, #jobList .tag { color: var(--dim); font-size: 12px; }
#layerList .del {
  border: 0;
  color: var(--danger);
  background: transparent;
}
.plan-list, .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.plan {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.plan b { color: var(--primary); }
.plan span { color: var(--muted); font-size: 12px; }
.plan button { justify-self: start; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 50;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 16px;
  color: var(--text);
  background: var(--surface-4);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
#toast.show { opacity: 1; }

@media (max-width: 1180px) {
  .topnav { display: none; }
  .concept-grid, .concept-workspace, .reference-hero, .output-layout, .export-grid, .mark-grid, .below-grid {
    grid-template-columns: 1fr;
  }
  .marking-card, .preview-card, .task-panel { min-height: auto; }
  .view3d { min-height: 420px; }
}

@media (max-width: 760px) {
  .topbar, .studio-shell { padding-left: 16px; padding-right: 16px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .account-area { justify-content: flex-start; }
  .panel-copy h1 { font-size: 34px; }
  .choice-grid { grid-template-columns: 1fr; }
  .step-tab { min-width: 104px; }
  .source-toolbar { align-items: stretch; flex-direction: column; }
  .source-toolbar label { justify-content: space-between; }
}

/* Corrected simple-generator shell */
body {
  background:
    radial-gradient(circle, rgba(69, 73, 51, .75) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--background);
}

.topbar {
  align-items: center;
  gap: 24px;
  min-height: 126px;
  padding: 18px 32px 16px;
}

.brand { min-width: 220px; }
.brand strong { font-size: 26px; }

.hero-stepper {
  flex: 1;
  max-width: 840px;
  padding: 0;
}

.stepper-head { margin-bottom: 7px; }

.step-tabs {
  margin-top: 12px;
  gap: 10px;
}

.step-tab {
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  border-color: rgba(210, 240, 0, .18);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.account-profile {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(210, 240, 0, .35);
  border-radius: 50%;
  background: var(--surface-4);
}

.account-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-shell {
  width: min(1440px, 100%);
  padding: 28px 32px 36px;
}

.concept-screen {
  width: min(1060px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.concept-screen .choice-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.choice-card {
  appearance: none;
  text-align: left;
  color: var(--text);
}

.choice-card strong {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0;
}

.concept-workspace {
  display: block;
  margin-top: 0;
}

.concept-mode-panel { display: none; }
.concept-mode-panel.active { display: block; }

.upload-panel,
.chat-panel {
  min-height: 360px;
}

.upload-zone {
  min-height: 270px;
  position: relative;
  overflow: hidden;
}

.upload-zone input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.chat-log.empty {
  min-height: 250px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(19, 19, 22, .65);
}

.chat-input.disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--dim);
  border-radius: 8px;
}

.chat-input.disabled button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--dim);
  background: var(--surface-4);
}

.reference-hero {
  grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
}

.output-screen {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(340px, .85fr);
  gap: 18px;
  min-height: 520px;
}

.output-stage {
  display: grid;
  place-items: center;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(69, 73, 51, .7) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--surface-2);
  overflow: hidden;
}

.output-figure {
  transform: scale(1.12) rotate(-8deg) skewY(3deg);
}

.output-choice-panel {
  display: grid;
  align-content: center;
  gap: 14px;
}

.output-choice-panel h1 {
  margin: 0;
  font: 800 38px/1.08 "Bricolage Grotesque", Geist, sans-serif;
  color: #fff;
}

.output-choice-panel .output-cards {
  grid-template-columns: 1fr;
  gap: 10px;
}

.output-card {
  min-height: 74px;
  padding: 18px 20px;
}

.output-card strong {
  font-size: clamp(20px, 2.3vw, 28px);
  letter-spacing: 0;
}

.mark-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(260px, 2fr);
}

.marking-card,
.preview-card,
.task-panel {
  min-height: 680px;
}

.canvas-label {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100% - 36px);
  padding: 7px 11px;
  color: var(--text);
  background: rgba(19, 19, 22, .75);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.canvas-label .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-card { position: relative; }

.preview-card .icon-only {
  margin-left: 8px;
}

.mark-menu {
  display: grid;
  gap: 11px;
}

.mark-menu label,
.project-open {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.mark-menu .checkline {
  display: flex;
  align-items: center;
}

.export-screen {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.5fr) minmax(280px, .7fr);
  gap: 18px;
  align-items: start;
}

.save-panel .ghost-btn {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  text-align: center;
}

@media (max-width: 1180px) {
  .topbar {
    flex-wrap: wrap;
    min-height: 0;
  }

  .brand { min-width: 0; }

  .hero-stepper {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .output-screen,
  .reference-hero,
  .mark-grid,
  .export-screen {
    grid-template-columns: 1fr;
  }

  .marking-card,
  .preview-card,
  .task-panel,
  .output-stage {
    min-height: 460px;
  }
}

@media (max-width: 760px) {
  .topbar {
    align-items: stretch;
    padding: 14px 16px;
  }

  .account-profile {
    position: absolute;
    right: 16px;
    top: 14px;
  }

  .step-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .step-tab {
    min-width: 0;
    padding: 8px 4px;
    font-size: 11px;
  }

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

  .output-choice-panel h1 {
    font-size: 32px;
  }
}

/* Reference fidelity pass */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
}

.topbar {
  position: sticky;
  min-height: 80px;
  padding: 18px 40px;
  background: #131316;
  border-bottom: 2px solid #353438;
}

.brand { min-width: 250px; }
.brand strong { font-size: 28px; letter-spacing: -.05em; }

.reference-main-nav {
  position: absolute;
  left: 50%;
  top: 31px;
  transform: translateX(-50%);
  display: none;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .06em;
}

.reference-main-nav .simple-nav,
.reference-main-nav .market-nav,
.reference-main-nav .concept-chain {
  display: none;
}

body[data-step="reference"] .reference-main-nav,
body[data-step="output"] .reference-main-nav,
body[data-step="mark"] .reference-main-nav,
body[data-step="export"] .reference-main-nav {
  display: block;
}

body[data-step="concept"] .reference-main-nav .concept-chain {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: rgba(198, 201, 172, .3);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
}

body[data-step="concept"] .concept-chain span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-step="concept"] .concept-chain span:first-child {
  color: var(--primary);
  opacity: 1;
}

body[data-step="concept"] .concept-chain i {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px rgba(210,240,0,.8);
}

body[data-step="concept"] .concept-chain b {
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,.1);
}

body[data-step="reference"] .reference-main-nav .simple-nav,
body[data-step="output"] .reference-main-nav .simple-nav {
  display: inline-block;
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

body[data-step="mark"] .reference-main-nav .market-nav,
body[data-step="export"] .reference-main-nav .market-nav {
  display: inline-flex;
  gap: 34px;
  align-items: center;
}

.reference-main-nav b {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

.hero-stepper {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 92px;
  max-width: none;
  z-index: 25;
}

body[data-step="concept"] .hero-stepper {
  display: none;
}

.step-tabs {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.stepper-head {
  margin-bottom: 8px;
}

.stepper-head span {
  font-size: 15px;
}

.reference-account-bar {
  min-width: 370px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.reference-account-bar > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(210, 240, 0, .35);
  color: var(--primary);
  background: #2a2a2d;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.reference-account-bar > button:not(.account-profile) {
  min-height: 36px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  color: var(--primary);
  background: transparent;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.reference-account-bar > button:nth-of-type(1) {
  color: var(--on-primary);
  background: var(--primary);
}

.account-profile {
  width: 38px;
  height: 38px;
}

body[data-step="reference"] .brand strong,
body[data-step="mark"] .brand strong,
body[data-step="export"] .brand strong {
  font-size: 24px;
}

body[data-step="reference"] .reference-account-bar > span,
body[data-step="mark"] .reference-account-bar > span,
body[data-step="export"] .reference-account-bar > span {
  min-height: 28px;
  padding: 5px 12px;
}

body[data-step="reference"] .reference-account-bar > button:not(.account-profile),
body[data-step="mark"] .reference-account-bar > button:not(.account-profile),
body[data-step="export"] .reference-account-bar > button:not(.account-profile) {
  min-height: 28px;
  padding: 5px 14px;
}

body[data-step="reference"] .account-profile,
body[data-step="mark"] .account-profile,
body[data-step="export"] .account-profile {
  width: 32px;
  height: 32px;
}

.studio-shell {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 160px);
  padding: 82px 48px 108px;
}

body[data-step="concept"] .studio-shell {
  padding-top: 72px;
}

body[data-step="concept"] {
  background: var(--background);
}

body[data-step="concept"] .reference-concept-screen {
  transform: translate(-4px, 12px);
}

body[data-step="concept"] .reference-choice-grid {
  width: 991px;
  transform: translate(3px, -21px);
}

body[data-step="concept"] .reference-chat-panel {
  width: 991px;
  transform: translate(3px, -21px);
}

body[data-step="concept"] .concept-card-panel {
  width: 476px;
  transform: translate(1px, -5px);
}

.reference-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: #1b1b1e;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}

body[data-step="reference"] .reference-bottom-nav,
body[data-step="mark"] .reference-bottom-nav,
body[data-step="export"] .reference-bottom-nav {
  height: 98px;
}

body[data-step="reference"] .reference-bottom-nav {
  background: #151419;
}

body[data-step="mark"] .reference-bottom-nav,
body[data-step="export"] .reference-bottom-nav {
  background: #1f1f22;
}

.reference-bottom-nav button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px 28px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.reference-bottom-nav > div {
  display: flex;
  align-items: center;
  gap: 22px;
}

.reference-bottom-nav > div > span {
  display: block;
  color: rgba(198,201,172,.5);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .24em;
}

.reference-bottom-nav strong {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.reference-bottom-nav > div button {
  min-width: 210px;
  justify-content: center;
  color: var(--on-primary);
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 24px rgba(210,240,0,.28);
}

.reference-bottom-nav #footerContinue {
  min-width: 210px;
  min-height: 52px;   /* one canonical size on every step */
}

.reference-concept-screen {
  width: min(1504px, 100%);
  min-height: 1060px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1004px) minmax(360px, 472px);
  grid-template-areas:
    "copy cards"
    "choices cards"
    "chat cards";
  gap: 16px 32px;
  align-items: start;
}

.concept-main-copy { grid-area: copy; }
.concept-main-copy h1 {
  margin: 0;
  max-width: 840px;
  color: #fff;
  font: 800 58px/1.05 "Bricolage Grotesque", Geist, sans-serif;
  letter-spacing: -.02em;
}

.concept-main-copy p {
  max-width: 760px;
  margin: 14px 0 20px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.45;
}

.reference-choice-grid {
  grid-area: choices;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.reference-choice-grid .choice-card {
  min-height: 204px;
  padding: 24px;
  border-radius: 12px;
  background: #1f1f22;
}

.reference-choice-grid .choice-card:not(.selected):not(.reference-selected) .choice-icon {
  color: var(--primary);
  background: #2a2a2d;
}

.reference-choice-grid .choice-card.reference-selected,
.reference-choice-grid .choice-card.selected {
  background: #353438;
  border-color: var(--primary);
}

.reference-choice-grid .choice-card strong {
  font-size: 30px;
}

.reference-choice-grid .choice-card span:last-child {
  color: var(--muted);
  font-size: 16px;
}

.concept-workspace { grid-area: chat; }
.reference-concept-screen .upload-panel:not(.active) { display: none; }

.reference-chat-panel {
  padding: 0;
  min-height: 584px;
  border-radius: 12px;
  overflow: hidden;
}

.reference-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 18px 22px;
  color: var(--secondary);
  background: #2a2a2d;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.reference-chat-head .chat-dots {
  margin-left: auto;
  color: var(--secondary);
  letter-spacing: .15em;
}

.reference-chat-log {
  display: grid;
  gap: 16px;
  min-height: 404px;
  padding: 18px 22px;
  background: #1f1f22;
}

.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.chat-row p {
  margin: 0;
  max-width: 760px;
  padding: 16px 20px;
  border-radius: 16px;
  color: var(--muted);
  background: #1b1b1e;
  border: 1px solid rgba(255,255,255,.05);
  font-size: 16px;
}
.chat-row.user {
  justify-content: flex-end;
}
.chat-row.user p {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}
.chat-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--on-secondary);
  background: #00dbe9;
  border-radius: 50%;
  font-weight: 900;
}

.reference-chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 18px 22px;
  border-radius: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #1b1b1e;
}

.reference-chat-input > span {
  flex: 1;
  padding: 18px 22px;
  color: #fff;
  background: #2a2a2d;
  border-radius: 12px;
  font-size: 16px;
}
.reference-chat-input button {
  width: 56px;
  height: 56px;
  margin-left: 12px;
  border: 0;
  border-radius: 10px;
  color: var(--on-primary);
  background: var(--primary);
}

.concept-card-panel {
  grid-area: cards;
  display: grid;
  gap: 20px;
}

.concept-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.concept-card-head h2 {
  margin: 0;
  color: #fff;
  font: 700 32px/1.1 "Bricolage Grotesque", Geist, sans-serif;
}
.concept-card-head span {
  color: var(--secondary);
  background: rgba(0, 219, 233, .18);
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.concept-art-card {
  position: relative;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: #1f1f22;
}
.concept-art-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
}
.concept-art-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(19,19,22,.96), transparent 58%);
}
.concept-art-card div {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 1;
}
.concept-art-card strong {
  display: block;
  color: #fff;
  font: 700 22px/1.1 "Bricolage Grotesque", Geist, sans-serif;
}
.concept-art-card p {
  margin: 5px 0 0;
  color: var(--muted);
}
.concept-art-card div span {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  color: #00363a;
  background: #7ef4ff;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
}
.regenerate-btn {
  min-height: 72px;
  border: 2px dashed rgba(210,240,0,.25);
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.reference-image-stage {
  min-height: 700px;
  background: #1f1f22;
}
.reference-image-stage img {
  width: min(640px, 86%);
  max-height: 620px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.reference-journey-screen {
  position: relative;
  grid-template-columns: minmax(0, 1fr) 352px;
  gap: 0;
  min-height: 870px;
  margin: -16px -48px -28px;
}

.reference-journey-screen .panel-copy {
  display: none;
}

.reference-journey-screen .reference-image-stage {
  min-height: 870px;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 45% 50%, rgba(210,240,0,.06), transparent 32rem),
    #1f1f22;
}

.reference-journey-screen .reference-image-stage img {
  width: 640px;
  max-height: 690px;
}

.reference-source-panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: 24px;
  min-height: 870px;
  padding: 34px 32px;
  background: #131316;
  border-left: 2px solid #353438;
}

.reference-source-panel .source-open {
  position: absolute;
  right: 32px;
  top: 39px;
  color: var(--muted);
  font-size: 22px;
}

.reference-source-panel > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 38px rgba(0,0,0,.35);
}

.source-info-card {
  display: grid;
  gap: 10px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: #1f1f22;
}

.source-info-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.source-info-card strong {
  color: #fff;
  font: 700 30px/1.1 "Bricolage Grotesque", Geist, sans-serif;
}

.source-info-card p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

.model-ready-card {
  background: var(--surface);
}

.model-ready-card > div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.model-ready-card > div .material-symbols-outlined {
  color: var(--primary);
  font-size: 22px;
}

.model-ready-card > div strong {
  font: 800 18px/1 Geist, sans-serif;
}

.reference-refine-chat {
  position: absolute;
  left: 18%;
  bottom: 98px;
  width: min(790px, 62%);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(31,31,34,.92);
  box-shadow: 0 22px 55px rgba(0,0,0,.48);
  backdrop-filter: blur(16px);
}

.reference-refine-chat > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 14px 18px;
  color: var(--secondary);
  background: #2a2a2d;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.reference-refine-chat > div span:last-child {
  margin-left: auto;
}
.reference-refine-chat p {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 14px 18px;
  color: #fff;
  background: #1b1b1e;
  font-size: 20px;
}
.reference-refine-chat p > span {
  color: var(--muted);
}
.reference-refine-chat button {
  margin-left: auto;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 12px;
  color: var(--on-primary);
  background: var(--primary);
}

.reference-output-screen {
  min-height: 880px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 48px;
}
.reference-output-head {
  text-align: center;
  padding-top: 70px;
}
.reference-output-head h1 {
  margin: 28px 0 10px;
  color: #fff;
  font: italic 800 58px/1.02 "Bricolage Grotesque", Geist, sans-serif;
}
.reference-output-head p {
  margin: 0;
  color: var(--muted);
  font-size: 22px;
}
.reference-output-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.output-art-card {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  align-content: end;
  padding: 310px 32px 32px;
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #fff;
  background: #1f1f22;
}
.output-art-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 34px rgba(210,240,0,.26);
  color: #fff;
}
.output-art-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
  transition: transform .4s;
}
.output-art-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(19,19,22,.95), rgba(19,19,22,.28), transparent);
}
.output-art-card strong,
.output-art-card span {
  position: relative;
  z-index: 1;
}
.output-art-card strong {
  color: #fff;
  font-size: 42px;
}
.output-art-card span {
  max-width: 360px;
  color: #e4e1e6;
  font-size: 17px;
}

.mark-grid {
  min-height: 820px;
  gap: 16px;
}
.marking-card,
.preview-card,
.task-panel {
  min-height: 820px;
}

/* The real canvases are the content now (PR13 hid them under baked mockup
   imgs with opacity:0 / display:none — that made marking + the 3D preview
   invisible). */
.reference-preview { display: block; padding: 0; }

@media (max-width: 1180px) {
  .reference-concept-screen {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "choices" "chat" "cards";
  }
  .reference-account-bar {
    min-width: 0;
    flex-wrap: wrap;
  }
  .reference-output-cards {
    grid-template-columns: 1fr;
  }
}

/* Step 4 reference footer and side rail */
.footer-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.reference-bottom-nav .footer-left button {
  min-width: 0;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  box-shadow: none;
}

.mark-footer-actions {
  display: none;
  align-items: center;
  gap: 18px;
}

.reference-bottom-nav .mark-footer-actions button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}

.reference-bottom-nav .mirror-pill {
  min-width: 150px;
  justify-content: space-between;
  padding: 8px 16px;
  border: 1px solid rgba(210,240,0,.28);
  background: #353438;
}

.mirror-pill span {
  width: 42px;
  height: 22px;
  position: relative;
  border-radius: 999px;
  background: var(--primary);
}

.mirror-pill span::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--on-primary);
}

body[data-step="mark"] .mark-footer-actions {
  display: inline-flex;
}

body[data-step="mark"] .task-panel {
  grid-auto-rows: min-content;   /* one row per card — no forced 2-row squeeze */
  align-content: start;
}

body[data-step="mark"] .task-box {
  min-height: 0;
}

.mark-tip {
  display: none;
}

body[data-step="mark"] .mark-tip {
  display: grid;
  gap: 8px;
  padding: 22px;
  border-style: dashed;
}

.mark-tip span {
  color: var(--primary);
}

.mark-tip p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  font-style: italic;
  line-height: 1.1;
}

/* Reference fidelity pass 2 */
#planCta[data-variant="studio"] {
  color: var(--text);
  background: var(--surface-4);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: none;
}

#planCta[data-variant="upgrade"] {
  color: var(--on-primary);
  background: var(--primary);
  border: 1px solid var(--primary);
}

.step-instruction {
  display: none;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 18px;
  text-align: center;
}

.step-instruction span {
  color: var(--primary);
  font-weight: 800;
}

body[data-step="mark"] .step-instruction {
  display: block;
}

body:not([data-step="mark"]) .mark-footer-actions {
  display: none !important;
}

body[data-step="output"] .studio-shell {
  padding-top: 150px;
}

body[data-step="output"] {
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(210, 240, 0, .15) 1px, transparent 1px) 0 0 / 30px 30px,
    var(--background);
}

body[data-step="output"] .studio-shell {
  height: calc(100vh - 80px);
  min-height: 0;
  overflow: hidden;
}

body[data-step="output"] .reference-output-screen {
  min-height: 1010px;
  gap: 60px;
}

body[data-step="output"] .reference-output-head {
  padding-top: 72px;
}

body[data-step="output"] .reference-output-head .eyebrow {
  display: none;
}

body[data-step="output"] .reference-output-head h1 {
  margin-top: 0;
  font-size: 56px;
  transform: scaleX(.973);
  transform-origin: center top;
}

body[data-step="output"] .reference-output-cards {
  width: min(1500px, 100%);
  margin: 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

body[data-step="output"] .output-art-card {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 28px 36px;
  border-radius: 8px;
  background: var(--surface-2);
}

body[data-step="output"] .output-art-card strong {
  font-size: 32px;
}

body[data-step="output"] .output-app-card {
  background:
    radial-gradient(circle at 50% 28%, rgba(126,244,255,.24), transparent 19rem),
    linear-gradient(155deg, rgba(210,240,0,.16), rgba(31,31,34,.2) 44%, rgba(1,219,233,.12)),
    var(--surface-2);
}

body[data-step="output"] .output-app-card::before {
  content: "";
  position: absolute;
  inset: 54px 44px 170px;
  border-radius: 24px;
  border: 1px solid rgba(126,244,255,.2);
  background:
    linear-gradient(rgba(126,244,255,.24), rgba(126,244,255,.08)) 18% 22% / 42px 42px no-repeat,
    linear-gradient(rgba(210,240,0,.18), rgba(210,240,0,.07)) 50% 22% / 42px 42px no-repeat,
    linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.04)) 82% 22% / 42px 42px no-repeat,
    linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.03)) 18% 58% / 42px 42px no-repeat,
    linear-gradient(rgba(126,244,255,.18), rgba(126,244,255,.05)) 50% 58% / 42px 42px no-repeat,
    linear-gradient(rgba(210,240,0,.16), rgba(210,240,0,.05)) 82% 58% / 42px 42px no-repeat,
    rgba(14,14,17,.45);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  pointer-events: none;
}

body[data-step="output"] .output-art-card.active,
body[data-step="output"] .output-art-card:hover {
  color: #fff;
  background: var(--surface-2);
  border-color: var(--primary);
  box-shadow: 0 0 34px rgba(210,240,0,.32);
}

body[data-step="output"] .output-art-card span {
  color: var(--muted);
}

body[data-step="output"] .output-art-card img {
  opacity: .6;
}

body[data-step="output"] .output-art-card::after {
  background: linear-gradient(to top, rgba(19,19,22,.96), rgba(19,19,22,.55) 38%, transparent 82%);
}

.output-type-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.output-type-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--on-primary);
  background: var(--primary);
  font-size: 28px;
}

.output-type-icon.neutral {
  color: var(--text);
  background: var(--surface-4);
}

.output-type-icon.secondary {
  color: var(--on-secondary);
  background: #01dbe9;
}

.output-selected-icon {
  position: absolute !important;
  right: 32px;
  top: 32px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: none !important;
  place-items: center;
  border-radius: 999px;
  color: var(--on-primary);
  background: var(--primary);
  font-weight: 900;
}

.output-art-card.active .output-selected-icon {
  display: grid !important;
}

.output-card-badges {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
}

.output-card-badges span {
  width: fit-content;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(210,240,0,.24);
  color: var(--primary) !important;
  background: rgba(210,240,0,.1);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.output-card-badges.neutral span {
  color: var(--muted) !important;
  background: rgba(198,201,172,.1);
  border-color: rgba(198,201,172,.24);
}

.output-card-badges.dual span:first-child {
  color: var(--secondary) !important;
  background: rgba(126,244,255,.1);
  border-color: rgba(126,244,255,.24);
}

.output-card-badges.dual span:last-child {
  color: #ffb4ab !important;
  background: #93000a;
  border-color: rgba(255,180,171,.28);
}

body[data-step="mark"] .studio-shell {
  max-width: none;
  min-height: calc(100vh - 80px);
  padding: 135px 40px 108px;
}

body[data-step="mark"] .mark-grid {
  /* Full-viewport stretch at any resolution: flexible columns, viewport-fit height. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(300px, 1.1fr);
  gap: 20px;
  height: calc(100dvh - 230px);
  min-height: 560px;
}

body[data-step="mark"] .marking-card,
body[data-step="mark"] .preview-card,
body[data-step="mark"] .task-panel {
  min-height: 0;
  height: 100%;
}

body[data-step="mark"] .workspace-card {
  border-radius: 32px;
}

body[data-step="mark"] .marking-card .canvas-wrap {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  padding: 32px;
  background: transparent;
}

body[data-step="mark"] .floating-tools {
  bottom: 22px;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
}

body[data-step="mark"] .floating-tools button {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-3);
}

body[data-step="mark"] .floating-tools button .material-symbols-outlined {
  min-width: 0;
  color: var(--text);
  font-size: 22px;
}

body[data-step="mark"] .preview-card {
  display: grid;
  place-items: center;
}

body[data-step="mark"] .reference-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 32px;
  background: transparent;
}

body[data-step="mark"] .reference-preview::before {
  display: none;
}

body[data-step="mark"] .preview-card .icon-only {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-3);
}

body[data-step="mark"] .preview-card .icon-only .material-symbols-outlined {
  font-size: 26px;
}

body[data-step="mark"] .task-box {
  border-radius: 32px;
  padding: 20px;
  border-color: var(--line);
  background: #2a2a2d;
}

body[data-step="mark"] .task-title {
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

body[data-step="mark"] .task-title strong {
  color: var(--muted);
}

body[data-step="mark"] .guided-tasks {
  gap: 10px;
}

body[data-step="mark"] .guided-tasks li {
  min-height: 57px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border-color: var(--line);
  color: var(--muted);
  background: #1f1f22;
  font-size: 16px;
  font-weight: 800;
}

body[data-step="mark"] .guided-tasks li.active {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

body[data-step="mark"] .guided-tasks li .material-symbols-outlined {
  font-size: 22px;
}

body[data-step="mark"] .mark-tip {
  border-radius: 32px;
  padding: 20px;
}

body[data-step="reference"] .hero-stepper {
  top: 127px;
  right: 440px;
}

body[data-step="output"] .hero-stepper {
  top: 137px;
  left: 50px;
  right: 50px;
}

body[data-step="mark"] .hero-stepper {
  top: 107px;
}

body[data-step="export"] .hero-stepper {
  top: 107px;
}

body[data-step="reference"] .studio-shell {
  height: calc(100vh - 80px);
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

body[data-step="reference"] .reference-journey-screen {
  grid-template-columns: minmax(0, 1fr) 400px;
  min-height: calc(100vh - 80px);
  margin: 0;
}

body[data-step="reference"] .reference-journey-screen .reference-image-stage {
  min-height: calc(100vh - 80px);
}

body[data-step="reference"] .reference-journey-screen .reference-image-stage img {
  width: 640px;
  max-height: 690px;
}

body[data-step="reference"] .reference-source-panel {
  min-height: calc(100vh - 80px);
  gap: 40px;
  padding: 43px 32px 34px;
}

body[data-step="reference"] .reference-refine-chat {
  left: max(40px, calc((100% - 400px - 640px) / 2));
  top: calc(50% + 300px);
  bottom: auto;
  width: min(640px, calc(100% - 400px - 80px));
}

.reference-view-tools {
  display: none;
}

body[data-step="reference"] .reference-view-tools {
  position: absolute;
  left: 40px;
  bottom: 230px;
  z-index: 3;
  width: 56px;
  display: grid;
  gap: 6px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(19,19,22,.8);
  box-shadow: 0 24px 44px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
}

body[data-step="reference"] .reference-view-tools button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
}

body[data-step="reference"] .reference-view-tools span:not(.material-symbols-outlined) {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 0 7px;
}

body[data-step="reference"] .reference-bottom-nav #footerContinue .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

body[data-step="mark"] .footer-left::after {
  content: "";
  width: 1px;
  height: 32px;
  background: var(--line);
}

body[data-step="mark"] .footer-left {
  gap: 22px;
}

/* Written requirement corrections */
.reference-main-nav {
  display: block;   /* canonical: the step chain shows on every step */
}

.reference-account-bar {
  min-width: auto;
}

.reference-account-bar > span,
.reference-account-bar > button:not(.account-profile) {
  display: inline-flex;   /* canonical: tries pill + Upgrade Plan + Advanced on every step */
  align-items: center;
  justify-content: center;
}

body[data-step="concept"] .hero-stepper {
  display: block;
  top: 92px;
}

.hero-stepper .step-tabs {
  display: none !important;
}

body[data-step="concept"] .studio-shell {
  padding-top: 116px;
}

body[data-step="concept"] .reference-concept-screen {
  width: min(1004px, calc(100vw - 96px));
  min-height: auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "copy"
    "choices"
    "chat";
}

body[data-step="concept"] .reference-choice-grid,
body[data-step="concept"] .reference-chat-panel {
  width: 100%;
}

body[data-step="concept"] .concept-card-panel {
  display: none;
}

.reference-chat-log:empty {
  min-height: 404px;
}

@media (max-height: 1300px) {
  body[data-step="concept"] .reference-chat-panel {
    min-height: 0;
  }

  body[data-step="concept"] .reference-chat-log:empty {
    min-height: 300px;
  }
}

.reference-chat-input.is-disabled {
  pointer-events: none;
  opacity: .72;
}

.reference-chat-input.is-disabled > span {
  color: var(--dim);
}

.reference-chat-input button:disabled {
  color: rgba(198,201,172,.7);
  background: var(--surface-4);
}

body[data-step="output"] .reference-output-screen {
  gap: 42px;
}

body[data-step="output"] .output-type-stage {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
  gap: 42px;
  align-items: center;
}

body[data-step="output"] .output-reference-visual {
  min-height: 600px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 45%, rgba(210,240,0,.08), transparent 28rem),
    #1f1f22;
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
}

body[data-step="output"] .output-reference-visual img {
  width: min(640px, 86%);
  max-height: 560px;
  object-fit: contain;
  box-shadow: 0 22px 60px rgba(0,0,0,.48);
}

body[data-step="output"] .output-choice-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}

body[data-step="output"] .output-simple-card {
  position: relative;
  min-height: 94px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 60px 18px 20px;
  color: var(--text);
  background: rgba(31,31,34,.9);
  border: 1px solid rgba(210,240,0,.2);
  border-radius: 14px;
  box-shadow: none;
}

body[data-step="output"] .output-simple-card:hover,
body[data-step="output"] .output-simple-card.active {
  color: #fff;
  background: #353438;
  border-color: var(--primary);
  box-shadow: 0 0 26px rgba(210,240,0,.22);
}

body[data-step="output"] .output-simple-card strong {
  color: inherit;
  font: 800 25px/1.12 "Bricolage Grotesque", Geist, sans-serif;
}

body[data-step="output"] .output-simple-card .output-selected-icon {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  font-size: 18px;
}

/* Output step original design restore */
body[data-step="output"] .reference-main-nav {
  left: 39.5%;
}

body[data-step="output"] .reference-account-bar {
  min-width: 520px;
}

body[data-step="output"] .reference-output-screen {
  width: min(1500px, 100%);
  margin: 0 auto;
  min-height: 1010px;
  gap: 60px;
}

body[data-step="output"] .reference-output-cards {
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

body[data-step="output"] .output-art-card {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 32px 36px;
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: none;
}

body[data-step="output"] .output-art-card p {
  position: relative;
  z-index: 1;
  max-width: 370px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.5;
}

body[data-step="output"] .output-art-card strong {
  font-size: 32px;
}

body[data-step="output"] .output-selected-icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

@media (max-width: 1180px) {
  body[data-step="output"] .reference-output-cards {
    grid-template-columns: 1fr;
  }

  body[data-step="output"] .output-type-stage {
    grid-template-columns: 1fr;
  }

  body[data-step="output"] .output-art-card {
    min-height: 520px;
  }
}

body[data-step="mark"] .task-panel {
  height: 100%;                  /* viewport-fit (was a fixed 905px remnant) */
  max-height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

body[data-step="mark"] .mark-menu {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  display: grid;
  gap: 9px;
}

body[data-step="mark"] .mark-menu .panel-title {
  font-size: 12px;
  color: var(--muted);
}

body[data-step="mark"] .mark-menu label {
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
}

body[data-step="mark"] .mark-menu select {
  width: 100%;
  min-height: 30px;
  padding: 5px 24px 5px 8px;
  border-radius: 8px;
  font-size: 12px;
}

body[data-step="mark"] .mark-menu .checkline {
  display: flex;
  align-items: center;
  gap: 7px;
}

body[data-step="mark"] .mark-menu button {
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 11px;
  text-transform: uppercase;
}

body[data-step="mark"] .task-panel {
  gap: 12px;
}

body[data-step="mark"] .task-box {
  overflow: visible;
  padding: 16px;
  border-radius: 24px;
}

body[data-step="mark"] .task-title {
  margin-bottom: 10px;
}

body[data-step="mark"] .guided-tasks {
  gap: 6px;
}

body[data-step="mark"] .guided-tasks li {
  min-height: 39px;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.05;
}

body[data-step="mark"] .guided-tasks li .material-symbols-outlined {
  font-size: 18px;
}

body[data-step="mark"] .mark-menu {
  gap: 7px;
}

body[data-step="mark"] .mark-menu select {
  min-height: 26px;
  padding-top: 3px;
  padding-bottom: 3px;
}

body[data-step="mark"] .mark-menu button {
  min-height: 27px;
  padding-top: 4px;
  padding-bottom: 4px;
}

body[data-step="mark"] .mark-tip {
  padding: 16px;
}

body[data-step="export"] {
  background:
    radial-gradient(circle, rgba(69, 73, 51, .75) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--background);
}

body[data-step="export"] .studio-shell {
  padding: 220px 40px 108px;
}

body[data-step="export"] .export-screen {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    "copy copy"
    "three actions"
    "rail rail";
  gap: 20px;
  align-items: stretch;
}

body[data-step="export"] .panel-copy {
  grid-area: copy;
  padding: 0;
}

body[data-step="export"] .panel-copy .eyebrow {
  display: none;
}

body[data-step="export"] .panel-copy h1 {
  font: italic 800 52px/1.05 "Bricolage Grotesque", Geist, sans-serif;
  color: #fff;
}

body[data-step="export"] .panel-copy p {
  max-width: 640px;
  color: var(--muted);
  font-size: 20px;
}

body[data-step="export"] .template-preview {
  grid-area: preview;
  overflow: hidden;
  border-radius: 18px;
  border-color: rgba(210,240,0,.22);
  background: rgba(31,31,34,.86);
}

body[data-step="export"] .template-preview .card-head {
  min-height: 58px;
  background: #2a2a2d;
}

body[data-step="export"] .template-wrap {
  min-height: 600px;
  background:
    radial-gradient(circle, rgba(69, 73, 51, .78) 1px, transparent 1px) 0 0 / 24px 24px,
    #131316;
}

body[data-step="export"] .template-wrap canvas {
  max-width: min(660px, 94%);
  max-height: 520px;
}

body[data-step="export"] .export-3d {
  grid-area: three;
  overflow: hidden;
  border-radius: 18px;
  border-color: rgba(210,240,0,.22);
  background: rgba(31,31,34,.86);
  display: flex;
  flex-direction: column;
}
body[data-step="export"] .export-3d .card-head { min-height: 58px; background: #2a2a2d; }
body[data-step="export"] .export-rail {
  grid-area: rail;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
body[data-step="export"] .save-panel {
  grid-area: actions;
  align-self: stretch;
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  border-color: rgba(210,240,0,.22);
  background: rgba(42,42,45,.92);
}

body[data-step="export"] .save-panel button {
  min-height: 54px;
  border-radius: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

body[data-step="export"] .save-panel .project-open {
  margin-top: 2px;
}

body[data-step="export"] .save-panel select {
  min-height: 42px;
  border-radius: 10px;
}

/* ============================================================
   GRAFTED WIRED-FEATURE COMPONENTS (PR#13 design + functionality)
   Strictly additive; appended after the studio styles. Reuses the
   shared :root tokens already defined above — no token changes.
   ============================================================ */

/* --- Account bar: credit tries + auth pill + claim button --- */
.reference-tries { display: inline-flex; align-items: center; gap: 6px; }
.account-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--surface);
}
.account-pill[hidden] { display: none; }
#claimAccount[hidden] { display: none; }

/* --- Honest "Concept chat — coming soon" stub (replaces fake chat). --- */
.chat-coming-soon { display: grid; gap: 8px; place-items: start; padding: 24px 16px; color: var(--muted); }
.chat-coming-soon strong { font: 700 22px/1.15 "Bricolage Grotesque", Geist, sans-serif; color: #fff; }
.chat-coming-soon p { margin: 0; color: var(--muted); }
.soon-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--secondary);
  background: rgba(126,244,255,.12);
  border: 1px solid rgba(126,244,255,.4);
}
/* Dead-but-present nav controls read as honestly inert. */
.topnav button.soon, .account-area .soon, [aria-disabled="true"].soon {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* --- Step 2: real AI result render states (swapped into #referenceStage). --- */
.stage-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.4));
}
.stage-loading {
  display: grid;
  place-items: center;
  gap: 16px;
  color: var(--muted);
  font-weight: 700;
}
.stage-spinner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid rgba(210,240,0,.18);
  border-top-color: var(--primary);
  animation: stage-spin 0.9s linear infinite;
}
@keyframes stage-spin { to { transform: rotate(360deg); } }
.stage-error {
  display: grid;
  place-items: center;
  gap: 14px;
  max-width: 360px;
  padding: 0 24px;
  text-align: center;
  color: var(--muted);
}
.stage-error strong { color: #fff; font-size: 18px; }
.stage-error .stage-note { font-size: 13px; }
.step-tab[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/* --- Plan-gated ad slot — free tier only; reuses .workspace-card tokens. --- */
.ad-slot { grid-column: 1 / -1; }   /* span the below-grid row */
.ad-slot-body { padding: 16px; }
.ad-placeholder {
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
  min-height: 110px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
}
.ad-placeholder p { margin: 0; }
.ad-placeholder small { color: var(--dim); }
.ad-tag {
  align-self: start;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-primary);
  background: var(--primary);
}
.ad-consent { display: grid; gap: 10px; padding: 16px; color: var(--muted); }
.ad-consent p { margin: 0; }
.ad-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Committed-regions list (mark task-panel) --- */
.layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.layer-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}
.layer-list li button {
  background: none;
  border: 0;
  color: var(--dim);
  cursor: pointer;
}
.layer-list li button:hover { color: var(--danger); }
.layer-list:empty::after {
  content: "No regions committed yet.";
  color: var(--dim);
  font-size: 13px;
}

/* --- Export rail (My fits / Plans / Ad slot) --- */
.export-rail { display: grid; gap: 16px; margin-top: 16px; }
.export-rail .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* --- "My fits" job list --- */
.job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.job-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.job-list:empty::after {
  content: "No fits yet.";
  color: var(--dim);
  font-size: 13px;
}
.job-id { font-size: 11px; color: var(--dim); text-decoration: none; }
a.job-id:hover { color: var(--primary); }

/* ============================================================
   PUBLIC LANDING PAGE (served at / by server.py index()).
   Strictly additive and namespaced under .landing-page so nothing
   leaks into the shared studio selectors above. Reuses the same
   tokens, component classes, fonts and 1180/760 breakpoints; adds
   no new color tokens and no second font family.
   ============================================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 12px; top: -48px;
  z-index: 60;
  padding: 10px 16px;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.landing-page { display: flex; flex-direction: column; min-height: 100vh; }

/* The landing reuses .studio-shell purely as a centered width container. PR#13's
   studio rules make .studio-shell a full-height step panel (min-height ~100vh,
   width:100%, max-width:none, overflow:hidden) which explodes every landing
   section to a full screen. Neutralize those studio-only properties here; the
   landing keeps its own per-section vertical rhythm via .landing-section. */
.landing-page .studio-shell {
  width: min(1200px, 100%);
  max-width: 1200px;
  min-height: 0;
  height: auto;
  overflow: visible;
}

/* Topbar nav links reuse .topnav button look, rendered as anchors here. */
.landing-page .topnav a {
  color: var(--muted);
  background: transparent;
  border: 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  text-decoration: none;
}
.landing-page .topnav a:hover,
.landing-page .topnav a:focus-visible { color: var(--primary); }

.landing-page .scroll-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  text-align: center;
  justify-content: center;
}
.landing-page .scroll-cta.primary-btn,
.landing-page .scroll-cta.secondary-btn { line-height: 1.2; }
.landing-page .scroll-cta.primary-btn {
  box-shadow: 0 0 18px rgba(210, 240, 0, .35);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Section rhythm */
.landing-section { padding: 56px 0; }
.landing-section.tight { padding: 36px 0; }
.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 17px; margin: 10px 0 0; }
.reassure { margin: 8px 0 0; color: var(--dim); font-size: 13px; }

/* ---- Hero ---- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: 32px;
  align-items: center;
}
.hero-copy h1 { font-size: 52px; }
.hero-cta-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
/* The preserved Phase-1 entry buttons get the hero CTA glow look. */
.landing-page #enterStudio,
.landing-page #signInGoogle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  color: var(--on-primary);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 0 18px rgba(210, 240, 0, .35);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
}
.landing-page #enterStudio:hover,
.landing-page #signInGoogle:hover:not(:disabled) { background: var(--primary-dim); }
.landing-page #signInGoogle[hidden] { display: none; }
#landingNote { margin: 12px 0 0; color: var(--dim); font-size: 13px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* ---- Before -> After diptych ---- */
.diptych {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
}
.diptych-panel {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 18px;
}
.diptych .reference-stage { width: 100%; min-height: 320px; }
.moodboard { position: relative; width: 168px; height: 240px; }
.moodboard span {
  position: absolute;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  box-shadow: 0 12px 22px rgba(0,0,0,.35);
}
.moodboard .m1 {
  left: 0; top: 6px; width: 96px; height: 116px;
  transform: rotate(-7deg);
  background: linear-gradient(150deg, rgba(126,244,255,.42), rgba(210,240,0,.22));
}
.moodboard .m2 {
  right: 0; top: 0; width: 86px; height: 104px;
  transform: rotate(6deg);
  background: linear-gradient(150deg, rgba(210,240,0,.4), rgba(126,244,255,.2));
}
.moodboard .m3 {
  left: 14px; bottom: 8px; width: 92px; height: 110px;
  transform: rotate(4deg);
  background: linear-gradient(150deg, rgba(126,244,255,.3), rgba(210,240,0,.16));
}
.moodboard .m4 {
  right: 8px; bottom: 0; width: 78px; height: 96px;
  transform: rotate(-5deg);
  background: linear-gradient(150deg, rgba(210,240,0,.3), rgba(126,244,255,.18));
}
.connector { display: grid; gap: 8px; justify-items: center; }
.connector .choice-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 8px; }
.connector .beam {
  width: 4px; height: 64px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
}
.float-chips { position: absolute; inset: 0; pointer-events: none; }
.float-chips .try-pill { position: absolute; }
.float-chips .c-top { left: 14px; bottom: 16px; }
.float-chips .c-bot { right: 14px; top: 64px; }

/* ---- Proof strip ---- */
.proof-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.proof-row .try-pill,
.proof-row .plan-pill { display: inline-flex; align-items: center; gap: 8px; }
.proof-quote {
  display: grid; gap: 4px;
  max-width: 520px; margin: 20px auto 0; text-align: left;
  padding: 14px; border-radius: 14px;
  color: var(--muted); background: var(--surface);
  border: 1px solid rgba(126, 244, 255, .4);
}
.proof-quote strong { color: var(--secondary); }

/* ---- How it works flow strip ---- */
.flow-strip { margin: 8px 0 12px; }
.how-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px 0;
}
.how-row + .how-row { border-top: 1px solid var(--line-soft); }
.how-row.flip .how-copy { order: 2; }
.how-row.flip .how-visual { order: 1; }
.how-copy h3 {
  margin: 6px 0 8px;
  font: 700 26px/1.15 "Bricolage Grotesque", Geist, sans-serif;
  color: #fff;
}
.how-copy p { margin: 0; color: var(--muted); font-size: 16px; }
.how-visual {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(210,240,0,.05), transparent 45%),
    var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.how-visual .reference-stage { width: 100%; min-height: 220px; }
.how-visual .output-cards { width: 100%; }
.how-visual .choice-grid { width: 100%; }
.how-visual .iso-figure.small { transform: scale(.62) rotate(-8deg) skewY(3deg); }
.mini-mark {
  position: relative;
  width: 100%;
  min-height: 200px;
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 14px;
  align-items: stretch;
}
.mini-mark .canvas-wrap {
  min-height: 200px;
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.mini-mark .floating-tools { position: static; transform: none; justify-self: center; align-self: end; }
.mini-export {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  width: 100%;
  align-items: center;
}
.mini-export .view3d {
  position: relative;
  min-height: 200px;
  height: 200px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.mini-export .btn-stack { display: grid; gap: 10px; }

/* ---- Live preview spotlight ---- */
.spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 32px;
  align-items: center;
}
.spotlight-grid .view3d {
  position: relative;
  min-height: 420px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.spotlight-stage-head {
  position: absolute;
  left: 16px; top: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.spotlight-stage-head .view-icon { font-size: 12px; }
.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(19,19,22,.7);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---- Pricing ---- */
.landing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.landing-plans .plan {
  position: relative;
  gap: 10px;
  padding: 22px 20px;
  background: var(--surface-2);
  border-radius: 12px;
}
.landing-plans .plan h3 {
  margin: 0;
  font: 700 14px/1 Geist, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.landing-plans .plan .price {
  font: 800 32px/1 "Bricolage Grotesque", Geist, sans-serif;
  color: var(--primary);
}
.landing-plans .plan .price small { font-size: 13px; font-weight: 600; color: var(--dim); }
.landing-plans .plan ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 7px;
}
.landing-plans .plan li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
}
.landing-plans .plan li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(210,240,0,.5);
}
.landing-plans .plan .scroll-cta { margin-top: 4px; width: 100%; }
.landing-plans .plan.featured {
  border: 2px solid var(--primary);
  box-shadow: 0 0 22px rgba(210,240,0,.18);
}
.plan-flag { position: absolute; right: 16px; top: -12px; }
.pricing-footnote { margin: 18px 0 0; color: var(--dim); font-size: 12px; max-width: 760px; }

/* ---- FAQ ---- */
.faq-list { max-width: 720px; margin: 24px auto 0; display: grid; gap: 12px; }
.faq-list details {
  background: rgba(31,31,34,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: var(--text);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details[open] summary { border-bottom: 1px solid var(--line-soft); }
.faq-list .faq-answer {
  padding: 14px 18px 18px;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.55;
}

/* ---- Final CTA band ---- */
.final-band {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(210, 240, 0, .08), transparent 30rem),
    var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 48px 24px;
}
.final-band :is(h1, h2) {
  margin: 0 auto; max-width: 560px;
  font: 800 34px/1.06 "Bricolage Grotesque", Geist, sans-serif; color: #fff;
}
.final-band p { margin: 12px auto 0; max-width: 540px; color: var(--muted); font-size: 17px; }
.final-cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* ---- Footer ---- */
.landing-footer {
  margin-top: auto;
  background: var(--surface-2);
  border-top: 2px solid var(--surface-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(160px, 1fr) minmax(160px, 1fr);
  gap: 24px;
  padding-top: 36px;
}
.footer-grid .brand strong { font-size: 22px; }
.footer-tagline { margin: 12px 0 0; color: var(--muted); max-width: 28ch; }
.footer-grid h4 {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-grid a, .footer-grid .scroll-cta {
  color: var(--dim);
  text-decoration: none;
  font-size: 14px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
.footer-grid a:hover,
.footer-grid .scroll-cta:hover { color: var(--primary); }
.footer-legal {
  margin-top: 28px;
  padding: 18px 0 32px;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* ---- Motion (non-essential, gated) ---- */
@keyframes lp-breathe {
  0%, 100% { transform: rotate(-8deg) skewY(3deg) translateY(0); }
  50% { transform: rotate(-8deg) skewY(3deg) translateY(-7px); }
}
@keyframes lp-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.diptych .iso-figure { animation: lp-breathe 5.5s ease-in-out infinite; }
.how-row { animation: lp-fade-up .6s ease both; }

@media (prefers-reduced-motion: reduce) {
  .diptych .iso-figure,
  .how-row { animation: none !important; }
  .skip-link { transition: none; }
}

/* ---- Landing responsive: piggyback the studio 1180 / 760 breakpoints ---- */
@media (max-width: 1180px) {
  .hero-grid,
  .spotlight-grid,
  .how-row,
  .footer-grid { grid-template-columns: 1fr; }
  .how-row.flip .how-copy { order: 0; }
  .how-row.flip .how-visual { order: 0; }
  .hero-copy h1 { font-size: 40px; }
}
@media (max-width: 760px) {
  .landing-section { padding: 40px 0; }
  .hero-copy h1 { font-size: 32px; }
  .diptych { grid-template-columns: 1fr; }
  .connector { grid-auto-flow: column; }
  .connector .beam { width: 64px; height: 4px; }
  .mini-mark { grid-template-columns: 1fr; }
  .mini-export { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; }
  .landing-page #enterStudio,
  .landing-page #signInGoogle { width: 100%; justify-content: center; }
  .hero-cta-cluster .scroll-cta { width: 100%; }
}

/* =========================================================================
   DESIGN QA LAYER — canonical chrome, new components, layout + consistency
   fixes on top of the PR#13 base. Appended last so these rules win ties.
   ========================================================================= */

/* ---- Account menu (avatar dropdown) ---- */
.reference-account-bar { position: relative; }
.account-profile { border-radius: 50%; overflow: hidden; border: 2px solid var(--line); padding: 0; background: var(--surface-3); cursor: pointer; }
.account-profile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  min-width: 240px; padding: 10px;
  display: grid; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
}
.account-menu-head { display: grid; gap: 4px; padding: 6px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.account-menu-head .account-pill { justify-self: start; max-width: 100%; }
#accountPlanLine { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.account-menu > button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text);
  font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.account-menu > button:hover { background: var(--surface-3); }
.account-menu .material-symbols-outlined { font-size: 18px; color: var(--primary); }

/* ---- Plans modal + spiky upgrade sticker ---- */
.plan-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); }
.plan-modal[hidden] { display: none; }
.plan-modal-box { width: min(760px, 92vw); max-height: 82vh; overflow: auto; padding: 18px 20px 22px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.plan-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.plan-modal-head strong { font: 800 22px/1.1 "Bricolage Grotesque", Geist, sans-serif; color: #fff; }
.plan-modal-head button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; }
.plan-modal-head button:hover { background: var(--surface-3); color: #fff; }
#planModalBody .plan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

.plan-sticker {
  position: fixed; right: 26px; bottom: 100px; z-index: 60;
  width: 158px; height: 158px; padding: 20px; border: 0; cursor: pointer;
  background: var(--primary); color: var(--on-primary);
  font: 800 15px/1.15 "Bricolage Grotesque", Geist, sans-serif;
  text-transform: uppercase; letter-spacing: .02em; text-align: center;
  clip-path: polygon(50% 0%, 59% 9%, 71% 4%, 76% 15%, 89% 14%, 89% 27%, 100% 32%, 95% 44%, 102% 54%, 93% 62%, 96% 75%, 84% 78%, 82% 91%, 69% 89%, 62% 100%, 50% 93%, 38% 100%, 31% 89%, 18% 91%, 16% 78%, 4% 75%, 7% 62%, -2% 54%, 5% 44%, 0% 32%, 11% 27%, 11% 14%, 24% 15%, 29% 4%, 41% 9%);
  animation: sticker-pulse 1.5s ease-in-out infinite;
}
.plan-sticker small { display: block; margin-top: 5px; font: 700 9.5px/1.25 Geist, sans-serif; text-transform: none; letter-spacing: 0; }
@keyframes sticker-pulse { 0%, 100% { transform: scale(.93) rotate(-7deg); } 50% { transform: scale(1.07) rotate(-7deg); } }
@media (prefers-reduced-motion: reduce) { .plan-sticker { animation: none; } }

/* ---- Ads: vertical side rails (free tier only; JS gates #adSlot) ---- */
.ad-rail {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 30;
  width: 150px; min-height: 480px; max-height: 72vh; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(31, 31, 34, .92); border: 1px solid var(--line); border-radius: 12px;
}
.ad-rail-left { left: 12px; }
.ad-rail-right { right: 12px; }
.ad-rail-tag { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ad-rail .ad-slot-body { flex: 1; display: grid; }
.ad-rail .ad-placeholder { display: grid; align-content: center; gap: 8px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; padding: 12px; color: var(--muted); font-size: 12px; }
.ad-rail .ad-placeholder .ad-tag { justify-self: center; }
@media (max-width: 1760px) { .ad-rail { display: none; } }

/* ---- Step 1: locked Gemini card + example concept art ---- */
.choice-card:disabled, .choice-card.choice-locked { opacity: .55; cursor: not-allowed; }
.choice-card:disabled:hover { border-color: transparent; box-shadow: none; }
.choice-card .soon-badge { margin-left: 8px; vertical-align: middle; }
.concept-art-card img { width: 100%; height: auto; display: block; }

/* ---- Step 2: idle stage + source-concept preview ---- */
.stage-empty { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 280px; padding: 28px; text-align: center; color: var(--muted); }
.stage-empty .material-symbols-outlined { font-size: 46px; color: var(--dim); }
.stage-empty strong { color: #fff; font: 700 17px/1.2 "Bricolage Grotesque", Geist, sans-serif; }
.stage-empty p { margin: 0; max-width: 36ch; font-size: 13px; }
.concept-preview { margin-bottom: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.concept-preview img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; background: #0d0d10; }
.concept-preview-empty { margin: 0; padding: 20px 14px; color: var(--dim); font-size: 12px; text-align: center; }

/* ---- Step 3: output card art ---- */
.output-card .output-card-art { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }

/* ---- Mark step: full-viewport stretch + overflow fixes ---- */
body[data-step="mark"] .studio-shell { padding: 96px 24px 96px; height: auto; min-height: 100dvh; overflow: visible; }
.mark-grid {
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(300px, 1.15fr);
  gap: 16px; align-items: stretch;
  height: calc(100dvh - 212px); min-height: 540px;
}
.marking-card, .preview-card { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.marking-card .canvas-wrap, .preview-card .view3d { flex: 1; min-height: 0; }
.canvas-wrap { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.canvas-wrap canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.floating-tools { left: 12px; right: auto; bottom: 12px; transform: none; flex-wrap: wrap; max-width: calc(100% - 24px); }
.task-panel { min-height: 0; height: 100%; overflow-y: auto; grid-template-rows: none; grid-auto-rows: min-content; align-content: start; }
.guided-tasks li { cursor: pointer; }
.guided-tasks li:hover { border-color: var(--primary); }
.mark-menu label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.mark-menu select { width: 56%; max-width: 56%; min-width: 0; }
.mark-menu { overflow: hidden; }
.mark-menu button { width: 100%; }
.preview-dock { display: contents; }

/* ---- Export step: aligned grid + 3D preview card ---- */
.export-screen .export-3d .export-view3d { flex: 1; min-height: 420px; display: block; position: relative; }
.export-screen .export-3d .view3d { position: absolute; inset: 0; height: 100%; min-height: 0; }
@media (max-width: 1180px) {
  .export-screen { grid-template-columns: 1fr; grid-template-areas: "copy" "tpl" "three" "save" "rail"; }
  .export-screen .export-rail { grid-template-columns: 1fr; }
  .mark-grid { height: auto; grid-template-columns: 1fr; }
}

/* ---- Consistency pass: one type/button scale everywhere ---- */
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn {
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  min-height: 40px; padding: 10px 18px; border-radius: 10px;
}
.small-btn, .floating-tools button { font-size: 12px; font-weight: 700; min-height: 32px; border-radius: 8px; }
.reference-account-bar > button:not(.account-profile) { font-size: 12px; min-height: 34px; }
.reference-account-bar > span { font-size: 12px; min-height: 34px; }
.panel-title, .card-head strong, .canvas-label strong { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.task-box label, .mark-menu label, select { font-size: 12.5px; }
.step-instruction { font-size: 13px; }

/* ---- QA follow-ups ---- */
.account-menu[hidden] { display: none; }              /* [hidden] must beat display:grid */
body[data-step="mark"] .plan-sticker { display: none; } /* keep the marking workspace clear */

.export-screen .view3d::before { display: none; }
/* Mark: zoom tools as a vertical toolbar pinned top-right of the canvas card
   (the bottom edge sits under the fixed footer at short viewports). */
body[data-step="mark"] .floating-tools {
  top: 64px; right: 16px; left: auto; bottom: auto;
  transform: none; flex-direction: column; z-index: 5;
}

/* ---- Ads adapt to each step's layout ---- */
/* Rails live in the side gutters and size themselves to the free space. */
.ad-rail { width: clamp(120px, calc((100vw - 1540px) / 2 - 20px), 220px); }
@media (max-width: 1800px) { .ad-rail { display: none; } }
/* Steps with a right-hand panel use an inline sponsored box instead of rails. */
body[data-step="reference"] .ad-rail, body[data-step="mark"] .ad-rail { display: none; }
.ad-inline {
  margin-top: 14px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(31, 31, 34, .92); border: 1px solid var(--line); border-radius: 12px;
}
.ad-inline .ad-placeholder { display: grid; gap: 6px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; padding: 14px; color: var(--muted); font-size: 12px; }
.ad-inline .ad-placeholder .ad-tag { justify-self: center; }

/* ---- Step 3: uniform output-card art ---- */
.output-card { display: flex; flex-direction: column; align-items: stretch; }
.output-card .output-card-art {
  order: -1; width: 100%; height: 176px;
  object-fit: cover; object-position: center 22%;
  border-radius: 12px; margin: 0 0 14px;
}

/* ---- Step 4: strictly one page (no scroll) ---- */
body[data-step="mark"] { height: 100dvh; overflow: hidden; }
body[data-step="mark"] .studio-shell { padding: 150px 24px 0; min-height: 0; height: 100dvh; }
body[data-step="mark"] #activeStepHint { margin: 10px 0 18px; }   /* breathing room under the instruction */
body[data-step="mark"] .mark-grid {
  height: calc(100dvh - 150px - 104px);   /* shell top padding + fixed bottom bar */
  min-height: 0;
}

/* ---- Step 5: autosave note ---- */
.autosave-note { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--muted); font-size: 12.5px; }
.autosave-note .material-symbols-outlined { color: var(--primary); font-size: 18px; }
.job-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---- Gemini concept chat (Step 1) ---- */
.chat-log { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 420px; padding: 4px 2px; }
.chat-msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; color: var(--text); background: var(--surface-3); border: 1px solid var(--line-soft); }
.chat-msg p { margin: 0; white-space: pre-wrap; }
.chat-msg.ai { align-self: flex-start; border-color: rgba(126, 244, 255, .35); }
.chat-msg.user { align-self: flex-end; background: rgba(210, 240, 0, .12); border-color: rgba(210, 240, 0, .35); }
.chat-msg.system { align-self: center; color: var(--muted); font-size: 12px; background: transparent; border-style: dashed; }
.chat-msg img { display: block; width: 100%; max-width: 320px; border-radius: 10px; margin-bottom: 8px; }
.chat-thumb-row { display: flex; gap: 6px; margin-top: 8px; }
.chat-thumb-row img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); margin: 0; }
.chat-attach-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.chat-attach-chip { position: relative; display: inline-block; }
.chat-attach-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.chat-attach-chip button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--danger); color: #2b0907; font-weight: 800; line-height: 1; cursor: pointer; }
.chat-input-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.chat-input-row input[type="text"] { flex: 1; min-width: 0; min-height: 42px; }
.chat-input-row > button:first-child { min-height: 42px; min-width: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-3); color: var(--muted); cursor: pointer; }
#chatGenerate { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#chatGenerate .material-symbols-outlined { font-size: 18px; }

/* ---- Mark step: Shirt-flow + Committed-regions scroll inside their cards ---- */
.task-box .guided-tasks {
  max-height: 218px;            /* ~5 rows */
  overflow-y: auto;
  padding-right: 4px;
}
.task-box .layer-list, #layerList {
  max-height: 150px;
  overflow-y: auto;
  padding-right: 4px;
}
/* slim themed scrollbars for the in-card lists */
.task-box .guided-tasks::-webkit-scrollbar, #layerList::-webkit-scrollbar { width: 6px; }
.task-box .guided-tasks::-webkit-scrollbar-thumb, #layerList::-webkit-scrollbar-thumb {
  background: var(--surface-4); border-radius: 999px;
}
.task-box .guided-tasks::-webkit-scrollbar-thumb:hover, #layerList::-webkit-scrollbar-thumb:hover {
  background: var(--line);
}