/* ==========================================================================
   EBOOK STUDIO - MODERN DESIGN SYSTEM & STYLE SHEET
   ========================================================================== */

/* Variables & Base System */
:root {
    --bg-app: #090d16;
    --bg-sidebar: #111827;
    --bg-header: #1f2937;
    --border-color: #374151;
    --border-light: #4b5563;
    
    --accent: #8b5cf6;
    --accent-hover: #7c3aed;
    --accent-glow: rgba(139, 92, 246, 0.25);
    
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --text-dark: #1f2937;
    
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --success: #10b981;
    
    --canvas-bg: #1e293b;
    --paper-bg: #ffffff;
    
    --shadow-premium: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --shadow-paper: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-theme {
    --bg-app: #f5f7fb;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --border-color: #d9e1ec;
    --border-light: #b8c4d4;
    --accent: #7c3aed;
    --accent-hover: #6d28d9;
    --accent-glow: rgba(124, 58, 237, 0.18);
    --text-main: #172033;
    --text-muted: #64748b;
    --text-dark: #172033;
    --canvas-bg: #e8edf4;
    --paper-bg: #ffffff;
    --shadow-premium: 0 10px 24px -8px rgba(30, 41, 59, 0.18);
    --shadow-paper: 0 18px 34px -12px rgba(30, 41, 59, 0.28);
}

/* Reset & Scrollbars */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hide {
    display: none !important;
}

body {
    background-color: var(--bg-app);
    color: var(--text-main);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

body.light-theme .studio-login-card,
body.light-theme .onboarding-dialog {
    background: rgba(255, 255, 255, 0.98);
}

body.light-theme #studio-login-form label { color: #475569; }
body.light-theme #studio-login-form input,
body.light-theme .form-group select,
body.light-theme .form-group input,
body.light-theme .form-group textarea,
body.light-theme .form-group-inline input {
    background: #ffffff;
    color: #172033;
}

body.light-theme .btn-primary { color: #ffffff; }
body.light-theme .btn-secondary:hover,
body.light-theme .btn-icon:hover,
body.light-theme #project-title:hover,
body.light-theme #project-title:focus,
body.light-theme .tab-btn:hover,
body.light-theme .add-item-btn,
body.light-theme .gallery-item,
body.light-theme .page-thumbnail-card,
body.light-theme .palette-card,
body.light-theme .step-card,
body.light-theme .style-toggle-btn,
body.light-theme .api-setup-box {
    background: #f8fafc;
}

body.light-theme .sidebar-tabs,
body.light-theme .story-arc-steps {
    background: #f3f6fa;
}

body.light-theme .tab-btn.active,
body.light-theme .page-thumbnail-card.active,
body.light-theme .step-card.active,
body.light-theme .style-toggle-btn.active {
    background: #f2edff;
}

body.light-theme .ai-image-studio,
body.light-theme .ai-creative-control,
body.light-theme .ai-editorial-director {
    background: linear-gradient(155deg, #faf7ff, #f7fbff);
}

body.light-theme .ai-quota-card,
body.light-theme .ai-image-result,
body.light-theme .ai-batch-progress,
body.light-theme .onboarding-steps li {
    background: #f5f7fb;
}

body.light-theme .ai-quota-track { background: #dde4ee; }
body.light-theme .ai-image-result img { background: #eef2f7; }
body.light-theme .btn-quiet,
body.light-theme .ai-batch-button,
body.light-theme .ai-batch-progress strong,
body.light-theme .ai-visual-route-note,
body.light-theme .onboarding-steps strong { color: #6d28d9; }
body.light-theme .free-only-badge,
body.light-theme .ai-cost-note { color: #047857; }
body.light-theme .onboarding-kicker,
body.light-theme .onboarding-product span { color: #7c3aed; }
body.light-theme .onboarding-tip { color: #047857; }

.studio-auth-gate {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.18), transparent 34%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.12), transparent 30%),
        var(--bg-app);
}

.studio-login-card {
    width: min(440px, 100%);
    padding: 38px;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: rgba(17, 24, 39, 0.94);
    box-shadow: var(--shadow-premium);
}

.studio-login-brand {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent), #ec4899);
    font-size: 24px;
}

.studio-login-kicker {
    color: #c4b5fd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin-bottom: 8px;
}

.studio-login-card h1 {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    margin-bottom: 8px;
}

#studio-auth-message,
.studio-login-note {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.studio-auth-error {
    min-height: 20px;
    margin: 12px 0;
    color: #fca5a5;
    font-size: 13px;
}

#studio-login-form {
    display: grid;
    gap: 8px;
}

#studio-login-form label {
    margin-top: 6px;
    color: #d1d5db;
    font-size: 12px;
    font-weight: 600;
}

#studio-login-form input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #0f172a;
    color: var(--text-main);
    outline: none;
}

#studio-login-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

#studio-login-form .btn {
    margin-top: 12px;
    padding: 12px 16px;
}

.studio-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--text-muted);
    font-size: 11px;
}

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

.studio-login-note {
    margin-top: 18px;
    text-align: center;
}

.studio-user-email {
    max-width: 150px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* App Layout */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Top Bar Styling */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    height: 60px;
    z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.guided-workflow {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(140px, 260px) auto;
    gap: 18px;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.14), rgba(14, 165, 233, 0.08));
    border-bottom: 1px solid var(--border-color);
}

.guided-workflow-copy { min-width: 0; }
.guided-workflow-step { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.guided-workflow-copy strong { display: block; margin: 2px 0; font-size: 14px; color: var(--text-main); }
.guided-workflow-copy p { margin: 0; color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guided-workflow-progress { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(148, 163, 184, .18); }
.guided-workflow-progress span { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #38bdf8); transition: width .25s ease; }
.guided-workflow .btn { white-space: nowrap; }

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 24px;
    color: var(--accent);
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.logo-text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.accent-text {
    color: var(--accent);
}

.project-title-container {
    display: flex;
    /* Base automática, e não 290px fixos: o conteúdo (título + indicador de
       salvamento) mede mais do que isso, e a diferença vazava para dentro da
       barra de ações, onde o botão "Novo projeto" — que é sticky — passava por
       cima do indicador. */
    flex: 0 1 auto;
    max-width: 400px;
    min-width: 0;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.editorial-profile-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 138px;
    padding: 6px 9px;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    cursor: pointer;
}

.editorial-profile-switch > i:first-child { color: var(--accent); font-size: 17px; }
.editorial-profile-switch > i:last-child { margin-left: auto; color: var(--text-muted); font-size: 9px; }
.editorial-profile-switch span { display: grid; gap: 1px; text-align: left; }
.editorial-profile-switch small { color: var(--text-muted); font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.editorial-profile-switch strong { font-size: 11px; white-space: nowrap; }
.editorial-profile-switch:hover { border-color: var(--accent); }

body[data-editorial-profile="adult_christian"] {
    --accent: #b7791f;
    --accent-hover: #986515;
    --accent-glow: rgba(183, 121, 31, .2);
}

body[data-editorial-profile="adult_christian"] .guided-workflow {
    background: linear-gradient(90deg, rgba(183, 121, 31, .14), rgba(30, 64, 175, .07));
}

#project-title {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    max-width: 250px;
    /* Campo de texto tem largura intrínseca própria e, sem isto, recusa
       encolher — empurrando o vizinho para fora do container. */
    flex: 0 1 auto;
    min-width: 0;
}

#project-title:hover, #project-title:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
    outline: none;
}

.saved-indicator {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    /* Sem isto o texto quebra em duas linhas dentro de uma barra de 60px. */
    white-space: nowrap;
    flex: 0 0 auto;
}

.saved-indicator i {
    color: var(--success);
}

.top-actions {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 2px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.top-actions .btn { flex: 0 0 auto; white-space: nowrap; }
.btn-new-project {
    position: sticky;
    left: 0;
    z-index: 3;
    color: #fff;
    background: var(--accent);
    box-shadow: 7px 0 12px var(--bg-header);
}
.btn-new-project:hover { color: #fff; background: var(--accent-hover); }

/* Main Area Layout */
.main-content {
    display: flex;
    flex: 1;
    height: calc(100vh - 134px);
    overflow: hidden;
}

/* Buttons System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition-normal);
}

.btn-primary {
    background-color: var(--accent);
    color: var(--text-main);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 0 15px var(--accent-glow);
}

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

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--border-light);
}

.btn-full {
    width: 100%;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}

.btn-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-danger-hover:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: var(--danger) !important;
}

/* Left Sidebar (Tabs & Panels) */
.sidebar-left {
    display: flex;
    width: 340px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    height: 100%;
}

.sidebar-tabs {
    display: flex;
    flex-direction: column;
    width: 70px;
    border-right: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    gap: 8px;
    align-items: center;
}

.tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 9px;
    transition: var(--transition-normal);
}

.tab-btn i {
    font-size: 18px;
}

.tab-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active {
    color: var(--accent);
    background: rgba(139, 92, 246, 0.1);
}

.tab-content-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.panel-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

.panel-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Insertables & Gallery Grid */
.add-section {
    margin-bottom: 24px;
}

.add-section h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.add-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.add-item-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-fast);
}

.add-item-btn:hover {
    border-color: var(--accent);
    background: rgba(139, 92, 246, 0.05);
    transform: translateY(-1px);
}

/* Asset Galleries */
.assets-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.gallery-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: var(--transition-normal);
}

.gallery-item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    pointer-events: none;
    transition: var(--transition-fast);
}

.gallery-item span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.gallery-item:hover {
    border-color: var(--accent);
    background: rgba(139, 92, 246, 0.05);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:active {
    cursor: grabbing;
}

/* Backgrounds gallery */
.backgrounds-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bg-gallery-item {
    position: relative;
    height: 70px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.bg-gallery-item span {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: white;
}

.bg-gallery-item:hover {
    border-color: var(--accent);
    transform: scale(1.02);
}

/* Pages Manager List */
.pages-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 20px;
}

.pages-empty-state {
    min-height: 260px;
    padding: 28px 16px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: var(--text-muted);
}

.pages-empty-state > i {
    font-size: 32px;
    color: var(--accent);
}

.pages-empty-state strong {
    color: var(--text-main);
}

.pages-empty-state p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.5;
}

.page-thumbnail-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px;
    cursor: pointer;
    transition: var(--transition-normal);
}

.page-thumbnail-card:hover {
    border-color: var(--border-light);
    background: rgba(255, 255, 255, 0.04);
}

.page-thumbnail-card.active {
    border-color: var(--accent);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.15);
}

.page-index {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    width: 20px;
    text-align: center;
}

.thumbnail-preview {
    width: 90px;
    height: 60px;
    background-color: var(--canvas-bg);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.thumbnail-preview.has-bg {
    background-color: white;
}

.thumbnail-preview.portrait {
    width: 54px;
    height: 82px;
}

.page-master-badge {
    align-self: center;
    padding: 3px 5px;
    border-radius: 5px;
    background: #eee8dc;
    color: #75644a;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .06em;
}

.typesetting-blank-page-label {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 1;
    display: grid;
    justify-items: center;
    width: min(280px, 70%);
    padding: 22px;
    border: 1px dashed #c9c0b2;
    border-radius: 14px;
    color: #958b7e;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.typesetting-blank-page-label i { margin-bottom: 8px; font-size: 26px; }
.typesetting-blank-page-label span { margin-top: 5px; font-size: 11px; line-height: 1.4; }

.thumbnail-preview-elements {
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: none;
    transform: scale(0.125); /* scaled down from 720x480 */
    transform-origin: top left;
}

.thumbnail-actions {
    margin-left: auto;
    display: flex;
    gap: 2px;
}

/* Color Psychology Styles */
.palettes-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.palette-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 15px;
    transition: var(--transition-normal);
}

.palette-card:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
}

.palette-info h4 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.palette-info p {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
}

.palette-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 30px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-inset);
}

.swatch {
    height: 100%;
    transition: var(--transition-fast);
}

.swatch:hover {
    transform: scaleY(1.15);
}

/* Storytelling Styles */
.storytelling-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.form-group select, .form-group input, .form-group textarea {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 8px 12px;
    font-size: 13px;
    transition: var(--transition-fast);
}

.form-group select:focus, .form-group input:focus, .form-group textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.story-arc-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    padding: 10px;
    border: 1px solid var(--border-color);
    max-height: 240px;
    overflow-y: auto;
}

.step-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition-fast);
}

.step-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.step-card.active {
    border-left-color: var(--accent);
    background: rgba(139, 92, 246, 0.08);
}

.step-check {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 2px;
}

.step-card.active .step-check {
    color: var(--accent);
}

.step-card.completed .step-check {
    color: var(--success);
}

.step-details h5 {
    font-size: 12px;
    font-weight: 700;
}

.step-details p {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.3;
}

.story-guidelines {
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-md);
    padding: 15px;
    margin-top: 10px;
}

.story-guidelines h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
}

.story-guidelines ul {
    list-style: none;
}

.story-guidelines li {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.4;
    position: relative;
    padding-left: 12px;
}

.story-guidelines li::before {
    content: "•";
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Workspace Canvas Area */
.workspace-area {
    flex: 1;
    background-color: var(--canvas-bg);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.canvas-toolbar {
    height: 48px;
    background-color: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.zoom-controls, .page-navigation, .canvas-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

#zoom-value, #page-indicator {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.canvas-scroll-container {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

/* Page Editor Canvas styling */
.canvas-wrapper {
    position: relative;
    padding: 10px;
    box-shadow: var(--shadow-premium);
    transition: transform 0.2s ease-out;
}

.ebook-page {
    position: relative;
    width: 720px;
    height: 480px;
    background-color: var(--paper-bg);
    border-radius: 4px;
    box-shadow: var(--shadow-paper);
    overflow: hidden;
    user-select: none;
    background-size: cover;
    background-position: center;
}

.ebook-page.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-bg);
}

.empty-canvas-state {
    position: relative;
    z-index: 2;
    width: min(430px, 80%);
    padding: 42px;
    border: 2px dashed var(--border-light);
    border-radius: 20px;
    text-align: center;
    color: var(--text-muted);
}

.empty-canvas-state > i {
    font-size: 44px;
    color: var(--accent);
    margin-bottom: 14px;
}

.empty-canvas-state h2 {
    margin: 0 0 10px;
    color: var(--text-main);
    font-family: 'Fredoka', sans-serif;
}

.empty-canvas-state p {
    margin: 0 0 20px;
    line-height: 1.6;
}

/* Grid overlay when drag element */
.ebook-page::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-size: 30px 30px;
    background-image: 
        linear-gradient(to right, rgba(139, 92, 246, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
    z-index: 1;
}

/* Elements on Canvas */
.canvas-element {
    position: absolute;
    box-sizing: border-box;
    cursor: move;
    z-index: 5;
    padding: 4px;
    outline: 1px solid transparent;
    transition: outline-color var(--transition-fast);
}

.canvas-element.selected {
    outline: 2px solid var(--accent);
    z-index: 20 !important;
}

.canvas-element.generated-footnote-element {
    z-index: 40 !important;
    cursor: default;
    pointer-events: none;
}

/* Element inner content */
.canvas-element-content {
    width: 100%;
    height: 100%;
    user-select: none;
}

/* Text Element specific styling */
.canvas-element[data-type="title"] {
    min-width: 120px;
}

.canvas-element[data-type="title"] .canvas-element-content {
    font-family: 'Fredoka', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    white-space: pre-wrap;
    word-break: break-word;
}

.canvas-element[data-type="paragraph"] {
    min-width: 150px;
}

.canvas-element[data-type="paragraph"] .canvas-element-content {
    font-family: 'Playpen Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Image Element specific styling */
.canvas-element[data-type="image"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-element[data-type="image"] img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Shape Element specific styling */
.canvas-element[data-type="rect"] .canvas-element-content {
    background-color: #3b82f6;
    border: 1px solid #1d4ed8;
}

.canvas-element[data-type="circle"] .canvas-element-content {
    background-color: #ef4444;
    border: 1px solid #b91c1c;
    border-radius: 50%;
}

/* Resize Handles */
.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: white;
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: none;
    z-index: 30;
}

.canvas-element.selected .resize-handle {
    display: block;
}

.resize-handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.resize-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.resize-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.resize-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }

/* Smart Alignment Guides */
.smart-guide {
    position: absolute;
    background-color: #ff007f;
    z-index: 100;
    pointer-events: none;
    display: none;
}

.smart-guide-x {
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px dashed #ff007f;
}

.smart-guide-y {
    top: 0;
    height: 100%;
    width: 1px;
    border-left: 1px dashed #ff007f;
}

/* Right Sidebar (Properties Inspector) */
.sidebar-right {
    width: 320px;
    background-color: var(--bg-sidebar);
    border-left: 1px solid var(--border-color);
    height: 100%;
    overflow-y: auto;
    position: relative;
}

.no-selection-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    gap: 15px;
}

.no-selection-message i {
    font-size: 32px;
    color: var(--border-light);
}

.no-selection-message p {
    font-size: 13px;
    line-height: 1.5;
}

.inspector-content {
    padding: 20px;
}

.inspector-content.hide {
    display: none;
}

@media (max-width: 1180px) {
    .sidebar-left { width: 290px; }
    .sidebar-right { width: 270px; }
    .saved-indicator { display: none; }
    .top-actions { gap: 6px; }
    .top-actions .btn { padding: 8px 10px; }
    .studio-user-email { display: none; }
    .editorial-profile-switch small { display: none; }
    .editorial-profile-switch { min-width: auto; }
}

@media (max-width: 760px) {
    .top-bar {
        height: 104px;
        padding: 8px 10px;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 42px 42px;
    }
    .logo-text { display: none; }
    .editorial-profile-switch { justify-self: start; }
    .editorial-profile-switch strong { display: none; }
    .editorial-profile-switch > i:last-child { display: none; }
    .project-title-container { justify-content: flex-end; }
    #project-title { max-width: 220px; text-align: right; }
    .top-actions {
        grid-column: 1 / -1;
        justify-content: center;
        overflow-x: auto;
    }
    .top-actions .btn { white-space: nowrap; }
    .guided-workflow { grid-template-columns: 1fr auto; padding: 10px 14px; }
    .guided-workflow-progress { display: none; }
    .guided-workflow-copy p { white-space: normal; }
    .main-content { height: calc(100vh - 184px); }
    .sidebar-left { width: 250px; min-width: 250px; }
    .sidebar-tabs { width: 56px; }
    .tab-btn { width: 48px; }
    .tab-content-container { padding: 14px; }
    .sidebar-right { display: none; }
    .workspace-area { min-width: 0; }
    .canvas-scroll-container {
        justify-content: flex-start;
        padding: 18px;
    }
}

.element-tag {
    font-size: 10px;
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.inspector-section {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 0;
}

.inspector-section:last-child {
    border-bottom: none;
}

.inspector-section h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.semantic-style-section {
    margin: 0 -4px;
    padding: 16px 4px;
    background: linear-gradient(135deg, rgba(183, 121, 31, .08), transparent);
}

.semantic-style-section > label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 800;
}

.semantic-style-section select { width: 100%; }
.semantic-style-section p {
    margin: 8px 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
}

.semantic-style-section small {
    display: flex;
    gap: 6px;
    padding: 8px;
    color: #6f5220;
    background: rgba(254, 243, 199, .72);
    border: 1px solid rgba(217, 169, 69, .35);
    border-radius: 8px;
    font-size: 9px;
    line-height: 1.4;
}

.footnote-editor-section {
    margin: 0 -4px;
    padding: 16px 4px;
    border-top: 1px dashed rgba(111, 82, 32, .28);
}

.footnote-editor-section > label {
    display: block;
    margin: 8px 0 5px;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 800;
}

.footnote-editor-section select,
.footnote-editor-section textarea { width: 100%; }

.footnote-editor-section textarea {
    min-height: 76px;
    resize: vertical;
    line-height: 1.45;
}

.footnote-editor-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 9px;
}

.footnote-editor-section > small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

/* Professional Portuguese-language review */
.manuscript-paste-box {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-app);
}

.manuscript-paste-box textarea {
    width: 100%;
    resize: vertical;
    min-height: 130px;
}

.language-review-dialog {
    width: min(1180px, calc(100vw - 40px));
    max-width: 1180px;
    height: min(820px, calc(100vh - 40px));
    padding: 0;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    color: var(--text-main);
    background: var(--bg-sidebar);
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.28);
}

.language-review-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.language-review-dialog::backdrop { background: rgba(15, 23, 42, 0.62); }

.language-review-header,
.language-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--border-color);
}

.language-review-header h2 { margin: 4px 0 6px; }
.language-review-header p { margin: 0; color: var(--text-muted); }

.language-review-body {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    min-height: 0;
    height: auto;
}

.language-review-summary {
    padding: 26px;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    background: linear-gradient(155deg, rgba(180, 129, 43, 0.09), rgba(255, 255, 255, 0));
}

.language-review-summary h3 { margin: 8px 0; }
.language-review-summary > p { color: var(--text-muted); line-height: 1.55; }
.language-review-summary ul { display: grid; gap: 10px; padding: 0; margin: 22px 0; list-style: none; }
.language-review-summary li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.language-review-summary li i { color: #15803d; }

.language-review-protection {
    display: flex;
    gap: 12px;
    padding: 14px;
    margin: 18px 0;
    border: 1px solid rgba(21, 128, 61, 0.22);
    border-radius: 12px;
    color: #166534;
    background: rgba(220, 252, 231, 0.58);
    font-size: 13px;
    line-height: 1.5;
}

.language-review-progress { min-height: 42px; margin: 14px 0 0; font-size: 13px; font-weight: 700; }

.language-review-results { padding: 26px; overflow-y: auto; min-width: 0; }
.language-review-results-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }
.language-review-results-header h3 { margin: 5px 0 0; }
.language-review-results-header label { display: grid; gap: 5px; min-width: 210px; font-size: 12px; font-weight: 800; }
.language-review-results-header select { width: 100%; }

.language-review-empty { display: grid; place-items: center; text-align: center; min-height: 360px; color: var(--text-muted); }
.language-review-empty i { font-size: 34px; color: var(--accent); }
.language-review-empty h3 { margin: 12px 0 4px; color: var(--text-main); }
.language-review-empty p { max-width: 520px; line-height: 1.6; }
.language-review-list { display: grid; gap: 16px; }

.language-issue-card {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-left: 4px solid #b7791f;
    border-radius: 14px;
    background: var(--bg-app);
}
.language-issue-card.reviewed { opacity: 0.68; border-left-color: #15803d; }
.language-issue-card > header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.language-issue-card > header small { color: var(--text-muted); text-align: right; }
.language-issue-category { padding: 5px 9px; border-radius: 999px; background: rgba(180, 129, 43, 0.14); color: #7c4f0e; font-size: 11px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.language-issue-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 10px; }
.language-issue-comparison p { margin: 0; padding: 13px; border-radius: 10px; background: var(--bg-sidebar); line-height: 1.55; overflow-wrap: anywhere; }
.language-issue-comparison strong { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; }
.language-issue-comparison p:last-child { background: rgba(220, 252, 231, 0.48); }
.language-issue-explanation { margin: 10px 0 14px; color: var(--text-muted); line-height: 1.55; }
.language-issue-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.language-issue-actions label { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; }

.language-review-footer { border-top: 1px solid var(--border-color); border-bottom: 0; color: var(--text-muted); font-size: 13px; }

@media (max-width: 820px) {
    .language-review-body { grid-template-columns: 1fr; overflow-y: auto; }
    .language-review-summary { border-right: 0; border-bottom: 1px solid var(--border-color); }
    .language-review-results { overflow: visible; }
    .language-issue-comparison { grid-template-columns: 1fr; }
    .language-review-results-header, .language-issue-actions { align-items: stretch; flex-direction: column; }
}

.properties-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.properties-row .form-group {
    flex: 1;
}

.properties-row-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.form-group-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group-inline label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.form-group-inline input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 6px;
    font-size: 11px;
    width: 100%;
}

.text-style-actions {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.style-toggle-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition-fast);
}

.style-toggle-btn:hover {
    color: var(--text-main);
    border-color: var(--border-light);
}

.style-toggle-btn.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

.animation-preview-control {
    margin-top: 15px;
}

/* Preview Modal System */
.preview-dialog {
    width: 90%;
    max-width: 960px;
    height: 80%;
    max-height: 640px;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    margin: auto;
    padding: 0;
    overflow: hidden;
    outline: none;
}

.preview-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

.preview-header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
}

.preview-header h2 {
    font-size: 16px;
    font-weight: 700;
}

.preview-body {
    height: calc(100% - 90px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: var(--canvas-bg);
}

.preview-nav-btn {
    width: 48px;
    height: 48px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: var(--transition-normal);
}

.preview-nav-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

.preview-page-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-page {
    position: relative;
    width: 720px;
    height: 480px;
    background-color: white;
    box-shadow: var(--shadow-paper);
    border-radius: 4px;
    overflow: hidden;
    transform: scale(0.9);
}

.preview-page .canvas-element {
    cursor: default;
}

.preview-footer {
    height: 40px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

#preview-page-counter {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

/* ==========================================================================
   KID-FRIENDLY ANIMATIONS (KEYFRAMES & TRIGGERS)
   ========================================================================== */

/* 1. Bounce */
.anim-bounce {
    animation-duration: 0.8s;
    animation-fill-mode: both;
    transform-origin: center bottom;
}
.anim-bounce-trigger {
    animation-name: bounceKey;
}
@keyframes bounceKey {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0) scaleY(1);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }
    70% {
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }
    90% {
        transform: translate3d(0,-4px,0) scaleY(1.02);
    }
}

/* 2. Spin */
.anim-spin {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.anim-spin-trigger {
    animation-name: spinKey;
}
@keyframes spinKey {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 3. Float (Looping animation by default or single) */
.anim-float {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.anim-float-trigger {
    animation-name: floatKey;
}
@keyframes floatKey {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* 4. Pulse */
.anim-pulse {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.anim-pulse-trigger {
    animation-name: pulseKey;
}
@keyframes pulseKey {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

/* 5. Wobble */
.anim-wobble {
    animation-duration: 0.8s;
    animation-fill-mode: both;
}
.anim-wobble-trigger {
    animation-name: wobbleKey;
}
@keyframes wobbleKey {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-5deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-3deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}

/* 6. Fade In */
.anim-fade-in {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.anim-fade-in-trigger {
    animation-name: fadeInKey;
}
@keyframes fadeInKey {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   AI ASSISTANT SIDEBAR PANEL & SPINNER
   ========================================================================== */
.api-setup-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
}

.ai-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.ai-status-indicator i {
    font-size: 8px;
    color: #fbbf24;
}

.ai-status-indicator.offline i {
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}

.ai-status-indicator.online i {
    color: var(--success);
    text-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.ai-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    gap: 12px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-color);
}

.ai-loading-container.hide {
    display: none;
}

.ai-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(139, 92, 246, 0.15);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: ai-spin-kf 0.8s linear infinite;
}

@keyframes ai-spin-kf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#ai-loading-text {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.ai-image-studio {
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), rgba(17, 24, 39, 0.2));
}

.ai-image-heading,
.ai-quota-card > div,
.ai-image-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.free-only-badge {
    padding: 4px 7px;
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 999px;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.1);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.ai-quota-card {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-muted);
    font-size: 10px;
}

.ai-quota-card strong {
    color: var(--text-main);
}

.ai-quota-track {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #263244;
}

.ai-quota-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8b5cf6, #c084fc);
    transition: width 0.3s ease;
}

.ai-quota-track.final span {
    background: linear-gradient(90deg, #f59e0b, #fcd34d);
}

#ai-image-prompt {
    width: 100%;
    resize: vertical;
    min-height: 82px;
}

.btn-quiet {
    margin-bottom: 10px;
    border: 1px dashed var(--border-light);
    color: #c4b5fd;
    background: transparent;
}

.ai-image-result {
    margin-top: 12px;
    padding: 9px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.85);
}

.ai-image-result img {
    display: block;
    width: 100%;
    max-height: 250px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: #060a12;
}

.ai-image-result p {
    margin: 8px 0;
    color: var(--text-muted);
    font-size: 10px;
}

.ai-batch-button {
    margin-top: 9px;
    border-color: rgba(192, 132, 252, 0.55);
    color: #ddd6fe;
}

.ai-batch-progress {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.78);
    font-size: 10px;
}

.ai-batch-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.ai-batch-progress strong {
    color: #ddd6fe;
}

.ai-variation-panel {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.ai-variation-panel label {
    color: #ddd6fe;
    font-size: 10px;
    font-weight: 700;
}

.ai-variation-panel textarea {
    width: 100%;
    min-height: 54px;
    resize: vertical;
}

.ai-variation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ai-variation-actions .btn {
    min-height: 38px;
    padding: 7px;
    font-size: 9px;
}

.ai-image-actions .btn {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 10px;
}

.btn-danger-soft {
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   EDITORIAL WORKSPACES
   ========================================================================== */
.editorial-profile-dialog {
    position: relative;
    width: min(850px, calc(100vw - 28px));
    padding: 0;
    overflow: hidden;
    color: #172033;
    border: 0;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .36);
}

.editorial-profile-dialog::backdrop { background: rgba(15, 23, 42, .76); backdrop-filter: blur(7px); }
.editorial-profile-dialog header { padding: 30px 34px 22px; background: linear-gradient(120deg, #f5f3ff, #fffaf0); }
.editorial-profile-dialog header span { color: #7c3aed; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.editorial-profile-dialog h2 { margin: 7px 0; font-family: 'Playfair Display', serif; font-size: 34px; }
.editorial-profile-dialog header p { max-width: 690px; color: #64748b; line-height: 1.55; }
.editorial-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 24px 34px; }
.editorial-profile-card {
    display: grid;
    gap: 10px;
    padding: 24px;
    text-align: left;
    color: #172033;
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.editorial-profile-card:hover { transform: translateY(-3px); box-shadow: 0 16px 35px rgba(15, 23, 42, .12); }
.editorial-profile-card.children:hover { border-color: #8b5cf6; }
.editorial-profile-card.adult:hover { border-color: #b7791f; }
.editorial-profile-card > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; font-size: 22px; }
.editorial-profile-card.children > i { color: #7c3aed; background: #ede9fe; }
.editorial-profile-card.adult > i { color: #986515; background: #fef3c7; }
.editorial-profile-card strong { font-family: 'Playfair Display', serif; font-size: 23px; }
.editorial-profile-card span { color: #475569; line-height: 1.5; }
.editorial-profile-card em { color: #64748b; font-size: 11px; font-style: normal; line-height: 1.45; }
.editorial-profile-dialog footer { display: flex; gap: 10px; padding: 15px 34px 22px; color: #64748b; font-size: 11px; line-height: 1.45; }
.editorial-profile-dialog footer i { color: #10b981; }
.editorial-profile-close { position: absolute; top: 18px; right: 18px; color: #475569; }

@media (max-width: 660px) {
    .editorial-profile-grid { grid-template-columns: 1fr; padding: 18px; }
    .editorial-profile-dialog header { padding: 26px 22px 18px; }
    .editorial-profile-dialog h2 { font-size: 28px; }
    .editorial-profile-dialog footer { padding: 14px 22px 22px; }
}

/* Start over without trapping the user in the current project */
.new-project-dialog {
    width: min(760px, calc(100vw - 28px));
    padding: 0;
    overflow: hidden;
    color: #172033;
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .38);
}
.new-project-dialog::backdrop { background: rgba(15, 23, 42, .7); backdrop-filter: blur(6px); }
.new-project-dialog-header { display: flex; justify-content: space-between; gap: 22px; padding: 26px 28px 20px; border-bottom: 1px solid #e2e8f0; background: linear-gradient(120deg, #fffaf0, #f8fafc); }
.new-project-dialog-header h2 { margin: 5px 0 7px; font-family: 'Playfair Display', serif; font-size: 30px; }
.new-project-dialog-header p { max-width: 630px; margin: 0; color: #64748b; font-size: 13px; line-height: 1.55; }
.new-project-dialog-body { display: grid; gap: 18px; padding: 22px 28px; background: #f8fafc; }
.new-project-current { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.new-project-current > i { width: 42px; height: 42px; display: grid; place-items: center; color: #986515; background: #fef3c7; border-radius: 12px; }
.new-project-current div { display: grid; gap: 2px; min-width: 0; }
.new-project-current span { color: #986515; font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.new-project-current strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-project-current small { color: #64748b; }
.new-project-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.new-project-option { display: grid; align-content: start; gap: 8px; min-height: 170px; padding: 20px; text-align: left; color: #172033; border: 2px solid #e2e8f0; border-radius: 16px; background: #fff; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.new-project-option:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15, 23, 42, .1); }
.new-project-option > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; }
.new-project-option strong { font-size: 15px; line-height: 1.3; }
.new-project-option span { color: #64748b; font-size: 12px; line-height: 1.5; }
.new-project-option.preserve:hover { border-color: #b7791f; }
.new-project-option.preserve > i { color: #986515; background: #fef3c7; }
.new-project-option.discard:hover { border-color: #dc2626; }
.new-project-option.discard > i { color: #b91c1c; background: #fee2e2; }
.new-project-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 28px; border-top: 1px solid #e2e8f0; }
.new-project-dialog-footer span { color: #64748b; font-size: 11px; line-height: 1.45; }

@media (max-width: 620px) {
    .new-project-dialog-header, .new-project-dialog-body, .new-project-dialog-footer { padding-left: 18px; padding-right: 18px; }
    .new-project-dialog-header h2 { font-size: 25px; }
    .new-project-options { grid-template-columns: 1fr; }
    .new-project-option { min-height: auto; }
    .new-project-dialog-footer { align-items: stretch; flex-direction: column; }
}

/* ==========================================================================
   FIRST-RUN GUIDE
   ========================================================================== */
.onboarding-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: auto;
    color: var(--text-main);
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 24px;
    background: #111827;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.onboarding-dialog::backdrop {
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(8px);
}

.onboarding-hero {
    padding: 30px 32px 22px;
    background: radial-gradient(circle at top right, rgba(192, 132, 252, 0.2), transparent 42%);
}

.onboarding-kicker,
.onboarding-product span {
    color: #c4b5fd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.onboarding-hero h2 {
    margin: 8px 0 10px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 42px);
}

.onboarding-hero p,
.onboarding-product p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.onboarding-product {
    display: flex;
    gap: 16px;
    margin: 0 32px 22px;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.09), rgba(139, 92, 246, 0.08));
}

.onboarding-product-icon {
    display: grid;
    flex: 0 0 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.16);
}

.onboarding-product h3 {
    margin: 5px 0;
    font-size: 18px;
}

.onboarding-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0 32px;
    list-style: none;
}

.onboarding-steps li {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
}

.onboarding-steps strong {
    color: #ddd6fe;
    font-size: 12px;
}

.onboarding-steps span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.onboarding-tip {
    display: flex;
    gap: 10px;
    margin: 18px 32px 0;
    padding: 12px 14px;
    color: #a7f3d0;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.09);
    font-size: 11px;
    line-height: 1.5;
}

.onboarding-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 22px 32px 30px;
}

@media (max-width: 640px) {
    .onboarding-hero,
    .onboarding-actions { padding-left: 20px; padding-right: 20px; }
    .onboarding-product,
    .onboarding-tip { margin-left: 20px; margin-right: 20px; }
    .onboarding-steps { grid-template-columns: 1fr; padding: 0 20px; }
    .onboarding-actions { flex-direction: column-reverse; }
    .onboarding-actions .btn { width: 100%; }
}

.ai-cost-note {
    display: flex;
    gap: 7px;
    margin-top: 10px;
    color: #6ee7b7;
    font-size: 10px;
    line-height: 1.4;
}

.ai-visual-route-note {
    margin: 7px 0 0;
    padding: 8px 9px;
    border-left: 3px solid #c084fc;
    border-radius: 0 8px 8px 0;
    color: #ddd6fe;
    background: rgba(139, 92, 246, 0.09);
    font-size: 10px;
    line-height: 1.45;
}

.ai-creative-control {
    border: 1px solid rgba(139, 92, 246, .45);
    background: linear-gradient(145deg, rgba(139, 92, 246, .12), rgba(236, 72, 153, .07));
}

.ai-creative-note {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.ai-art-director {
    padding: 13px;
    border: 1px solid rgba(14, 165, 233, .38);
    border-radius: var(--radius-md);
    background: linear-gradient(155deg, rgba(14, 165, 233, .09), rgba(139, 92, 246, .08));
}

.ai-art-director .panel-desc { margin: 8px 0 12px; }

.ai-editorial-director {
    padding: 13px;
    border: 1px solid rgba(16, 185, 129, .38);
    border-radius: var(--radius-md);
    background: linear-gradient(155deg, rgba(16, 185, 129, .08), rgba(14, 165, 233, .06));
}

.ai-editorial-director .panel-desc { margin: 8px 0 12px; }
.ai-editorial-director .art-director-badge {
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, .35);
    background: rgba(16, 185, 129, .12);
}

.ai-section-divider {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}

.ai-editorial-result,
.ai-refinement-result,
.ai-content-audit {
    margin-top: 10px;
    padding: 11px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, .45);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.ai-editorial-result { border-left: 3px solid #10b981; }

.ai-refinement-result {
    display: grid;
    gap: 7px;
}

.ai-refinement-result strong { color: var(--text-main); }
.ai-refinement-result label { font-size: 9px; font-weight: 700; color: var(--text-muted); }
.ai-refinement-result textarea { min-height: 130px; resize: vertical; }

.ai-refinement-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ai-refinement-checks span {
    padding: 3px 6px;
    border-radius: 999px;
    color: #6ee7b7;
    background: rgba(16, 185, 129, .1);
    font-size: 8px;
}

.ai-refinement-actions { display: flex; gap: 7px; }
.ai-refinement-actions .btn { flex: 1; }
#btn-ai-audit-book { margin-top: 9px; }

.ai-content-audit { display: grid; gap: 8px; }
.ai-content-audit p,
.ai-content-audit ul { margin: 0; }
.ai-content-audit ul { padding-left: 17px; }
.ai-content-audit strong { color: var(--text-main); }
.audit-strengths { color: #6ee7b7; }
.audit-priorities { color: #fbbf24; }

.audit-page {
    padding: 8px;
    border-left: 3px solid #fbbf24;
    border-radius: 0 6px 6px 0;
    background: rgba(245, 158, 11, .06);
}

.audit-page p { margin: 3px 0; color: var(--text-main); }
.audit-page small { display: block; color: var(--text-muted); }
.audit-page.audit-high { border-left-color: #ef4444; background: rgba(239, 68, 68, .07); }
.audit-page.audit-low { border-left-color: #10b981; background: rgba(16, 185, 129, .07); }

.audit-sidebar-summary {
    display: grid;
    gap: 8px;
}

.audit-sidebar-summary p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.audit-sidebar-count {
    color: var(--text-main);
    font-weight: 800;
}

.audit-dialog {
    width: min(1180px, calc(100vw - 48px));
    height: min(820px, calc(100vh - 48px));
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
    color: #172033;
    background: #f8fafc;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .28);
}

.audit-dialog::backdrop {
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(5px);
}

.audit-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.audit-dialog-header,
.audit-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
}

.audit-dialog-header { border-bottom: 1px solid #e2e8f0; }
.audit-dialog-header h2 { margin: 3px 0 4px; font-size: 25px; }
.audit-dialog-header p,
.audit-dialog-footer p { margin: 0; color: #64748b; font-size: 14px; }
.audit-dialog-kicker { color: #7c3aed; font-size: 11px; font-weight: 900; letter-spacing: .12em; }

.audit-dialog-body {
    display: grid;
    grid-template-columns: minmax(310px, .82fr) minmax(480px, 1.35fr);
    min-height: 0;
}

.audit-report-column,
.audit-fix-column {
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
}

.audit-report-column { border-right: 1px solid #e2e8f0; }
.audit-fix-column { background: #fff; }

.audit-dialog-content {
    display: grid;
    gap: 15px;
    font-size: 15px;
    line-height: 1.58;
}

.audit-dialog-content h3,
.audit-dialog-content p,
.audit-dialog-content ul { margin: 0; }
.audit-dialog-content ul { padding-left: 22px; }
.audit-dialog-content .audit-overall {
    padding: 16px;
    color: #334155;
    background: #eef2ff;
    border-radius: 12px;
}
.audit-dialog-content .audit-strengths { color: #047857; }
.audit-dialog-content .audit-priorities { color: #a16207; }

.audit-dialog-card {
    display: grid;
    gap: 8px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #f59e0b;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .05);
}

.audit-dialog-card.audit-high { border-left-color: #ef4444; }
.audit-dialog-card.audit-low { border-left-color: #10b981; }
.audit-dialog-card.audit-resolved { opacity: .68; border-left-color: #10b981; }
.audit-dialog-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.audit-dialog-card b { font-size: 15px; }
.audit-dialog-card p { color: #334155; }
.audit-dialog-card small { color: #64748b; font-size: 13px; line-height: 1.5; }
.audit-dialog-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.audit-dialog-card-actions .btn { min-height: 38px; }

.audit-severity {
    padding: 4px 8px;
    border-radius: 999px;
    color: #92400e;
    background: #fef3c7;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}
.audit-high .audit-severity { color: #991b1b; background: #fee2e2; }
.audit-low .audit-severity { color: #065f46; background: #d1fae5; }

.audit-fix-empty {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100%;
    padding: 40px;
    color: #64748b;
    text-align: center;
}
.audit-fix-empty > i { margin-bottom: 14px; color: #8b5cf6; font-size: 36px; }
.audit-fix-empty h3 { margin: 0 0 8px; color: #172033; font-size: 21px; }
.audit-fix-empty p { max-width: 430px; margin: 0; font-size: 15px; line-height: 1.6; }

.audit-fix-editor { display: grid; gap: 16px; }
.audit-fix-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.audit-fix-heading span:first-child { color: #7c3aed; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.audit-fix-heading h3 { margin: 4px 0 0; font-size: 22px; }
.audit-fix-status { padding: 6px 9px; color: #065f46; background: #d1fae5; border-radius: 999px; font-size: 9px; font-weight: 900; text-align: center; }

.audit-fix-reason {
    padding: 14px 16px;
    background: #fff7ed;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
}
.audit-fix-reason p { margin: 6px 0; color: #334155; font-size: 15px; line-height: 1.55; }
.audit-fix-reason small { color: #64748b; font-size: 13px; }

.audit-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.audit-comparison-panel { min-width: 0; padding: 15px; border: 1px solid #e2e8f0; border-radius: 12px; }
.audit-comparison-panel > span { display: block; margin-bottom: 10px; color: #64748b; font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.audit-comparison-panel h4 { margin: 0 0 10px; font-size: 17px; }
.audit-comparison-panel p { max-height: 310px; margin: 0; overflow-y: auto; color: #475569; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.audit-comparison-panel label { display: block; margin: 8px 0 5px; color: #475569; font-size: 12px; font-weight: 800; }
.audit-comparison-panel input,
.audit-comparison-panel textarea { width: 100%; color: #172033; background: #fff; border: 1px solid #cbd5e1; }
.audit-comparison-panel textarea { min-height: 260px; resize: vertical; font-size: 14px; line-height: 1.55; }
.audit-after { background: #f8fafc; border-color: #c4b5fd; }

.audit-fix-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.audit-dialog-footer { border-top: 1px solid #e2e8f0; }
.audit-dialog-footer > div { display: flex; gap: 9px; }

.ai-layout-reviewer-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.ai-layout-reviewer-intro strong { color: var(--text-main); font-size: 12px; }
.ai-layout-reviewer-intro p { margin: 5px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.ai-layout-review-result {
    display: grid;
    gap: 4px;
    margin-top: 9px;
    padding: 10px;
    color: var(--text-muted);
    background: rgba(16, 185, 129, .08);
    border: 1px solid rgba(16, 185, 129, .25);
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.45;
}
.ai-layout-review-result strong { color: #10b981; }

.layout-dialog {
    width: min(1240px, calc(100vw - 40px));
    height: min(850px, calc(100vh - 40px));
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
    color: #172033;
    background: #f8fafc;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .3);
}
.layout-dialog::backdrop {
    background: rgba(15, 23, 42, .7);
    backdrop-filter: blur(5px);
}
.layout-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.layout-dialog-header,
.layout-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 24px;
    background: #fff;
}
.layout-dialog-header { border-bottom: 1px solid #e2e8f0; }
.layout-dialog-header h2 { margin: 3px 0 4px; font-size: 25px; }
.layout-dialog-header p,
.layout-dialog-footer p { margin: 0; color: #64748b; font-size: 14px; }
.layout-dialog-kicker { color: #7c3aed; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.layout-dialog-body { display: grid; grid-template-columns: minmax(590px, 1.25fr) minmax(360px, .75fr); min-height: 0; }
.layout-preview-column,
.layout-details-column { min-height: 0; overflow-y: auto; padding: 22px; }
.layout-preview-column { background: #eef2f7; border-right: 1px solid #dbe3ee; }
.layout-details-column { background: #fff; }
.layout-preview-label { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.layout-preview-label span { color: #7c3aed; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.layout-preview-label strong { color: #64748b; font-size: 11px; }
.layout-preview-stage {
    display: grid;
    place-items: center;
    min-height: 430px;
    overflow: hidden;
    background: #dfe6ef;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
}
.layout-preview-mount { width: 576px; height: 384px; }
.layout-preview-page {
    width: 720px !important;
    height: 480px !important;
    transform: scale(.8);
    transform-origin: top left;
    pointer-events: none;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
}
.layout-preview-page::after { display: none; }
.layout-contrast-note {
    margin-top: 12px;
    padding: 11px 13px;
    color: #475569;
    background: #fff;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5;
}
.layout-warnings {
    margin-bottom: 14px;
    padding: 13px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}
.layout-warnings ul { margin: 7px 0 0; padding-left: 19px; }
.layout-element-suggestions { display: grid; gap: 12px; }
.layout-suggestion-card { padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 5px 16px rgba(15, 23, 42, .05); }
.layout-suggestion-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.layout-suggestion-card header strong { font-size: 16px; }
.layout-suggestion-card header span { padding: 4px 7px; color: #047857; background: #d1fae5; border-radius: 999px; font-size: 9px; font-weight: 800; }
.layout-suggestion-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.layout-suggestion-specs span { display: grid; gap: 2px; padding: 8px; background: #f8fafc; border-radius: 7px; }
.layout-suggestion-specs small { color: #64748b; font-size: 9px; text-transform: uppercase; }
.layout-suggestion-specs b { color: #334155; font-size: 12px; }
.layout-suggestion-card p { margin: 11px 0 0; color: #64748b; font-size: 12px; line-height: 1.5; }
.layout-dialog-footer { border-top: 1px solid #e2e8f0; }
.layout-dialog-footer > div { display: flex; gap: 9px; }

@media (max-width: 1000px) {
    .layout-dialog { width: calc(100vw - 20px); height: calc(100vh - 20px); border-radius: 14px; }
    .layout-dialog-body { display: block; overflow-y: auto; }
    .layout-preview-column,
    .layout-details-column { overflow: visible; }
    .layout-preview-column { border-right: 0; border-bottom: 1px solid #dbe3ee; }
    .layout-dialog-footer { align-items: flex-start; flex-direction: column; }
    .layout-dialog-footer > div { width: 100%; }
    .layout-dialog-footer .btn { flex: 1; }
}

@media (max-width: 900px) {
    .audit-dialog { width: calc(100vw - 20px); height: calc(100vh - 20px); border-radius: 14px; }
    .audit-dialog-body { display: block; overflow-y: auto; }
    .audit-report-column,
    .audit-fix-column { overflow: visible; }
    .audit-report-column { border-right: 0; border-bottom: 1px solid #e2e8f0; }
    .audit-comparison { grid-template-columns: 1fr; }
    .audit-dialog-footer { align-items: flex-start; flex-direction: column; }
    .audit-dialog-footer > div { width: 100%; }
    .audit-dialog-footer .btn { flex: 1; }
}

.export-dialog {
    width: min(1020px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: auto;
    color: #172033;
    background: #f8fafc;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .32);
}
.export-dialog::backdrop { background: rgba(15, 23, 42, .72); backdrop-filter: blur(5px); }
.export-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px 20px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.export-dialog-header h2 { margin: 4px 0 6px; font-size: 27px; }
.export-dialog-header p { margin: 0; color: #64748b; font-size: 14px; }
.export-eyebrow { color: #7c3aed; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.export-metadata-row { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(280px, 1.3fr); align-items: center; gap: 16px; padding: 18px 26px 0; }
.export-metadata-row label { color: #475569; font-size: 12px; font-weight: 800; }
.export-metadata-row input { width: 100%; color: #172033; background: #fff; border: 1px solid #cbd5e1; }
.export-format-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px 26px; }
.export-format-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 15px 15px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .06);
}
.export-format-card > i { margin-bottom: 14px; color: #7c3aed; font-size: 27px; }
.export-format-card h3 { margin: 0 0 8px; font-size: 17px; }
.export-format-card p { flex: 1; margin: 0 0 16px; color: #64748b; font-size: 12px; line-height: 1.55; }
.export-format-card .btn { width: 100%; justify-content: center; }
.export-format-recommended { border: 2px solid #8b5cf6; box-shadow: 0 10px 28px rgba(124, 58, 237, .15); }
.export-format-recommended > i { color: #dc2626; }
.export-format-badge { position: absolute; top: 12px; right: 10px; padding: 4px 6px; color: #6d28d9; background: #ede9fe; border-radius: 999px; font-size: 8px; font-weight: 900; }
.export-format-coming { background: #f1f5f9; }
.export-format-coming > i { color: #94a3b8; }
.export-progress { display: grid; gap: 5px; margin: 0 26px 18px; padding: 14px; color: #475569; background: #fff; border: 1px solid #ddd6fe; border-radius: 12px; font-size: 12px; }
.export-progress strong { color: #172033; }
.export-progress-track { height: 8px; overflow: hidden; background: #e2e8f0; border-radius: 999px; }
.export-progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7c3aed, #38bdf8); border-radius: inherit; transition: width .2s ease; }
.export-compatibility-note { margin: 0; padding: 14px 26px 20px; color: #64748b; border-top: 1px solid #e2e8f0; font-size: 12px; line-height: 1.5; }
.export-compatibility-note i { margin-right: 6px; color: #0284c7; }

@media (max-width: 900px) {
    .export-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .export-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 14px; }
    .export-dialog-header { padding: 18px; }
    .export-dialog-header h2 { font-size: 22px; }
    .export-metadata-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px 0; }
    .export-format-grid { grid-template-columns: 1fr; padding: 16px 18px; }
    .export-progress { margin: 0 18px 16px; }
    .export-compatibility-note { padding: 13px 18px 17px; }
}

/* Adult editorial workflow */
.adult-only { display: none !important; }
button.adult-only.adult-feature-visible { display: inline-flex !important; }
button.adult-only.adult-feature-visible.hide { display: none !important; }
article.adult-only.adult-feature-visible { display: flex !important; }

body[data-editorial-profile="adult_christian"] .children-authoring-only { display: none !important; }
body[data-editorial-profile="adult_christian"] .sidebar-left { width: 400px; }

.adult-manuscript-workflow,
.adult-ai-scope,
.adult-insert-workflow {
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    padding: 18px;
    border: 1px solid #d9cba8;
    border-radius: 16px;
    background: linear-gradient(145deg, #fffdf8, #f5efe2);
    color: #2b2925;
}

.adult-insert-workflow {
    gap: 8px;
    margin: 4px 0 16px;
    padding: 14px;
    border-radius: 14px;
}

.adult-manuscript-workflow h4,
.adult-ai-scope h4,
.adult-insert-workflow h4 { margin: 0; font-family: 'Playfair Display', serif; font-size: 1.2rem; }
.adult-manuscript-workflow p,
.adult-ai-scope p,
.adult-insert-workflow p { margin: 0; color: #625d53; line-height: 1.55; }
.adult-insert-workflow h4 { font-size: 1rem; line-height: 1.25; }
.adult-insert-workflow p { font-size: .72rem; line-height: 1.45; }
.adult-workflow-kicker { color: #9a6f20; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.adult-workflow-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.adult-workflow-actions .btn { flex: 1 1 180px; }
.adult-workflow-actions-stacked { flex-direction: column; }
.adult-workflow-actions-stacked .btn { flex-basis: auto; justify-content: flex-start; }

.adult-insert-divider { height: 1px; margin: 6px 0; background: #dfd3bc; }
.adult-semantic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.adult-semantic-grid .add-item-btn {
    min-width: 0;
    min-height: 50px;
    padding: 9px;
    justify-content: flex-start;
    gap: 7px;
    border-color: #d8c9a9;
    background: #fff;
    color: #40382d;
    font-size: .7rem;
    line-height: 1.25;
    text-align: left;
    overflow-wrap: normal;
    word-break: normal;
}
.adult-semantic-grid .add-item-btn:hover { border-color: #b17a18; background: #fffaf0; color: #8b5e0d; }
.adult-semantic-grid .add-item-btn i { flex: 0 0 16px; width: 16px; color: #ad7719; text-align: center; }

.adult-structure-steps {
    display: grid;
    gap: 8px;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}
.adult-structure-steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ddd3c2;
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
}
.adult-structure-steps li > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ece5d8;
    color: #665b4a;
    font-weight: 800;
}
.adult-structure-steps li div { display: grid; gap: 2px; }
.adult-structure-steps li small { color: #756e64; line-height: 1.3; }
.adult-structure-steps li.is-current { border-color: #bc8525; background: #fff8e8; }
.adult-structure-steps li.is-current > span { background: #b77912; color: #fff; }
.adult-structure-steps li.is-complete { border-color: #b9d9c3; background: #f2fbf5; }
.adult-structure-steps li.is-complete > span { background: #27824b; color: transparent; }
.adult-structure-steps li.is-complete > span::after { content: '\2713'; color: #fff; }

.recovery-dialog {
    width: min(780px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 32px));
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: #172033;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
}
.recovery-dialog::backdrop { background: rgba(15, 23, 42, .64); backdrop-filter: blur(5px); }
.recovery-dialog-header { display: flex; justify-content: space-between; gap: 24px; padding: 26px 28px 20px; border-bottom: 1px solid #e2e8f0; }
.recovery-dialog-header h2 { margin: 4px 0 6px; font-family: 'Fredoka', sans-serif; font-size: 1.8rem; }
.recovery-dialog-header p { max-width: 610px; margin: 0; color: #64748b; font-size: .88rem; line-height: 1.55; }
.recovery-dialog-body { max-height: 500px; padding: 20px 28px; overflow: auto; background: #f8fafc; }
.recovery-list { display: grid; gap: 12px; }
.recovery-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); }
.recovery-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #f0e8ff; color: #7c3aed; }
.recovery-card-copy { display: grid; min-width: 0; gap: 3px; }
.recovery-card-copy strong { overflow: hidden; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.recovery-card-copy span { color: #475569; font-size: .78rem; }
.recovery-card-copy small { color: #94a3b8; font-size: .72rem; }
.recovery-card-actions { display: flex; align-items: center; gap: 7px; }
.recovery-card-actions .btn { min-height: 38px; padding: 8px 14px; }
.recovery-empty-state { display: grid; justify-items: center; gap: 8px; padding: 46px 24px; border: 2px dashed #cbd5e1; border-radius: 18px; color: #64748b; text-align: center; }
.recovery-empty-state i { color: #8b5cf6; font-size: 2rem; }
.recovery-empty-state strong { color: #172033; font-size: 1rem; }
.recovery-empty-state span { max-width: 460px; font-size: .82rem; line-height: 1.5; }
.recovery-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 28px; border-top: 1px solid #e2e8f0; }
.recovery-dialog-footer span { color: #64748b; font-size: .76rem; }

@media (max-width: 680px) {
    .recovery-dialog-header, .recovery-dialog-body, .recovery-dialog-footer { padding-left: 18px; padding-right: 18px; }
    .recovery-card { grid-template-columns: 40px minmax(0, 1fr); }
    .recovery-card-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .recovery-dialog-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 1180px) {
    body[data-editorial-profile="adult_christian"] .sidebar-left { width: 340px; }
    .adult-semantic-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    body[data-editorial-profile="adult_christian"] .sidebar-left { width: 250px; min-width: 250px; }
    .adult-insert-workflow { padding: 12px; }
}

.typesetting-dialog {
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fbfaf7;
    color: #292621;
    box-shadow: 0 30px 90px rgba(26, 22, 17, .32);
}

.typesetting-dialog::backdrop { background: rgba(24, 22, 19, .7); backdrop-filter: blur(4px); }
.typesetting-dialog-header,
.typesetting-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: #fff; }
.typesetting-dialog-header { border-bottom: 1px solid #e8e1d5; }
.typesetting-dialog-header > div { min-width: 0; }
.typesetting-dialog-header h2 { margin: 3px 0 4px; font-family: 'Playfair Display', serif; font-size: clamp(1.45rem, 3vw, 2rem); }
.typesetting-dialog-header p { margin: 0; color: #746d63; line-height: 1.45; }
.typesetting-dialog-body { display: grid; grid-template-columns: minmax(0, 1fr) 310px; max-height: calc(100vh - 205px); overflow: auto; }
.typesetting-fields { display: grid; gap: 16px; padding: 24px; }
.typesetting-fields fieldset { margin: 0; padding: 18px; border: 1px solid #ded7ca; border-radius: 16px; background: #fff; }
.typesetting-fields legend { padding: 0 8px; font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; }
.typesetting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.typesetting-grid label { display: grid; gap: 6px; color: #5f584e; font-size: .8rem; font-weight: 700; }
.typesetting-grid input,
.typesetting-grid select { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #cbc2b4; border-radius: 10px; background: #fff; color: #292621; font: inherit; }
.typesetting-field-help { margin: 0 0 14px; color: #756d62; font-size: .8rem; line-height: 1.45; }
.typesetting-style-controls { display: grid; gap: 8px; }
.typesetting-style-row { overflow: hidden; border: 1px solid #e4ddd2; border-radius: 11px; background: #fcfbf8; }
.typesetting-style-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; cursor: pointer; list-style: none; }
.typesetting-style-row > summary::-webkit-details-marker { display: none; }
.typesetting-style-row > summary::after { content: '\f078'; color: #8b7249; font: 900 .68rem/1 'Font Awesome 6 Free'; transition: transform .2s ease; }
.typesetting-style-row[open] > summary::after { transform: rotate(180deg); }
.typesetting-style-row > summary strong { color: #433d35; font-family: 'Playfair Display', serif; font-size: .9rem; }
.typesetting-style-row > summary span { margin-left: auto; color: #807568; font-size: .7rem; font-weight: 700; }
.typesetting-style-row-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 12px; border-top: 1px solid #e9e2d8; background: #fff; }
.typesetting-style-row label { display: grid; gap: 4px; color: #72695d; font-size: .66rem; font-weight: 800; }
.typesetting-style-row label.is-wide { grid-column: span 2; }
.typesetting-style-row input:not([type="checkbox"]),
.typesetting-style-row select { width: 100%; min-width: 0; padding: 8px; border: 1px solid #cbc2b4; border-radius: 8px; background: #fff; color: #292621; font: inherit; }
.typesetting-style-check { display: flex !important; align-items: center; align-self: end; grid-auto-flow: column; justify-content: start; min-height: 34px; }
.typesetting-style-check input { width: 17px; height: 17px; accent-color: #9a6f20; }
.typesetting-checks { display: grid; gap: 11px; }
.typesetting-checks label { display: flex; align-items: center; gap: 9px; color: #514b43; font-size: .88rem; }
.typesetting-checks input { width: 17px; height: 17px; accent-color: #9a6f20; }
.typesetting-protection-note,
.typesetting-editorial-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; line-height: 1.5; }
.typesetting-protection-note { border: 1px solid #b9d6c0; background: #f0faf2; color: #315c3a; }
.typesetting-editorial-note { border: 1px solid #cad5e7; background: #f3f7fd; color: #41516b; }
.typesetting-protection-note p,
.typesetting-editorial-note p { margin: 0; }
.typesetting-summary { padding: 26px 22px; border-left: 1px solid #e4d8be; background: #f8f1df; }
.typesetting-summary > strong { display: block; margin: 14px 0 5px; font-family: 'Playfair Display', serif; font-size: 1.65rem; }
.typesetting-summary > p { margin: 0 0 18px; color: #756b5a; line-height: 1.45; }
.typesetting-warning-box,
.typesetting-ready,
.typesetting-master-list { margin-top: 14px; padding: 15px; border: 1px solid #ddc98d; border-radius: 14px; background: rgba(255,255,255,.68); }
.typesetting-warning-box strong { color: #83531a; }
.typesetting-master-list ul { margin: 10px 0 0 18px; color: #685d4d; line-height: 1.5; font-size: .82rem; }
.typesetting-summary-issues { display: grid; gap: 9px; margin-top: 11px; }
.typesetting-summary-issue { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 10px; border: 1px solid #e2c47f; border-radius: 10px; background: #fffaf0; }
.typesetting-summary-issue > i { margin-top: 2px; color: #9b6513; }
.typesetting-summary-issue strong { display: block; color: #503b1e; font-size: .8rem; }
.typesetting-summary-issue p { margin: 3px 0 6px; color: #665b4b; font-size: .75rem; line-height: 1.4; }
.typesetting-summary-issue span { display: block; color: #856b42; font-size: .68rem; font-weight: 700; line-height: 1.35; }
.typesetting-summary-issue.is-info { border-color: #b9cbe0; background: #f4f8fd; }
.typesetting-summary-issue.is-info > i,
.typesetting-summary-issue.is-info strong { color: #365d82; }
.typesetting-ready { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; border-color: #9bc7a4; color: #285b34; background: #eff9f1; }
.typesetting-ready i { grid-row: 1 / 3; margin-top: 3px; }
.typesetting-ready span { font-size: .78rem; }
.typesetting-master-list > span { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a651e; }
.typesetting-dialog-footer { border-top: 1px solid #e8e1d5; }
.typesetting-dialog-footer > span { color: #756d62; font-size: .82rem; }
.typesetting-dialog-footer > span.is-error { color: #a43131; font-weight: 700; }
.typesetting-dialog-footer .btn:disabled { cursor: wait; opacity: .78; }
.action-count { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 999px; background: #9b6513; color: #fff; font-size: .68rem; font-weight: 900; }

.typesetting-review-dialog {
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fbfaf7;
    color: #292621;
    box-shadow: 0 30px 90px rgba(26, 22, 17, .32);
}
.typesetting-review-dialog::backdrop { background: rgba(24, 22, 19, .7); backdrop-filter: blur(4px); }
.typesetting-review-intro { display: flex; align-items: flex-start; gap: 13px; margin: 20px 24px 0; padding: 15px 17px; border: 1px solid #b8d0eb; border-radius: 14px; background: #f2f7fd; color: #355a7c; }
.typesetting-review-intro i { margin-top: 3px; }
.typesetting-review-intro p { margin: 3px 0 0; color: #526d86; font-size: .84rem; line-height: 1.45; }
.typesetting-review-intro .btn { flex: 0 0 auto; margin-left: auto; }
.typesetting-review-list { display: grid; gap: 14px; max-height: min(560px, calc(100vh - 300px)); padding: 20px 24px 26px; overflow: auto; }
.typesetting-review-card { padding: 17px; border: 1px solid #dfc47d; border-left: 5px solid #b57b17; border-radius: 14px; background: #fff; }
.typesetting-review-card.is-info { border-color: #b8cce1; border-left-color: #5e88ad; background: #f8fbff; }
.typesetting-review-card-heading { display: grid; gap: 5px; }
.typesetting-review-card-heading strong { font-family: 'Playfair Display', serif; font-size: 1.05rem; }
.typesetting-review-status { width: max-content; padding: 4px 7px; border-radius: 999px; background: #fff1cf; color: #81520e; font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.typesetting-review-card.is-info .typesetting-review-status { background: #e6f0fa; color: #365e83; }
.typesetting-review-card > p { margin: 9px 0 12px; color: #675f54; font-size: .86rem; line-height: 1.5; }
.typesetting-review-pages { display: grid; gap: 7px; max-height: 240px; overflow: auto; }
.typesetting-review-page { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #e3d5b6; border-radius: 10px; background: #fffaf0; }
.typesetting-review-page > strong { color: #5d4520; font-size: .78rem; }
.typesetting-review-page > span { width: max-content; padding: 3px 7px; border-radius: 999px; background: #fff0c8; color: #855711; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.typesetting-review-page > div { display: flex; gap: 5px; }
.typesetting-review-page button { padding: 7px 8px; border: 1px solid #cba65e; border-radius: 8px; background: #fff; color: #6a4a17; font-size: .7rem; font-weight: 800; cursor: pointer; }
.typesetting-review-page button:hover { border-color: #86580f; background: #fff0c9; }
.typesetting-review-page.is-reviewed { border-color: #9ec7a8; background: #f2faf4; }
.typesetting-review-page.is-reviewed > span { background: #dcefe1; color: #2e6b3c; }
.typesetting-review-page.is-ignored { border-color: #cbd0d7; background: #f5f6f8; }
.typesetting-review-page.is-ignored > span { background: #e5e8ec; color: #5e6570; }
.typesetting-review-auto { margin: 0 0 12px; }
.typesetting-review-help { display: block; color: #52708b; font-size: .78rem; line-height: 1.45; }

@media (max-width: 820px) {
    .typesetting-dialog-body { grid-template-columns: 1fr; }
    .typesetting-summary { border-left: 0; border-top: 1px solid #e4d8be; }
    .typesetting-grid { grid-template-columns: 1fr; }
    .typesetting-style-row-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .typesetting-dialog-footer { align-items: stretch; flex-direction: column; }
    .typesetting-review-intro { flex-wrap: wrap; }
    .typesetting-review-intro .btn { width: 100%; margin-left: 0; }
    .typesetting-review-page { grid-template-columns: auto 1fr; }
    .typesetting-review-page > div { grid-column: 1 / -1; flex-wrap: wrap; }
}

.dialog-eyebrow {
    color: #986515;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
}

.manuscript-dialog,
.print-production-dialog {
    width: min(1180px, calc(100vw - 36px));
    height: min(850px, calc(100vh - 36px));
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
    color: #172033;
    background: #f8fafc;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .32);
}

.manuscript-dialog::backdrop,
.print-production-dialog::backdrop {
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(6px);
}

.manuscript-dialog[open],
.print-production-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.manuscript-dialog-header,
.print-production-header,
.manuscript-dialog-footer,
.print-production-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
}

.manuscript-dialog-header,
.print-production-header { align-items: flex-start; border-bottom: 1px solid #e2e8f0; }
.manuscript-dialog-header h2,
.print-production-header h2 { margin: 4px 0 5px; font-family: 'Playfair Display', serif; font-size: 28px; }
.manuscript-dialog-header p,
.print-production-header p,
.manuscript-dialog-footer p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.5; }

.manuscript-dialog-body {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr);
    min-height: 0;
}

.manuscript-import-column,
.manuscript-review-column { min-height: 0; overflow-y: auto; padding: 24px; }
.manuscript-import-column { background: #fffaf0; border-right: 1px solid #e2e8f0; }
.manuscript-review-column { background: #f8fafc; }

.manuscript-dropzone {
    display: grid;
    place-items: center;
    min-height: 270px;
    padding: 28px;
    text-align: center;
    background: #fff;
    border: 2px dashed #d6b46f;
    border-radius: 16px;
    cursor: pointer;
    transition: .18s ease;
}
.manuscript-dropzone:hover,
.manuscript-dropzone.drag-over { background: #fffbeb; border-color: #986515; transform: translateY(-2px); }
.manuscript-dropzone > i { color: #b7791f; font-size: 45px; }
.manuscript-dropzone strong { margin-top: 13px; color: #3f3426; font-size: 18px; }
.manuscript-dropzone span { margin: 6px 0 18px; color: #64748b; font-size: 12px; }
.manuscript-dropzone button { pointer-events: none; }

.manuscript-safety-note,
.print-mask-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 16px;
    padding: 14px;
    color: #475569;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
}
.manuscript-safety-note i,
.print-mask-note i { margin-top: 2px; color: #16a34a; }
.manuscript-safety-note p,
.print-mask-note p { margin: 0; font-size: 12px; line-height: 1.55; }
.manuscript-status { min-height: 20px; margin: 15px 0 0; color: #64748b; font-size: 12px; line-height: 1.5; }
.manuscript-status.error { color: #b91c1c; }

.manuscript-empty {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100%;
    padding: 40px;
    color: #64748b;
    text-align: center;
}
.manuscript-empty > i { color: #cbd5e1; font-size: 48px; }
.manuscript-empty h3 { margin: 16px 0 7px; color: #334155; font-size: 20px; }
.manuscript-empty p { max-width: 430px; margin: 0; line-height: 1.6; }
.manuscript-review { display: grid; gap: 16px; }
.manuscript-metadata-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.manuscript-metadata-grid label,
.print-form-grid label,
.print-notes-label { display: grid; gap: 6px; color: #475569; font-size: 11px; font-weight: 800; }
.manuscript-metadata-grid input,
.manuscript-section-row input,
.manuscript-section-row select,
.print-production-dialog input,
.print-production-dialog select,
.print-production-dialog textarea {
    width: 100%;
    color: #172033;
    background: #fff;
    border: 1px solid #cbd5e1;
}
.manuscript-summary { padding: 12px 14px; color: #475569; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; font-size: 12px; font-weight: 700; }
.manuscript-sections { display: grid; gap: 9px; }
.manuscript-section-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 150px;
    align-items: center;
    gap: 10px;
    padding: 11px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
}
.manuscript-section-number { display: grid; place-items: center; width: 34px; height: 34px; color: #986515; background: #fef3c7; border-radius: 50%; font-size: 11px; font-weight: 900; }
.manuscript-section-row > div { min-width: 0; }
.manuscript-section-row input { min-height: 37px; padding: 7px 9px; font-weight: 700; }
.manuscript-section-row small { display: block; margin-top: 5px; color: #94a3b8; font-size: 10px; }
.manuscript-dialog-footer { border-top: 1px solid #e2e8f0; }

.print-production-body {
    display: grid;
    grid-template-columns: minmax(620px, 1fr) 310px;
    min-height: 0;
    overflow: hidden;
}
.print-production-fields { min-height: 0; overflow-y: auto; padding: 22px 24px 32px; }
.print-production-fields fieldset { margin: 0 0 16px; padding: 17px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; }
.print-production-fields legend { padding: 0 7px; color: #3f3426; font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 800; }
.print-form-grid { display: grid; gap: 12px; }
.print-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.print-form-grid input,
.print-form-grid select { min-height: 40px; padding: 8px 10px; }
.print-form-grid label small { color: #94a3b8; font-size: 9px; font-weight: 500; }
.print-form-grid .print-checkbox-option {
    display: flex;
    align-items: center;
    align-self: end;
    min-height: 40px;
    padding: 9px 10px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    line-height: 1.35;
}
.print-form-grid .print-checkbox-option input { width: auto; min-height: 0; margin: 0 7px 0 0; }
.print-finishes { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.print-finishes > span { width: 100%; color: #475569; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.print-finishes label { display: inline-flex; align-items: center; gap: 5px; color: #475569; font-size: 11px; }
.print-finishes input { width: auto; }
.print-notes-label { margin-top: 15px; }
.print-notes-label textarea { padding: 10px; resize: vertical; }

.print-production-summary { min-height: 0; overflow-y: auto; padding: 24px 20px; background: #fffaf0; border-left: 1px solid #e2e8f0; }
.summary-kicker { color: #986515; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.spine-calculation { display: grid; gap: 5px; margin-top: 12px; padding: 17px; background: #fff; border: 1px solid #fde68a; border-radius: 13px; }
.spine-calculation small { color: #64748b; font-size: 10px; text-transform: uppercase; }
.spine-calculation strong { color: #3f3426; font-family: 'Playfair Display', serif; font-size: 24px; }
.spine-calculation p { margin: 2px 0 0; color: #64748b; font-size: 10px; line-height: 1.5; }
.print-preflight-box { display: grid; gap: 11px; margin-top: 14px; padding: 15px; background: #fff; border: 1px solid #d8dee8; border-radius: 13px; }
.print-preflight-box > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.print-preflight-box > header div { display: grid; gap: 3px; }
.print-preflight-box > header small { color: #64748b; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.print-preflight-box > header strong { color: #27364a; font-size: 13px; }
.print-preflight-box > p { margin: 0; color: #64748b; font-size: 10px; line-height: 1.45; }
.print-preflight-box > .btn { width: 100%; padding: 10px; font-size: 10px; }
.print-preflight-score { flex: 0 0 auto; padding: 5px 7px; color: #475569; background: #eef2f7; border-radius: 999px; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.print-preflight-score.has-blockers { color: #991b1b; background: #fee2e2; }
.print-preflight-score.has-warnings { color: #92400e; background: #fef3c7; }
.print-preflight-score.is-ready { color: #166534; background: #dcfce7; }
.print-preflight-list { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; }
.print-preflight-item { padding: 10px; border: 1px solid #dbe2eb; border-left: 4px solid #64748b; border-radius: 10px; background: #f8fafc; }
.print-preflight-item.is-blocker { border-color: #fecaca; border-left-color: #dc2626; background: #fff7f7; }
.print-preflight-item.is-warning { border-color: #fde68a; border-left-color: #d97706; background: #fffdf3; }
.print-preflight-item.is-info { border-color: #bfdbfe; border-left-color: #2563eb; background: #f7fbff; }
.print-preflight-item > div:first-child { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.print-preflight-item.is-blocker > div:first-child { color: #b91c1c; }
.print-preflight-item.is-warning > div:first-child { color: #a16207; }
.print-preflight-item > strong { display: block; margin-top: 5px; color: #293548; font-size: 11px; line-height: 1.3; }
.print-preflight-item > p { margin: 4px 0 8px; color: #64748b; font-size: 9px; line-height: 1.45; }
.print-preflight-item > button,
.print-preflight-pages button { margin: 3px 4px 0 0; padding: 6px 7px; color: #364152; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 8px; font-weight: 800; cursor: pointer; }
.print-preflight-item > button:hover,
.print-preflight-pages button:hover { color: #7c4f0d; border-color: #c58b2a; background: #fffbeb; }
.print-preflight-pages { display: flex; flex-wrap: wrap; gap: 3px; }
.print-warning-box { margin-top: 14px; padding: 15px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; }
.print-warning-box strong { font-size: 12px; }
.print-warning-box ul { margin: 9px 0 0; padding-left: 18px; font-size: 11px; line-height: 1.55; }
.print-ready-box { display: grid; gap: 5px; margin-top: 14px; padding: 15px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; }
.print-ready-box i { font-size: 20px; }
.print-ready-box span { font-size: 10px; line-height: 1.5; }
.print-mask-note { margin-top: 14px; background: #eff6ff; border-color: #bfdbfe; }
.print-mask-note i { color: #2563eb; }
.print-production-footer { border-top: 1px solid #e2e8f0; }
.print-production-footer > span { color: #64748b; font-size: 11px; }
.print-production-footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.print-package-button { background: linear-gradient(135deg, #7c3aed, #2563eb); border-color: transparent; }

.cover-production-card { display: grid; gap: 11px; margin-top: 14px; padding: 15px; background: linear-gradient(145deg, #fff, #f5f3ff); border: 1px solid #c4b5fd; border-radius: 13px; }
.cover-production-card > div { display: grid; gap: 4px; }
.cover-production-card small { color: #7c3aed; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.cover-production-card strong { color: #312e81; font-size: 13px; }
.cover-production-card p { margin: 0; color: #64748b; font-size: 10px; line-height: 1.45; }
.cover-production-card .btn { width: 100%; }

.adult-cover-dialog {
    width: min(1280px, calc(100vw - 30px)); height: min(900px, calc(100vh - 30px)); max-width: none; max-height: none;
    padding: 0; overflow: hidden; color: #172033; background: #f8fafc; border: 0; border-radius: 20px;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .38);
}
.adult-cover-dialog::backdrop { background: rgba(15, 23, 42, .76); backdrop-filter: blur(7px); }
.adult-cover-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.adult-cover-header, .adult-cover-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 24px; background: #fff; }
.adult-cover-header { align-items: flex-start; border-bottom: 1px solid #e2e8f0; }
.adult-cover-header h2 { margin: 4px 0 5px; font-family: 'Playfair Display', serif; font-size: 28px; }
.adult-cover-header p, .adult-cover-footer > span { margin: 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.adult-cover-footer { border-top: 1px solid #e2e8f0; }
.adult-cover-footer > div { display: flex; gap: 9px; }
.adult-cover-body { display: grid; grid-template-columns: minmax(520px, 1fr) minmax(450px, .9fr); min-height: 0; }
.adult-cover-fields { min-height: 0; overflow-y: auto; padding: 22px 24px 32px; }
.adult-cover-fields fieldset { margin: 0 0 16px; padding: 17px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; }
.adult-cover-fields legend { padding: 0 7px; color: #3f3426; font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 800; }
.adult-cover-fields label { display: grid; gap: 6px; margin-bottom: 11px; color: #475569; font-size: 11px; font-weight: 800; }
.adult-cover-fields input, .adult-cover-fields textarea { width: 100%; color: #172033; background: #fff; border: 1px solid #cbd5e1; }
.adult-cover-fields textarea { padding: 10px; resize: vertical; }
.adult-cover-grid { display: grid; gap: 12px; }
.adult-cover-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adult-cover-checkbox { display: flex !important; align-items: center; gap: 8px; padding: 11px; background: #f8fafc; border: 1px solid #dbe2eb; border-radius: 9px; }
.adult-cover-checkbox input { width: auto; }
.adult-cover-ai-note { display: flex; gap: 8px; margin: 5px 0 12px; padding: 11px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px; font-size: 10px; line-height: 1.45; }
.adult-cover-generation-status { display: block; min-height: 18px; margin-top: 8px; color: #64748b; font-size: 10px; }
.adult-cover-final-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 14px; margin-top: 14px; padding: 13px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 10px; }
.adult-cover-final-upload > div { display: grid; gap: 3px; }
.adult-cover-final-upload strong { color: #172033; font-size: 11px; }
.adult-cover-final-upload span, .adult-cover-final-upload small { color: #64748b; font-size: 9px; line-height: 1.4; }
.adult-cover-final-upload small { grid-column: 1 / -1; }
.adult-cover-preview-column { min-height: 0; overflow-y: auto; padding: 24px 20px 32px; background: #fffaf0; border-left: 1px solid #e2e8f0; }
.adult-cover-preview { display: flex; align-items: stretch; width: 100%; min-height: 330px; margin-top: 12px; overflow: hidden; background: #f8fafc; border: 1px solid #d8dee8; border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .12); }
.adult-cover-preview > section { position: relative; min-width: 0; padding: 12px 8px; overflow: hidden; border-right: 1px dashed rgba(71, 85, 105, .38); }
.adult-cover-preview > section:last-child { border-right: 0; }
.adult-cover-preview [data-cover-panel="leftFlap"], .adult-cover-preview [data-cover-panel="rightFlap"] { flex: .55; background: #fef3c7; }
.adult-cover-preview [data-cover-panel="back"] { flex: 1; background: #ecfdf5; }
.adult-cover-preview [data-cover-panel="spine"] { flex: 0 0 24px; padding: 6px 2px; background: #ffedd5; }
.adult-cover-preview [data-cover-panel="front"] { flex: 1; padding: 0; background: #e0e7ff; }
.adult-cover-preview section small { color: #64748b; font-size: 6px; font-weight: 900; letter-spacing: .08em; }
.adult-cover-preview section > p { margin: 10px 0 0; color: #334155; font-size: 7px; line-height: 1.45; white-space: pre-wrap; }
.adult-cover-preview [data-cover-panel="spine"] > span { position: absolute; left: 50%; top: 50%; width: 270px; color: #3f3426; font-family: 'Playfair Display', serif; font-size: 8px; font-weight: 800; text-align: center; transform: translate(-50%, -50%) rotate(-90deg); }
.adult-cover-art-placeholder { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 7px; color: #64748b; background: linear-gradient(155deg, #eef2ff, #ddd6fe); font-size: 8px; text-align: center; }
.adult-cover-art-placeholder i { font-size: 26px; }
.adult-cover-preview [data-cover-panel="front"] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adult-cover-front-copy { position: absolute; z-index: 2; left: 9%; right: 9%; top: 8%; padding: 10px; color: #172033; background: rgba(255,255,255,.82); border-radius: 7px; backdrop-filter: blur(3px); }
.adult-cover-front-copy h3 { margin: 0; font-family: 'Playfair Display', serif; font-size: 18px; line-height: 1.05; }
.adult-cover-front-copy p { margin: 5px 0 9px; font-size: 8px; line-height: 1.25; }
.adult-cover-front-copy strong { font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.adult-cover-barcode-preview { position: absolute; left: 9px; bottom: 9px; display: grid; place-items: center; width: 58px; height: 35px; color: #64748b; background: #fff; border: 1px solid #cbd5e1; font-size: 5px; }
.adult-cover-candidate { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; margin-top: 15px; padding: 12px; background: #fff; border: 1px solid #c4b5fd; border-radius: 11px; }
.adult-cover-candidate img { width: 108px; height: 140px; object-fit: cover; border-radius: 7px; }
.adult-cover-candidate > div { display: grid; align-content: center; gap: 9px; }
.adult-cover-candidate span { color: #6d28d9; font-size: 10px; font-weight: 800; }
.adult-cover-checks { display: grid; gap: 8px; margin-top: 14px; }
.adult-cover-check { padding: 10px; border-left: 4px solid #d97706; color: #92400e; background: #fffbeb; border-radius: 8px; }
.adult-cover-check.is-blocker { border-left-color: #dc2626; color: #991b1b; background: #fff7f7; }
.adult-cover-check strong { display: block; font-size: 10px; }
.adult-cover-check p { margin: 3px 0 0; font-size: 8px; line-height: 1.4; }

@media (max-width: 980px) {
    .manuscript-dialog,
    .print-production-dialog,
    .adult-cover-dialog { width: calc(100vw - 18px); height: calc(100vh - 18px); border-radius: 14px; }
    .manuscript-dialog-body,
    .print-production-body,
    .adult-cover-body { display: block; overflow-y: auto; }
    .manuscript-import-column,
    .manuscript-review-column,
    .print-production-fields,
    .print-production-summary { overflow: visible; }
    .manuscript-import-column { border-right: 0; border-bottom: 1px solid #e2e8f0; }
    .print-production-summary,
    .adult-cover-preview-column { overflow: visible; border-top: 1px solid #e2e8f0; border-left: 0; }
}

@media (max-width: 680px) {
    .manuscript-dialog-header,
    .print-production-header,
    .manuscript-dialog-footer,
    .print-production-footer { padding: 16px; }
    .manuscript-dialog-footer,
    .print-production-footer { align-items: stretch; flex-direction: column; }
    .adult-cover-header, .adult-cover-footer { padding: 16px; }
    .adult-cover-footer { align-items: stretch; flex-direction: column; }
    .adult-cover-footer > div { flex-direction: column; }
    .print-production-footer > div { flex-direction: column; }
    .manuscript-metadata-grid,
    .print-form-grid.three, .adult-cover-grid.two { grid-template-columns: 1fr; }
    .manuscript-section-row { grid-template-columns: 34px minmax(0, 1fr); }
    .manuscript-section-row select { grid-column: 2; }
}

.art-director-badge {
    padding: 4px 7px;
    border-radius: 999px;
    color: #7dd3fc;
    background: rgba(14, 165, 233, .12);
    border: 1px solid rgba(14, 165, 233, .35);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.ai-art-direction-result {
    display: grid;
    gap: 7px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: rgba(15, 23, 42, .45);
}

.ai-art-direction-result strong { color: var(--text-main); font-size: 11px; line-height: 1.4; }
.ai-art-direction-result p,
.ai-art-direction-result small { margin: 0; color: var(--text-muted); font-size: 9px; line-height: 1.45; }
.ai-art-direction-palette { display: flex; gap: 5px; }
.ai-art-direction-palette span { width: 24px; height: 18px; border: 1px solid rgba(100, 116, 139, .35); border-radius: 5px; }

.ai-teaser-studio { background: linear-gradient(155deg, rgba(30, 41, 59, .8), rgba(88, 28, 135, .18)); }
.ai-teaser-result { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: rgba(15, 23, 42, .45); }
.ai-teaser-result strong { color: var(--text-main); font-size: 12px; line-height: 1.4; }
.ai-teaser-result p, .ai-teaser-result small { margin: 0; color: var(--text-muted); font-size: 9px; line-height: 1.45; }
.ai-teaser-result label { color: var(--text-muted); font-size: 9px; font-weight: 700; }
.ai-teaser-result textarea { min-height: 76px; resize: vertical; font-size: 10px; line-height: 1.45; }
.ai-teaser-scenes { display: grid; gap: 6px; }
.ai-teaser-scene { padding: 8px; border-left: 3px solid #a78bfa; border-radius: 6px; background: rgba(15, 23, 42, .36); }
.ai-teaser-scene strong { display: block; font-size: 9px; }
.ai-teaser-scene span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 8px; line-height: 1.4; }
.ai-teaser-local-note { margin: 9px 0 0; color: var(--text-muted); font-size: 9px; line-height: 1.45; }

.teaser-preview-dialog { width: min(620px, calc(100vw - 24px)); padding: 0; overflow: hidden; color: var(--text-main); background: #101321; border: 1px solid rgba(167, 139, 250, .45); border-radius: 18px; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.teaser-preview-dialog::backdrop { background: rgba(2, 6, 23, .78); backdrop-filter: blur(4px); }
.teaser-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid rgba(148, 163, 184, .2); }
.teaser-preview-header span { display: block; color: #c4b5fd; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.teaser-preview-header h3 { margin: 3px 0 0; font-size: 18px; }
.teaser-preview-body { display: grid; justify-items: center; gap: 10px; padding: 16px; }
#teaser-preview-canvas { display: block; width: min(100%, 360px); max-height: 62vh; aspect-ratio: 9 / 16; background: #21123c; border-radius: 10px; box-shadow: 0 12px 38px rgba(0, 0, 0, .38); }
.teaser-preview-body p { margin: 0; color: #cbd5e1; font-size: 11px; line-height: 1.45; text-align: center; }

.ai-three-ideas-button { margin-top: 8px; border-color: rgba(14, 165, 233, .55); }

.ai-idea-candidates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
}

.ai-idea-card {
    min-width: 0;
    overflow: hidden;
    padding: 4px;
    color: var(--text-muted);
    background: rgba(15, 23, 42, .5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.ai-idea-card:hover,
.ai-idea-card.active { color: var(--accent); border-color: var(--accent); }
.ai-idea-card img { display: block; width: 100%; aspect-ratio: 1; border-radius: 5px; object-fit: cover; }
.ai-idea-card span { display: block; padding: 5px 1px 2px; overflow: hidden; font-size: 8px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

body.light-theme .ai-art-director { background: linear-gradient(155deg, #f2faff, #faf7ff); }
body.light-theme .art-director-badge { color: #0369a1; }
body.light-theme .ai-art-direction-result,
body.light-theme .ai-idea-card,
body.light-theme .ai-editorial-result,
body.light-theme .ai-refinement-result,
body.light-theme .ai-content-audit,
body.light-theme .ai-teaser-result { background: #f8fafc; }
body.light-theme .ai-teaser-studio { background: linear-gradient(155deg, #faf7ff, #f5f3ff); }
body.light-theme .ai-editorial-director .art-director-badge { color: #047857; }
body.light-theme .ai-refinement-checks span { color: #047857; }