/* ===== Creator forms (DND + Rebirth shared) ===== */

.character-creator,
.setting-creator {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px);
    animation: fadeIn .5s ease;
}

.character-creator.hidden,
.setting-creator.hidden { display: none; }

.creator-header {
    text-align: center;
    margin-bottom: var(--space-6);
    max-width: 760px;
}

.creator-header h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.creator-header p {
    font-size: var(--text-md);
    color: var(--glass-55);
    line-height: 1.6;
}

.creator-form {
    width: min(100%, 920px);
    background: var(--glass-06);
    border: 1px solid var(--glass-12);
    border-radius: var(--radius-lg);
    padding: clamp(20px, 3vw, 32px);
    box-shadow: 0 24px 80px oklch(0 0 0 / 0.28);
    backdrop-filter: blur(10px);
}

.setting-creator .creator-form {
    width: min(100%, 800px);
}

.creator-section {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--glass-10);
}

.creator-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.creator-section h3 {
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.form-group label {
    font-size: var(--text-sm);
    color: var(--glass-60);
    font-weight: 500;
    line-height: 1.4;
}

.form-group input,
.form-group select,
.chat-composer textarea {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--glass-12);
    border-radius: var(--radius-sm);
    background: var(--glass-05);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.form-group input:hover,
.form-group select:hover,
.chat-composer textarea:hover {
    border-color: var(--glass-22);
}

.form-group input:focus,
.form-group select:focus,
.chat-composer textarea:focus {
    outline: none;
    border-color: var(--accent-start);
    box-shadow: 0 0 0 3px oklch(0.6 0.12 250 / 0.18);
}

.form-group input::placeholder,
.chat-composer textarea::placeholder { color: var(--glass-40); }

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 42px;
}

.form-group select option,
.form-group select optgroup {
    background: oklch(0.14 0.02 280);
    color: var(--text-primary);
}

.form-group select optgroup { color: var(--glass-60); }

.form-hint {
    font-size: var(--text-xs);
    color: var(--glass-40);
    line-height: 1.5;
    margin-bottom: var(--space-3);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}

.card-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--glass-12);
    border-radius: var(--radius-md);
    background: var(--glass-05);
    cursor: pointer;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    user-select: none;
}

.card-option:hover {
    background: var(--glass-10);
    border-color: var(--glass-22);
}

.card-option.selected {
    background: var(--glass-12);
    border-color: var(--accent-start);
    box-shadow: 0 0 0 2px oklch(0.6 0.12 250 / 0.25);
}

.card-option .card-icon {
    font-size: var(--text-2xl);
    line-height: 1;
}

.card-option .card-label {
    font-size: var(--text-sm);
    color: var(--glass-70);
    font-weight: 500;
}

.card-option .card-desc {
    font-size: var(--text-xs);
    color: var(--glass-40);
    line-height: 1.4;
}

.card-option.selected .card-label { color: var(--text-primary); }
.card-option.selected .card-desc { color: var(--glass-60); }

.creator-actions {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--glass-10);
}

.creator-actions .btn {
    min-width: 180px;
    flex: 1 1 240px;
}

.creator-stagger > * {
    animation: fadeIn .5s ease backwards;
}
.creator-stagger > *:nth-child(1) { animation-delay: .05s; }
.creator-stagger > *:nth-child(2) { animation-delay: .12s; }
.creator-stagger > *:nth-child(3) { animation-delay: .19s; }

@media (max-width: 640px) {
    .character-creator,
    .setting-creator {
        padding: var(--space-4);
        justify-content: flex-start;
    }

    .creator-header {
        margin-bottom: var(--space-4);
        text-align: left;
        align-self: stretch;
    }

    .creator-form { padding: var(--space-4); }
    .creator-section h3 { font-size: var(--text-md); }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .creator-actions .btn { width: 100%; min-width: 0; }
}