:root {
  --creation-ink: #16181d;
  --creation-muted: #4e5561;
  --creation-line: #e6e7ea;
  --creation-soft: #f7f8fa;
  --creation-brand: #ff6b75;
  --creation-brand-dark: #d84d67;
  --creation-green: #23956d;
  --creation-shadow: 0 24px 70px rgba(22, 24, 29, .10);
}

* { box-sizing: border-box; }
body.creation-page {
  margin: 0;
  min-width: 320px;
  color: var(--creation-ink);
  background: linear-gradient(180deg, #f7f9fc 0%, #fff 56%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.creation-topbar {
  height: 72px;
  border-bottom: 1px solid rgba(224, 229, 238, .8);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(18px);
}
.creation-topbar-inner {
  width: min(1180px, calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.creation-logo { color: var(--creation-ink); text-decoration: none; font-size: 19px; font-weight: 800; letter-spacing: -.04em; display: inline-flex; align-items: center; gap: 9px; }
.creation-logo::before { content: "✦"; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #ff8a5b, #ff5c8a); box-shadow: 0 6px 16px rgba(255, 92, 138, .28); font-size: 13px; letter-spacing: 0; }
.creation-logo span { color: var(--creation-brand); }
.creation-meta { display: flex; align-items: center; gap: 16px; color: var(--creation-muted); font-size: 13px; }
.creation-meta a { color: inherit; text-decoration: none; }
.creation-meta a:hover { color: var(--creation-ink); }
.creation-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 70px; }
.creation-stepper { display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; max-width: 650px; }
.creation-step { display: flex; align-items: center; gap: 9px; color: #a2acbb; font-size: 13px; font-weight: 700; white-space: nowrap; }
.creation-step::after { content: ""; display: block; width: clamp(24px, 7vw, 82px); height: 1px; margin-left: 5px; background: var(--creation-line); }
.creation-step:last-child::after { display: none; }
.creation-step button { border: 0; background: transparent; color: inherit; padding: 0; display: inline-flex; align-items: center; gap: 9px; }
.creation-step.is-active, .creation-step.is-done { color: var(--creation-ink); }
.creation-step.is-done .creation-step-number { color: #fff; background: var(--creation-green); border-color: var(--creation-green); }
.creation-step.is-active .creation-step-number { color: #fff; background: var(--creation-ink); border-color: var(--creation-ink); box-shadow: 0 0 0 4px rgba(25, 34, 53, .08); }
.creation-step-number { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #e0e5ed; border-radius: 9px; background: #f5f7fa; font-size: 12px; }
.creation-layout { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr); gap: 22px; align-items: stretch; }
.creation-card, .creation-preview { border: 1px solid rgba(226, 227, 231, .9); border-radius: 28px; background: rgba(255, 255, 255, .96); box-shadow: var(--creation-shadow); }
.creation-card { min-height: 620px; padding: clamp(28px, 5vw, 58px); display: flex; flex-direction: column; }
.creation-hero-mark { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid rgba(255, 92, 138, .2); border-radius: 20px; color: var(--creation-ink); background: linear-gradient(145deg, #fff, #fff1f2); box-shadow: 0 12px 28px rgba(255, 92, 138, .14); font-size: 25px; }
.creation-card-head { max-width: 620px; margin: 0 auto 28px; text-align: center; }
.creation-kicker { color: var(--creation-brand); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.creation-card h1, .creation-card h2 { margin: 10px 0 10px; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; letter-spacing: -.055em; }
.creation-card h2 { font-size: clamp(26px, 3.4vw, 36px); }
.creation-lead { margin: 0 auto; color: var(--creation-muted); font-size: 16px; line-height: 1.65; }
.creation-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: auto 0 30px; }
.creation-benefit { min-height: 96px; padding: 15px 12px; border: 1px solid var(--creation-line); border-radius: 16px; background: var(--creation-soft); text-align: center; }
.creation-benefit-icon { width: 30px; height: 30px; display: grid; place-items: center; margin: 0 auto 9px; border-radius: 10px; background: var(--creation-ink); color: #fff; font-size: 14px; }
.creation-benefit strong { display: block; font-size: 12px; line-height: 1.35; }
.creation-card-actions { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: center; gap: 10px; margin-top: 24px; padding: 16px 0 2px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96) 28%); }
.creation-btn { min-height: 47px; padding: 0 21px; border: 1px solid transparent; border-radius: 999px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.creation-btn:hover:not(:disabled) { transform: translateY(-1px); }
.creation-btn:focus-visible, .creation-style:focus-visible, .creation-chip:focus-visible, .creation-dropzone:focus-visible, .creation-step button:focus-visible { outline: 3px solid rgba(255, 92, 138, .28); outline-offset: 3px; }
.creation-btn-primary { color: #fff; background: var(--creation-ink); box-shadow: 0 12px 25px rgba(25, 34, 53, .18); }
.creation-btn-primary:hover:not(:disabled) { background: var(--creation-brand-dark); }
.creation-btn-secondary { color: var(--creation-ink); border-color: var(--creation-line); background: #fff; }
.creation-btn:disabled { cursor: not-allowed; opacity: .5; }
.creation-preview { min-height: 620px; padding: 18px; display: flex; flex-direction: column; background: linear-gradient(150deg, #f0f0ee, #fafafa); }
.creation-preview-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 15px; color: #738096; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.creation-preview-state { margin: -4px 8px 12px; color: var(--creation-muted); font-size: 12px; font-weight: 700; }
.creation-preview-head > span:first-child::first-letter { color: var(--creation-brand); }
.creation-preview-badge { padding: 7px 10px; border-radius: 999px; background: #fff0f4; color: var(--creation-brand-dark); font-size: 11px; letter-spacing: 0; text-transform: none; }
.creation-gender-row { display: flex; align-items: center; gap: 8px; padding: 0 8px 12px; }
.creation-gender-label { color: #738096; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.creation-gender-btn { padding: 7px 14px; border: 1px solid var(--creation-line); border-radius: 999px; background: #fff; color: #667287; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.creation-gender-btn:hover { border-color: rgba(255, 92, 138, .5); color: var(--creation-brand-dark); }
.creation-gender-btn.is-active { border-color: var(--creation-brand); color: var(--creation-brand-dark); background: #fff4f3; }
.creation-preview-frame { position: relative; flex: 0 1 auto; width: 100%; height: auto; min-height: 0; max-height: 580px; aspect-ratio: var(--preview-ratio, 3 / 4); overflow: hidden; border: 7px solid rgba(255, 255, 255, .62); border-radius: 23px; background: radial-gradient(circle at 50% 25%, #fff 0, #dde5ef 57%, #c8d2df 100%); box-shadow: inset 0 0 0 1px rgba(107, 123, 145, .12); transition: aspect-ratio .25s ease, box-shadow .25s ease; }
.creation-preview-frame::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% 10%, var(--preview-accent, #ff5c8a), transparent 46%), linear-gradient(145deg, transparent 30%, var(--preview-accent, #ff5c8a)); opacity: .18; mix-blend-mode: color; transition: background .25s ease, opacity .25s ease; }
.creation-preview-frame::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(17, 29, 47, .2)); }
/* 示例图保持清晰：46% 透明度会让人误以为页面坏了/按钮禁用了 */
.creation-preview-image { position: relative; z-index: 0; width: 100%; height: 100%; min-height: 0; display: block; object-fit: cover; object-position: center 28%; opacity: .93; filter: saturate(.94); transition: opacity .3s ease, transform .3s ease, filter .3s ease; }
.creation-preview-image.is-ready { opacity: 1; }
/* 底带式提示：图片明亮时黑字压在人脸上不可读，统一改成底部渐变带白字 */
.creation-preview-placeholder { position: absolute; inset: auto 0 0; z-index: 3; display: block; padding: 46px 16px 16px; text-align: left; color: rgba(255, 255, 255, .8); background: linear-gradient(180deg, transparent, rgba(15, 20, 28, .84)); }
.creation-preview-placeholder > div { max-width: none; }
/* 示例态直接展示人脸，不要用一块实心图标压在人脸上 */
.creation-preview-placeholder-icon { display: none; }
.creation-preview-placeholder strong { display: block; color: #fff; font-size: 14.5px; }
.creation-preview-placeholder span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .84); }
.creation-preview-placeholder.is-photo-ready { inset: auto 0 0; display: block; padding: 50px 16px 17px; color: rgba(255,255,255,.78); background: linear-gradient(180deg, transparent, rgba(15,20,28,.82)); text-align: left; }
.creation-preview-placeholder.is-photo-ready > div { max-width: none; }
.creation-preview-placeholder.is-photo-ready .creation-preview-placeholder-icon { display: none; }
.creation-preview-placeholder.is-photo-ready strong { color: #fff; font-size: 14px; }
.creation-preview-placeholder.is-photo-ready span { color: rgba(255,255,255,.82); font-size: 12px; }
.creation-preview-label { position: absolute; z-index: 4; left: 16px; top: 16px; padding: 7px 10px; border-radius: 9px; color: #fff; background: rgba(25, 34, 53, .76); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.creation-preview-note { margin: 11px 8px 0; color: #7d8999; font-size: 11px; line-height: 1.45; text-align: center; }
.creation-preview-dots { display: flex; justify-content: center; gap: 5px; padding-top: 13px; }
.creation-preview-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c6cfdb; }
.creation-preview-dots i.is-active { width: 19px; border-radius: 99px; background: var(--creation-brand); }
/* 结果页的传播提示：万圣节头像分享出去是唯一的零成本获客路径 */
.creation-share-note { margin: 14px auto 0; max-width: 520px; text-align: center; font-size: 12.5px; line-height: 1.6; color: #7a8496; }
.creation-step-panel[hidden] { display: none; }
.creation-step-panel { flex: 1; display: flex; flex-direction: column; }
/* 第 1 步内容少，居中避免中段一大片死白 */
.creation-step-panel[data-panel="1"] { justify-content: center; }
.creation-step-panel[data-panel="1"] .creation-card-actions { margin-top: 30px; }
.creation-step-panel .creation-card-actions { margin-top: auto; }
.creation-dropzone { position: relative; min-height: 260px; display: grid; place-items: center; margin: 5px 0 14px; padding: 25px; border: 1.5px dashed #cbd4e1; border-radius: 22px; background: linear-gradient(180deg, #fbfcfe, #f5f8fb); text-align: center; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.creation-dropzone:hover, .creation-dropzone.is-dragging { border-color: var(--creation-brand); background: #fff7f4; transform: translateY(-1px); }
.creation-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.creation-drop-icon { width: 57px; height: 57px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 17px; background: #fff; box-shadow: 0 10px 25px rgba(80, 99, 128, .12); font-size: 24px; }
.creation-drop-icon svg { width: 25px; height: 25px; }
.creation-upload-stats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.creation-upload-stat { padding: 7px 10px; border: 1px solid var(--creation-line); border-radius: 999px; color: var(--creation-muted); background: var(--creation-soft); font-size: 11px; }
.creation-dropzone strong { display: block; color: var(--creation-ink); font-size: 17px; }
.creation-dropzone span { display: block; margin-top: 6px; color: var(--creation-muted); font-size: 13px; }
.creation-dropzone .creation-drop-icon { display: grid; margin: 0 auto 13px; color: var(--creation-ink); font-size: 24px; }
.creation-dropzone .creation-drop-icon svg { display: block; }
.creation-upload-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--creation-muted); font-size: 12px; line-height: 1.55; }
.creation-upload-note b { color: var(--creation-ink); }
.creation-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 19px; padding: 13px 14px; border: 1px solid var(--creation-line); border-radius: 14px; background: #fbfcfe; color: #59667a; font-size: 12px; line-height: 1.5; }
.creation-consent input { width: 17px; height: 17px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--creation-brand); }
.creation-file-card { display: flex; align-items: center; gap: 13px; padding: 12px; margin: 5px 0 14px; border: 1px solid var(--creation-line); border-radius: 16px; background: #fff; }
.creation-file-thumb { width: 58px; height: 72px; object-fit: cover; object-position: center 28%; border-radius: 11px; background: #eef2f7; }
.creation-file-info { min-width: 0; flex: 1; }
.creation-file-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.creation-file-info span { display: block; margin-top: 4px; color: var(--creation-muted); font-size: 12px; }
.creation-remove { border: 0; background: transparent; color: #8792a2; font-size: 12px; }
.creation-field-label { display: block; margin: 0 0 9px; color: var(--creation-ink); font-size: 13px; font-weight: 800; }
.creation-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 19px; }
.creation-chip { padding: 9px 13px; border: 1px solid var(--creation-line); border-radius: 999px; color: #667287; background: #fff; font-size: 12px; transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; }
.creation-chip:hover { border-color: rgba(255, 92, 138, .5); color: var(--creation-brand-dark); transform: translateY(-1px); }
.creation-chip.is-active { border-color: var(--creation-brand); color: var(--creation-brand-dark); background: #fff4f3; }
.creation-ratio-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 19px; }
.creation-ratio { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid var(--creation-line); border-radius: 14px; color: #667287; background: #fff; text-align: left; transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.creation-ratio:hover { border-color: rgba(255, 92, 138, .5); color: var(--creation-brand-dark); transform: translateY(-1px); }
.creation-ratio.is-active { border-color: var(--creation-brand); color: var(--creation-brand-dark); background: #fff4f3; box-shadow: 0 5px 13px rgba(255, 92, 138, .1); }
.creation-ratio-icon { width: 22px; height: 27px; flex: 0 0 auto; display: block; border: 2px solid currentColor; border-radius: 5px; opacity: .75; aspect-ratio: var(--ratio-icon, 3 / 4); }
.creation-ratio:nth-child(2) .creation-ratio-icon { width: 25px; height: 25px; }
.creation-ratio:nth-child(3) .creation-ratio-icon { width: 18px; height: 28px; }
.creation-ratio span:last-child { min-width: 0; }
.creation-ratio strong, .creation-ratio small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation-ratio strong { color: inherit; font-size: 11px; }
.creation-ratio small { margin-top: 2px; color: var(--creation-muted); font-size: 10px; }
.creation-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.creation-style { position: relative; overflow: hidden; padding: 0; border: 1px solid var(--creation-line); border-radius: 14px; background: #f2f4f8; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.creation-style:hover { transform: translateY(-2px); border-color: rgba(255, 92, 138, .45); box-shadow: 0 10px 22px rgba(35, 49, 78, .1); }
.creation-style::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 2px solid transparent; border-radius: 14px; }
.creation-style.is-active::after { border-color: var(--creation-brand); box-shadow: inset 0 0 0 1px rgba(255,92,138,.2); }
.creation-style.is-active::before { content: "✓"; position: absolute; z-index: 1; top: 8px; right: 8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--creation-brand-dark); font-size: 12px; font-weight: 900; box-shadow: 0 4px 12px rgba(22,24,29,.2); }
.creation-style img { width: 100%; aspect-ratio: 1 / 1.1; display: block; object-fit: cover; }
.creation-style span { display: block; padding: 8px 9px; color: #4f5e73; background: #fff; font-size: 11px; font-weight: 800; }
.creation-prompt { width: 100%; min-height: 88px; resize: vertical; padding: 12px; border: 1px solid var(--creation-line); border-radius: 14px; color: var(--creation-ink); background: #fff; font-size: 13px; line-height: 1.5; }
.creation-prompt:focus { outline: 3px solid rgba(255, 92, 138, .16); border-color: var(--creation-brand); }
.creation-generate-note { margin: 14px 0 0; color: var(--creation-muted); font-size: 12px; line-height: 1.55; text-align: center; }
.creation-status { min-height: 22px; margin: 10px 0 0; color: #bb554d; font-size: 13px; text-align: center; }
.creation-status.is-success { color: var(--creation-green); }
.creation-loading { display: grid; place-items: center; min-height: 370px; text-align: center; }
.creation-spinner { width: 45px; height: 45px; margin-bottom: 16px; border: 4px solid #e5e9f3; border-top-color: var(--creation-brand); border-radius: 50%; animation: creation-spin .8s linear infinite; }
@keyframes creation-spin { to { transform: rotate(360deg); } }
.creation-loading strong { display: block; font-size: 19px; }
.creation-loading span { display: block; max-width: 360px; margin-top: 7px; color: var(--creation-muted); font-size: 13px; line-height: 1.55; }
.creation-result { display: flex; flex-direction: column; align-items: center; text-align: center; }
.creation-result-image { width: min(100%, 290px); max-height: 520px; height: auto; object-fit: contain; border-radius: 18px; background: #f2f4f8; box-shadow: 0 16px 36px rgba(35, 49, 78, .18); }
.creation-result h2 { margin-bottom: 7px; }
.creation-result p { margin: 0 0 18px; color: var(--creation-muted); font-size: 13px; }
.creation-result .creation-card-actions { margin-top: 18px; }
.creation-result .creation-watermark-note { margin: 14px 0 0; max-width: 330px; color: var(--creation-muted); font-size: 12px; line-height: 1.6; }
.creation-result .creation-watermark-note a { color: var(--creation-brand); font-weight: 700; text-decoration: none; white-space: nowrap; }
.creation-result .creation-watermark-note a:hover { text-decoration: underline; }
.creation-error { max-width: 430px; margin: auto; padding: 24px; border: 1px solid #f2d2ce; border-radius: 18px; background: #fff8f7; text-align: center; }
.creation-error strong { display: block; color: #a94b45; }
.creation-error span { display: block; margin-top: 7px; color: #795c58; font-size: 13px; line-height: 1.55; }
.creation-footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 18px 0 28px; color: #8b96a6; font-size: 12px; text-align: center; }
.creation-footer a { color: inherit; }
.creation-btn-primary:focus-visible, .creation-btn-secondary:focus-visible { box-shadow: 0 0 0 4px rgba(255,92,138,.22); }

@media (max-width: 820px) {
  .creation-shell { padding-top: 24px; }
  .creation-layout { grid-template-columns: 1fr; }
  .creation-preview { order: -1; min-height: 300px; }
  .creation-preview-frame { max-height: 560px; }
  .creation-card { min-height: 0; }
}
@media (max-width: 560px) {
  .creation-topbar { height: 62px; }
  .creation-topbar-inner, .creation-shell, .creation-footer { width: min(100% - 24px, 1180px); }
  .creation-meta span { display: none; }
  .creation-stepper { justify-content: flex-start; overflow-x: auto; padding: 3px 2px 8px; }
  .creation-step { font-size: 11px; }
  .creation-step::after { width: 22px; }
  .creation-card { padding: 24px 17px; border-radius: 22px; }
  .creation-preview { min-height: 300px; padding: 12px; border-radius: 22px; }
  .creation-preview-frame { max-height: 480px; }
  .creation-benefits { grid-template-columns: 1fr; gap: 8px; }
  .creation-benefit { min-height: 0; display: flex; align-items: center; gap: 10px; padding: 10px; text-align: left; }
  .creation-benefit-icon { margin: 0; }
  .creation-style-grid { grid-template-columns: repeat(2, 1fr); }
  .creation-ratio-row { grid-template-columns: 1fr; }
  .creation-card-actions { flex-direction: column-reverse; }
  .creation-btn { width: 100%; }
}

/* Creation studio treatment: futuristic control room without sacrificing clarity. */
body.creation-page { background-image:linear-gradient(rgba(255,92,138,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,92,138,.028) 1px,transparent 1px),radial-gradient(900px 460px at 50% -100px,rgba(255,92,138,.13),transparent 70%); background-size:40px 40px,40px 40px,auto; }
.creation-topbar { border-bottom-color:rgba(255,92,138,.18); box-shadow:0 1px 0 rgba(255,255,255,.8),0 14px 36px rgba(29,29,31,.05); }
.creation-card,.creation-preview { border-color:rgba(255,92,138,.16); box-shadow:0 24px 70px rgba(22,24,29,.1),0 0 0 1px rgba(255,255,255,.65); }
.creation-step.is-active .creation-step-number { box-shadow:0 0 0 4px rgba(255,92,138,.1),0 0 16px rgba(255,92,138,.25); }
.creation-dropzone { background-image:linear-gradient(rgba(255,92,138,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,92,138,.035) 1px,transparent 1px),linear-gradient(180deg,#fbfcfe,#f5f8fb); background-size:28px 28px,28px 28px,auto; }
.creation-btn-primary { background:linear-gradient(135deg,#1c2434,#ff5c8a); box-shadow:0 14px 28px rgba(255,92,138,.2),inset 0 1px rgba(255,255,255,.22); }
.creation-preview-frame[data-preview-style="professional"],.creation-preview-frame[data-preview-style="linkedin"],.creation-preview-frame[data-preview-style="business"],.creation-preview-frame[data-preview-style="corporate"],.creation-preview-frame[data-preview-style="executive"] { --preview-accent:#5d7cff; }
.creation-preview-frame[data-preview-style="profile"],.creation-preview-frame[data-preview-style="instagram"],.creation-preview-frame[data-preview-style="dating"] { --preview-accent:#ff6b91; }
.creation-preview-frame[data-preview-style="oldmoney"],.creation-preview-frame[data-preview-style="luxury"],.creation-preview-frame[data-preview-style="vintage"] { --preview-accent:#ca9b5e; }
.creation-preview-frame[data-preview-style="creative"] { --preview-accent:#a36cff; }
.creation-preview-frame[data-preview-style="academic"] { --preview-accent:#3f9ca8; }
.creation-preview-frame[data-preview-style="fitness"] { --preview-accent:#41b77b; }