.nav-link.active {
    background-color: rgba(239, 83, 80, 0.16);
    color: #ef5350;
}

.step-tab.active {
    background-color: rgba(239, 83, 80, 0.16);
    color: #ef5350;
}

.step-tab.active span:first-child {
    background-color: #ef5350;
    color: white;
}

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.prose pre {
    background-color: #1a1a2e;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Loading animation */
@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-text {
    animation: pulse-text 2s infinite;
}

/* Video card hover */
.video-card {
    transition: all 0.2s;
}

.video-card:hover {
    transform: translateX(4px);
    border-color: #ef5350;
}

/* Markdown-like rendering */
#analysis-result strong,
#suggestions-result strong,
#evergreen-content strong,
#theme-brief strong,
#script-content strong,
#prompts-content strong,
#narration-content strong,
.prose strong {
    color: #fbbf24;
}

#analysis-result h1, #analysis-result h2, #analysis-result h3,
#suggestions-result h1, #suggestions-result h2, #suggestions-result h3,
#evergreen-content h1, #evergreen-content h2, #evergreen-content h3,
#theme-brief h1, #theme-brief h2, #theme-brief h3,
#script-content h1, #script-content h2, #script-content h3,
#prompts-content h1, #prompts-content h2, #prompts-content h3,
#narration-content h1, #narration-content h2, #narration-content h3,
.prose h1, .prose h2, .prose h3 {
    color: #e5e7eb;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

#analysis-result h1, #evergreen-content h1, .prose h1 { font-size: 1.25rem; }
#analysis-result h2, #evergreen-content h2, .prose h2 { font-size: 1.15rem; }
#analysis-result h3, #evergreen-content h3, .prose h3 { font-size: 1.05rem; }

#analysis-result ul, #analysis-result ol,
#suggestions-result ul, #suggestions-result ol,
#evergreen-content ul, #evergreen-content ol,
.prose ul, .prose ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}

#analysis-result li, #suggestions-result li,
#evergreen-content li, .prose li {
    margin: 0.25em 0;
}

#analysis-result code,
#suggestions-result code,
#evergreen-content code,
#theme-brief code,
#script-content code,
#prompts-content code,
#narration-content code,
.prose code {
    background: #374151;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

#analysis-result p, #suggestions-result p,
#evergreen-content p, #theme-brief p,
#script-content p, #prompts-content p,
#narration-content p, .prose p {
    margin: 0.5em 0;
    line-height: 1.7;
}

/* Better readability for generated content */
.prose {
    font-size: 0.95rem;
    color: #d1d5db;
}

.prose h1, .prose h2 {
    border-bottom: 1px solid #374151;
    padding-bottom: 0.3em;
}

/* Sidebar scrollable */
aside nav::-webkit-scrollbar {
    width: 4px;
}

/* Step tab active state */
.step-tab.active {
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.3);
}

/* Video card selection */
.video-card.border-youtube {
    box-shadow: 0 0 0 1px #FF0000;
}

/* Smooth transitions */
.transition-all {
    transition: all 0.2s ease;
}

/* Larger text inside result panels for readability */
#script-content, #prompts-content, #narration-content, #theme-brief {
    font-size: 0.95rem;
}

/* Loading spinner pulse */
@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-bounce {
    animation: bounce-subtle 1s infinite;
}

/* Result panel improvements */
.bg-dark-800.rounded-xl {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Comfort theme layer — easier on the eyes
   ============================================================ */
:root {
    --brand: #ef5350;
    --bg: #121319;
    --surface: #191b24;
    --input: #22252e;
    --border: #2a2e3a;
}

/* Softer body text tone (less pure-white glare) */
body {
    color: #e4e6ec;
    background-color: var(--bg);
}

/* Form controls: lift from harsh gray, harmonize with surface */
input, textarea, select {
    background-color: var(--input) !important;
    border-color: var(--border) !important;
    color: #e4e6ec !important;
}
input::placeholder, textarea::placeholder {
    color: #717888 !important;
}

/* Gentle focus ring instead of a hard border flash */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.18);
}

/* Nav + card hovers slightly warmer */
.nav-link:hover {
    background-color: #20232e !important;
}

/* Softer selection */
::selection {
    background: rgba(239, 83, 80, 0.3);
    color: #fff;
}

/* Toned-down scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #15171f;
}
::-webkit-scrollbar-thumb {
    background: #343845;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #434856;
}

/* Subtle depth on cards + comfortable hover */
.bg-dark-800 {
    border: 1px solid var(--border);
}
.bg-dark-800.rounded-xl {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bg-dark-800.rounded-xl:hover {
    border-color: #353a48;
}

/* Headings a touch calmer */
h1, h2, h3, h4 {
    color: #eef0f5;
}

/* Buttons: avoid the most saturated red, keep brand feel */
.bg-youtube {
    background-color: var(--brand);
}
.bg-youtube:hover {
    background-color: #e04542;
}

/* Reduce harsh pure-yellow accents to a softer amber */
.text-yellow-400 { color: #f5c451 !important; }
.bg-yellow-400 { background-color: #f5c451 !important; }
.border-youtube {
    border-color: var(--brand) !important;
}

/* Smooth, comfortable transitions everywhere */
button, a, .transition, .transition-all, .transition-transform {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slightly larger, more breathable base text in content panels */
#analysis-result, #suggestions-result, #evergreen-content,
#theme-brief, #script-content, #prompts-content, #narration-content,
.prose {
    color: #d7dae2;
}