:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #221b2b;
  background: #f5f2f7;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #f8f5fa 0%, #eee8f2 100%); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.shell { width: min(980px, 100%); margin: 0 auto; padding: 24px 16px 40px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .16em; color: #715586; margin-bottom: 7px; }
h1 { margin: 0; font-size: clamp(27px, 5vw, 42px); line-height: 1.02; letter-spacing: -.03em; }
.prototype-badge { white-space: nowrap; padding: 8px 11px; border: 1px solid #d8cde0; border-radius: 999px; background: #fff; color: #6f5d7c; font-size: 12px; font-weight: 700; }

.progress-panel, .workspace, .assistant-card { background: rgba(255,255,255,.94); border: 1px solid #ddd3e4; box-shadow: 0 16px 40px rgba(49, 31, 61, .07); }
.progress-panel { border-radius: 20px; padding: 16px; }
.progress-copy { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.progress-copy span { color: #6f6378; text-align: right; }
.progress-track { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 13px; }
.progress-segment { height: 7px; border-radius: 999px; background: #e7e0eb; transition: .2s ease; }
.progress-segment.done { background: #7c5b91; }
.progress-segment.current { background: #3f2d4d; transform: scaleY(1.35); }

.assistant-card { display: flex; align-items: center; gap: 13px; margin: 14px 0; border-radius: 18px; padding: 14px 16px; }
.assistant-card p { margin: 3px 0 0; color: #6a5d73; font-size: 14px; line-height: 1.45; }
.assistant-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: #33223e; color: white; font-weight: 900; }

.workspace { min-height: 430px; border-radius: 24px; padding: clamp(18px, 4vw, 30px); }
.step-heading h2 { margin: 0 0 6px; font-size: 24px; }
.step-heading p { margin: 0 0 22px; color: #6d6175; line-height: 1.5; }

.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-option { position: relative; text-align: left; border: 1px solid #dfd5e5; border-radius: 16px; padding: 16px; background: #fff; color: #2c2432; transition: .18s ease; }
.card-option:hover { transform: translateY(-1px); border-color: #a88db9; }
.card-option.selected { border-color: #5d3f70; box-shadow: inset 0 0 0 2px #5d3f70; background: #faf7fc; }
.card-option strong { display: block; margin-bottom: 4px; }
.card-option small { color: #74687d; line-height: 1.4; }

.upload-zone { border: 1.5px dashed #b8a7c4; border-radius: 20px; min-height: 240px; display: grid; place-items: center; padding: 18px; text-align: center; background: #fbf9fc; overflow: hidden; }
.upload-zone > div { width: min(100%, 520px); }
.upload-zone img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; }
.upload-zone .placeholder { color: #766b7e; }
.source-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.source-actions .button { width: 100%; }

.field { display: grid; gap: 7px; }
.field > span { font-size: 13px; font-weight: 750; color: #5d5165; }
.field input, .field select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #d9cfdf; border-radius: 12px; background: #fff; outline: none; }
.field input:focus, .field select:focus { border-color: #76558a; box-shadow: 0 0 0 3px rgba(118,85,138,.12); }
.form-section { margin-top: 16px; }
.section-label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 800; color: #5a4e63; text-transform: uppercase; letter-spacing: .08em; }

.fabric-card { display: grid; grid-template-columns: 44px 1fr; gap: 11px; align-items: center; }
.fabric-swatch { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); }
.fabric-metrics { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip { display: inline-flex; padding: 4px 7px; background: #f2edf5; border-radius: 999px; font-size: 11px; color: #65566e; }

.check-list { display: grid; gap: 10px; }
.check-row { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid #dfd7e4; border-radius: 13px; background: #fff; }
.check-row input { width: 20px; height: 20px; }

.preview-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); gap: 16px; }
.viewer { position: relative; min-height: 370px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #f8f4fb, #e5dce9); border: 1px solid #ddd2e3; }
.viewer canvas { width: 100%; height: 100%; display: block; }
.viewer-label { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.84); backdrop-filter: blur(6px); font-size: 11px; font-weight: 800; }
.summary { border: 1px solid #e0d7e5; border-radius: 18px; padding: 16px; background: #fbf9fc; }
.summary h3 { margin-top: 0; }
.summary dl { margin: 0; display: grid; gap: 10px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eee8f1; padding-bottom: 8px; }
.summary dt { color: #73677a; }
.summary dd { margin: 0; font-weight: 750; text-align: right; }

.success { text-align: center; padding: 35px 10px; }
.success-icon { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; margin: 0 auto 16px; background: #e7f4ea; color: #28663a; font-size: 34px; font-weight: 900; }
.success h2 { margin-bottom: 8px; }
.success p { max-width: 560px; margin: 0 auto 20px; color: #6c6074; line-height: 1.5; }

.actions { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 15px 2px 0; }
.button { border-radius: 13px; padding: 12px 18px; border: 0; font-weight: 800; }
.button.primary { background: #3e2b4a; color: #fff; }
.button.primary:disabled { background: #aaa1af; cursor: not-allowed; }
.button.secondary { background: #fff; color: #473950; border: 1px solid #d9cfe0; }
.button.secondary:disabled { opacity: .45; cursor: default; }
.status { text-align: center; color: #8c4451; font-size: 13px; }

@media (max-width: 720px) {
  .shell { padding-top: 16px; }
  .topbar { align-items: center; }
  .prototype-badge { display: none; }
  .grid.two, .grid.three, .preview-layout { grid-template-columns: 1fr; }
  .source-actions { grid-template-columns: 1fr; }
  .workspace { min-height: 460px; }
  .viewer { min-height: 330px; }
  .progress-copy { display: grid; gap: 3px; }
  .progress-copy span { text-align: left; }
  .actions { position: sticky; bottom: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, #f1ecf4 24%); }
  .button { padding-inline: 14px; }
}