/* create page */
.create-shell { max-width: 680px; }
.create-steps { display: flex; gap: 16px; margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.create-steps .step.active { color: var(--ink); }
.create-steps .step.active::before { content: "● "; color: var(--accent); }
.create-form { display: flex; flex-direction: column; gap: 16px; }
.create-step { display: flex; flex-direction: column; gap: 16px; border: 0; }
.seg { display: inline-flex; align-self: flex-start; }
.photo-btn { align-self: flex-start; }
.photo-preview { width: 120px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; margin-top: 10px; }
/* Visual style cards — full-bleed portrait tiles, serif label over a bottom gradient, accent ring + check when chosen. */
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 6px; }
.style-card { position: relative; display: block; padding: 0; border-radius: 16px; overflow: hidden; background: var(--surface-2); border: 2px solid transparent; box-shadow: 0 1px 0 var(--line); transition: transform .2s var(--ease), border-color .15s, box-shadow .2s; }
.style-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.style-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface-2); transition: transform .35s var(--ease), filter .2s; }
.style-card:hover img { transform: scale(1.04); }
.style-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); pointer-events: none; }
.style-card span { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font-family: var(--serif); font-size: 20px; line-height: 1.1; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); text-transform: capitalize; }
.style-card .style-check { position: absolute; top: 10px; right: 10px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.style-card .style-check svg { width: 14px; height: 14px; }
.style-card.active { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 77, 109, .18), 0 10px 28px rgba(0, 0, 0, .45); }
.style-card.active .style-check { display: inline-flex; }
.style-card.active img { filter: saturate(1.08); }
@media (max-width: 480px) { .style-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .style-card span { font-size: 18px; } }
.result-card { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.result-portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); background: var(--surface-2); }
.result-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.result-name-row { display: flex; align-items: center; gap: 10px; }
.result-intro { color: var(--ink-2); }
.result-first { padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); white-space: pre-wrap; }
.refine-box { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.refine-appearance { display: flex; gap: 8px; }
.image-gallery { display: flex; gap: 8px; flex-wrap: wrap; }
.image-gallery button { width: 72px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; }
.image-gallery button.active { border-color: var(--accent); }
.image-gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .result-card { grid-template-columns: 1fr; } .result-portrait img { max-width: 240px; } }