/* === Fonts === */

/* === Theme Tokens === */

:root {
    /* Backgrounds (Midjourney cool) */
    --bg-base:      #0d0e12;
    --bg-surface:   #1a1c22;
    --bg-elevated:  #22242c;
    --bg-sunken:    #08090c;
    --bg-hover:     #252830;

    /* Borders (cool) */
    --border:       #292c32;
    --border-hover: #363940;
    --border-accent: rgba(245, 132, 59, 0.25);

    /* Text (cool-shifted) */
    --text-primary:   #e8eaf0;
    --text-secondary: #a0a4b0;
    --text-muted:     #5c6170;
    --text-dim:       #44485a;

    /* Primary accent: Orange */
    --accent:         #f5843b;
    --accent-hover:   #ffa060;
    --accent-subtle:  rgba(245, 132, 59, 0.10);

    /* Secondary: Amber Gold */
    --gold:           #f5c842;
    --gold-subtle:    rgba(245, 200, 66, 0.10);

    /* Semantic */
    --danger:         #ff6b6b;
    --success:        #5dd39e;

    /* Gradients */
    --accent-gradient:        linear-gradient(135deg, #f5843b, #e8594f);
    --accent-gradient-hover:  linear-gradient(135deg, #ffa060, #f06b5c);
    --accent-gradient-subtle: linear-gradient(135deg, rgba(245, 132, 59, 0.15), rgba(232, 89, 79, 0.15));
    --gradient-sunset:        linear-gradient(135deg, #f5843b, #f5c842);
    --gradient-glow:          radial-gradient(ellipse at center, rgba(245, 132, 59, 0.15) 0%, transparent 70%);

    /* Shadows */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(245, 132, 59, 0.15);
}

/* === Reset & Base === */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    scrollbar-width: thin;
    scrollbar-color: #292c32 transparent;
}

html::-webkit-scrollbar {
    width: 6px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background: #292c32;
    border-radius: 3px;
}

html::-webkit-scrollbar-thumb:hover {
    background: #363940;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.75rem; letter-spacing: -0.02em; font-family: 'Sora', sans-serif; font-weight: 700; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

@media (max-width: 768px) {
    h1 { font-size: 1.375rem; }
    h2 { font-size: 1.125rem; }
    h3 { font-size: 1rem; }
}

p {
    color: var(--text-muted);
    line-height: 1.7;
}

a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--text-primary);
}

h1:focus {
    outline: none;
}

/* === Buttons === */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    line-height: 1.4;
}

.btn:focus-visible {
    outline: 2px solid #f5843b;
    outline-offset: 2px;
}

.btn-primary {
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(245, 132, 59, 0.25);
}

.btn-primary:hover {
    background: var(--accent-gradient-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(245, 132, 59, 0.4);
    color: #fff;
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(245, 132, 59, 0.2);
}

.btn-primary:disabled, .btn-primary.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-hover);
}

.btn-secondary:hover {
    background-color: var(--border-hover);
    color: var(--text-primary);
    border-color: var(--text-dim);
}

.btn-secondary:active {
    transform: scale(0.96);
}

.btn-secondary:disabled, .btn-secondary.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn-danger {
    background-color: rgba(255, 107, 107, 0.12);
    color: var(--danger);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.btn-danger:hover {
    background-color: rgba(255, 107, 107, 0.2);
    color: #ff8080;
}

.btn-danger:active {
    transform: scale(0.96);
}

.btn-danger:disabled, .btn-danger.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-lg {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
}

/* === Cards === */

.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover {
    border-color: var(--border);
    background-color: var(--bg-surface);
    box-shadow: none;
    transform: none;
}

.card-body {
    padding: 1.125rem;
}

.card-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
}

/* === Forms === */

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background-color: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: border-color 0.15s ease;
}

.form-control::placeholder {
    color: var(--text-dim);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245, 132, 59, 0.1);
    background-color: var(--bg-surface);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.form-group {
    margin-bottom: 1.5rem;
}

/* === Range Slider === */

input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    margin: 0.5rem 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8eaf0;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8eaf0;
    cursor: pointer;
    border: none;
}

/* === Story Cards Grid === */

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.story-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.story-card .card-body {
    flex: 1;
    padding: 1rem;
    overflow: hidden;
}

.story-card .card-footer {
    padding: 0.75rem 1rem;
}

.story-card .story-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.story-card .story-meta {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.story-card .story-excerpt {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.55;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.story-card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.story-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.story-card:hover .story-card-image img {
    transform: scale(1.03);
}

.story-card-placeholder {
    aspect-ratio: 16 / 9;
    background-color: var(--bg-elevated);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--border-hover);
    font-size: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.story-card-placeholder svg {
    opacity: 0.3;
}

/* === Scene Cards === */

.scenes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.scene-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.scene-card .scene-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* Drag handle */

.scene-drag-handle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    padding: 0.25rem;
    border-radius: 4px;
    color: var(--text-dim);
    cursor: grab;
    transition: all 0.15s ease;
    background: rgba(28, 25, 22, 0.9);
}

.scene-drag-handle:hover {
    color: var(--text-primary);
    background: var(--border);
}

.scene-drag-handle:active {
    cursor: grabbing;
}

/* Drag wrapper */

.scene-drag-wrapper {
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.scene-drag-wrapper.dragging {
    opacity: 0.4;
}

.scene-drag-wrapper.drag-over {
    transform: scale(1.02);
}

.scene-drag-wrapper.drag-over > .card {
    border-color: #f5843b;
    box-shadow: 0 0 0 1px #f5843b;
}

.scene-placeholder {
    aspect-ratio: 2 / 3;
    background-color: var(--bg-elevated);
    border: 2px dashed var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem 0.75rem 0;
}

.scene-placeholder-text {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.75rem;
}

.scene-placeholder-text svg {
    display: block;
    margin: 0 auto 0.375rem;
    opacity: 0.3;
}

.scene-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--border);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.scene-description {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.scene-prompt-toggle {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: inherit;
    transition: color 0.15s ease;
}

.scene-prompt-toggle:hover {
    color: var(--text-secondary);
}

.scene-prompt {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.5;
    padding: 0.5rem 0.625rem;
    background-color: var(--bg-elevated);
    border-radius: 6px;
    border-left: 2px solid var(--border);
    margin-top: 0.375rem;
    white-space: pre-wrap;
}

/* Inline editing */

.editable-text {
    cursor: pointer;
    border-radius: 6px;
    padding: 0.375rem 0.5rem;
    margin: -0.375rem -0.5rem;
    transition: background-color 0.15s ease;
    border: 1px solid transparent;
}

.editable-text:hover {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--border);
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.edit-field textarea.form-control {
    font-size: 0.875rem;
    min-height: 80px;
}

.edit-actions {
    display: flex;
    gap: 0.375rem;
}

/* === Hero Section === */

.hero {
    text-align: center;
    padding: 3.5rem 0 2.5rem;
}

.hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    -webkit-text-fill-color: unset;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    margin-bottom: 0.75rem;
}

.hero .subtitle {
    font-size: 1.0625rem;
    color: var(--text-dim);
    max-width: 520px;
    margin: 0 auto 2rem;
    letter-spacing: 0.01em;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* === Gallery (Masonry Grid) === */

.gallery-time-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
    margin: 1rem 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gallery-time-label span {
    white-space: nowrap;
    flex-shrink: 0;
}

.gallery-time-label hr {
    flex: 1;
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}

.gallery-loading {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.5rem;
}

.masonry-grid-centered {
    grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
    justify-content: center;
}

.masonry-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    aspect-ratio: 3 / 4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.masonry-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 132, 59, 0.04), transparent);
    animation: skeletonShimmer 1.5s infinite;
    pointer-events: none;
    z-index: 1;
}

.masonry-item:has(img.loaded)::before,
.masonry-item:not(.new-image)::before {
    display: none;
}

.masonry-item:hover {
    border-color: rgba(245, 132, 59, 0.75);
    box-shadow: 0 0 0 1px rgba(245, 132, 59, 0.5), 0 8px 24px rgba(245, 132, 59, 0.25), 0 4px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.masonry-item.new-image img {
    opacity: 0;
    transform: scale(1.02);
    filter: blur(8px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.masonry-item.new-image img.loaded {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.masonry-item:hover img {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

.masonry-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 0.75rem 0.75rem;
    background: linear-gradient(transparent, rgba(10, 9, 8, 0.85));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.masonry-item:hover .masonry-overlay {
    opacity: 1;
}

.masonry-prompt {
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.375rem;
}

.masonry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.masonry-user {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.masonry-time {
    font-size: 0.8125rem;
    color: var(--text-dim);
}

/* Gallery stagger animation — only for new images */
.masonry-item.new-image {
    animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.masonry-item.new-image:nth-child(1)  { animation-delay: 0.04s; }
.masonry-item.new-image:nth-child(2)  { animation-delay: 0.08s; }
.masonry-item.new-image:nth-child(3)  { animation-delay: 0.12s; }
.masonry-item.new-image:nth-child(4)  { animation-delay: 0.16s; }
.masonry-item.new-image:nth-child(5)  { animation-delay: 0.20s; }
.masonry-item.new-image:nth-child(6)  { animation-delay: 0.24s; }

/* Responsive masonry */
@media (max-width: 768px) {
    .masonry-grid { grid-template-columns: repeat(2, 1fr); }

    .masonry-item.new-image img {
        transition: opacity 0.3s ease; /* Keep fade-in, disable transform on mobile */
    }

    .masonry-item.new-image {
        animation: none; /* Disable stagger animation on mobile */
    }
}

@media (max-width: 480px) {
    .masonry-grid { grid-template-columns: 1fr; }
}

/* Gallery detail modal */
.gallery-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    z-index: 1000;
    width: 90vw;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: dialogIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: #292c32 transparent;
}

.gallery-detail-panel::-webkit-scrollbar {
    width: 6px;
}

.gallery-detail-panel::-webkit-scrollbar-track {
    background: transparent;
}

.gallery-detail-panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.gallery-detail-panel::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

.gallery-detail-image {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    border-radius: 16px 16px 0 0;
    background: var(--bg-elevated);
}

.gallery-detail-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.gallery-detail-prompt {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    white-space: pre-wrap;
    margin-bottom: 0.75rem;
}

.gallery-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
}

.gallery-detail-actions {
    display: flex;
    gap: 0.625rem;
}

/* Regenerate panel inside detail modal */
.gallery-regen-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.gallery-regen-textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.625rem 0.75rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}

.gallery-regen-textarea::placeholder {
    color: var(--text-dim);
}

.gallery-regen-textarea:focus {
    border-color: #f5843b;
}

.gallery-regen-row {
    display: flex;
    align-items: center;
}

.gallery-regen-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    user-select: none;
}

.gallery-regen-check input[type="checkbox"] {
    accent-color: #f5843b;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.gallery-regen-aspects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.gallery-regen-pill {
    padding: 0.3125rem 0.75rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.gallery-regen-pill:hover {
    border-color: var(--border-hover);
    color: var(--text-secondary);
}

.gallery-regen-pill.active {
    background: rgba(245, 132, 59, 0.15);
    border-color: #f5843b;
    color: #f5843b;
}

.gallery-regen-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #f5843b, #e06b28);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.gallery-regen-submit:hover {
    opacity: 0.9;
}

.gallery-regen-submit:active {
    transform: scale(0.97);
}

.gallery-regen-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* === Edit Mode Toggle === */

.edit-mode-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.edit-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.4rem 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-dim);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.edit-mode-btn:last-child {
    border-right: none;
}

.edit-mode-btn:hover {
    color: var(--text-primary);
    background: rgba(245, 132, 59, 0.06);
}

.edit-mode-btn.active {
    color: #f5843b;
    background: rgba(245, 132, 59, 0.12);
}

/* === Edit Presets & Strength === */

.edit-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.edit-preset-chip {
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-dim);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

.edit-preset-chip:hover {
    border-color: #f5843b;
    color: #f5843b;
}

.edit-strength {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.edit-strength-btn {
    flex: 1;
    padding: 0.3rem 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-dim);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.edit-strength-btn:last-child {
    border-right: none;
}

.edit-strength-btn:hover {
    color: var(--text-primary);
    background: rgba(245, 132, 59, 0.08);
}

.edit-strength-btn.active {
    color: #f5843b;
    background: rgba(245, 132, 59, 0.15);
}

/* === Regen Modal (horizontal layout) === */

.regen-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 900;
}

.regen-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    z-index: 1000;
    width: 90vw;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: dialogIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.regen-modal-body {
    display: flex;
    height: 100%;
    max-height: 85vh;
}

.regen-modal-image-wrap {
    flex: 1 1 50%;
    min-width: 0;
    background: var(--bg-base);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
}

.regen-modal-image {
    width: 100%;
    height: 100%;
    max-height: 85vh;
    object-fit: contain;
    display: block;
}

.regen-modal-controls {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #292c32 transparent;
}

.regen-modal-controls::-webkit-scrollbar {
    width: 6px;
}

.regen-modal-controls::-webkit-scrollbar-track {
    background: transparent;
}

.regen-modal-controls::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.regen-modal-section {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.regen-modal-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Mobile: stack vertically */
@media (max-width: 640px) {
    .regen-modal {
        max-width: 95vw;
        max-height: 90vh;
    }

    .regen-modal-body {
        flex-direction: column;
        max-height: 90vh;
    }

    .regen-modal-image-wrap {
        flex: 0 0 auto;
        max-height: 35vh;
        border-radius: 16px 16px 0 0;
    }

    .regen-modal-controls {
        flex: 1 1 auto;
        overflow-y: auto;
    }
}

/* Regen modal: original prompt display */
.regen-original-prompt {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
    background: rgba(10, 9, 8, 0.5);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.625rem 0.875rem;
    max-height: 4.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #292c32 transparent;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Regen modal: mask canvas */
.mask-canvas {
    position: absolute;
    touch-action: none;
    z-index: 5;
    cursor: none;
}

.mask-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 6;
    box-sizing: border-box;
}

/* Mask toolbar */
.mask-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.375rem 0.5rem;
}

.mask-tool-group {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.mask-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mask-tool-btn:hover {
    background: rgba(245, 132, 59, 0.08);
    color: var(--text-primary);
}

.mask-tool-btn.active {
    background: rgba(245, 132, 59, 0.2);
    color: #f5843b;
}

.mask-clear-btn {
    margin-left: auto;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mask-clear-btn:hover {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.3);
    color: var(--danger);
}

/* Brush size */
.mask-brush-size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
}

.mask-brush-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.mask-brush-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f5843b;
    cursor: pointer;
    border: 2px solid var(--bg-surface);
    box-shadow: 0 0 4px rgba(245, 132, 59, 0.4);
}

.mask-brush-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f5843b;
    cursor: pointer;
    border: 2px solid var(--bg-surface);
    box-shadow: 0 0 4px rgba(245, 132, 59, 0.4);
}

@media (max-width: 768px) {
    .mask-toolbar {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .mask-tool-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }
    .mask-clear-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }
}

/* Regen modal: quick action buttons row */
.regen-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}

.regen-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.regen-action-btn:hover {
    border-color: var(--text-dim);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.regen-action-btn.regen-action-active {
    border-color: #f5843b;
    color: #f5843b;
}

.regen-action-btn.regen-action-danger:hover {
    border-color: #e05252;
    color: #e05252;
    background: rgba(224, 82, 82, 0.05);
}

/* Regen modal: arrow navigation */
.regen-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(10, 9, 8, 0.85);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.regen-nav-arrow:hover {
    color: var(--text-primary);
    background: var(--border);
}

.regen-nav-left {
    left: -48px;
}

.regen-nav-right {
    right: -48px;
}

@media (max-width: 1000px) {
    .regen-nav-left {
        left: 0.5rem;
    }
    .regen-nav-right {
        right: 0.5rem;
    }
}

/* === Details/Summary (collapsible) === */

details {
    border-radius: 8px;
}

details summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.5rem 0;
    user-select: none;
}

details summary:hover {
    color: var(--text-primary);
}

details[open] summary {
    margin-bottom: 0.5rem;
}

/* === Collapsible Story Text === */

.story-text-content {
    padding: 1rem 1.25rem;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* === Empty State === */

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    border-radius: 14px;
}
.empty-state.onboarding-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    max-width: 860px;
    margin: 0 auto;
    transform: translateX(-31px);
}

.empty-state h3 {
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--text-dim);
    margin-bottom: 1.75rem;
}

/* === Alerts === */

.alert {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

/* === Spinner === */

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: #e8eaf0;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === Logo Morph Loader === */

.logo-morph {
    width: 40px;
    height: 40px;
}

.logo-morph svg {
    width: 100%;
    height: 100%;
    animation: morphScale 2s ease-in-out infinite;
}

.morph-circle {
    animation: fadeCircle 2s ease-in-out infinite;
}

.morph-logo {
    animation: fadeLogo 2s ease-in-out infinite;
}

@keyframes fadeCircle {
    0%, 15%  { opacity: 0.45; }
    30%, 70% { opacity: 0; }
    85%, 100% { opacity: 0.45; }
}

@keyframes fadeLogo {
    0%, 15%  { opacity: 0; }
    30%, 70% { opacity: 0.45; }
    85%, 100% { opacity: 0; }
}

@keyframes morphScale {
    0%, 100% { transform: scale(1); }
    25%  { transform: scale(0.9); }
    50%  { transform: scale(1.06); }
    75%  { transform: scale(0.9); }
}

/* === Page Header === */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.page-header h1 {
    margin-bottom: 0.25rem;
}

.page-meta {
    font-size: 0.8125rem;
    color: var(--text-dim);
}

/* === Tooltip (for disabled buttons) === */

.tooltip-wrap {
    position: relative;
    display: inline-flex;
}

.tooltip-wrap .tooltip-text {
    visibility: hidden;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--border);
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    border: 1px solid var(--border-hover);
}

.tooltip-wrap:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* === Toast Notifications === */

.toast-container {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    padding-right: 2.5rem;
    border-radius: 14px;
    background: rgba(28, 25, 22, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    animation: toastSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.9375rem;
    white-space: nowrap;
    position: relative;
}

.toast-exit {
    animation: toastSlideUp 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.toast-icon {
    flex-shrink: 0;
    display: flex;
}

.toast-success .toast-icon { color: #4ade80; }
.toast-error .toast-icon   { color: var(--danger); }
.toast-warning .toast-icon { color: #f59e0b; }
.toast-info .toast-icon    { color: #60a5fa; }

.toast-message {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
    white-space: normal;
    max-width: 360px;
}

.toast-error .toast-message {
    color: #f0c4c4;
    font-family: 'Cascadia Mono', 'Consolas', monospace;
    font-size: 0.78rem;
}

.toast-warning .toast-message {
    color: #fde68a;
}

.toast-close {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0.125rem;
    display: flex;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.toast-close:hover {
    color: var(--text-secondary);
}

@keyframes toastSlideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}

@keyframes toastSlideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Infinite Scroll Sentinel === */

.scroll-sentinel {
    min-height: 1px;
    width: 100%;
}

.scroll-loading {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.scroll-loading .spinner {
    width: 24px;
    height: 24px;
}

/* === Explore New Banner === */

.explore-new-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    margin: 0 auto 1rem;
    width: fit-content;
    background: var(--accent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    animation: slideBannerDown 0.3s ease;
    transition: background 0.15s ease;
    box-shadow: 0 2px 12px rgba(245, 132, 59, 0.3);
}

.explore-new-banner:hover {
    background: var(--accent-hover);
}

@keyframes slideBannerDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Confirm Dialog === */

.confirm-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 900;
    animation: fadeIn 0.15s ease;
}

.confirm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    z-index: 1000;
    min-width: 360px;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: dialogIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirm-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.confirm-message {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
}

/* Consistency dialog issues list */
.consistency-issues {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.consistency-issues li {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Read-only prompt textarea in scene card */
.scenegen-prompt-readonly {
    font-size: 0.8rem;
    opacity: 0.7;
    resize: none;
    cursor: default;
}

.select-dialog-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.select-dialog-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--bg-elevated);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.select-dialog-item input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.select-dialog-name {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.select-dialog-desc {
    color: var(--text-muted);
    font-size: 0.75rem;
    display: block;
    margin-top: 2px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dialogIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* === Scene Detail Panel === */

/* Shared blur backdrop — used by image preview modal */
.scene-detail-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 900;
}

.scene-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    z-index: 1000;
    width: 90vw;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: dialogIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-detail-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    background: rgba(10, 9, 8, 0.9);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.scene-detail-close:hover {
    color: var(--text-primary);
    background: var(--border);
}

.scene-detail-image {
    width: 100%;
    aspect-ratio: 2 / 3;
    max-height: 50vh;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
}

.scene-detail-placeholder {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px 14px 0 0;
}

.scene-detail-placeholder .scene-placeholder-text {
    font-size: 0.875rem;
}

.scene-detail-placeholder .scene-placeholder-text svg {
    opacity: 0.3;
}

.scene-detail-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.scene-detail-section {
    margin-bottom: 1.25rem;
}

.scene-detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.scene-detail-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    white-space: pre-wrap;
}

.scene-detail-prompt {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
    padding: 0.75rem 1rem;
    background-color: var(--bg-base);
    border-radius: 8px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    white-space: pre-wrap;
}

.style-options-section {
    margin-bottom: 0.75rem;
}

.style-options-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.style-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    user-select: none;
}

.style-toggle input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--text-dim);
    border-radius: 3px;
    background: var(--bg-surface);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.style-toggle input[type="checkbox"]:checked {
    background: #f5843b;
    border-color: #f5843b;
}

.style-toggle input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4.5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.scene-detail-actions {
    display: flex;
    gap: 0.625rem;
    padding-top: 0.25rem;
}

/* === Blazor Error Boundary === */

.blazor-error-boundary {
    background: rgba(239, 68, 68, 0.08);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--danger);
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* === Validation === */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #22c55e;
}

.invalid {
    outline: 1px solid #ef4444;
}

.validation-message {
    color: var(--danger);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* === Integration Tabs === */

.integration-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-elevated);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.5rem;
}

.integration-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.integration-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.integration-tab.active {
    background: rgba(245, 132, 59, 0.12);
    color: #f5843b;
    box-shadow: 0 1px 4px rgba(245, 132, 59, 0.1);
}

.integration-tab.active svg {
    opacity: 1;
}

.integration-tab svg {
    opacity: 0.5;
    flex-shrink: 0;
}

.integration-content {
}

.integration-content > div > .card:hover {
    border-color: var(--border);
    background-color: var(--bg-surface);
    box-shadow: none;
}

/* === Models Grid === */

.models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.model-card {
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease;
}

.model-card > .card-body {
    flex: 1;
    overflow: hidden;
}

.model-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-prompt {
    background-color: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-image {
    background-color: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.model-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.model-detail-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.model-detail-label {
    color: var(--text-dim);
    min-width: 80px;
    flex-shrink: 0;
}

.model-detail-value {
    color: var(--text-muted);
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8rem;
}

.model-detail-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

/* === Model Presets === */

.preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.preset-card {
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.preset-card:hover {
    transform: translateY(-3px);
    border-color: var(--text-dim);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.preset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--border);
    color: var(--text-muted);
    flex-shrink: 0;
}

.preset-icon-sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.preset-icon-sm svg {
    width: 16px;
    height: 16px;
}

.preset-setup-guide {
    padding: 0.625rem 0.75rem;
    background-color: var(--bg-base);
    border-radius: 6px;
    border: 1px solid var(--border);
}

@media (max-width: 1024px) {
    .preset-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .preset-grid {
        grid-template-columns: 1fr;
    }
}

/* === Select (dropdown) === */

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6170' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

select.form-control option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* === Pagination === */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    margin-top: 2rem;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: var(--bg-surface);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled):not(.active) {
    background-color: var(--border);
    border-color: var(--text-dim);
    color: var(--text-primary);
}

.pagination-btn.active {
    background: #f5843b;
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(245, 132, 59, 0.3);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-dim);
    margin-top: 0.75rem;
}

/* === Responsive Grids === */

@media (max-width: 1200px) {
    .scenes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .stories-grid,
    .scenes-grid,
    .models-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stories-grid,
    .scenes-grid,
    .models-grid {
        grid-template-columns: 1fr;
    }
}

/* === Page Transitions === */

.page-enter {
    animation: pageIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered card entrance */
.stories-grid > *,
.scenes-grid > *,
.models-grid > * {
    animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stories-grid > *:nth-child(1),  .scenes-grid > *:nth-child(1),  .models-grid > *:nth-child(1)  { animation-delay: 0.03s; }
.stories-grid > *:nth-child(2),  .scenes-grid > *:nth-child(2),  .models-grid > *:nth-child(2)  { animation-delay: 0.06s; }
.stories-grid > *:nth-child(3),  .scenes-grid > *:nth-child(3),  .models-grid > *:nth-child(3)  { animation-delay: 0.09s; }
.stories-grid > *:nth-child(4),  .scenes-grid > *:nth-child(4),  .models-grid > *:nth-child(4)  { animation-delay: 0.12s; }
.stories-grid > *:nth-child(5),  .scenes-grid > *:nth-child(5),  .models-grid > *:nth-child(5)  { animation-delay: 0.15s; }
.stories-grid > *:nth-child(6),  .scenes-grid > *:nth-child(6),  .models-grid > *:nth-child(6)  { animation-delay: 0.18s; }
.stories-grid > *:nth-child(7),  .scenes-grid > *:nth-child(7),  .models-grid > *:nth-child(7)  { animation-delay: 0.21s; }
.stories-grid > *:nth-child(8),  .scenes-grid > *:nth-child(8),  .models-grid > *:nth-child(8)  { animation-delay: 0.24s; }
.stories-grid > *:nth-child(9),  .scenes-grid > *:nth-child(9),  .models-grid > *:nth-child(9)  { animation-delay: 0.27s; }
.stories-grid > *:nth-child(10), .scenes-grid > *:nth-child(10), .models-grid > *:nth-child(10) { animation-delay: 0.30s; }
.stories-grid > *:nth-child(11), .scenes-grid > *:nth-child(11), .models-grid > *:nth-child(11) { animation-delay: 0.33s; }
.stories-grid > *:nth-child(12), .scenes-grid > *:nth-child(12), .models-grid > *:nth-child(12) { animation-delay: 0.36s; }

/* Hero entrance */
.hero {
    animation: pageIn 0.4s ease both;
}

.hero-actions {
    animation: pageIn 0.45s ease both;
    animation-delay: 0.1s;
}

/* === App Layout (Sidebar + Main) === */

.app-layout {
    min-height: 100vh;
}

.app-main {
    margin-left: 62px;
    padding-top: 62px;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}



.app-main > main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Prompt bar — fixed centered at bottom of viewport */
.prompt-bar-group {
    position: fixed;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 0 1.5rem;
    z-index: 200;
    pointer-events: none;
}

.prompt-bar-group > * {
    pointer-events: auto;
}

.prompt-bar-group .prompt-bar {
    width: 100%;
    max-width: 860px;
}

.content {
    width: 100%;
    max-width: 1200px;
    /* Center relative to viewport: 50vw is viewport center, minus 70px sidebar, minus half content */
    margin-left: max(0px, calc(50vw - 62px - 600px));
    margin-right: auto;
    padding: 1rem 2.5rem;
    padding-bottom: 100px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .app-main {
        margin-left: 0;
        padding-top: 0;
    }

    .content {
        margin-left: auto;
        padding: 1.5rem 1rem;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    .prompt-bar-group {
        display: none;
    }
}

/* === Home Page Layout with Settings Strip === */

.home-layout {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0.75rem 1.5rem 0;
}

/* Shared page layout — inherits centering from .content */
.page-layout {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 4rem;
}

/* Override .content constraints when home-layout is active */
.content:has(.home-layout) {
    max-width: none;
    margin-left: 0;
    padding: 0;
}


/* --- Settings strip (horizontal bar) --- */
.settings-strip {
    display: flex;
    justify-content: center;
    margin-top: -0.25rem;
    padding: 0 0 0.5rem;
}

.settings-strip-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--bg-surface);
    border: 1px solid rgba(245, 132, 59, 0.3);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 0.375rem 0.75rem;
}

.strip-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.strip-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    flex-shrink: 0;
}

/* Aspect ratio — compact visual buttons */
.strip-aspect-group {
    display: flex;
    gap: 4px;
}

.strip-aspect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.strip-aspect-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.strip-aspect-btn.active {
    border-color: #f5843b;
    color: #f5843b;
    background: rgba(245, 132, 59, 0.08);
}

.aspect-visual {
    border: 2px solid currentColor;
    border-radius: 3px;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.strip-aspect-btn:hover .aspect-visual {
    opacity: 0.7;
}

.strip-aspect-btn.active .aspect-visual {
    opacity: 1;
    background: rgba(245, 132, 59, 0.15);
}

.aspect-visual-portrait {
    width: 14px;
    height: 22px;
}

.aspect-visual-square {
    width: 20px;
    height: 20px;
}

.aspect-visual-landscape {
    width: 26px;
    height: 16px;
}

/* Quality — pill buttons with dot indicators */
.strip-quality-group {
    display: flex;
    gap: 4px;
}

.strip-quality-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: none;
    color: var(--text-dim);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.strip-quality-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.strip-quality-btn.active {
    border-color: #f5843b;
    color: #f5843b;
    background: rgba(245, 132, 59, 0.08);
}

.strip-quality-dots {
    display: flex;
    gap: 2px;
}

.qdot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0.3;
    transition: all 0.15s ease;
}

.qdot.on {
    opacity: 0.6;
    background: currentColor;
}

.strip-quality-btn.active .qdot.on {
    opacity: 1;
}

.strip-quality-btn.active .qdot:not(.on) {
    opacity: 0.25;
}

.strip-quality-label {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Model select — compact */
.strip-select {
    padding: 0.3125rem 1.75rem 0.3125rem 0.5rem;
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235c6170' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.strip-select:focus {
    outline: none;
    border-color: #f5843b;
}

.strip-select option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* Cost badge — pushed to end */
.strip-cost {
    margin-left: auto;
    font-size: 0.8125rem;
    color: #FFD93D;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(255, 217, 61, 0.1);
    border: 1px solid rgba(255, 217, 61, 0.2);
    border-radius: 8px;
    padding: 0.25rem 0.625rem;
}

.strip-cost-value {
    font-weight: 700;
    color: #FFD93D;
}

/* Gallery area */
.home-gallery {
    padding: 0 0 120px;
    min-width: 0;
}

.gallery-title {
    margin-top: 1.125rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


@media (max-width: 1024px) {
    .settings-strip {
        display: none;
    }

}

@media (max-width: 768px) {
    .home-layout {
        margin-left: auto;
        padding: 0 1rem;
    }

    .home-gallery {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

}

/* === Tables === */

.table-hover-row {
    transition: background-color 0.15s ease;
}

.table-hover-row:hover {
    background-color: rgba(245, 132, 59, 0.06) !important;
}

/* === Utility === */

.text-muted {
    color: var(--text-dim) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }

/* === Reference Images === */

.ref-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.ref-image-thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background-color: var(--bg-elevated);
    aspect-ratio: 1;
}

.ref-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ref-image-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--text-dim);
    color: var(--danger);
    cursor: pointer;
    padding: 3px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ref-image-thumb:hover .ref-image-delete {
    opacity: 1;
}

.ref-image-delete:hover {
    background: rgba(239, 68, 68, 0.25);
}

.ref-image-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 6px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    font-size: 0.625rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-image-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px dashed var(--text-dim);
    background-color: transparent;
    color: var(--text-dim);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ref-image-upload-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-secondary);
    background-color: var(--bg-elevated);
}

/* Mini thumbnails on model cards */
.ref-images-mini {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.ref-image-mini {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.ref-image-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--border);
    color: var(--text-dim);
    font-size: 0.6875rem;
    font-weight: 600;
}

/* === Balance Display === */

.topbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.topbar-icon-btn:hover {
    border-color: #f5843b;
    color: #f5843b;
    background: rgba(245, 132, 59, 0.08);
}

.balance-widget {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff9a1f, #ffb347);
    border: none;
    color: #1a1c22;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(255, 154, 31, 0.4), 0 0 4px rgba(255, 179, 71, 0.3);
    position: relative;
}

.balance-widget:hover {
    background: linear-gradient(135deg, #ffb347, #ffc870);
    box-shadow: 0 0 24px rgba(255, 154, 31, 0.6), 0 0 8px rgba(255, 179, 71, 0.4);
    transform: translateY(-1px);
    color: #1a1c22;
}

.balance-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
}

/* Orange currency icon */
.orange-icon {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.15em;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.orange-icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.balance-amount {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1a1c22;
}

.balance-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    color: #1a1c22;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    margin-left: 0.15rem;
}

.balance-widget:hover .balance-plus {
    background: rgba(0, 0, 0, 0.3);
}

/* === Profile Page === */

.prof-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.prof-top {
    padding: 1.25rem 1.5rem;
}

.prof-identity {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.prof-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.prof-avatar-empty {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    flex-shrink: 0;
}

.prof-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.prof-sub {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 2px;
}

.prof-stats-row {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border);
}

.prof-stat {
    flex: 1;
    padding: 1rem 1.25rem;
    text-align: center;
}

.prof-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    line-height: 1;
    margin-bottom: 0.375rem;
}

.prof-stat-lbl {
    font-size: 0.6875rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.prof-stat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.prof-stat-sep {
    width: 1px;
    height: 36px;
    background: var(--border);
    flex-shrink: 0;
}

/* Section */
.prof-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.18);
    font-size: 0.8125rem;
    color: #b0956a;
    line-height: 1.5;
}

.prof-notice svg {
    flex-shrink: 0;
    color: #f59e0b;
}

.prof-section {
    margin-bottom: 2rem;
}

.prof-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.prof-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.prof-section-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.125rem 0.5rem;
}

/* History list */
.prof-history {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.prof-history-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 72px;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 1rem;
    background: var(--bg-surface);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.prof-history-item:hover {
    background: var(--bg-surface);
}

.prof-history-item:hover .prof-history-reuse {
    opacity: 1;
}

.prof-history-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.prof-history-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prof-history-no-img {
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
}

.prof-history-body {
    flex: 1;
    min-width: 0;
}

.prof-history-prompt {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prof-history-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-dim);
    margin-top: 0.25rem;
}

.prof-history-meta span {
    white-space: nowrap;
}

.prof-history-fail-badge {
    color: var(--danger);
    font-weight: 600;
}

.prof-history-failed {
    opacity: 0.5;
}

.prof-history-reuse {
    opacity: 0;
    color: var(--text-dim);
    flex-shrink: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.prof-history-item:hover .prof-history-reuse {
    color: #f5843b;
}

/* Empty state */
.prof-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.prof-empty svg {
    margin-bottom: 0.75rem;
}

.prof-empty p {
    font-size: 0.8125rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .prof-stats-row {
        flex-direction: column;
    }

    .prof-stat-sep {
        width: 100%;
        height: 1px;
    }

    .prof-stat {
        padding: 0.75rem 1rem;
    }

    .prof-history-thumb {
        width: 40px;
        height: 40px;
    }

    .prof-history-meta {
        flex-wrap: wrap;
    }
}

/* === Toggle Group (shared) === */

.settings-toggle-group {
    display: flex;
    gap: 2px;
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 3px;
}

.settings-toggle {
    flex: 1;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.settings-toggle:hover {
    color: var(--text-primary);
}

.settings-toggle.active {
    background: #f5843b;
    color: #fff;
    box-shadow: 0 1px 4px rgba(245, 132, 59, 0.3);
}

/* === Create Page === */

.create-form {
    max-width: 640px;
    margin: 0 auto;
    padding-top: 1rem;
}

.create-form h2 {
    margin-bottom: 1.5rem;
}

.create-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.create-option {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.create-cost {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.create-cost-amount {
    color: #FFD93D;
    font-weight: 600;
}

.create-cost-balance {
    color: var(--text-dim);
    font-size: 0.8125rem;
}

.create-actions {
    display: flex;
    gap: 0.75rem;
}

/* Progress */
.create-progress {
    max-width: 480px;
    margin: 4rem auto;
    text-align: center;
}

.create-progress-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.create-progress-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.create-progress-bar-wrap {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.create-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #f5843b, #f79650);
    border-radius: 2px;
    transition: width 0.15s linear;
}

.create-progress-hint {
    font-size: 0.8125rem;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}

.create-progress-prompt {
    font-size: 0.8125rem;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--border);
    text-align: left;
    line-height: 1.5;
}

/* Result */
.create-result {
    max-width: 700px;
    margin: 0 auto;
}

.create-result-image-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.create-result-image {
    width: 100%;
    display: block;
}

.create-result-info {
    padding: 0 0.25rem;
}

.create-result-prompt {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.create-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: 1.25rem;
}

.create-result-actions {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* Low balance warning on Create page */
.create-low-balance {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--danger);
    padding: 0.625rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 8px;
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .create-options {
        grid-template-columns: 1fr;
    }
}

/* === Skeleton Generation Cards === */

.masonry-skeleton {
    cursor: default;
    border: 1px solid #f5843b;
}

.masonry-skeleton:hover {
    border-color: #f5843b;
    box-shadow: none;
    transform: none;
}

.skeleton-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #22242c 0%, #1a1c22 50%, #22242c 100%);
    position: relative;
    height: 100%;
}

.skeleton-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 132, 59, 0.04), transparent);
    animation: skeletonShimmer 1.5s infinite;
    pointer-events: none;
}

@keyframes skeletonShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.skeleton-status {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 500;
}

/* Failed skeleton */
.masonry-skeleton-failed .skeleton-inner {
    background: linear-gradient(135deg, #1a1c22 0%, #1a1c22 100%);
}

.masonry-skeleton-failed .skeleton-shimmer {
    display: none;
}

.skeleton-fail-icon { color: var(--danger); }
.skeleton-fail-text { color: var(--danger); font-size: 0.8125rem; font-weight: 500; }
.skeleton-refund { color: #4ade80; font-size: 0.75rem; }

.masonry-skeleton-failed {
    border-color: #ef4444;
}

.skeleton-progress-bar {
    width: 60%;
    max-width: 120px;
    height: 5px;
    background: rgba(245, 132, 59, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.skeleton-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f5843b, #ffad66);
    border-radius: 3px;
    transition: width 0.15s linear;
}

.skeleton-progress-pct {
    font-size: 0.6875rem;
    color: rgba(245, 132, 59, 0.8);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.skeleton-elapsed {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.35);
    font-variant-numeric: tabular-nums;
}

.skeleton-slow-warning {
    font-size: 0.625rem;
    color: #facc15;
    margin-top: 0.5rem;
    text-align: center;
    line-height: 1.4;
    max-width: 200px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Error toast */
.gen-toast {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    animation: cardIn 0.3s ease;
}

.gen-toast-error {
    background: rgba(239, 107, 107, 0.1);
    border: 1px solid rgba(239, 107, 107, 0.2);
    color: var(--danger);
}

.gen-toast-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0 0.25rem;
    opacity: 0.6;
}

.gen-toast-close:hover { opacity: 1; }

/* Lightbox */

.lightbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fadeIn 0.15s ease;
}

.lightbox-backdrop img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 6px;
    cursor: default;
}

.lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: default;
    animation: lightboxZoomIn 0.25s ease;
}

@keyframes lightboxZoomIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox-content img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
    cursor: zoom-in;
    transition: transform 0.25s ease;
}

.lightbox-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--text-dim);
    font-size: 0.8125rem;
}

.lightbox-revised {
    color: #f5843b;
    cursor: help;
    border-bottom: 1px dashed rgba(245, 132, 59, 0.3);
}

.lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: var(--border);
    border: none;
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    transition: background 0.15s;
}

.lightbox-close:hover {
    background: var(--border-hover);
}

.lightbox-nav {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}

.lightbox-nav-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 50%;
    transition: all 0.15s ease;
    pointer-events: auto;
    backdrop-filter: blur(8px);
}

.lightbox-nav-btn:hover:not(:disabled) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.lightbox-nav-btn:disabled {
    opacity: 0.2;
    cursor: default;
}

.lightbox-image-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}

.lightbox-prompt-text {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.4;
    max-width: 85%;
    width: max-content;
    text-align: center;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    pointer-events: auto;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.15s;
}

.lightbox-image-wrapper:hover .lightbox-prompt-text {
    opacity: 1;
}

.lightbox-actions-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lightbox-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary, #b0b4bc);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.lightbox-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.lightbox-action-active {
    color: #f5843b;
    border-color: rgba(245, 132, 59, 0.3);
}

.lightbox-action-locked {
    opacity: 0.5;
}

.lightbox-action-locked:hover {
    background: rgba(245, 132, 59, 0.15);
    color: #f5843b;
    border-color: rgba(245, 132, 59, 0.3);
}

.lightbox-action-danger {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.2);
}

.lightbox-action-danger:hover {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.4);
}

.lightbox-zoomed {
    max-width: none;
    max-height: none;
}

.lightbox-img-zoomed {
    max-width: none !important;
    max-height: none !important;
    transform: scale(2);
    cursor: zoom-out !important;
    transition: transform 0.25s ease;
}


.scene-image-clickable {
    cursor: zoom-in;
}

/* === Scene Drop Zone & Upload === */

.scene-drop-zone {
    cursor: pointer;
    transition: all 0.15s ease;
}

.scene-drop-zone:hover {
    border-color: var(--text-dim);
    background-color: var(--bg-elevated);
}

.scene-drop-zone.drop-active {
    border-color: #f5843b;
    background-color: rgba(245, 132, 59, 0.06);
}

.scene-drop-zone.drop-active .scene-placeholder-text {
    color: #f5843b;
}

.scene-drop-zone.drop-active .scene-placeholder-text svg {
    opacity: 0.8;
}

.scene-image-container {
    position: relative;
}

.scene-image-remove {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--text-dim);
    color: var(--danger);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.scene-image-container:hover .scene-image-remove,
.scene-detail-image-wrap:hover .scene-image-remove {
    opacity: 1;
}

.scene-image-remove:hover {
    background: rgba(239, 68, 68, 0.25);
}

.scene-drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(245, 132, 59, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    margin: 0.75rem 0.75rem 0;
    pointer-events: none;
}

.scene-detail-image-wrap {
    position: relative;
}

.scene-detail-image-wrap .scene-drop-overlay {
    margin: 0;
    border-radius: 14px 14px 0 0;
}

/* === Prompt Workshop === */

.workshop-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
    height: calc(100vh - 160px);
    min-height: 400px;
}

.workshop-scene-list {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-y: auto;
    padding: 0.5rem;
}

.workshop-scene-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-left: 3px solid transparent;
    margin-bottom: 2px;
}

.workshop-scene-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.workshop-scene-item.active {
    background: rgba(245, 132, 59, 0.08);
    border-left-color: #f5843b;
}

.workshop-scene-item.regenerating {
    opacity: 0.6;
}

.workshop-scene-number {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.workshop-scene-item.active .workshop-scene-number {
    background: rgba(245, 132, 59, 0.2);
    color: #f5843b;
}

.workshop-scene-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.workshop-scene-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.workshop-scene-prompt-preview {
    font-size: 0.6875rem;
    color: var(--text-dim);
    margin-top: 0.25rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workshop-status-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 0.5rem;
}

.workshop-status-dot.has-prompt {
    background: #22c55e;
}

.workshop-status-dot.empty {
    background: var(--border-hover);
}

.workshop-detail {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.workshop-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workshop-detail-header h3 {
    margin: 0;
}

.workshop-description-box {
    background-color: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-height: 180px;
    overflow-y: auto;
    white-space: pre-wrap;
    margin-top: 0.375rem;
}

.workshop-prompt-textarea {
    margin-top: 0.375rem;
    min-height: 200px;
    flex: 1;
    resize: vertical;
}

.workshop-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
    .workshop-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .workshop-scene-list {
        max-height: 250px;
    }

    .workshop-detail {
        min-height: 400px;
    }
}

/* === What If? Generator === */

.whatif-container {
}

.whatif-premise-section {
    margin-bottom: 1.5rem;
}

.whatif-premise-input-row {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.whatif-premise-input {
    flex: 1;
    font-size: 1rem;
}

.whatif-premise-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.whatif-premise-chip {
    padding: 0.4rem 0.875rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.whatif-premise-chip:hover {
    background: var(--bg-hover);
    border-color: #f5843b;
    color: var(--text-primary);
}

.whatif-controls {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.whatif-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.whatif-control-group .form-label {
    margin-bottom: 0;
}

.whatif-select {
    width: 240px;
}

.whatif-length-options {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.whatif-length-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-surface);
    border: none;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.whatif-length-btn:last-child {
    border-right: none;
}

.whatif-length-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.whatif-length-btn.active {
    background: #f5843b;
    color: #fff;
}

/* Custom Prompt */

.whatif-custom-prompt-textarea {
    min-height: 48px;
    resize: vertical;
    margin-top: 0.5rem;
}

/* Chain */

.whatif-chain {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 1rem;
}

.whatif-line {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.875rem;
    background: var(--bg-surface);
    border-radius: 8px;
    transition: background 0.15s ease;
    position: relative;
}

.whatif-line:first-child {
    border-radius: 12px 12px 8px 8px;
}

.whatif-line:last-child {
    border-radius: 8px 8px 12px 12px;
}

.whatif-line:only-child {
    border-radius: 12px;
}

.whatif-line:hover {
    background: var(--bg-surface);
}

.whatif-line-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--border);
    color: var(--text-dim);
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    margin-right: 0.375rem;
}

.whatif-line-number:hover {
    background: var(--border-hover);
    color: var(--text-secondary);
}

.whatif-line-number.completed {
    background: #1a3025;
    color: #4ade80;
}

.whatif-line.completed .whatif-line-text {
    color: #4ade80;
    text-decoration: line-through;
    text-decoration-color: #4ade8060;
}

.whatif-line-text {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    cursor: text;
    user-select: text;
}

.whatif-line-edit-input {
    flex: 1;
    background: var(--bg-base);
    border: 1px solid #f5843b;
    border-radius: 6px;
    padding: 0.375rem 0.625rem;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
}

.whatif-line-actions {
    display: flex;
    gap: 0.125rem;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.whatif-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.whatif-action-btn:hover {
    background: var(--border);
    color: var(--text-primary);
}

.whatif-action-hint:hover {
    background: rgba(245, 132, 59, 0.15);
    color: #f5843b;
}

.whatif-action-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.whatif-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
    cursor: grab;
    color: var(--border-hover);
    transition: color 0.15s ease;
}

.whatif-drag-handle:hover {
    color: var(--text-muted);
}

.whatif-drag-handle:active {
    cursor: grabbing;
}

.whatif-line-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: transform 0.15s ease;
}

.whatif-line-wrapper.drag-over {
    border-top: 2px solid #f5843b;
    margin-top: -2px;
}

.whatif-hint-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem 0.625rem;
    padding-left: calc(0.875rem + 28px + 0.75rem);
    background: var(--bg-sunken);
    border-radius: 0 0 8px 8px;
    margin-top: -2px;
    animation: whatif-hint-in 0.15s ease;
}

@keyframes whatif-hint-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.whatif-line-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
    border-radius: 3px;
}

.whatif-line-expand:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.whatif-line-expand svg {
    transition: transform 0.15s ease;
}

.whatif-line-expand.open svg {
    transform: rotate(180deg);
}

.whatif-line-expand.has-prompt {
    color: #f5843b;
}

.whatif-import-panel {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.whatif-import-textarea {
    font-size: 0.8125rem !important;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

.whatif-import-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.whatif-import-count {
    color: var(--text-dim);
    font-size: 0.75rem;
    margin-right: auto;
}

.whatif-imgprompt-panel {
    padding: 0.625rem 0.875rem 0.75rem;
    padding-left: calc(0.875rem + 20px + 0.75rem + 28px + 0.75rem);
    background: rgba(245, 132, 59, 0.03);
    border-top: 1px solid rgba(245, 132, 59, 0.08);
    border-radius: 0 0 8px 8px;
    margin-top: -2px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: whatif-hint-in 0.15s ease;
}

.whatif-preprompt-textarea {
    font-size: 0.8125rem !important;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    resize: vertical;
    min-height: 2.5rem;
}

.whatif-imgprompt-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.whatif-imgprompt-suggestion {
    flex: 1;
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.625rem !important;
}

.whatif-imgprompt-result {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: rgba(245, 132, 59, 0.06);
    border: 1px solid rgba(245, 132, 59, 0.1);
    border-radius: 6px;
}

.whatif-imgprompt-text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    font-style: italic;
}

.whatif-imgprompt-result .whatif-action-btn {
    flex-shrink: 0;
    margin-top: 1px;
}

.whatif-hint-input {
    flex: 1;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    min-height: unset;
}

/* Regenerating shimmer */
.whatif-line.regenerating {
    position: relative;
    overflow: hidden;
}

.whatif-line.regenerating::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 132, 59, 0.06), transparent);
    animation: whatif-shimmer 1.5s infinite;
}

@keyframes whatif-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.whatif-line.regenerating .whatif-line-text {
    opacity: 0.5;
}

/* Bottom bar */

.whatif-line-checkbox {
    width: 14px;
    height: 14px;
    accent-color: #f5843b;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.whatif-line.selected {
    background: rgba(245, 132, 59, 0.08);
    border-color: rgba(245, 132, 59, 0.2);
}

.whatif-line.selecting {
    cursor: pointer;
}

.whatif-line.selecting:hover {
    background: rgba(245, 132, 59, 0.05);
}

.whatif-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.whatif-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.whatif-line-count {
    color: var(--text-dim);
    font-size: 0.8125rem;
}

.whatif-selection-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--bg-surface);
    border-top: 1px solid #f5843b;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    z-index: 100;
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.whatif-selection-count {
    color: #f5843b;
    font-size: 0.8125rem;
    font-weight: 600;
}

.whatif-selection-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Empty state */

.whatif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-dim);
}

.whatif-empty p {
    color: var(--text-dim);
    font-size: 0.9375rem;
}

/* Error */

.whatif-error {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: var(--danger);
    font-size: 0.875rem;
}

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-secondary);
}
.error-page h2 { color: var(--danger); margin-bottom: 0.5rem; }
.error-page .error-detail { color: #888; font-size: 0.875rem; margin-bottom: 1.5rem; font-family: monospace; }

/* --- What If Card Placeholder --- */
.whatif-card-placeholder {
    aspect-ratio: 16 / 9;
    background-color: var(--bg-elevated);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--border-hover);
    font-size: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.whatif-card-placeholder svg {
    opacity: 0.3;
}

.whatif-editing-badge {
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: rgba(245, 132, 59, 0.15);
    color: #f5843b;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-accent {
    background: #10b981;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s ease;
}

.btn-accent:hover {
    background: #0d9668;
}

.btn-accent:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .whatif-premise-input-row {
        flex-direction: column;
    }

    .whatif-premise-input-row .btn {
        width: 100%;
    }

    .whatif-controls {
        flex-direction: column;
        gap: 1rem;
    }

    .whatif-select {
        width: 100%;
    }

}

/* ========================================
   SEO Generator Page
   ======================================== */

.seo-container {
}


.seo-input-section {
    margin-bottom: 2rem;
}

.seo-script-textarea {
    min-height: 160px;
    resize: vertical;
    margin-bottom: 1rem;
}

.seo-input-controls {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.seo-control-group {
    flex: 1;
}

.seo-select {
    width: 100%;
}

.seo-generate-btn {
    white-space: nowrap;
    height: 42px;
}

/* Output Cards */
.seo-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.seo-output-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}

.seo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.seo-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}

.seo-card-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.seo-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-sunken);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.seo-copy-btn:hover {
    color: var(--text-primary);
    border-color: #f5843b;
    background: rgba(245, 132, 59, 0.08);
}

.seo-title-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.seo-description-textarea {
    min-height: 120px;
    resize: vertical;
    font-size: 0.875rem;
    line-height: 1.7;
}

/* Platform Toggle */
.seo-platform-toggle {
    display: flex;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.seo-platform-btn {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.seo-platform-btn:hover {
    color: var(--text-secondary);
}

.seo-platform-btn.active {
    background: #f5843b;
    color: #fff;
}

/* Tags Display */
.seo-tags-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    min-height: 32px;
}

.seo-tags-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.seo-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: rgba(245, 132, 59, 0.1);
    border: 1px solid rgba(245, 132, 59, 0.2);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: #7b9df7;
    white-space: nowrap;
}

/* Empty State */
.seo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
}

.seo-empty p {
    color: var(--text-dim);
    font-size: 0.9375rem;
}

/* Responsive */
@media (max-width: 640px) {
    .seo-input-controls {
        flex-direction: column;
    }

    .seo-generate-btn {
        width: 100%;
    }

    .seo-card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .seo-card-header-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* ========================================
   Social Page — Tabs + Comment Generator
   ======================================== */

.social-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.social-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.social-tab:hover {
    color: var(--text-secondary);
}

.social-tab.active {
    color: #f5843b;
    border-bottom-color: #f5843b;
}

/* Comment generator layout */
.comment-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.comment-form-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}

.comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.comment-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.comment-form-full {
    grid-column: 1 / -1;
}

.comment-avatar-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comment-avatar-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.comment-avatar-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-sunken);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.comment-avatar-clear:hover {
    color: #ef4444;
    border-color: #ef4444;
}

.comment-avatar-input {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.comment-avatar-input::file-selector-button {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-sunken);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    margin-right: 0.5rem;
}

.comment-download-btn {
    white-space: nowrap;
    width: 100%;
    height: 42px;
}

.comment-preview-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Comment live preview */
.comment-preview-wrap {
    padding: 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.comment-preview-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.comment-preview-inner {
    display: flex;
    gap: 12px;
}

.comment-preview-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #e8eaed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.comment-preview-body {
    flex: 1;
    min-width: 0;
}

.comment-preview-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 4px;
}

.comment-preview-username {
    font-weight: 500;
    font-size: 13px;
    color: #030303;
}

.comment-preview-time {
    font-size: 13px;
    color: #606060;
}

.comment-preview-text {
    font-size: 14px;
    line-height: 20px;
    color: #030303;
    word-break: break-word;
    white-space: pre-wrap;
}

.comment-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.comment-preview-likes {
    font-weight: 500;
    font-size: 12px;
    color: #606060;
    margin-right: 8px;
}

.comment-preview-reply {
    font-weight: 500;
    font-size: 12px;
    color: #606060;
    margin-left: 8px;
}

@media (max-width: 768px) {
    /* Tabs — full width, equal size */
    .social-tabs {
        margin-bottom: 1rem;
    }

    .social-tab {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 0.5rem;
        font-size: 0.8125rem;
    }

    .social-tab svg {
        display: none;
    }

    /* Comment layout — single column, preview below form */
    .comment-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .comment-form-card {
        padding: 1rem;
    }

    .comment-form {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .comment-form-full {
        grid-column: 1;
    }

    /* Avatar upload — wrap on small screens */
    .comment-avatar-upload {
        flex-wrap: wrap;
    }

    /* Download button */
    .comment-download-btn {
        height: 44px;
        font-size: 0.9375rem;
    }

    /* Preview — less padding, card fits screen */
    .comment-preview-wrap {
        padding: 0.75rem;
    }

    .comment-preview-card {
        width: 100% !important;
    }
}

/* ========================================
   Login Page
   ======================================== */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-base);
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
}

.login-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
}

.login-brand {
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--text-dim);
    font-size: 0.9375rem;
    margin-bottom: 1.75rem;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger);
    font-size: 0.8125rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.login-discord-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: #5865F2;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.login-discord-btn:hover {
    background: #4752c4;
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.4);
    color: #fff;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: var(--text-dim);
    font-size: 0.8125rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.login-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1.5rem;
    background: #fff;
    color: #3c4043;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.login-google-btn:hover {
    background: #f7f8f8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    color: #3c4043;
}

.login-admin-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.unauthorized-icon {
    margin-bottom: 1rem;
    opacity: 0.9;
}

.unauthorized-text {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ========================================
   Account Avatar & Sign Out
   ======================================== */

.account-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 0.375rem 0;
}

.dropdown-item-danger {
    color: var(--danger) !important;
}

.dropdown-item-danger:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger) !important;
}

/* ===== Explore Page ===== */

.explore-tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-elevated);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.5rem;
    width: fit-content;
}

.explore-tab {
    padding: 0.5rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.explore-tab:hover {
    color: var(--text-secondary);
}

.explore-tab.active {
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 132, 59, 0.25);
    transform: scale(1.02);
}

.masonry-like {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4px 10px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
    opacity: 0;
}

.masonry-item:hover .masonry-like {
    opacity: 1;
}

.masonry-like:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

.masonry-like.liked {
    color: #ef4444;
    opacity: 1;
}

.masonry-like.liked svg {
    color: #ef4444;
}

/* Hover action buttons on masonry cards */
.masonry-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.masonry-item:hover .masonry-actions {
    opacity: 1;
}

.masonry-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.masonry-action-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

.masonry-action-active {
    color: #f5843b;
}

.masonry-action-danger:hover {
    background: rgba(239, 68, 68, 0.6);
    color: #fff;
}

.masonry-action-locked {
    opacity: 0.5;
}

.masonry-action-locked:hover {
    background: rgba(245, 132, 59, 0.3);
    color: #f5843b;
}

/* === Multi-Select Mode === */

.masonry-select-check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.15s ease;
    cursor: pointer;
}

.masonry-select-check:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.6);
}

.masonry-select-check-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.masonry-select-check-active:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

.masonry-item-selected {
    border-color: rgba(245, 132, 59, 0.6) !important;
    box-shadow: 0 0 0 2px rgba(245, 132, 59, 0.25), 0 4px 16px rgba(245, 132, 59, 0.15) !important;
}

.masonry-item-selected img {
    opacity: 0.85;
}

/* Floating select action bar */
.gallery-select-bar {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    animation: selectBarIn 0.2s ease-out;
}

@keyframes selectBarIn {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.gallery-select-bar-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

.gallery-select-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gallery-select-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.gallery-select-bar-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.1);
}

.gallery-select-bar-collection:hover {
    border-color: rgba(245, 132, 59, 0.4);
    color: var(--accent);
}

.gallery-select-bar-delete:hover {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.gallery-select-bar-cancel {
    border-color: transparent;
    background: transparent;
}

.gallery-select-bar-cancel:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

/* Hide prompt bar when multi-select mode is active */
body.multi-select-active .prompt-bar-group {
    display: none !important;
}

.share-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 1rem;
    border: 1px solid #e8853b;
    background: rgba(232, 133, 59, 0.12);
    color: #e8853b;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.share-explore-btn:hover {
    background: rgba(232, 133, 59, 0.2);
    box-shadow: 0 4px 16px rgba(245, 132, 59, 0.2);
    transform: translateY(-1px);
}

.detail-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 1rem;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.detail-like-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.detail-like-btn.liked {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #ef4444;
}

/* === Skeleton Gallery Loading === */

.skeleton-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.skeleton-card {
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    position: relative;
}

.skeleton-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #22242c 0%, #1a1c22 50%, #22242c 100%);
}

.skeleton-card-text {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.skeleton-card-line {
    height: 10px;
    border-radius: 4px;
    background: var(--border);
}

.skeleton-card-line:last-child {
    width: 60%;
}

.skeleton-card .skeleton-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 132, 59, 0.04), transparent);
    animation: skeletonShimmer 1.5s infinite;
    pointer-events: none;
}

.skeleton-card:nth-child(1) .skeleton-shimmer { animation-delay: 0s; }
.skeleton-card:nth-child(2) .skeleton-shimmer { animation-delay: 0.15s; }
.skeleton-card:nth-child(3) .skeleton-shimmer { animation-delay: 0.3s; }
.skeleton-card:nth-child(4) .skeleton-shimmer { animation-delay: 0.45s; }
.skeleton-card:nth-child(5) .skeleton-shimmer { animation-delay: 0.6s; }
.skeleton-card:nth-child(6) .skeleton-shimmer { animation-delay: 0.75s; }
.skeleton-card:nth-child(7) .skeleton-shimmer { animation-delay: 0.9s; }
.skeleton-card:nth-child(8) .skeleton-shimmer { animation-delay: 1.05s; }

@media (max-width: 1200px) {
    .skeleton-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .skeleton-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .skeleton-gallery-grid { grid-template-columns: 1fr; }
}

/* === End of Gallery === */

.gallery-end {
    text-align: center;
    padding: 2rem 0 3rem;
    color: var(--text-dim);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* === Error Page === */

.error-page {
    text-align: center;
    padding: 6rem 1.5rem 4rem;
    max-width: 480px;
    margin: 0 auto;
}

.error-page-icon {
    color: var(--danger);
    margin-bottom: 1.5rem;
}

.error-page h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.error-page p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.error-page-code {
    display: block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    word-break: break-all;
    margin-bottom: 1.5rem;
}

/* === 404 Not Found Page === */

.not-found-page {
    text-align: center;
    padding: 6rem 1.5rem 4rem;
    max-width: 480px;
    margin: 0 auto;
}

.not-found-code {
    font-size: 5rem;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.04em;
    color: var(--text-dim);
    line-height: 1;
    margin-bottom: 1rem;
}

.not-found-page h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.not-found-page p {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.not-found-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* === Regenerate Popup === */

.regen-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 1100;
}

.regen-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 20px;
    z-index: 1101;
    width: 820px;
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    animation: regenPopupIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    scrollbar-width: thin;
    scrollbar-color: #292c32 transparent;
}

@keyframes regenPopupIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.regen-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    background: rgba(10, 9, 8, 0.85);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.regen-popup-close:hover {
    color: var(--text-primary);
    background: var(--border);
}

/* Layout: preview left, controls right */
.regen-popup-layout {
    display: flex;
    min-height: 480px;
}

.regen-popup-preview {
    flex-shrink: 0;
    width: 300px;
    background: var(--bg-base);
    border-radius: 20px 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.regen-popup-preview img {
    width: 100%;
    max-height: 100%;
    border-radius: 12px;
    object-fit: contain;
}

.regen-popup-controls {
    flex: 1;
    padding: 2rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.regen-popup-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
}

/* Sections */
.regen-section {
    margin-bottom: 1.375rem;
}

.regen-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.625rem;
}

/* Inputs */
.regen-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.regen-input::placeholder {
    color: var(--text-dim);
}

.regen-input:focus {
    outline: none;
    border-color: #f5843b;
    box-shadow: 0 0 0 3px rgba(245, 132, 59, 0.1);
}

.regen-textarea {
    resize: vertical;
    min-height: 3.5rem;
    line-height: 1.5;
}

.regen-camera-input {
    margin-top: 0.5rem;
}

/* Radio buttons (pill style) */
.regen-radio-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.regen-radio {
    padding: 0.4375rem 1rem;
    font-size: 0.8125rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.regen-radio:hover {
    border-color: #f5843b;
    color: var(--text-primary);
}

.regen-radio.active {
    background: rgba(245, 132, 59, 0.15);
    border-color: #f5843b;
    color: #f5843b;
}

/* Pills */
.regen-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.regen-pill {
    padding: 0.4375rem 1rem;
    font-size: 0.8125rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.regen-pill:hover {
    border-color: #f5843b;
    color: var(--text-primary);
}

.regen-pill.active {
    background: rgba(245, 132, 59, 0.15);
    border-color: #f5843b;
    color: #f5843b;
}

/* Output settings row */
.regen-settings-row {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.regen-setting {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.regen-setting-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.regen-select {
    padding: 0.4375rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s;
}

.regen-select:focus {
    outline: none;
    border-color: #f5843b;
}

/* Generate button */
.regen-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8125rem 1.25rem;
    background: linear-gradient(135deg, #f5843b 0%, #e86a1e 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    margin-top: auto;
    box-shadow: 0 4px 12px rgba(245, 132, 59, 0.25);
}

.regen-generate-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 132, 59, 0.35);
}

.regen-generate-btn:active {
    transform: translateY(0);
}

/* Responsive: stack on mobile */
@media (max-width: 700px) {
    .regen-popup-layout {
        flex-direction: column;
        min-height: auto;
    }

    .regen-popup-preview {
        width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 1.25rem;
        max-height: 220px;
    }

    .regen-popup-preview img {
        max-height: 200px;
        width: auto;
    }

    .regen-popup-controls {
        padding: 1.5rem;
    }
}

/* === Settings Page === */

.settings-page {
}

/* === Console Page === */

.console-page {
}

.console-log-container {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    scrollbar-width: thin;
    scrollbar-color: #292c32 transparent;
}

.console-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--text-dim);
    text-align: center;
}

.console-empty p {
    margin: 0;
    font-family: inherit;
    font-size: 0.875rem;
}

.console-line {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.1s ease;
}

.console-line:hover {
    background: rgba(255, 255, 255, 0.03);
}

.log-timestamp {
    color: var(--text-dim);
    flex-shrink: 0;
    font-size: 0.75rem;
}

.log-source {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 0.75rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-level-badge {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.log-badge-info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.log-badge-warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.log-badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.log-badge-debug {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.log-message {
    color: var(--text-secondary);
    word-break: break-word;
    min-width: 0;
}

.log-error .log-message {
    color: #f87171;
}

.log-warning .log-message {
    color: #fbbf24;
}

/* ========== STORY EDITOR ========== */

.story-editor {
    max-width: 960px;
    margin: 0 auto;
}


/* Step Navigation */
.story-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.story-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.story-step:hover {
    border-color: var(--border-hover);
    color: var(--text-muted);
}

.story-step.active {
    border-color: #f5843b;
    color: var(--text-primary);
    background: rgba(245, 132, 59, 0.08);
}

.story-step.completed {
    border-color: #34d399;
    color: #34d399;
}

.story-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.story-step.active .story-step-num {
    background: #f5843b;
    color: #fff;
}

.story-step.completed .story-step-num {
    background: #34d399;
    color: var(--bg-base);
}

.story-step-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    min-width: 20px;
}

.story-step-line.completed {
    background: #34d399;
}

/* Section */
.story-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.story-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.story-section-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.story-section-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.story-section-hint {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin: 0;
}

.story-section-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Controls Row */
.story-controls-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.story-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 140px;
}

/* Environment Section */
.story-env-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
}

.story-env-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.story-env-row textarea {
    flex: 1;
}

.story-env-preview-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.story-env-thumb {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.story-env-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

/* Characters Section */
.story-char-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
}

.story-char-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.story-char-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
}

.story-char-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.story-char-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

.story-char-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    color: var(--border-hover);
}

.story-char-fields {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.story-char-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s;
}

.story-char-remove:hover {
    color: #f87171;
}

.story-char-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
}

/* Scene List (Step 2) */
.story-scene-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.story-scene-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    position: relative;
}

.story-scene-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.story-scene-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.story-scene-remove {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s;
}

.story-scene-remove:hover {
    color: #f87171;
}

.story-scene-prompt-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}

.story-rewrite-hint {
    flex: 1;
    max-width: 300px;
}

.story-prompt-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Consistency Review */
.story-consistency-review {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
}

.story-review-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: pre-wrap;
    font-family: inherit;
    margin: 0.5rem 0 0;
    line-height: 1.6;
}

/* Step Navigation (prev/next) */
.story-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Step 3: Generate */
.story-generate-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.story-generate-status {
    color: #f5843b;
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

/* Gallery */
.story-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.story-gallery-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.story-gallery-item img {
    width: 100%;
    aspect-ratio: 9/16;
    object-fit: cover;
    cursor: pointer;
    image-rendering: pixelated;
    display: block;
    transition: opacity 0.15s;
}

.story-gallery-item img:hover {
    opacity: 0.85;
}

.story-gallery-label {
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.story-gallery-env .story-gallery-label {
    color: #34d399;
}

.story-gallery-char .story-gallery-label {
    color: #f59e0b;
}

.story-gallery-placeholder {
    width: 100%;
    aspect-ratio: 9/16;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-hover);
    font-size: 0.8rem;
    background: var(--bg-sunken);
}

.story-gallery-regen {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
}

/* Gallery voiceover caption */
.story-gallery-caption {
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
    border-top: 1px solid var(--border);
    max-height: 4.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Scene status badges */
.story-scene-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.badge-generating {
    background: rgba(245, 132, 59, 0.15);
    color: #f5843b;
}

.badge-done {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.badge-failed {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

/* Story card thumbnail on list page */
.story-card-thumb {
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.story-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

/* Lightbox */
.story-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.story-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
}

.story-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* Small form helpers */
.form-label-sm {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.form-control-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
}

.form-control-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

.btn-ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.15s;
}

.btn-ghost:hover {
    border-color: #f5843b;
    color: #f5843b;
}

.btn-ghost:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === UI Personality: Empty State Emoji === */

.empty-state-emoji {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    animation: emptyBounce 2s ease-in-out infinite;
}

@keyframes emptyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* === UI Personality: Orange Spending Particles (Task 6) === */

@keyframes orangeFloat {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--float-x, 10px), var(--float-y, -30px)) scale(0.5); }
}

.balance-glow-up {
    animation: balancePulseUp 0.5s ease;
}

.balance-glow-down {
    animation: balancePulseDown 0.5s ease;
}

@keyframes balancePulseUp {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); color: #4ade80; text-shadow: 0 0 12px rgba(74, 222, 128, 0.5); }
    100% { transform: scale(1); }
}

@keyframes balancePulseDown {
    0% { transform: scale(1); }
    20% { transform: scale(0.85); }
    50% { transform: scale(1.1); color: #f5843b; text-shadow: 0 0 12px rgba(245, 132, 59, 0.5); }
    100% { transform: scale(1); }
}

/* === UI Personality: Stronger Visual Hierarchy (Task 7) === */

/* Character card image scale on hover */
.character-card:hover .character-card-thumb img {
    transform: scale(1.05);
}

.character-card-thumb img {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Daily bonus banner */
.daily-bonus-banner {
    background: var(--accent-gradient-subtle);
    border: 1px solid rgba(245, 132, 59, 0.25);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    animation: bannerSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.daily-bonus-emoji {
    font-size: 1.5rem;
    animation: emptyBounce 2s ease-in-out infinite;
}

.daily-bonus-text {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.daily-bonus-text strong {
    color: #f5843b;
}

.daily-bonus-claim {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: none;
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.daily-bonus-claim:hover {
    box-shadow: 0 4px 16px rgba(245, 132, 59, 0.35);
    transform: translateY(-1px);
}

@keyframes bannerSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Orange Spinning Loader === */

.orange-loader {
    position: relative;
    width: 64px;
    height: 64px;
}

.orange-loader svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.orange-ring-track {
    fill: none;
    stroke: rgba(245, 132, 59, 0.12);
    stroke-width: 3;
}

.orange-ring-progress {
    fill: none;
    stroke: #f5843b;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 163.36;
    transition: stroke-dashoffset 0.5s ease;
}

.orange-ring-highlight {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 20 143.36;
    animation: orangeHighlightSpin 1.5s linear infinite;
}

@keyframes orangeHighlightSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* === Legal Pages === */

.legal-content {
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: 0.875rem;
}

.legal-content h2 {
    color: var(--text-primary);
    font-size: 1.125rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.legal-content h3 {
    color: var(--text-primary);
    font-size: 0.9375rem;
    margin-top: 1.25rem;
    margin-bottom: 0.375rem;
}

.legal-content p {
    margin-bottom: 0.75rem;
}

.legal-content ul {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.legal-content li {
    margin-bottom: 0.375rem;
}

.legal-updated {
    color: var(--text-dim);
    font-size: 0.8125rem;
    margin-bottom: 1.5rem;
}

.site-footer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    margin-top: auto;
    padding-top: 3rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
}

.site-footer a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s;
}

.site-footer a:hover {
    color: var(--text-secondary);
}

/* Section error boundary */
.section-error {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid #ef4444;
    border-radius: 12px;
    margin: 1rem 0;
}

.section-error-icon {
    color: #ef4444;
    flex-shrink: 0;
}

.section-error-body {
    flex: 1;
    min-width: 0;
}

.section-error-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.section-error-msg {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Home Hub: Quick Actions === */
.home-quick-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.home-quick-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(28, 25, 22, 0.8), rgba(15, 13, 11, 0.9));
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-quick-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.home-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(245, 132, 59, 0.12);
    color: #f5843b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-quick-icon-gold {
    background: rgba(245, 200, 66, 0.12);
    color: #f5c842;
}

.home-quick-icon-teal {
    background: rgba(93, 211, 158, 0.12);
    color: #5dd39e;
}

/* === Home Hub: Trending === */
.home-trending {
    margin-bottom: 1rem;
}

.home-trending-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.home-trending-header h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.home-trending-link {
    font-size: 0.8125rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.home-trending-link:hover {
    color: var(--accent-hover);
}

.home-trending-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    padding-bottom: 4px;
}

.home-trending-card {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    scroll-snap-align: start;
    border: 1px solid var(--border);
    transition: all 0.25s;
}

.home-trending-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.home-trending-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-trending-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 8px;
    background: linear-gradient(transparent, rgba(10, 9, 8, 0.8));
}

.home-trending-likes {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

/* === Home Hub: Section Header === */
.home-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.home-section-header h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.home-section-count {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 500;
}

/* Mobile: stack quick actions, narrower trending cards */
@media (max-width: 768px) {
    .home-quick-actions {
        gap: 0.5rem;
    }
    .home-quick-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
        gap: 0.375rem;
    }
    .home-quick-icon {
        width: 36px;
        height: 36px;
    }
    .home-trending-scroll {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .home-trending-card {
        height: 100px;
    }
}

/* === Phase 6: Animations & Micro-Interactions === */

/* 6A: Staggered masonry card entrance — only for new images */
.masonry-grid > .masonry-item.new-image {
    animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.masonry-grid > .masonry-item.new-image:nth-child(1) { animation-delay: 0.02s; }
.masonry-grid > .masonry-item.new-image:nth-child(2) { animation-delay: 0.06s; }
.masonry-grid > .masonry-item.new-image:nth-child(3) { animation-delay: 0.10s; }
.masonry-grid > .masonry-item.new-image:nth-child(4) { animation-delay: 0.14s; }
.masonry-grid > .masonry-item.new-image:nth-child(5) { animation-delay: 0.18s; }
.masonry-grid > .masonry-item.new-image:nth-child(6) { animation-delay: 0.22s; }

/* 6D: Quick actions card entrance */
.home-quick-actions > .home-quick-card {
    animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-quick-actions > .home-quick-card:nth-child(1) { animation-delay: 0.05s; }
.home-quick-actions > .home-quick-card:nth-child(2) { animation-delay: 0.12s; }
.home-quick-actions > .home-quick-card:nth-child(3) { animation-delay: 0.19s; }

/* 6E: Trending cards entrance */
.home-trending-scroll > .home-trending-card {
    animation: cardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-trending-scroll > .home-trending-card:nth-child(1) { animation-delay: 0.05s; }
.home-trending-scroll > .home-trending-card:nth-child(2) { animation-delay: 0.10s; }
.home-trending-scroll > .home-trending-card:nth-child(3) { animation-delay: 0.15s; }
.home-trending-scroll > .home-trending-card:nth-child(4) { animation-delay: 0.20s; }
.home-trending-scroll > .home-trending-card:nth-child(5) { animation-delay: 0.25s; }
.home-trending-scroll > .home-trending-card:nth-child(6) { animation-delay: 0.30s; }

/* === Gallery Tabs === */

.gallery-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.gallery-tab {
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gallery-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.gallery-tab-active {
    background: rgba(245, 132, 59, 0.12);
    border-color: rgba(245, 132, 59, 0.3);
    color: #f5843b;
}

.gallery-tab-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-left: 0.25rem;
}

.gallery-tab-back {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.25rem;
}

.gallery-tab-back:hover {
    color: var(--text-primary);
}

/* === Collections Grid === */

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.collection-card {
    position: relative;
    background: var(--bg-elevated, #1a1c22);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.collection-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.collection-card-cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.collection-card-empty {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface, #14151a);
    color: var(--text-dim);
}

.collection-card-info {
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.collection-card-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.collection-card-count {
    font-size: 0.6875rem;
    color: var(--text-dim);
}

.collection-card-new {
    border-style: dashed;
}

.collection-card-new:hover {
    border-color: #f5843b;
}

/* === Collection Picker Modal === */

.collection-picker-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    max-height: 70vh;
    background: var(--bg-elevated, #1a1c22);
    border: 1px solid var(--border);
    border-radius: 14px;
    z-index: 10001;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    animation: lightboxZoomIn 0.2s ease;
}

.collection-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.125rem 0.5rem;
}

.collection-picker-header h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.collection-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
    max-height: 300px;
}

.collection-picker-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s ease;
}

.collection-picker-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.collection-picker-item-active {
    background: rgba(245, 132, 59, 0.1);
    color: #f5843b;
}

.collection-picker-new {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border);
}

.collection-picker-input {
    flex: 1;
    padding: 0.4rem 0.625rem;
    background: var(--bg-surface, #14151a);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
}

.collection-picker-input:focus {
    border-color: var(--accent, #f5843b);
}

.collection-picker-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(245, 132, 59, 0.3);
    background: rgba(245, 132, 59, 0.1);
    color: #f5843b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.collection-picker-add:hover:not(:disabled) {
    background: rgba(245, 132, 59, 0.2);
}

.collection-picker-add:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === Onboarding Empty State === */

.onboarding-state {
    padding: 3rem 2rem;
}

.onboarding-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: 520px;
    margin: 0 auto;
}

.onboarding-preset-chip {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.onboarding-preset-chip:hover {
    border-color: #f5843b;
    color: #f5843b;
    background: rgba(245, 132, 59, 0.08);
}

/* === Tutorial Steps (anonymous users) === */

.tutorial-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 380px;
    margin: 1.25rem auto 1.5rem;
    text-align: left;
}

.tutorial-step {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.tutorial-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(245, 132, 59, 0.15);
    color: #f5843b;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutorial-step-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.25rem;
}

.tutorial-step-text strong {
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.tutorial-step-text span {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.tutorial-hint {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    opacity: 0.7;
}

/* === Onboarding Tutorial (anonymous) === */

.onboarding-tutorial {
    text-align: center;
    padding: 3rem 2rem 2rem;
    max-width: 420px;
    margin: 2rem auto 0;
}

/* === Sidebar Sign-in Button === */

.sidebar-signin-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.125rem;
    background: #5b7ff5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}

.sidebar-signin-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.sidebar-signin-btn:active {
    transform: translateY(0);
}

/* === Search Bar === */

.search-bar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 220px;
    padding: 0 0.625rem;
    height: 34px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.search-bar:focus-within {
    width: 300px;
    border-color: var(--accent, #f5843b);
    box-shadow: 0 0 0 2px rgba(245, 132, 59, 0.12);
    background: rgba(255, 255, 255, 0.08);
}

.search-bar-icon {
    flex-shrink: 0;
    color: var(--text-dim);
}

.search-bar-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    min-width: 0;
}

.search-bar-input::placeholder {
    color: var(--text-dim);
}

.search-bar-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    font-size: 0.875rem;
    line-height: 1;
    padding: 0;
    transition: all 0.12s ease;
}

.search-bar-clear:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
}

/* === Gallery Filters === */

.gallery-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filter-chip-wrap {
    position: relative;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 28px;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-chip:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.09);
}

.filter-chip-active {
    border-color: rgba(245, 132, 59, 0.4);
    background: rgba(245, 132, 59, 0.1);
    color: #f5843b;
}

.filter-chip-active:hover {
    border-color: rgba(245, 132, 59, 0.55);
    background: rgba(245, 132, 59, 0.15);
}

.filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 140px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    z-index: 110;
    box-shadow: var(--shadow-lg);
    animation: sidebarMenuIn 0.12s ease-out;
}

.filter-menu-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    border-radius: 7px;
    text-align: left;
    transition: all 0.12s ease;
}

.filter-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.filter-menu-item-active {
    color: #f5843b;
    background: rgba(245, 132, 59, 0.08);
}

.filter-clear-all {
    height: 28px;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s ease;
}

.filter-clear-all:hover {
    color: var(--text-primary);
}

/* === Collection Breadcrumb === */

.gallery-collection-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: rgba(245, 132, 59, 0.08);
    border: 1px solid rgba(245, 132, 59, 0.2);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.gallery-collection-breadcrumb svg {
    color: #f5843b;
    flex-shrink: 0;
}

.gallery-collection-breadcrumb span {
    color: var(--text-primary);
}

.gallery-breadcrumb-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    padding: 0 0.25rem;
    transition: color 0.12s ease;
}

.gallery-breadcrumb-close:hover {
    color: var(--text-primary);
}

/* === Scroll-to-Top Button === */

.scroll-top-btn {
    position: fixed;
    bottom: 5.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-surface, #1a1c22);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 900;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    animation: scrollTopFadeIn 0.2s ease;
}

.scroll-top-btn:hover {
    background: var(--border);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

@keyframes scrollTopFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Collections Page === */

.collections-page {
    padding: 0 0 2rem;
}

.coll-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.coll-page-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.coll-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(245, 132, 59, 0.3);
    background: rgba(245, 132, 59, 0.1);
    color: #f5843b;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.coll-new-btn:hover {
    background: rgba(245, 132, 59, 0.2);
    border-color: rgba(245, 132, 59, 0.5);
}

.coll-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Inline create row */
.coll-create-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    animation: fadeSlideIn 0.2s ease;
}

.coll-create-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
}

.coll-create-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245, 132, 59, 0.1);
}

.coll-create-input::placeholder {
    color: var(--text-dim);
}

.coll-create-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(245, 132, 59, 0.3);
    background: rgba(245, 132, 59, 0.1);
    color: #f5843b;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.coll-create-btn:hover:not(:disabled) {
    background: rgba(245, 132, 59, 0.2);
}

.coll-create-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.coll-create-cancel {
    border-color: var(--border);
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.coll-create-cancel:hover {
    background: var(--border-hover);
    color: var(--text-primary);
}

/* Collection card hover overlay */
.collection-card-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.collection-card:hover .collection-card-overlay {
    opacity: 1;
}

/* Inline rename input */
.coll-rename-input {
    width: 100%;
    padding: 0.15rem 0.375rem;
    background: var(--bg-sunken);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    font-weight: 600;
    outline: none;
    box-shadow: 0 0 0 2px rgba(245, 132, 59, 0.15);
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Collection detail view */
.coll-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.coll-detail-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.coll-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s ease;
    flex-shrink: 0;
}

.coll-back-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.coll-detail-count {
    font-size: 0.8125rem;
    color: var(--text-dim);
    font-weight: 500;
}

.coll-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(245, 132, 59, 0.3);
    background: rgba(245, 132, 59, 0.1);
    color: #f5843b;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.coll-add-btn:hover:not(:disabled) {
    background: rgba(245, 132, 59, 0.2);
    border-color: rgba(245, 132, 59, 0.5);
}

.coll-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Bulk image picker modal */
.bulk-picker-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 900px;
    max-height: 85vh;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    z-index: 10001;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    animation: lightboxZoomIn 0.2s ease;
    overflow: hidden;
}

.bulk-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.bulk-picker-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.bulk-picker-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.bulk-picker-selected {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
}

.bulk-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #292c32 transparent;
}

.bulk-picker-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.bulk-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bulk-picker-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.bulk-picker-item-selected {
    border-color: #f5843b;
}

.bulk-picker-item-selected:hover {
    border-color: #ffa060;
}

.bulk-picker-item-in {
    opacity: 0.5;
    cursor: default;
    border-color: rgba(93, 211, 158, 0.4);
}

.bulk-picker-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(93, 211, 158, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bulk-picker-check-new {
    background: rgba(245, 132, 59, 0.9);
    animation: badgeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === Admin Model Info === */

.masonry-admin-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.masonry-admin-info span {
    font-size: 0.5625rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    font-weight: 500;
    line-height: 1.4;
}

.lightbox-admin-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.lightbox-admin-tag {
    font-size: 0.6875rem;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    font-weight: 500;
}

/* ======================== VIDEO PLANNER ======================== */

.video-scene-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* === Collapsible Idea Panel === */

.tl-idea-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.tl-idea-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.tl-idea-header:hover {
    background: var(--bg-hover);
}

.tl-chevron {
    transition: transform 0.2s;
    color: var(--text-muted);
}

.tl-chevron.open {
    transform: rotate(180deg);
}

.tl-idea-body {
    padding: 0 1.25rem 1.25rem;
}

/* === Toolbar === */

.tl-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.625rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.tl-toolbar-group {
    display: flex;
    gap: 0.375rem;
}

.tl-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 0.25rem;
}

/* === Group Labels === */

.tl-group-labels {
    display: grid;
    grid-template-columns: repeat(auto-fill, 130px);
    gap: 4px;
    padding: 0 0.5rem;
    margin-bottom: 2px;
}

.tl-group-label {
    text-align: center;
    padding: 2px 6px 4px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Timeline Strip === */

.tl-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 4px 16px;
    margin-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    scroll-behavior: smooth;
}

.tl-strip::-webkit-scrollbar {
    height: 5px;
}

.tl-strip::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.tl-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem 1rem;
    background: var(--bg-surface);
    border: 1px dashed var(--border);
    border-radius: 10px;
}

/* === Scene Card (timeline) === */

.tl-card {
    flex-shrink: 0;
    width: 130px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
}

.tl-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.tl-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
}

.tl-card-bar {
    height: 3px;
    width: 100%;
}

.tl-card-thumb {
    width: 100%;
    height: 72px;
    overflow: hidden;
    background: var(--bg-sunken);
}

.tl-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tl-card-thumb-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tl-card-info {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tl-card-num {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 16px;
}

.tl-card-title {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-card-dots {
    display: flex;
    gap: 4px;
    padding: 0 8px 6px;
}

.tl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.2s;
}

.tl-dot.active {
    background: var(--accent);
}

.tl-dot.active.video {
    background: #8b5cf6;
}

.tl-dot.active.image {
    background: var(--success);
}

/* Selected scene pointer */
.tl-card-pointer {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--accent);
}

/* Add scene card */
.tl-card.tl-card-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    border-style: dashed;
    color: var(--text-dim);
}

.tl-card.tl-card-add:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* === Detail Panel === */

.tl-detail {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
}

.tl-detail-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.tl-detail-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tl-detail-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.tl-detail-preview img {
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.tl-detail-preview img:hover {
    opacity: 0.85;
}

.tl-detail-preview-empty {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--bg-sunken);
    border: 1px dashed var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .tl-detail {
        grid-template-columns: 1fr;
    }
    .tl-detail-preview {
        order: -1;
    }
}
/* Alert styles */
.alert-danger {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: var(--danger);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
}

/* === Animate Prompt Modal === */
.animate-prompt-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1100;
}

.animate-prompt-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(600px, 92vw);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.animate-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.animate-prompt-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.animate-prompt-textarea {
    width: 100%;
    min-height: 300px;
    padding: 1rem 1.25rem;
    background: var(--bg-sunken);
    border: none;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    resize: vertical;
    outline: none;
}

.animate-prompt-textarea:focus {
    background: var(--bg-base);
}

.animate-prompt-input-section {
    padding: 1rem 1.25rem 0;
}

.animate-prompt-label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.animate-prompt-textarea.animate-prompt-input {
    min-height: 120px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.animate-prompt-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}

/* ── Cookie Consent ── */
.cookie-consent {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    animation: cookieSlideUp 0.35s ease-out;
}
.cookie-consent-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: #1a1c22;
    border: 1px solid #292c32;
    border-radius: 10px;
    max-width: 420px;
}
.cookie-consent-text {
    flex: 1;
    font-size: 0.8125rem;
    color: #b0b3ba;
    line-height: 1.5;
}
.cookie-consent-link {
    color: #5b7ff5;
    text-decoration: none;
}
.cookie-consent-link:hover {
    text-decoration: underline;
}
.cookie-consent-btn {
    padding: 0.4rem 1.25rem;
    border: none;
    border-radius: 6px;
    background: #5b7ff5;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.cookie-consent-btn:hover {
    background: #4a6de0;
}
@keyframes cookieSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 768px) {
    .cookie-consent {
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
    }
    .cookie-consent-inner {
        flex-direction: column;
        text-align: center;
        max-width: none;
    }
}

/* ── Presets ── */
.preset-menu {
    min-width: 280px;
    max-height: 360px;
    overflow-y: auto;
}
.preset-save-row {
    display: flex;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.preset-name-input {
    flex: 1;
    background: #12131a;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
    color: #e0e2e8;
    outline: none;
}
.preset-name-input:focus {
    border-color: var(--accent);
}
.preset-save-btn {
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.preset-save-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.preset-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.12s;
}
.preset-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.preset-item-info {
    flex: 1;
    min-width: 0;
}
.preset-item-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #e0e2e8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preset-item-meta {
    display: block;
    font-size: 0.6875rem;
    color: #5c6170;
    margin-top: 0.125rem;
}
.preset-delete-btn {
    background: none;
    border: none;
    color: #5c6170;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    transition: color 0.15s, background 0.15s;
}
.preset-delete-btn:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}
.preset-empty {
    padding: 1rem 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #5c6170;
}

/* ========== AI CHAT WIDGET ========== */

.story-chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 5000;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #5b7ff5;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(91, 127, 245, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.story-chat-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(91, 127, 245, 0.55);
}
.story-chat-bubble.hidden {
    display: none;
}

.story-chat-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 5001;
    width: 420px;
    max-height: 540px;
    background: #1a1c22;
    border: 1px solid #292c32;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    animation: chatSlideUp 0.25s ease-out;
}

@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.story-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #292c32;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #e0e0e0;
}

.story-chat-close {
    background: none;
    border: none;
    color: #5c6170;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}
.story-chat-close:hover {
    color: #e0e0e0;
}

.story-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    max-height: 360px;
}

.story-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #5c6170;
    text-align: center;
    font-size: 0.875rem;
    padding: 24px 16px;
}
.story-chat-empty p:first-child {
    color: #8a8f9c;
    font-size: 0.9375rem;
    margin-bottom: 12px;
}
.story-chat-examples {
    font-size: 0.8125rem;
    color: #5c6170;
    font-style: italic;
    line-height: 1.8;
}

.story-chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.story-chat-msg-user {
    align-self: flex-end;
    align-items: flex-end;
}

.story-chat-msg-ai {
    align-self: flex-start;
    align-items: flex-start;
}

.story-chat-msg-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.story-chat-msg-user .story-chat-msg-bubble {
    background: #5b7ff5;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.story-chat-msg-ai .story-chat-msg-bubble {
    background: #252830;
    color: #e0e0e0;
    border-bottom-left-radius: 4px;
}

.story-chat-msg-time {
    font-size: 0.6875rem;
    color: #5c6170;
    margin-top: 4px;
    padding: 0 4px;
}

.story-chat-typing {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}
.story-chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5c6170;
    animation: chatTyping 1.2s infinite;
}
.story-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.story-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatTyping {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}

.story-chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #292c32;
    align-items: flex-end;
}

.story-chat-input {
    flex: 1;
    background: #14151a;
    border: 1px solid #292c32;
    border-radius: 10px;
    color: #e0e0e0;
    padding: 10px 12px;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.4;
}
.story-chat-input:focus {
    border-color: #5b7ff5;
}
.story-chat-input::placeholder {
    color: #5c6170;
}
.story-chat-input:disabled {
    opacity: 0.5;
}

.story-chat-send {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #5b7ff5;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, opacity 0.15s;
}
.story-chat-send:hover:not(:disabled) {
    background: #4a6ee0;
}
.story-chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .story-chat-panel {
        width: calc(100vw - 16px);
        right: 8px;
        bottom: 8px;
        max-height: 70vh;
    }
    .story-chat-bubble {
        right: 16px;
        bottom: 16px;
    }
}

/* === Challenges Page === */

.challenge-container {
}

.challenge-input-section {
    margin-bottom: 2rem;
}

.challenge-input-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.challenge-input-group {
    flex: 1;
}

.challenge-generate-btn {
    white-space: nowrap;
    height: 42px;
}

.challenge-ideas-section {
    margin-bottom: 2rem;
}

.challenge-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.challenge-ideas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.challenge-idea-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.challenge-idea-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-hover);
}

.challenge-idea-card.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.challenge-idea-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.challenge-idea-card.selected .challenge-idea-number {
    background: var(--accent);
    color: #fff;
}

.challenge-idea-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.challenge-regen-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.challenge-idea-regen {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
    padding: 0;
}

.challenge-idea-card:hover .challenge-idea-regen,
.challenge-idea-regen:focus {
    opacity: 1;
}

.challenge-idea-regen:hover {
    background: var(--bg-elevated);
    color: var(--accent);
}

.challenge-idea-regen:disabled {
    opacity: 1;
    cursor: not-allowed;
    color: var(--text-muted);
}

/* When regen prompt is open, always show the regen button */
.challenge-idea-card.regen-open .challenge-idea-regen {
    opacity: 1;
    color: var(--accent);
}

/* Card wraps content when regen prompt is open */
.challenge-idea-card.regen-open {
    flex-wrap: wrap;
}

.challenge-regen-prompt {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.challenge-regen-prompt .form-control {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    height: auto;
}

.challenge-regen-go {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
}

.challenge-voiceover-section {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.challenge-voiceover-prompt {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.challenge-voiceover-prompt textarea {
    resize: vertical;
    min-height: 60px;
}

.challenge-voiceover-actions {
    display: flex;
    gap: 0.75rem;
}

.challenge-expanded {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.challenge-expanded-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.challenge-expanded-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.challenge-expanded-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}

.challenge-script-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.challenge-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.challenge-empty p {
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .challenge-input-row {
        flex-direction: column;
    }
    .challenge-generate-btn {
        width: 100%;
    }
    .challenge-ideas-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Quests --- */

.quest-keywords-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.quest-keywords-row .form-control {
    flex: 1;
}

.quest-keywords-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    align-items: center;
}

.quest-keyword-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: var(--accent-blue);
    color: #fff;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.quest-keyword-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 0;
    display: flex;
    line-height: 1;
}

.quest-keyword-remove:hover {
    color: #fff;
}

.quest-keywords-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}

.quest-keywords-clear:hover {
    color: var(--text-dim);
}

.quest-keyword-mode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quest-stats {
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.quest-stats-filtered {
    color: var(--accent-blue);
    margin-left: 0.25rem;
}

.quest-winners {
    margin-top: 0.5rem;
}

.quest-winners-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quest-winner-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    position: relative;
    transition: border-color 0.2s;
}

.quest-winner-card:hover {
    border-color: var(--accent-blue);
}

.quest-winner-number {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-blue);
    opacity: 0.25;
    line-height: 1;
}

.quest-winner-avatar-wrap {
    flex-shrink: 0;
}

.quest-winner-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.quest-winner-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    color: var(--text-muted);
}

.quest-winner-info {
    flex: 1;
    min-width: 0;
}

.quest-winner-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.quest-winner-comment {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.quest-winner-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.quest-winner-video {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
}

.quest-winner-likes {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .quest-keyword-mode {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Quest Tabs */

.quest-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
}

.quest-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card-bg);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.quest-tab:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.quest-tab.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.quest-tab.active .quest-tab-num {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.quest-tab-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.quest-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Step 2 summary cards */

.quest-step2-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.quest-step2-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.8rem;
}

.quest-step2-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.quest-step2-name {
    font-weight: 600;
    color: var(--text-primary);
}

.quest-step2-detail {
    color: var(--text-muted);
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .quest-tabs {
        flex-direction: column;
    }
    .quest-step2-summary {
        flex-direction: column;
    }
}

/* Quest Toggle Group (standalone, not scoped) */

.quest-toggle-group {
    display: flex;
    gap: 2px;
    background: var(--bg-sunken);
    border-radius: 8px;
    padding: 3px;
}

.quest-toggle {
    flex: 1;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.quest-toggle.active {
    background: #f5843b;
    color: #fff;
    box-shadow: 0 1px 4px rgba(245, 132, 59, 0.3);
}

/* Quest Board */

.quest-board-section {
    margin-top: 0.5rem;
}

.quest-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.quest-board-actions {
    display: flex;
    gap: 0.5rem;
}

.quest-board-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quest-board-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: border-color 0.2s;
    position: relative;
    overflow: hidden;
}

.quest-card-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 14, 18, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: inherit;
}

.quest-board-card:hover {
    border-color: var(--accent-blue);
}

.quest-board-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.quest-board-card-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-blue);
    opacity: 0.3;
    line-height: 1;
}

.quest-board-card-reshuffle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.quest-board-card-reshuffle:hover {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background: rgba(91, 127, 245, 0.08);
}

.quest-board-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quest-board-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.quest-board-field .form-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0;
}

.quest-board-field-row {
    display: flex;
    gap: 0.5rem;
}

.quest-board-comment {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.4;
    padding: 0.5rem 0.6rem;
    border-radius: 0.4rem;
    background: var(--bg-sunken);
    margin-top: 0.35rem;
}

.quest-board-comment svg {
    color: var(--accent-blue);
    flex-shrink: 0;
}

.quest-board-comment-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.4;
    resize: vertical;
    padding: 0;
    outline: none;
    min-height: 1.6em;
}

.quest-board-comment-input::placeholder {
    color: var(--text-muted);
}

.quest-board-generate-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.quest-generate-btn {
    height: fit-content;
    white-space: nowrap;
}

.quest-built-prompt {
    margin-top: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.quest-built-prompt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.quest-built-prompt-text {
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    font-family: inherit;
}

.quest-result-section {
    margin-top: 1.5rem;
}

.quest-result-image-wrap {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border);
}

.quest-result-image {
    width: 100%;
    display: block;
}

.quest-post-preview {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
}

.quest-post-preview p {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.quest-post-preview p + p {
    margin-top: 0.75rem;
}

.quest-preview-header {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.quest-post-section {
    margin-top: 1.5rem;
}

.quest-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.quest-post-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quest-post-field {
    margin-bottom: 0.75rem;
}

.quest-post-field .form-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.quest-post-solution {
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--accent-blue);
}

.quest-post-solution .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quest-post-solution-hidden {
    border-left-color: var(--text-muted);
    opacity: 0.6;
}

.quest-post-solution-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.quest-post-header-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.quest-post-header-input {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.5rem !important;
    background: transparent !important;
    border: 1px dashed var(--border) !important;
    color: var(--text-primary) !important;
}

.quest-post-header-input:focus {
    border-style: solid !important;
    border-color: var(--accent-blue) !important;
}

.quest-post-solution-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.quest-post-sol-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.quest-post-sol-btn:hover {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background: rgba(91, 127, 245, 0.08);
}

.quest-post-sol-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.quest-ideas-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.quest-idea-chip {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    line-height: 1.5;
    width: 100%;
}

.quest-idea-chip:hover {
    border-color: var(--accent-blue);
    background: rgba(91, 127, 245, 0.1);
}

.quest-ideas-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem;
    display: flex;
}

.quest-ideas-close:hover {
    color: var(--text-primary);
}

.quest-post-tg-only {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: #2AABEE22;
    color: #2AABEE;
}

.quest-post-preprompt-details {
    margin-top: 0.75rem;
}

.quest-post-preprompt-details summary {
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
}

.quest-post-preprompt-details textarea {
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .quest-post-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .quest-board-grid {
        grid-template-columns: 1fr;
    }
    .quest-board-generate-row {
        flex-direction: column;
        align-items: stretch;
    }
    .quest-board-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Comics --- */

.comics-layout-bar {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.comics-layout-btn {
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.15s;
}

.comics-layout-btn:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.comics-layout-btn.active {
    background: rgba(91, 127, 245, 0.12);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.comics-grid {
    display: grid;
    gap: 0;
    background: #fff;
    padding: 5px;
    border-radius: 0.5rem;
    overflow: hidden;
}

.comics-panel {
    background: var(--card-bg);
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #fff;
    transition: opacity 0.15s;
}

.comics-panel.dragging {
    opacity: 0.35;
}

.comics-panel.dragover {
    outline: 2px dashed var(--accent-blue);
    outline-offset: -4px;
}

.comics-panel-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.comics-panel-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    max-height: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.comics-panel-img.comics-img-ready {
    opacity: 1;
}

.comics-panel-controls {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.comics-panel:hover .comics-panel-controls {
    opacity: 1;
}

.comics-panel-ctrl-btn {
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    color: #fff;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.comics-panel-ctrl-btn:hover {
    background: rgba(0,0,0,0.85);
}

.comics-panel-ctrl-btn.active {
    background: var(--accent-blue);
}

.comics-panel-editing {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.comics-panel-editing .comics-panel-controls {
    opacity: 1;
}

.comics-panel-edit-hint {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    pointer-events: none;
    white-space: nowrap;
}

.comics-panel-zoom-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    pointer-events: none;
}

.comics-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
}

.comics-panel-narration {
    position: absolute;
    width: fit-content;
    max-width: 90%;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 3px;
    pointer-events: auto;
    cursor: grab;
    z-index: 2;
    user-select: none;
}

/* Speech bubbles — parchment fantasy style */
.comics-element-bubble {
    --bubble-bg: #F5F1E8;
    --bubble-border: #4A3426;
    --bubble-text: #2A1810;
    background: var(--bubble-bg);
    color: var(--bubble-text);
    border: 2.5px solid var(--bubble-border);
    border-radius: 0.6em;
    padding: 0.7em 0.9em;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1.25;
    position: relative;
    width: fit-content;
    max-width: 80%;
    box-shadow: 2px 2px 7px rgba(59, 42, 31, 0.12);
}

.comics-element-bubble.comics-narration-black {
    --bubble-bg: #3B2A1F;
    --bubble-border: #F5F1E8;
    --bubble-text: #F5F1E8;
}

/* Bubble tail — softer, shorter, organic */
.comics-element-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}

.comics-bubble-tail-bl::after {
    bottom: -10px;
    left: 18%;
    border-left: 5px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--bubble-border);
}
.comics-bubble-tail-bl::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 19%;
    border-left: 4px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--bubble-bg);
    z-index: 1;
}

.comics-bubble-tail-br::after {
    bottom: -10px;
    right: 18%;
    border-left: 8px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid var(--bubble-border);
}
.comics-bubble-tail-br::before {
    content: '';
    position: absolute;
    bottom: -7px;
    right: 19%;
    border-left: 6px solid transparent;
    border-right: 4px solid transparent;
    border-top: 8px solid var(--bubble-bg);
    z-index: 1;
}

.comics-bubble-tail-tl::after {
    top: -10px;
    left: 18%;
    border-left: 5px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid var(--bubble-border);
}
.comics-bubble-tail-tl::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 19%;
    border-left: 4px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid var(--bubble-bg);
    z-index: 1;
}

.comics-bubble-tail-tr::after {
    top: -10px;
    right: 18%;
    border-left: 8px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid var(--bubble-border);
}
.comics-bubble-tail-tr::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 19%;
    border-left: 6px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid var(--bubble-bg);
    z-index: 1;
}

.comics-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--accent-blue);
    border: 2px solid #fff;
    border-radius: 2px;
    opacity: 1;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.comics-resize-handle:hover {
    background: #fff;
    border-color: var(--accent-blue);
}

.comics-resize-active {
    background: #fff !important;
    border-color: var(--accent-blue) !important;
}

.comics-resize-tl { top: -5px; left: -5px; cursor: nwse-resize; }
.comics-resize-tr { top: -5px; right: -5px; cursor: nesw-resize; }
.comics-resize-bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.comics-resize-br { bottom: -5px; right: -5px; cursor: nwse-resize; }

.comics-narration-white {
    background: #ffffff;
    color: #000;
}

.comics-narration-black {
    background: #000000;
    color: #fff;
}


.comics-text-editor {
    margin-top: 1.25rem;
}

.comics-text-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.comics-text-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Context menu */
.comics-ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.comics-ctx-menu {
    position: fixed;
    z-index: 100;
    background: #1e2028;
    border: 1px solid #3a3d45;
    border-radius: 0.5rem;
    padding: 4px;
    min-width: 150px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
}

.comics-ctx-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: 0.35rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}

.comics-ctx-item:hover {
    background: rgba(91, 127, 245, 0.12);
}

.comics-ctx-danger {
    color: #ef4444;
}

.comics-ctx-danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* Elements */
.comics-element {
    position: absolute;
    z-index: 2;
    cursor: grab;
    user-select: none;
}

.comics-element-text {
    width: fit-content;
    max-width: 90%;
    padding: 0.3rem 0.6rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 3px;
}

.comics-element-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}


.comics-inline-edit {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 0;
    margin: 0;
    outline: none;
    min-width: 30px;
    white-space: pre-wrap;
    word-break: break-word;
}

.comics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.comics-toolbar-right {
    display: flex;
    gap: 0.25rem;
}

.comics-undo-btn {
    padding: 0.35rem !important;
}

.comics-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

@media (max-width: 768px) {
    .comics-text-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- Story / Series Pipeline --- */

.story-project-bar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.story-new-project {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.story-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
}

.story-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card-bg);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.story-tab:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.story-tab.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.story-section {
    max-width: 800px;
}

.story-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.story-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.story-field .form-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.story-field-row {
    display: flex;
    gap: 0.75rem;
}

.story-field-row .story-field {
    flex: 1;
}

.story-ai-fill {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.story-ai-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.story-ai-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0.75rem;
}

.story-structure-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.story-structure-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .story-field-row {
        flex-direction: column;
    }
    .story-tabs {
        flex-wrap: wrap;
    }
}

.story-ep-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.story-gear-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text-muted);
    padding: 0.4rem;
    cursor: pointer;
    display: flex;
    transition: all 0.15s;
}

.story-gear-btn:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.story-gear-btn.active { color: var(--accent-blue); border-color: var(--accent-blue); background: rgba(91,127,245,0.1); }

.story-idea-section {
    max-width: 700px;
    margin: 2rem auto;
    text-align: center;
}

.story-idea-input {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.story-idea-btn {
    font-size: 1rem;
    padding: 0.75rem 2rem;
}

.story-review {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
}

.story-review-block {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
}

.story-review-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.story-prompt-details {
    margin-top: 0.35rem;
}

.story-prompt-details summary {
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--text-muted);
    user-select: none;
}

.story-ep-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 0.25rem;
}

.story-ep-back:hover { color: var(--accent-blue); }

.story-ep-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.story-steps {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.story-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card-bg);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.story-step:hover:not(:disabled) { border-color: var(--accent-blue); color: var(--text-primary); }
.story-step-active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.story-step-active .story-step-num { background: rgba(255,255,255,0.25); color: #fff; }
.story-step-done { border-color: #22c55e44; }
.story-step-done .story-step-num { background: rgba(34,197,94,0.2); color: #22c55e; }
.story-step-locked { opacity: 0.35; cursor: not-allowed; }

.story-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.story-step-content {
    max-width: 800px;
}

.story-step-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.story-episode-row {
    text-decoration: none;
    color: inherit;
}

.story-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.story-asset-card {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-sunken);
    border: 2px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s;
}

.story-asset-card:hover { border-color: var(--accent-blue); }
.story-asset-selected { border-color: var(--accent-blue); background: rgba(91,127,245,0.1); }

.story-asset-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-asset-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.2rem 0.4rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-asset-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-settings-details {
    margin-bottom: 0.75rem;
}

.story-settings-details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.35rem;
}

.story-progress-backdrop {
    position: fixed;
    inset: 0;
    background: #0d0e12ee;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.story-progress-modal {
    background: #1a1c22;
    border: 2px solid var(--accent-blue);
    border-radius: 1.25rem;
    padding: 3rem 4rem;
    text-align: center;
    min-width: 420px;
    box-shadow: 0 0 60px rgba(91,127,245,0.2), 0 12px 40px rgba(0,0,0,0.5);
}

.story-progress-status {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
}

.story-progress-bar-wrap {
    height: 8px;
    background: #292c32;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.story-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), #8b5cf6);
    border-radius: 4px;
    transition: width 0.6s ease;
    min-width: 2%;
}

.story-progress-steps {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #5c6170;
    gap: 0.5rem;
}

.story-pstep-done {
    color: var(--accent-blue);
    font-weight: 700;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.story-grid-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s;
}

.story-grid-card:hover { border-color: var(--accent-blue); }

.story-grid-thumb {
    width: 100%;
    aspect-ratio: 9/16;
    object-fit: cover;
    display: block;
}

.story-grid-thumb-empty {
    width: 100%;
    aspect-ratio: 9/16;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-sunken);
}

.story-grid-info {
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.story-grid-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-grid-date {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.story-episodes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.story-episode-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.story-episode-active {
    border-color: var(--accent-blue);
}

.story-episode-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
}

.story-episode-row:hover {
    background: rgba(91, 127, 245, 0.06);
}

.story-episode-num {
    font-weight: 700;
    color: var(--accent-blue);
    font-size: 0.85rem;
    min-width: 30px;
}

.story-episode-title {
    flex: 1;
    font-weight: 500;
}

.story-episode-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    background: var(--border);
    color: var(--text-muted);
}

.story-status-briefapproved { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.story-status-scriptapproved { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.story-status-scenesapproved { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.story-status-rendered { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.story-status-exported { background: rgba(34, 197, 94, 0.2); color: #16a34a; }

.story-episode-detail {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.story-episode-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}

.story-qa-result {
    margin-top: 0.5rem;
    padding: 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
}

.story-qa-passed {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.story-qa-failed {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.story-qa-header {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.story-qa-text {
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
    line-height: 1.5;
}

.story-script-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.story-script-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.story-script-block {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
}

.story-script-block-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.story-script-block-name {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.story-script-block-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.story-scene-card {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.story-scene-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

.story-scene-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.story-scene-goal {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

.story-scene-dur {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.story-scene-card-body {
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.story-render-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}

.story-render-card {
    position: relative;
    aspect-ratio: 9/16;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.story-render-num {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.story-render-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-render-loading,
.story-render-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.story-render-reroll {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    color: #fff;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.story-render-card:hover .story-render-reroll { opacity: 1; }

/* ======== Story Page — Professional Layout ======== */

/* Landing */
.sp-landing {
    max-width: 640px;
    margin: 0 auto;
    padding-top: 6vh;
}

.sp-landing-inner { text-align: center; }

.sp-landing-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.sp-landing-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.sp-landing-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sp-landing-input {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 1rem;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
    text-align: center;
}

.sp-landing-input:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.sp-landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 2rem;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.sp-landing-btn:hover { opacity: 0.9; }
.sp-landing-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Saved stories */
.sp-saved {
    margin-top: 3rem;
    text-align: left;
}

.sp-saved-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.sp-saved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
}

.sp-saved-card {
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: border-color 0.15s;
}

.sp-saved-card:hover { border-color: var(--accent-blue); }

.sp-saved-thumb {
    width: 100%;
    aspect-ratio: 9/16;
    object-fit: cover;
    display: block;
}

.sp-saved-thumb-empty {
    width: 100%;
    aspect-ratio: 9/16;
    background: var(--bg-sunken);
}

.sp-saved-info {
    padding: 0.35rem 0.5rem;
}

.sp-saved-title {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-saved-date {
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Settings */
.sp-settings-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.sp-settings-toggle:hover { color: var(--text-dim); }

.sp-settings {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.sp-settings-field { margin-bottom: 0.75rem; }
.sp-settings-field label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; display: block; }
.sp-settings details { margin-bottom: 0.5rem; }
.sp-settings summary { font-size: 0.75rem; color: var(--text-muted); cursor: pointer; margin-bottom: 0.25rem; }

/* ======== Workspace ======== */
.sp-workspace {
    max-width: 960px;
    margin: 0 auto;
}

/* Top bar */
.sp-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.sp-topbar-back {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
}

.sp-topbar-back:hover { color: var(--text-primary); }

.sp-topbar-title {
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.sp-topbar-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    padding: 0.35rem;
    cursor: pointer;
    display: flex;
    transition: all 0.15s;
}

.sp-topbar-btn:hover { color: var(--accent-blue); border-color: var(--accent-blue); }

.sp-topbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 0.25rem;
}

.sp-topbar-select {
    max-width: 140px;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
}

.sp-topbar-gen {
    font-size: 0.8rem !important;
    padding: 0.35rem 0.85rem !important;
}

/* Script section */
.sp-section {
    margin-bottom: 1.25rem;
}

.sp-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.sp-section-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    margin-left: auto;
}

.sp-section-btn:hover { color: var(--accent-blue); }

.sp-script-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sp-script-row {
    display: grid;
    grid-template-columns: 80px 1fr 28px;
    gap: 0.5rem;
    align-items: start;
}

.sp-script-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-blue);
    padding-top: 0.5rem;
}

.sp-script-text {
    font-size: 0.85rem;
    line-height: 1.5;
}

.sp-script-regen {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    padding: 0.3rem;
    cursor: pointer;
    display: flex;
    margin-top: 0.3rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.sp-script-row:hover .sp-script-regen { opacity: 1; }
.sp-script-regen:hover { color: var(--accent-blue); border-color: var(--border); }

/* Scenes */
.sp-scenes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sp-scene {
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    overflow: hidden;
    transition: border-color 0.15s;
}

.sp-scene:hover { border-color: #3a3d45; }

.sp-scene-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border);
}

.sp-scene-badge {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--accent-blue);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-scene-meta { flex: 1; display: flex; align-items: center; gap: 0.5rem; }

.sp-scene-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-dim);
}

.sp-scene-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: auto;
}

.sp-scene-content {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 0.75rem;
    padding: 0.75rem;
}

.sp-scene-prompt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sp-scene-prompt-input {
    font-size: 0.8rem;
    line-height: 1.5;
    flex: 1;
}

.sp-scene-btns {
    display: flex;
    gap: 0.35rem;
}

.sp-scene-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.sp-scene-btn:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.sp-scene-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.sp-scene-btn-pri {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.sp-scene-btn-pri:hover { opacity: 0.9; }

.sp-scene-preview {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.sp-scene-img {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.sp-scene-img-empty {
    width: 100%;
    aspect-ratio: 9/16;
    background: var(--bg-sunken);
    border-radius: 6px;
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .sp-scene-content { grid-template-columns: 1fr; }
    .sp-topbar { flex-wrap: wrap; }
    .sp-topbar-actions { width: 100%; justify-content: flex-end; }
    .sp-script-row { grid-template-columns: 1fr; }
    .sp-script-label { padding-top: 0; }
    .sp-script-regen { opacity: 1; }
}

/* Keep old story-toolbar for backwards compat */
.story-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.story-toolbar-left, .story-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.story-toolbar-btn { font-size: 0.8rem !important; }
.story-toolbar-select { max-width: 140px; font-size: 0.8rem; }

/* Script section */
.story-script-details {
    margin-bottom: 1.25rem;
}

.story-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    margin-bottom: 0.5rem;
}

.story-section-action {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.1rem 0.3rem;
}

.story-section-action:hover { color: var(--accent-blue); }

.story-script-inline {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.story-script-inline-name {
    min-width: 80px;
    padding-top: 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.story-script-inline-text {
    flex: 1;
    font-size: 0.85rem;
}

.story-script-inline-regen {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    padding: 0.3rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0.3rem;
    display: flex;
}

.story-script-inline-regen:hover { color: var(--accent-blue); border-color: var(--accent-blue); }

/* Scene cards — professional flat */
.story-scene-pro {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.story-scene-pro-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border);
}

.story-scene-pro-body {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
}

.story-scene-pro-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.story-scene-pro-right {
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-scene-pro-img {
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.story-scene-pro-placeholder {
    width: 100%;
    aspect-ratio: 9/16;
    background: var(--bg-sunken);
    border-radius: 6px;
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-scene-actions {
    display: flex;
    gap: 0.4rem;
}

.story-scene-gen-btn {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.7rem !important;
}

@media (max-width: 768px) {
    .story-scene-pro-body { flex-direction: column; }
    .story-scene-pro-right { flex: none; }
    .story-toolbar { flex-direction: column; align-items: flex-start; }
}

.story-prompt-text {
    font-size: 0.8rem;
    line-height: 1.5;
    font-family: inherit;
}

/* --- Scene Generator --- */

.scenegen-container {
    max-width: 960px;
    margin: 0 auto;
}

/* Scene Packs Grid */
.scenegen-packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.scenegen-pack-card {
    position: relative;
    background: var(--bg-elevated, #1a1c22);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scenegen-pack-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.scenegen-pack-card-create {
    border-style: dashed;
}

.scenegen-pack-card-create:hover {
    border-color: #5b7ff5;
}

.scenegen-pack-card-cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.scenegen-pack-card-empty {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface, #14151a);
    color: var(--text-dim);
}

.scenegen-pack-card-info {
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.scenegen-pack-card-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scenegen-pack-card-meta {
    font-size: 0.6875rem;
    color: var(--text-dim);
}

.scenegen-pack-card-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.scenegen-pack-card:hover .scenegen-pack-card-overlay {
    opacity: 1;
}

.scenegen-pack-card-delete {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 6px;
    padding: 0.35rem;
    color: #ef4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.scenegen-pack-card-delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

.scenegen-input-section {
    margin-bottom: 1.5rem;
}

.scenegen-input-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.scenegen-input-group {
    flex: 1;
}

.scenegen-voiceover-textarea {
    resize: vertical;
    min-height: 120px;
}

/* ── Script Toolbar ── */

.scenegen-script-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-top: 6px;
}

.scenegen-script-toolbar + .mention-editor-wrapper .mention-editor {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.scenegen-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}

.scenegen-toolbar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }
.scenegen-toolbar-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.scenegen-characters-section {
    margin-bottom: 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}

.scenegen-characters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.scenegen-character-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scenegen-character-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.scenegen-character-row .form-control {
    flex: 1;
    min-width: 0;
}

.scenegen-character-row .form-control:first-child {
    flex: 0 0 140px;
}

.scenegen-character-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.scenegen-character-remove:hover {
    background: rgba(255, 107, 107, 0.1);
    color: var(--danger);
}

/* Character chip picker */
.scenegen-character-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scenegen-character-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
}

.scenegen-character-chip:hover {
    border-color: #5b7ff544;
    background: #1e2028;
}

.scenegen-character-chip.selected {
    border-color: #5b7ff5;
    background: #5b7ff512;
    color: #c8d4f5;
}

.scenegen-character-chip-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.scenegen-character-chip.selected .scenegen-character-chip-thumb {
    border-color: #5b7ff5;
}

/* Variation prefix for chip picker */
.scenegen-character-chip.char-variation-prefix {
    padding-left: 8px;
    font-size: 0.75rem;
    opacity: 0.85;
}

.scenegen-character-chip.char-variation-prefix.selected {
    opacity: 1;
}

/* Per-scene GitHub-style dropdown selectors */
.scenegen-scene-selectors {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: #12131a;
    flex-wrap: wrap;
}

.sg-dropdown-wrap {
    position: relative;
}

.sg-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary, #b0b8c8);
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-dropdown-trigger:hover {
    border-color: #5b7ff544;
    background: #1e2028;
}

.sg-dropdown-caret {
    opacity: 0.5;
    flex-shrink: 0;
}

.sg-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 220px;
    max-width: 300px;
    background: #1a1c22;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    overflow: hidden;
    animation: sg-dropdown-in 0.12s ease-out;
}

@keyframes sg-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sg-dropdown-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--border);
}

.sg-dropdown-search {
    width: 100%;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #0d0e12;
    color: #e8e8e8;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    outline: none;
}

.sg-dropdown-search:focus {
    border-color: #5b7ff5;
}

.sg-dropdown-search::placeholder {
    color: var(--text-muted);
}

.sg-dropdown-items {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.sg-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: #c8cdd8;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.1s;
    text-align: left;
}

.sg-dropdown-item:hover {
    background: #262830;
}

.sg-dropdown-item.selected {
    color: #c8d4f5;
}

.sg-dropdown-check {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #5b7ff5;
}

.sg-dropdown-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.sg-dropdown-item.selected .sg-dropdown-thumb {
    border-color: #5b7ff5;
}

.sg-dropdown-thumb-placeholder {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #262830;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Reference button menu */
.sg-ref-btn-wrap {
    position: relative;
    display: inline-block;
    margin-top: 0.35rem;
}

.sg-ref-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 160px;
    background: #1a1c22;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    overflow: hidden;
    animation: sg-dropdown-in 0.12s ease-out;
    padding: 4px 0;
}

.sg-ref-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: #c8cdd8;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.1s;
    text-align: left;
}

.sg-ref-menu-item:hover {
    background: #262830;
}

.scenegen-scenes-section {
    margin-top: 1.5rem;
}

.scenegen-scenes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.scenegen-scenes-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.scenegen-scenes-bulk {
    display: flex;
    gap: 0.5rem;
}

.scenegen-scene-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.scenegen-scene-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.scenegen-field-header {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.scenegen-scene-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.scenegen-scene-header .scenegen-field-header {
    margin-bottom: 0;
}

.sg-env-chip-wrap {
    position: relative;
    margin-left: auto;
}
.sg-env-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 4px;
    background: rgba(30, 130, 60, 0.18);
    color: #5ed88a;
    border: 1px solid rgba(30, 130, 60, 0.35);
    cursor: pointer;
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, border-color 0.15s;
}
.sg-env-chip:hover {
    background: rgba(30, 130, 60, 0.32);
    border-color: rgba(30, 130, 60, 0.55);
}
.sg-env-chip-add {
    background: rgba(92, 97, 112, 0.12);
    color: var(--text-muted);
    border: 1px dashed rgba(92, 97, 112, 0.35);
}
.sg-env-chip-add:hover {
    background: rgba(92, 97, 112, 0.22);
    border-color: rgba(92, 97, 112, 0.55);
    color: var(--text-secondary);
}

/* Environment tooltip — matches mention-chip-tooltip */
.sg-env-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2000;
    width: 320px;
    background: #1e2028;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.15);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    overflow: hidden;
}
.sg-env-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 600;
    font-size: 0.9rem;
    color: #5ed88a;
}
.sg-env-tooltip-body {
    padding: 10px 14px;
}
.sg-env-tooltip-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-sunken, #141519);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}
.sg-env-tooltip-input::placeholder { color: var(--text-dim, #5c6170); }
.sg-env-tooltip-input:focus { outline: none; border-color: #5ed88a; box-shadow: 0 0 0 2px rgba(94, 216, 138, 0.12); }
.sg-env-tooltip-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sg-env-tooltip-clear {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.12s;
}
.sg-env-tooltip-clear:hover { background: rgba(255, 80, 80, 0.12); color: #f87171; border-color: rgba(255, 80, 80, 0.25); }
.sg-env-tooltip-done {
    margin-left: auto;
    padding: 4px 14px;
    background: rgba(94, 216, 138, 0.15);
    border: 1px solid rgba(94, 216, 138, 0.3);
    border-radius: 6px;
    color: #5ed88a;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}
.sg-env-tooltip-done:hover { background: rgba(94, 216, 138, 0.25); }

.scenegen-scene-voiceover {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid transparent;
    width: 100%;
    min-height: 2.8rem;
    resize: none;
    overflow: hidden;
    field-sizing: content;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.scenegen-scene-voiceover:focus {
    border-color: var(--accent);
}

.scenegen-script-textarea {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    min-height: 120px;
    transition: border-color 0.15s ease;
}

.scenegen-script-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245, 132, 59, 0.1);
    background-color: var(--bg-surface);
}

.scenegen-script-desc-wrap {
    position: relative;
}
.scenegen-enhancing-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(13, 14, 18, 0.7);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.scenegen-scene-body {
    display: flex;
    gap: 1rem;
}

.scenegen-scene-prompt-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scenegen-scene-prompt-col textarea {
    resize: vertical;
    min-height: 80px;
    font-size: 0.85rem;
}

.scenegen-scene-actions {
    display: flex;
    gap: 0.5rem;
}

/* Environment badge (inline, read-only) */
/* sg-env-badge removed — replaced by .sg-env-chip in scene header */

.scenegen-scene-image-col {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scenegen-scene-image-col img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sg-fix-bar {
    display: flex; gap: 4px; margin-top: 6px;
}
.sg-fix-input {
    font-size: 0.75rem !important; padding: 0.25rem 0.5rem !important;
    flex: 1;
}
.sg-fix-btn {
    font-size: 0.72rem !important; padding: 0.25rem 0.6rem !important;
    white-space: nowrap;
}
.scenegen-scene-image-placeholder {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.scenegen-ref-section {
    margin-top: 0.5rem;
}

.scenegen-ref-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.scenegen-ref-row {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.scenegen-ref-row .form-control {
    flex: 1;
    min-width: 0;
}

.scenegen-ref-previews {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.scenegen-ref-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.scenegen-character-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.scenegen-character-upload {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.scenegen-character-upload:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.scenegen-chaining-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.scenegen-chaining-toggle input[type="checkbox"] {
    accent-color: var(--accent);
}

.scenegen-scene-error {
    font-size: 0.75rem;
    color: var(--danger);
    margin-top: 0.25rem;
}

.scenegen-ar-group,
.scenegen-res-group {
    display: flex;
    gap: 2px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.scenegen-ar-btn,
.scenegen-res-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    border: none;
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.scenegen-ar-btn:hover,
.scenegen-res-btn:hover {
    background: var(--bg-hover);
}

.scenegen-ar-btn.active,
.scenegen-res-btn.active {
    background: var(--accent);
    color: #fff;
}

.scenegen-image-model-select {
    max-width: 200px;
    font-size: 0.8rem;
    height: 30px;
    padding: 0.2rem 0.5rem;
}

.scenegen-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

@media (max-width: 768px) {
    .scenegen-scene-body {
        flex-direction: column;
    }
    .scenegen-scene-image-col {
        flex: none;
        width: 100%;
    }
    .scenegen-character-row .form-control:first-child {
        flex: 0 0 100px;
    }
    .scenegen-input-row {
        flex-direction: column;
    }
}

/* ========================================
   YouTube Top Videos
   ======================================== */

.yt-channel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.yt-channel-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.yt-channel-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.yt-channel-count {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.yt-sort-group {
    display: flex;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.yt-sort-btn {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.yt-sort-btn:hover {
    color: var(--text-secondary);
}

.yt-sort-btn.active {
    background: #f5843b;
    color: #fff;
}

.yt-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.yt-controls .form-control {
    flex: 1;
    min-width: 200px;
}

.yt-comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.yt-comment-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s ease;
}

.yt-comment-row:hover {
    border-color: var(--border-hover);
}

.yt-rank {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dim);
    min-width: 24px;
    text-align: center;
    padding-top: 0.125rem;
}

.yt-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
}

.yt-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yt-comment-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.yt-comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.yt-comment-author {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.yt-comment-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.yt-comment-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.yt-comment-video-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-top: 0.25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yt-comment-video-link:hover {
    color: var(--accent);
}

.yt-comment-likes {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding-top: 0.125rem;
}

.yt-comment-likes svg {
    opacity: 0.5;
}

.yt-comment-completed {
    opacity: 0.4;
}

.yt-comment-completed .yt-comment-text {
    text-decoration: line-through;
}

.yt-comment-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding-top: 0.125rem;
}

.yt-comment-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.yt-comment-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.yt-comment-action-btn.active {
    color: var(--success);
}

.yt-comment-note-row {
    padding: 0.25rem 0.75rem 0.5rem 2.75rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.yt-comment-note-input {
    font-size: 0.8rem !important;
    min-height: unset !important;
    background: var(--bg-primary) !important;
}

.yt-comment-note-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0.35rem;
}

.yt-comment-note-preview:hover {
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .yt-comment-row {
        flex-wrap: wrap;
    }
    .yt-comment-avatar {
        width: 28px;
        height: 28px;
    }
    .yt-comment-likes {
        width: 100%;
        padding-left: calc(24px + 28px + 1.5rem);
    }
}

/* ── MentionEditor ── */

.mention-editor-wrapper {
    position: relative;
}

/* ── Autocomplete Dropdown (Slack-style) ── */

.mention-dropdown {
    position: absolute;
    z-index: 1000;
    width: 280px;
    max-height: 300px;
    overflow-y: auto;
    background: #1e2028;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);
    overscroll-behavior: contain;
}

.mention-dropdown::-webkit-scrollbar { width: 4px; }
.mention-dropdown::-webkit-scrollbar-track { background: transparent; }
.mention-dropdown::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }

.mention-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: background 0.08s;
}

.mention-dropdown-item:hover,
.mention-dropdown-item.active {
    background: rgba(91, 127, 245, 0.12);
    color: var(--text-primary);
}

.mention-dropdown-create {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.mention-dropdown-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 12px;
}

/* ── Type Badges (small colored dot + short label) ── */

.mention-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px 2px 5px;
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    line-height: 1;
}

/* Colored dot before label */
.mention-type-badge::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mention-type-character { color: #93a0f8; }
.mention-type-character::before { background: #818cf8; }
.mention-type-environment { color: #5edba8; }
.mention-type-environment::before { background: #34d399; }
.mention-type-item { color: #f0c95c; }
.mention-type-item::before { background: #fbbf24; }
.mention-type-new { color: var(--text-muted); }
.mention-type-new::before { background: var(--text-muted); }

/* ── Inline Chips ── */

.mention-chip {
    display: inline;
    padding: 0px 5px;
    border-radius: 3px;
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s;
    border: 1px solid transparent;
    line-height: 1.4;
}

.mention-chip:hover { filter: brightness(1.15); }

.mention-chip-character { background: rgba(70, 100, 200, 0.10); color: #8ca4e8; border-color: rgba(70, 100, 200, 0.35); }
.mention-chip-environment { background: rgba(30, 130, 60, 0.18); color: #5ed88a; border-color: rgba(30, 130, 60, 0.35); }
.mention-chip-item { background: rgba(190, 140, 30, 0.15); color: #d4a030; border-color: rgba(190, 140, 30, 0.35); }
.mention-chip-unresolved { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border-color: rgba(255,255,255,0.1); }
.mention-chip-classifying { background: rgba(200, 50, 50, 0.12); color: #d07070; border-color: rgba(200, 50, 50, 0.35); }
.mention-chip-temp { border-style: dashed; }
.mention-chip-loading { opacity: 0.7; }

.mention-chip-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: mention-spin 0.6s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}
@keyframes mention-spin { to { transform: rotate(360deg); } }

/* ── Chip Tooltip (popover on click) ── */

.mention-chip-tooltip {
    position: fixed;
    z-index: 2000;
    width: 360px;
    background: #1e2028;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.15);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    overflow: hidden;
}

.mention-chip-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.mention-chip-tooltip-body {
    padding: 10px 14px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.55;
    max-height: 120px;
    overflow-y: auto;
    cursor: text;
    outline: none;
    border-radius: 4px;
    transition: background 0.15s;
    white-space: pre-wrap;
}
.mention-chip-tooltip-body:focus {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
}

.mention-chip-tooltip-body::-webkit-scrollbar { width: 3px; }
.mention-chip-tooltip-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }

.mention-chip-tooltip-type-switcher {
    display: flex;
    gap: 2px;
    padding: 8px 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mention-type-switch-btn {
    padding: 3px 10px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}

.mention-type-switch-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }
.mention-type-switch-btn.active { background: rgba(129, 140, 248, 0.15); color: #a5b4fc; }
.mention-type-switch-btn.mention-type-character.active { background: rgba(129, 140, 248, 0.15); color: #a5b4fc; }
.mention-type-switch-btn.mention-type-environment.active { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; }
.mention-type-switch-btn.mention-type-item.active { background: rgba(251, 191, 36, 0.15); color: #fde68a; }

.mention-chip-tooltip-regen {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 10px;
}

.mention-chip-tooltip-prompt-input {
    flex: 1;
    padding: 5px 10px;
    background: var(--bg-sunken);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
}

.mention-chip-tooltip-prompt-input::placeholder { color: var(--text-dim); }
.mention-chip-tooltip-prompt-input:focus { outline: none; border-color: var(--accent); }

.mention-chip-tooltip-regen-btn {
    padding: 5px 12px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.12s;
}

.mention-chip-tooltip-regen-btn:hover { opacity: 0.85; }

.mention-chip-tooltip-save {
    display: block;
    width: calc(100% - 28px);
    margin: 0 14px 10px;
    padding: 6px 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.12s;
}

.mention-chip-tooltip-save:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }

/* ── Chain Dropdown (emotion/pose/gaze picker) ── */

.mention-chain-dropdown {
    position: absolute;
    z-index: 1000;
    width: 220px;
    background: #1e2028;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.mention-chain-header {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 2px 4px 6px;
    font-weight: 600;
}

.mention-chain-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.mention-chain-preset-btn {
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.1s;
}

.mention-chain-preset-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.mention-chain-preset-btn.active {
    background: rgba(129, 140, 248, 0.15);
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, 0.2);
}

.mention-chain-custom {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.mention-chain-input {
    flex: 1;
    padding: 4px 8px;
    background: var(--bg-sunken);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
}

.mention-chain-input::placeholder { color: var(--text-dim); }
.mention-chain-input:focus { outline: none; border-color: var(--accent); }

.mention-chain-skip {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.1s;
}

.mention-chain-skip:hover { background: rgba(255, 255, 255, 0.06); }

/* ── Placeholder ── */

.mention-editor[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-dim);
    pointer-events: none;
}

/* ── YouTube Comment Groups ── */

.yt-group-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yt-group-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.yt-group-row:hover { background: var(--bg-hover); }

.yt-group-count {
    flex-shrink: 0;
    min-width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 12px;
    padding: 0 8px;
}

.yt-group-text {
    flex: 1;
    font-size: 0.84rem;
    color: var(--text-primary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yt-group-likes {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.yt-group-detail {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 12px 4px 54px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    border-left: 2px solid var(--border);
    margin-left: 16px;
}

.yt-group-detail-text {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Scene Generator Tabs + Intro --- */

.scenegen-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.scenegen-tab {
    background: none;
    border: none;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.scenegen-tab:hover {
    color: var(--text-primary);
}

.scenegen-tab.active {
    color: #5b7ff5;
    border-bottom-color: #5b7ff5;
}

.scenegen-intro-form {
    background: var(--bg-elevated, #1a1c22);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}

.scenegen-intro-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.scenegen-intro-field-wide {
    grid-column: 1 / -1;
}

.scenegen-intro-result textarea {
    background: var(--bg-surface, #14151a);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
    resize: vertical;
}

@media (max-width: 600px) {
    .scenegen-intro-fields {
        grid-template-columns: 1fr;
    }
}

/* ── Script Analysis Panel ── */
.sg-analysis-panel {
    background: #1a1c22;
    border: 1px solid #292c32;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.sg-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e8eaf0;
    background: #22242c;
    user-select: none;
}
.sg-analysis-header:hover { background: #292c32; }
.sg-analysis-body {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sg-analysis-step {
    border-radius: 8px;
    border: 1px solid #292c32;
    overflow: hidden;
}
.sg-analysis-step-pending { opacity: 0.4; }
.sg-analysis-step-active { border-color: #5b7ff5; }
.sg-analysis-step-done { border-color: #292c32; }
.sg-analysis-step-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0a4b0;
    background: #22242c;
}
.sg-analysis-step-done .sg-analysis-step-title { color: #e8eaf0; }
.sg-analysis-step-active .sg-analysis-step-title { color: #5b7ff5; }
.sg-analysis-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #292c32;
    color: #5c6170;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sg-analysis-badge-done {
    background: #5dd39e22;
    color: #5dd39e;
}
.sg-analysis-step-body {
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    color: #a0a4b0;
    line-height: 1.6;
    white-space: pre-wrap;
    border-top: 1px solid #292c32;
}

/* ── Pipeline Progress ── */
.sg-pipeline-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem;
    background: #1a1c22;
    border: 1px solid #292c32;
    border-radius: 8px;
}
.sg-pipeline-step {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #5c6170;
    border: 1px solid #292c32;
    transition: all 0.2s;
}
.sg-pipeline-step-pending { opacity: 0.4; }
.sg-pipeline-step-active { border-color: #5b7ff5; color: #5b7ff5; }
.sg-pipeline-step-done { border-color: #5ed88a40; color: #5ed88a; }
.sg-pipeline-badge {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem; font-weight: 600;
    background: #292c32; color: #5c6170;
    flex-shrink: 0;
}
.sg-pipeline-badge-done {
    background: #5ed88a20; color: #5ed88a;
}
.sg-pipeline-badge-failed {
    background: #e5534b20; color: #e5534b; font-weight: 700;
}
.sg-pipeline-step-failed { border-color: #e5534b; color: #e5534b; }
.sg-critical-bar {
    padding: 0.75rem; background: #e5534b10; border: 1px solid #e5534b40; border-radius: 8px;
}
.sg-critical-msg { font-size: 0.8rem; color: #e5534b; line-height: 1.5; }

/* ── Pipeline Results ── */
.sg-pipeline-results { display: flex; flex-direction: column; gap: 0.5rem; }
.sg-pipeline-section {
    border: 1px solid #292c32;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1c22;
}
.sg-pipeline-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0a4b0;
    cursor: pointer;
    background: #22242c;
}
.sg-pipeline-section-header:hover { background: #292c32; }
.sg-pipeline-section-body {
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    color: #c8cad0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sg-pipeline-field { line-height: 1.5; }
.sg-pipeline-label { font-weight: 600; color: #a0a4b0; }
.sg-pipeline-script-section {
    padding: 0.4rem 0;
    border-bottom: 1px solid #292c32;
}
.sg-pipeline-script-section:last-child { border-bottom: none; }
.sg-pipeline-script-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sg-pipeline-entity {
    padding: 0.35rem 0;
    border-bottom: 1px solid #292c3280;
}
.sg-pipeline-entity:last-child { border-bottom: none; }
.sg-entity-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}
.sg-entity-char { background: #5b7ff520; color: #5b7ff5; }
.sg-entity-env { background: #5ed88a20; color: #5ed88a; }
.sg-entity-item { background: #f5a62320; color: #f5a623; }
.sg-entity-status {
    font-size: 0.65rem;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-weight: 500;
}
.sg-entity-status-new { background: #f5a62315; color: #f5a623; }
.sg-entity-status-existing { background: #5c617020; color: #5c6170; }
.sg-entity-status-approved { background: #5ed88a15; color: #5ed88a; }
.sg-entity-status-warn { background: #f5a62315; color: #f5a623; }
/* ── Character Status Bar (Scenes tab) ── */
.sg-char-status-bar {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem;
    padding: 0.5rem 0.6rem; background: #1a1c22; border: 1px solid #292c32; border-radius: 8px;
}
.sg-char-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem; border-radius: 5px; font-size: 0.72rem; font-weight: 500;
    border: 1px solid #292c32;
}
.sg-char-pill-ok { color: #c8cad0; }
.sg-char-pill-warn { color: #f5a623; border-color: #f5a62340; }
.sg-char-pill-missing { color: #e5534b; border-color: #e5534b40; }
.sg-char-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sg-dot-green { background: #5ed88a; box-shadow: 0 0 3px #5ed88a80; }
.sg-dot-orange { background: #f5a623; box-shadow: 0 0 3px #f5a62380; }
.sg-dot-red { background: #e5534b; box-shadow: 0 0 3px #e5534b80; }
.sg-char-pill-btn {
    background: none; border: 1px solid #e5534b40; color: #e5534b; border-radius: 3px;
    font-size: 0.65rem; padding: 0.05rem 0.35rem; cursor: pointer; display: flex; align-items: center; gap: 0.2rem;
}
.sg-char-pill-btn:hover { background: #e5534b20; }
.sg-char-pill-btn-gen { border-color: #f5a62340; color: #f5a623; }
.sg-char-pill-btn-gen:hover { background: #f5a62320; }

.sg-entity-dot-red {
    width: 8px; height: 8px; border-radius: 50%; background: #e5534b; flex-shrink: 0;
    box-shadow: 0 0 4px #e5534b80;
}
.sg-entity-action-btn {
    font-size: 0.72rem !important; padding: 0.15rem 0.5rem !important;
    border: 1px solid #292c32 !important; border-radius: 4px !important;
}
.sg-pipeline-scene {
    padding: 0.5rem 0;
    border-bottom: 1px solid #292c3280;
}
.sg-pipeline-scene:last-child { border-bottom: none; }

/* ── Bible Details ── */
.sg-bible-details { border: 1px solid #292c32; border-radius: 8px; overflow: hidden; }
.sg-bible-summary {
    display: flex; align-items: center;
    padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: #5c6170;
    background: #1a1c22; user-select: none;
}
.sg-bible-summary:hover { color: #a0a4b0; background: #22242c; }
.sg-bible-fields { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; background: #1a1c22; border-top: 1px solid #292c32; }
.sg-bible-yt-row { display: flex; gap: 0.5rem; align-items: center; }

/* ── QA Severity ── */
.sg-qa-score { font-size: 0.72rem; color: #5ed88a; font-weight: 600; }
.sg-qa-issue { font-size: 0.75rem; padding: 0.2rem 0; line-height: 1.4; }
.sg-sev-critical { color: #e5534b; }
.sg-sev-warning { color: #f5a623; }
.sg-sev-info { color: #5c6170; }

/* ── Per-Scene Feedback ── */
.sg-scene-feedback {
    margin-top: 0.5rem;
    border: 1px solid #5b7ff540;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1c22;
}
.sg-scene-feedback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.75rem;
    background: #22242c;
    font-size: 0.78rem;
    font-weight: 600;
    color: #a0a4b0;
}
.sg-scene-feedback-close {
    background: none;
    border: none;
    color: #5c6170;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0.25rem;
    line-height: 1;
}
.sg-scene-feedback-close:hover { color: #e8eaf0; }
.sg-scene-feedback-body {
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    color: #a0a4b0;
    line-height: 1.7;
    white-space: pre-wrap;
}