/* ════════════════════════════════════════════════════════════════════
   Character Creation v2 — "Atelier" redesign (2026-05-17)
   All styles scoped under .ccv2-modal so they never touch
   the legacy wizard or any other surface. Mirrored on both wizard
   surfaces — web/index.html (top-level wizard) and
   web/landing/v2.html (verbatim copy).

   Palette / typography source-of-truth: Direction 2 "Atelier"
   from the Anthropic design canvas. Logic differs (our backend
   options, our custom_atmosphere / custom_profession additions).
   ════════════════════════════════════════════════════════════════════ */

.ccv2-modal {
    /* Tokens */
    --ccv2-bg:          #0b0a12;
    --ccv2-bg2:         #100e1a;
    --ccv2-card:        rgba(255, 255, 255, 0.025);
    --ccv2-card-hi:     rgba(255, 255, 255, 0.045);
    --ccv2-hairline:    rgba(255, 255, 255, 0.08);
    --ccv2-hairline-hi: rgba(255, 255, 255, 0.14);
    --ccv2-text:        #f4f2f8;
    --ccv2-text-soft:   #dad7e2;
    --ccv2-muted:       #9690a8;
    --ccv2-faint:       #5d586d;
    --ccv2-violet:      #8b5cf6;
    --ccv2-violet-hi:   #a78bfa;
    --ccv2-violet-soft: rgba(139, 92, 246, 0.14);
    --ccv2-violet-line: rgba(139, 92, 246, 0.32);
    --ccv2-amber:       #f5b740;
    --ccv2-amber-soft:  rgba(245, 183, 64, 0.14);

    --ccv2-display: 'Fraunces', 'Times New Roman', serif;
    --ccv2-ui:      'Inter', -apple-system, system-ui, sans-serif;
    --ccv2-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* Mobile (default): full-screen panel, solid bg matches shell so
       content shorter than viewport still looks opaque. */
    position: fixed; inset: 0; z-index: 100;
    background: var(--ccv2-bg);
    display: flex; align-items: stretch; justify-content: center;
    overflow-y: auto;
    font-family: var(--ccv2-ui);
    color: var(--ccv2-text);
    animation: ccv2-fadein 220ms ease-out;
}

/* Desktop: dim the page underneath and centre the shell as a card.
   Full-screen on a 1440px monitor looked overwhelming; 720px-wide
   card matches the workspace max-width we already use inside. */
@media (min-width: 768px) {
    .ccv2-modal {
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        align-items: flex-start;
        padding: 32px 16px;
    }
}

/* Make sure [hidden] hides everywhere inside the wizard. Several of
   our toggle-display elements use `flex` / `grid` which override
   the browser default `[hidden] { display: none; }` rule. Without
   this !important, the inline error banner renders by default with
   its placeholder copy ("Something went wrong"). */
.ccv2-modal [hidden] { display: none !important; }

@keyframes ccv2-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ccv2-modal[hidden] { display: none !important; }

/* Inner workspace — full screen on mobile, centred card on desktop */
.ccv2-shell {
    width: 100%;
    background: var(--ccv2-bg);
    min-height: 100vh;
    display: flex; flex-direction: column;
}
@media (min-width: 768px) {
    .ccv2-shell {
        max-width: 760px;
        min-height: auto;
        border-radius: 18px;
        border: 1px solid var(--ccv2-hairline);
        box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45);
        /* `overflow: hidden` would clip the sticky topbar/banner against
           the rounded corners; we instead round only the topbar +
           workspace tops/bottoms so the rounding looks right without
           breaking sticky. */
    }
    .ccv2-shell > .ccv2-topbar {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }
    .ccv2-shell > .ccv2-workspace {
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }
}

/* ─── Sticky top bar ───────────────────────────────────────────────── */
.ccv2-topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ccv2-hairline);
    background: rgba(11, 10, 18, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 768px) {
    .ccv2-topbar { padding: 16px 32px; }
}

.ccv2-topbar-left {
    display: flex; align-items: center; gap: 10px;
}

.ccv2-back-btn {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    color: var(--ccv2-text-soft);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.ccv2-back-btn:hover {
    background: var(--ccv2-card-hi);
    border-color: var(--ccv2-hairline-hi);
}

.ccv2-topbar-title {
    font-family: var(--ccv2-display);
    font-size: 16px; font-weight: 500;
    color: var(--ccv2-text);
    letter-spacing: -0.2px;
}

.ccv2-close-btn {
    padding: 7px 12px; border-radius: 8px;
    background: transparent;
    border: 1px solid var(--ccv2-hairline);
    color: var(--ccv2-muted);
    font-family: var(--ccv2-ui); font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: color 120ms, border-color 120ms;
}
.ccv2-close-btn:hover {
    color: var(--ccv2-text);
    border-color: var(--ccv2-hairline-hi);
}

/* ─── Workspace container ─────────────────────────────────────────── */
.ccv2-workspace {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    width: 100%; box-sizing: border-box;
    flex: 1;
}
@media (min-width: 768px) {
    .ccv2-workspace { padding: 40px 32px 60px; }
}

/* ─── Hero (only on Basics step) ──────────────────────────────────── */
.ccv2-hero { text-align: center; margin-bottom: 24px; }

.ccv2-hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ccv2-hairline);
    font-family: var(--ccv2-mono);
    font-size: 10.5px; color: var(--ccv2-muted);
    letter-spacing: 0.4px; text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 14px;
}
.ccv2-hero-badge::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--ccv2-violet-hi);
}

.ccv2-hero-title {
    margin: 0;
    font-family: var(--ccv2-display);
    font-size: 30px; font-weight: 400;
    letter-spacing: -0.8px; line-height: 1.05;
    color: var(--ccv2-text);
}
@media (min-width: 768px) {
    .ccv2-hero-title { font-size: 44px; }
}
.ccv2-hero-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--ccv2-violet-hi), var(--ccv2-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.ccv2-hero-sub {
    margin: 12px auto 0;
    max-width: 480px;
    font-size: 13.5px; color: var(--ccv2-muted);
    line-height: 1.55;
}
@media (min-width: 768px) {
    .ccv2-hero-sub { font-size: 15px; }
}

/* ─── AI Describe block ────────────────────────────────────────────── */
.ccv2-ai-hero {
    position: relative; overflow: hidden;
    padding: 20px 18px;
    border-radius: 18px;
    background: linear-gradient(140deg, rgba(139, 92, 246, 0.18), rgba(245, 183, 64, 0.10));
    border: 1px solid var(--ccv2-violet-line);
    margin-bottom: 16px;
}
@media (min-width: 768px) {
    .ccv2-ai-hero { padding: 24px 28px; }
}
.ccv2-ai-hero::before {
    content: '';
    position: absolute; top: -80px; right: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.30), transparent 70%);
    filter: blur(36px);
    pointer-events: none;
}
.ccv2-ai-hero > * { position: relative; }

.ccv2-ai-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(11, 10, 18, 0.5);
    border: 1px solid var(--ccv2-violet-line);
    font-family: var(--ccv2-mono);
    font-size: 10.5px; color: var(--ccv2-violet-hi);
    letter-spacing: 0.4px; text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 12px;
}

.ccv2-ai-title {
    font-family: var(--ccv2-display);
    font-weight: 500;
    font-size: 22px; letter-spacing: -0.5px; line-height: 1.15;
    color: var(--ccv2-text);
    margin: 0 0 6px;
}
@media (min-width: 768px) {
    .ccv2-ai-title { font-size: 28px; }
}

.ccv2-ai-desc {
    font-size: 13px; color: var(--ccv2-text-soft);
    line-height: 1.55; margin-bottom: 14px;
    max-width: 560px;
}
@media (min-width: 768px) {
    .ccv2-ai-desc { font-size: 14px; }
}
.ccv2-ai-desc em {
    color: var(--ccv2-violet-hi);
    font-style: italic;
}

.ccv2-ai-row {
    display: flex; gap: 8px; align-items: stretch;
    flex-direction: column;
}
@media (min-width: 768px) {
    .ccv2-ai-row { flex-direction: row; }
}

.ccv2-ai-input-wrap {
    flex: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 12px;
    background: rgba(11, 10, 18, 0.55);
    border: 1px solid var(--ccv2-violet-line);
}
.ccv2-ai-input-wrap svg { flex-shrink: 0; }
.ccv2-ai-input {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none; resize: none;
    color: var(--ccv2-text);
    font-family: var(--ccv2-ui);
    font-size: 14px; line-height: 1.5;
    padding: 0;
}
.ccv2-ai-input::placeholder { color: var(--ccv2-muted); }

.ccv2-ai-submit {
    padding: 13px 18px; border-radius: 12px;
    border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--ccv2-violet), var(--ccv2-violet-hi));
    color: #fff;
    font-family: var(--ccv2-ui);
    font-size: 14px; font-weight: 600; letter-spacing: 0.1px;
    box-shadow: 0 10px 28px rgba(139, 92, 246, 0.4);
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    white-space: nowrap;
    transition: transform 120ms, box-shadow 120ms;
}
@media (min-width: 768px) {
    .ccv2-ai-submit { padding: 12px 22px; }
}
.ccv2-ai-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(139, 92, 246, 0.5);
}
.ccv2-ai-submit:disabled {
    opacity: 0.6; cursor: not-allowed;
    transform: none; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}
.ccv2-ai-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ccv2-spin 0.7s linear infinite;
}
@keyframes ccv2-spin { to { transform: rotate(360deg); } }

.ccv2-ai-foot {
    margin-top: 10px;
    font-size: 11px; color: var(--ccv2-muted);
    display: flex; align-items: center; gap: 6px;
}

.ccv2-ai-hints {
    margin-top: 12px;
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
}
.ccv2-ai-hints-label {
    font-family: var(--ccv2-mono);
    font-size: 10px; color: var(--ccv2-faint);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-right: 4px;
}
.ccv2-ai-hint-chip {
    padding: 5px 10px; border-radius: 999px;
    background: rgba(11, 10, 18, 0.45);
    border: 1px solid var(--ccv2-hairline);
    color: var(--ccv2-text-soft);
    font-family: var(--ccv2-ui); font-size: 11.5px; font-weight: 500;
    cursor: pointer;
    transition: border-color 120ms, color 120ms;
}
.ccv2-ai-hint-chip:hover {
    border-color: var(--ccv2-violet-line);
    color: var(--ccv2-violet-hi);
}

/* ─── Manual divider ───────────────────────────────────────────────── */
.ccv2-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 16px;
}
.ccv2-divider-line {
    flex: 1; height: 1px; background: var(--ccv2-hairline);
}
.ccv2-divider-label {
    font-family: var(--ccv2-mono);
    font-size: 10.5px; color: var(--ccv2-faint);
    letter-spacing: 0.4px; text-transform: uppercase;
    font-weight: 600;
}

/* ─── Step navigator (pill chips) ──────────────────────────────────── */
.ccv2-stepnav {
    display: flex; gap: 3px;
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
@media (min-width: 768px) {
    .ccv2-stepnav { gap: 4px; }
}
.ccv2-stepnav::-webkit-scrollbar { display: none; }

.ccv2-stepnav-item {
    flex: 0 0 auto;
    padding: 7px 11px; border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
@media (min-width: 768px) {
    .ccv2-stepnav-item { padding: 7px 14px; }
}
.ccv2-stepnav-item.is-done {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--ccv2-hairline);
}
.ccv2-stepnav-item.is-active {
    background: var(--ccv2-violet-soft);
    border-color: var(--ccv2-violet-line);
}

.ccv2-stepnav-bullet {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    display: flex; align-items: center; justify-content: center;
    color: var(--ccv2-muted);
    font-size: 10px; font-weight: 700; font-family: var(--ccv2-mono);
}
.ccv2-stepnav-item.is-active .ccv2-stepnav-bullet {
    background: var(--ccv2-violet);
    border: none;
    color: #fff;
}
.ccv2-stepnav-item.is-done .ccv2-stepnav-bullet {
    background: var(--ccv2-violet-hi);
    border: none;
    color: #fff;
}

.ccv2-stepnav-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ccv2-muted);
    white-space: nowrap;
}
.ccv2-stepnav-item.is-done .ccv2-stepnav-label {
    color: var(--ccv2-text-soft);
}
.ccv2-stepnav-item.is-active .ccv2-stepnav-label {
    color: var(--ccv2-text);
    font-weight: 600;
}

/* ─── Step heading ─────────────────────────────────────────────────── */
.ccv2-step-heading {
    margin-bottom: 18px;
}
.ccv2-step-eyebrow {
    font-family: var(--ccv2-mono);
    font-size: 10px; color: var(--ccv2-violet-hi);
    letter-spacing: 0.4px; text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}
.ccv2-step-title {
    margin: 0;
    font-family: var(--ccv2-display);
    font-size: 24px; font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--ccv2-text);
    font-style: italic;
}
@media (min-width: 768px) {
    .ccv2-step-title { font-size: 30px; }
}

/* ─── Step body wrapper + visibility ───────────────────────────────── */
.ccv2-step { display: none; }
.ccv2-step.is-active {
    display: grid;
    /* `minmax(0, 1fr)` instead of bare `1fr` — bare `1fr` resolves to
       `minmax(auto, 1fr)` and `auto` lets the column grow to fit its
       widest child, which pushed long chip-rows past the modal's
       right edge on desktop (2026-05-17). */
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}
/* Same fix for nested form-field grids — chip rows / voice grids need
   to be allowed to shrink below their intrinsic content width. */
.ccv2-field { min-width: 0; }

/* ─── Form primitives ──────────────────────────────────────────────── */
.ccv2-field { display: block; }

.ccv2-label {
    margin-bottom: 8px;
}
.ccv2-label-row {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 11.5px; font-weight: 600;
    color: var(--ccv2-text-soft);
    letter-spacing: 0.4px; text-transform: uppercase;
}
.ccv2-label-row .ccv2-optional {
    font-size: 10px; color: var(--ccv2-faint);
    font-weight: 500; text-transform: none; letter-spacing: 0;
}
.ccv2-hint {
    font-size: 12px; color: var(--ccv2-muted);
    margin-top: 4px; line-height: 1.5;
    text-transform: none; letter-spacing: 0;
    font-weight: 400;
}

.ccv2-input {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px; border-radius: 10px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    transition: border-color 120ms;
}
.ccv2-input:focus-within { border-color: var(--ccv2-violet-line); }
.ccv2-input-prefix {
    color: var(--ccv2-muted); font-size: 13px; flex-shrink: 0;
}
.ccv2-input-suffix {
    color: var(--ccv2-muted); font-size: 12px; flex-shrink: 0;
}
.ccv2-input input,
.ccv2-input textarea {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--ccv2-text);
    font-family: var(--ccv2-ui); font-size: 14px;
    padding: 0;
    line-height: 1.5;
}
.ccv2-input input::placeholder,
.ccv2-input textarea::placeholder { color: var(--ccv2-muted); }

.ccv2-textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: 11px 12px; border-radius: 10px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    color: var(--ccv2-text);
    font-family: var(--ccv2-ui); font-size: 14px; line-height: 1.55;
    outline: none;
    transition: border-color 120ms;
}
.ccv2-textarea:focus { border-color: var(--ccv2-violet-line); }
.ccv2-textarea::placeholder { color: var(--ccv2-muted); }

/* Random-name button next to text input */
.ccv2-input-with-action { display: flex; gap: 8px; align-items: stretch; }
.ccv2-input-with-action .ccv2-input { flex: 1; }
.ccv2-icon-btn {
    padding: 0 14px; min-width: 44px;
    border-radius: 10px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    color: var(--ccv2-text-soft);
    font-family: var(--ccv2-ui); font-size: 16px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.ccv2-icon-btn:hover {
    background: var(--ccv2-card-hi);
    border-color: var(--ccv2-hairline-hi);
}

/* ─── Age slider (range 18-30) ─────────────────────────────────────── */
.ccv2-age-card {
    padding: 14px 16px; border-radius: 12px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
}
.ccv2-age-header {
    display: flex; justify-content: space-between;
    align-items: baseline; margin-bottom: 8px;
}
.ccv2-age-header-label {
    font-size: 13px; color: var(--ccv2-muted);
}
.ccv2-age-value {
    font-family: var(--ccv2-display);
    font-size: 22px; font-weight: 500;
    color: var(--ccv2-text); letter-spacing: -0.4px;
}
.ccv2-age-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px;
    background: transparent; outline: none;
    cursor: pointer;
}
.ccv2-age-track {
    position: relative; height: 6px; border-radius: 3px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    margin: 4px 0;
}
.ccv2-age-fill {
    position: absolute; left: 0; top: -1px; bottom: -1px;
    background: linear-gradient(90deg, var(--ccv2-violet), var(--ccv2-violet-hi));
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
    pointer-events: none;
}
.ccv2-age-thumb {
    position: absolute; top: -7px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
                0 0 0 4px rgba(139, 92, 246, 0.27);
    pointer-events: none;
}
.ccv2-age-range {
    -webkit-appearance: none; appearance: none;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}
.ccv2-age-scale {
    display: flex; justify-content: space-between;
    margin-top: 8px;
    font-size: 11px; color: var(--ccv2-faint);
    font-family: var(--ccv2-mono); letter-spacing: 0.2px;
}

/* ─── Tile grid (used for hair/eye/skin/body/bust/world/profession) ── */
/* All columns use `minmax(0, 1fr)` so tile contents (especially the
   long profession / atmosphere labels) can't grow the column beyond
   the parent's width, which would push the whole step past the modal's
   right edge on desktop. */
.ccv2-grid { display: grid; gap: 8px; }
.ccv2-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ccv2-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccv2-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccv2-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .ccv2-grid.cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ccv2-grid.cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ccv2-grid.cols-md-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Image tile button */
.ccv2-tile {
    position: relative; cursor: pointer; text-align: left;
    padding: 0; border: none; background: transparent;
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--ccv2-ui);
    color: var(--ccv2-text);
}
.ccv2-tile-art {
    position: relative; width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px var(--ccv2-hairline);
    background: var(--ccv2-card);
    transition: box-shadow 120ms, border-color 120ms;
}
.ccv2-tile-art.aspect-portrait { aspect-ratio: 3 / 4; }
.ccv2-tile-art.aspect-landscape { aspect-ratio: 16 / 10; }
.ccv2-tile-glyph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.ccv2-tile-label {
    font-size: 12.5px; font-weight: 500;
    color: var(--ccv2-text-soft);
    padding: 0 2px;
    line-height: 1.3;
}
.ccv2-tile-hint {
    font-size: 11px; color: var(--ccv2-muted);
    padding: 0 2px;
    line-height: 1.35;
}
.ccv2-tile.is-active .ccv2-tile-art {
    border-color: var(--ccv2-violet-hi);
    box-shadow: 0 0 0 4px var(--ccv2-violet-line),
                0 8px 20px rgba(139, 92, 246, 0.25);
}
.ccv2-tile.is-active .ccv2-tile-label {
    color: var(--ccv2-text); font-weight: 600;
}
.ccv2-tile:focus-visible .ccv2-tile-art {
    outline: 2px solid var(--ccv2-violet-hi);
    outline-offset: 2px;
}

/* ─── Chip (pill button) ───────────────────────────────────────────── */
.ccv2-chip-row {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.ccv2-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 999px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    color: var(--ccv2-text-soft);
    font-family: var(--ccv2-ui);
    font-size: 12.5px; font-weight: 500;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, color 120ms;
}
.ccv2-chip:hover { border-color: var(--ccv2-hairline-hi); }
.ccv2-chip.is-active {
    background: var(--ccv2-violet-soft);
    border-color: var(--ccv2-violet-line);
    color: var(--ccv2-violet-hi);
    font-weight: 600;
}
.ccv2-chip-prefix { font-size: 13px; }

/* ─── Voice picker · 5 archetype tabs + 3 actresses per archetype ── */
.ccv2-voice-archetypes {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 12px;
}
.ccv2-voice-archetype-tab {
    padding: 7px 14px; border-radius: 999px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    color: var(--ccv2-text-soft);
    font-family: var(--ccv2-ui);
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.ccv2-voice-archetype-tab:hover { border-color: var(--ccv2-hairline-hi); }
.ccv2-voice-archetype-tab.is-active {
    background: var(--ccv2-violet-soft);
    border-color: var(--ccv2-violet-line);
    color: var(--ccv2-violet-hi);
    font-weight: 600;
}

.ccv2-voice-actresses {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}
@media (min-width: 640px) {
    .ccv2-voice-actresses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ccv2-voice-empty {
    padding: 14px;
    border-radius: 10px;
    background: var(--ccv2-card);
    border: 1px dashed var(--ccv2-hairline);
    color: var(--ccv2-muted);
    font-size: 12.5px;
    text-align: center;
}

.ccv2-voice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
@media (min-width: 768px) {
    .ccv2-voice-grid { grid-template-columns: repeat(3, 1fr); }
}
.ccv2-voice-card {
    padding: 10px 11px; border-radius: 10px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}
.ccv2-voice-card:hover { border-color: var(--ccv2-hairline-hi); }
.ccv2-voice-card.is-active {
    background: var(--ccv2-violet-soft);
    border-color: var(--ccv2-violet-line);
}
.ccv2-voice-play {
    width: 26px; height: 26px; border-radius: 50%; border: none;
    cursor: pointer; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background 120ms;
}
.ccv2-voice-card.is-active .ccv2-voice-play {
    background: var(--ccv2-violet);
}
.ccv2-voice-play:hover { background: var(--ccv2-violet-hi); }
.ccv2-voice-play.is-playing {
    background: var(--ccv2-violet-hi);
    box-shadow: 0 0 0 4px var(--ccv2-violet-line);
}
.ccv2-voice-meta { min-width: 0; flex: 1; }
.ccv2-voice-label {
    font-size: 12.5px; font-weight: 500;
    color: var(--ccv2-text-soft);
}
.ccv2-voice-card.is-active .ccv2-voice-label {
    color: var(--ccv2-text); font-weight: 600;
}
.ccv2-voice-hint {
    font-size: 10.5px; color: var(--ccv2-muted);
    margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Action buttons (Generate / Enhance backstory) ───────────────── */
.ccv2-action-row {
    display: flex; gap: 8px; margin-top: 10px;
    flex-wrap: wrap;
}
.ccv2-action-btn {
    padding: 8px 12px; border-radius: 10px;
    cursor: pointer;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    color: var(--ccv2-text-soft);
    font-family: var(--ccv2-ui);
    font-size: 12.5px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    transition: border-color 120ms, color 120ms;
}
.ccv2-action-btn:hover {
    border-color: var(--ccv2-hairline-hi);
    color: var(--ccv2-text);
}
.ccv2-action-btn.is-primary {
    background: var(--ccv2-violet-soft);
    border-color: var(--ccv2-violet-line);
    color: var(--ccv2-violet-hi);
    font-weight: 600;
}
.ccv2-action-btn.is-primary:hover {
    background: rgba(139, 92, 246, 0.22);
}
.ccv2-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Review rows (label / value) ─────────────────────────────────── */
.ccv2-review { display: grid; gap: 10px; }
.ccv2-review-row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 10px 14px; border-radius: 10px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
}
.ccv2-review-label {
    font-size: 10.5px; font-weight: 600;
    color: var(--ccv2-faint);
    letter-spacing: 0.4px; text-transform: uppercase;
    width: 110px; flex-shrink: 0;
}
.ccv2-review-value {
    flex: 1;
    font-size: 13.5px; color: var(--ccv2-text);
    font-weight: 500; line-height: 1.5;
}
.ccv2-review-row.is-accent .ccv2-review-value {
    color: var(--ccv2-violet-hi); font-weight: 600;
}

/* ─── Create step (animated progress) ─────────────────────────────── */
.ccv2-create-hero {
    position: relative; overflow: hidden;
    padding: 22px 18px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.18), rgba(245, 183, 64, 0.08));
    border: 1px solid var(--ccv2-violet-line);
    text-align: center;
}
@media (min-width: 768px) {
    .ccv2-create-hero { padding: 28px 24px; }
}
.ccv2-create-hero::before {
    content: '';
    position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 320px; height: 200px;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.35), transparent 70%);
    filter: blur(36px);
    pointer-events: none;
}
.ccv2-create-icon {
    width: 56px; height: 56px; border-radius: 16px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--ccv2-violet), var(--ccv2-violet-hi));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4);
    position: relative;
}
.ccv2-create-icon::after {
    content: '';
    position: absolute; inset: -8px;
    border-radius: 22px;
    border: 2px solid var(--ccv2-violet-hi);
    opacity: 0.5;
    animation: ccv2-pulse 1.6s ease-in-out infinite;
}
@keyframes ccv2-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0;    transform: scale(1.18); }
}
.ccv2-create-title {
    margin: 0;
    font-family: var(--ccv2-display);
    font-size: 22px; font-weight: 500;
    letter-spacing: -0.4px; line-height: 1.15;
    color: var(--ccv2-text);
}
@media (min-width: 768px) {
    .ccv2-create-title { font-size: 26px; }
}
.ccv2-create-title em {
    font-style: italic; color: var(--ccv2-violet-hi);
}
.ccv2-create-sub {
    margin: 6px auto 0; max-width: 460px;
    font-size: 13.5px; color: var(--ccv2-muted);
    line-height: 1.55;
}
.ccv2-create-pct {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(11, 10, 18, 0.5);
    border: 1px solid var(--ccv2-hairline-hi);
    font-family: var(--ccv2-mono);
    font-size: 11px; color: var(--ccv2-text);
    letter-spacing: 0.3px; text-transform: uppercase;
    font-weight: 600;
}
.ccv2-create-pct::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ccv2-violet-hi);
    animation: ccv2-blink 1s ease-in-out infinite;
}
@keyframes ccv2-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* Create checklist */
.ccv2-create-checklist {
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 22px;
}
.ccv2-create-task {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    transition: background 200ms;
}
@media (min-width: 768px) {
    .ccv2-create-task { padding: 14px 18px; }
}
.ccv2-create-task + .ccv2-create-task {
    border-top: 1px solid var(--ccv2-hairline);
}
.ccv2-create-task.is-active {
    background: var(--ccv2-violet-soft);
}
.ccv2-create-task-icon {
    width: 26px; height: 26px; border-radius: 50%;
    flex-shrink: 0;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    display: flex; align-items: center; justify-content: center;
    color: var(--ccv2-muted);
    font-family: var(--ccv2-mono); font-size: 11px; font-weight: 600;
    position: relative;
}
.ccv2-create-task.is-done .ccv2-create-task-icon {
    background: var(--ccv2-violet);
    border-color: var(--ccv2-violet-line);
    color: #fff;
}
.ccv2-create-task.is-active .ccv2-create-task-icon {
    background: rgba(11, 10, 18, 0.6);
    border-color: var(--ccv2-violet-line);
}
.ccv2-create-task.is-active .ccv2-create-task-icon::before {
    content: '';
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--ccv2-violet-hi);
    border-top-color: transparent;
    animation: ccv2-spin 1.2s linear infinite;
}
.ccv2-create-task-body { flex: 1; min-width: 0; }
.ccv2-create-task-label {
    font-size: 13.5px; font-weight: 500;
    color: var(--ccv2-muted);
}
.ccv2-create-task.is-active .ccv2-create-task-label,
.ccv2-create-task.is-done .ccv2-create-task-label {
    color: var(--ccv2-text-soft);
}
.ccv2-create-task.is-active .ccv2-create-task-label { font-weight: 600; color: var(--ccv2-text); }
.ccv2-create-task-hint {
    font-size: 11.5px; color: var(--ccv2-muted);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ccv2-create-task-status {
    flex-shrink: 0;
    font-size: 11px; font-weight: 500;
    font-family: var(--ccv2-mono); letter-spacing: 0.2px;
    color: var(--ccv2-faint);
}
.ccv2-create-task.is-active .ccv2-create-task-status {
    color: var(--ccv2-violet-hi); font-weight: 600;
}
.ccv2-create-task.is-active .ccv2-create-task-status::after { content: 'working…'; }
.ccv2-create-task.is-done .ccv2-create-task-status::after { content: 'done'; }

/* Preview tile during Create */
.ccv2-create-preview {
    aspect-ratio: 4 / 5;
    border-radius: 14px; overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #2a1b4d, #6d28d9);
    border: 1px solid var(--ccv2-violet-line);
    margin-top: 22px;
}
.ccv2-create-preview::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: ccv2-shimmer 2.4s linear infinite;
    pointer-events: none;
}
@keyframes ccv2-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.ccv2-create-preview img {
    width: 100%; height: 100%; object-fit: cover;
    position: relative; z-index: 2;
}
.ccv2-create-preview-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 10px;
    z-index: 2;
}
.ccv2-create-preview-blob {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(11, 10, 18, 0.55);
    border: 1px solid var(--ccv2-violet-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
}
.ccv2-create-preview-cap {
    font-family: var(--ccv2-mono);
    font-size: 11px; color: #fff;
    letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Approve actions on Create step (after preview is ready) */
.ccv2-approve-actions {
    display: flex; gap: 10px; margin-top: 22px;
    flex-wrap: wrap; justify-content: center;
}

/* ─── Footer (Back / step counter / Next) ─────────────────────────── */
.ccv2-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 0 0;
    border-top: 1px solid var(--ccv2-hairline);
    margin-top: 24px;
}
@media (min-width: 768px) {
    .ccv2-footer { padding: 16px 0 0; }
}
.ccv2-footer.is-create {
    justify-content: center;
    color: var(--ccv2-muted);
    gap: 6px;
    font-size: 11.5px;
}
.ccv2-btn-back {
    padding: 11px 16px; border-radius: 12px;
    cursor: pointer;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    color: var(--ccv2-text-soft);
    font-family: var(--ccv2-ui);
    font-size: 13.5px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 120ms, border-color 120ms;
}
.ccv2-btn-back:hover {
    background: var(--ccv2-card-hi);
    border-color: var(--ccv2-hairline-hi);
}
.ccv2-btn-back:disabled { opacity: 0.5; cursor: not-allowed; }
.ccv2-footer-counter {
    flex: 1; text-align: center;
    font-size: 11.5px; color: var(--ccv2-muted);
    font-family: var(--ccv2-mono);
}
.ccv2-btn-next {
    padding: 11px 22px; border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--ccv2-violet), var(--ccv2-violet-hi));
    border: none; color: #fff;
    font-family: var(--ccv2-ui);
    font-size: 13.5px; font-weight: 600;
    box-shadow: 0 8px 22px rgba(139, 92, 246, 0.32);
    display: inline-flex; align-items: center; gap: 7px;
    transition: transform 120ms, box-shadow 120ms;
}
.ccv2-btn-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.45);
}
.ccv2-btn-next:disabled {
    opacity: 0.55; cursor: not-allowed;
    transform: none;
}

/* Inline error banner — sticky so it stays visible below the topbar
   even when the user is scrolled deep inside a long step (caught
   2026-05-17: on mobile, scrolling to the Custom Profession field
   put the banner well above the fold, the user couldn't see why
   Next was rejecting). 60px / 64px offsets clear the sticky topbar. */
.ccv2-error-banner {
    position: sticky;
    top: 60px;
    z-index: 5;
    padding: 12px 14px; border-radius: 10px;
    background: rgba(38, 18, 20, 0.96);
    border: 1px solid rgba(239, 68, 68, 0.55);
    color: #fca5a5;
    font-size: 13px; line-height: 1.5;
    margin-bottom: 16px;
    display: flex; align-items: flex-start; gap: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
@media (min-width: 768px) {
    .ccv2-error-banner { top: 64px; }
}
.ccv2-error-banner-icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    color: #f87171;
}
.ccv2-error-banner strong { color: #fee2e2; }

/* Tag-input container (Special features free-text) */
.ccv2-tag-input {
    min-height: 44px;
    padding: 8px 10px; border-radius: 10px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
    cursor: text;
}
.ccv2-tag-input:focus-within { border-color: var(--ccv2-violet-line); }
.ccv2-tag-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 6px;
    background: var(--ccv2-violet-soft);
    border: 1px solid var(--ccv2-violet-line);
    color: var(--ccv2-violet-hi);
    font-size: 12px; font-weight: 500;
}
.ccv2-tag-pill button {
    background: transparent; border: none; cursor: pointer;
    color: inherit; font-size: 14px; line-height: 1;
    padding: 0 0 0 4px;
}
.ccv2-tag-field {
    flex: 1; min-width: 80px;
    background: transparent; border: none; outline: none;
    color: var(--ccv2-text);
    font-family: var(--ccv2-ui); font-size: 13px;
    padding: 4px 2px;
}
.ccv2-tag-field::placeholder { color: var(--ccv2-muted); }

/* Trait preview panel (personality compound) */
.ccv2-trait-preview {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--ccv2-card);
    border: 1px solid var(--ccv2-hairline);
    display: flex; align-items: center; gap: 14px;
    min-height: 84px;
}
.ccv2-trait-preview.is-empty { color: var(--ccv2-muted); font-style: italic; font-size: 12.5px; }
.ccv2-trait-preview-img {
    width: 56px; height: 56px; border-radius: 12px;
    flex-shrink: 0; object-fit: cover;
    background: var(--ccv2-card-hi);
    border: 1px solid var(--ccv2-hairline);
}
.ccv2-trait-preview-body { min-width: 0; flex: 1; }
.ccv2-trait-preview-name {
    font-family: var(--ccv2-display);
    font-size: 16px; font-weight: 500;
    color: var(--ccv2-text); letter-spacing: -0.2px;
}
.ccv2-trait-preview-desc {
    font-size: 12px; color: var(--ccv2-muted);
    margin-top: 3px; line-height: 1.5;
}

/* Decorative info card (e.g. world/role explainer) */
.ccv2-info-card {
    padding: 12px 14px; border-radius: 10px;
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid var(--ccv2-violet-line);
}
.ccv2-info-card strong {
    color: var(--ccv2-violet-hi);
    font-size: 12.5px; letter-spacing: 0.3px;
    text-transform: uppercase; font-weight: 600;
    display: block; margin-bottom: 6px;
}
.ccv2-info-card p {
    margin: 0; font-size: 13px; color: var(--ccv2-text-soft);
    line-height: 1.55;
}