/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Splash Screen */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-body);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.splash-icon {
    width: 80px;
    height: 80px;
    color: var(--primary-color);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Custom Tippy.js Tooltip Theme - Light */
.tippy-box[data-theme~='custom-light'] {
    background-color: #2c3e50;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    padding: 6px 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.tippy-box[data-theme~='custom-light'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #2c3e50;
}

.tippy-box[data-theme~='custom-light'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #2c3e50;
}

.tippy-box[data-theme~='custom-light'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: #2c3e50;
}

.tippy-box[data-theme~='custom-light'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: #2c3e50;
}

/* Custom Tippy.js Tooltip Theme - Dark */
.tippy-box[data-theme~='custom-dark'] {
    background-color: #f1f5f9;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    padding: 6px 10px;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1);
}

.tippy-box[data-theme~='custom-dark'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: #f1f5f9;
}

.tippy-box[data-theme~='custom-dark'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #f1f5f9;
}

.tippy-box[data-theme~='custom-dark'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: #f1f5f9;
}

.tippy-box[data-theme~='custom-dark'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: #f1f5f9;
}

:root {
    --primary-color: #10B981;
    --primary-hover: #059669;
    --text-primary: #121212;
    --text-secondary: #666;
    --background-body: #f8f8f8;
    --background-card: #ffffff;
    --background-toggle-on: #ffffff;
    --background-toggle-off: #efefef;
    --background-switch-off: #dedede;
    --background-badge: #f5f5f5;
    --table-border-color: #e1e5e9;
    --border-color: #e1e5e9;
    --hover-background: #f5f5f5;
    --spacing: 32px;
    --border-radius: 8px;
    --background-dropdown-menu: #ffffff;
    --background-image-placeholder: #efefef;
    --background-toast: #121212;

    --background-btn-secondary: #efefef;
    --cards-overlay-button-background: rgba(0, 0, 0, 0.6);
    --cards-overlay-button-background-hover: rgba(0, 0, 0, 0.9);


    --toast-background: rgba(0, 0, 0, 0.8);
    --toast-title: #FFFFFF;
    --toast-body: #AAAAAA;

    --dialog-background: #FFF;
    --dialog-overlay: #000000ad;
    --dialog-shadow: transparent;

    /* Theme transition duration */
    --transition-duration: 0.05s;
    --transition-easing: cubic-bezier(0.1, 0.0, 0.2, 1);
}

/* Dark theme variables */
[data-theme="dark"] {
    --primary-color: #10B981;
    --primary-hover: #059669;
    --text-primary: #E5E7EB;
    --text-secondary: #cccccc;
    --background-body: #121212;
    --background-card: #1E1E1E;
    --background-badge: #292929;
    --border-color: transparent;
    --table-border-color: #222222;
    --hover-background: #2C2C2C;

    --background-toggle-on: #010101;
    --background-toggle-off: #1d1d1d;
    --background-switch-off: #414141;
    --background-dropdown-menu: #121212;
    --background-image-placeholder: #121212;


    --dialog-background: #121212;
    --dialog-overlay: rgb(0 0 0 / 85%);
    --dialog-shadow: rgb(70 69 69 / 63%);


    --cards-overlay-button-background: rgba(0, 0, 0, 0.6);
    --cards-overlay-button-background-hover: rgba(0, 0, 0, 0.9);

    --toast-background: rgba(255, 255, 255, 0.8);
    --toast-title: #212121;
    --toast-body: #666;
    --background-btn-secondary: #1E1E1E;


}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--background-body);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    transition: background-color var(--transition-duration) var(--transition-easing),
    color var(--transition-duration) var(--transition-easing);
}

/* Global smooth transitions for theme switching */
*,
*::before,
*::after {
    transition: background-color var(--transition-duration) var(--transition-easing),
    border-color var(--transition-duration) var(--transition-easing),
    color var(--transition-duration) var(--transition-easing),
    fill var(--transition-duration) var(--transition-easing),
    stroke var(--transition-duration) var(--transition-easing),
    opacity var(--transition-duration) var(--transition-easing),
    box-shadow var(--transition-duration) var(--transition-easing),
    transform var(--transition-duration) var(--transition-easing);
}

.app-container {
    min-height: 100vh;
    display: flex;
}

/* Video Progress Modal Styles */
.video-progress-modal {
    max-width: 600px;
    width: 90%;
    background: #FFF;
}

.video-progress-modal .modal-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.video-progress-modal .job-id {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-family: monospace;
    margin-top: 0.5rem;
}

.progress-container {
    margin-bottom: 2rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.progress-stages {
    /*display: grid;*/
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stage {
    text-align: center;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.stage.active {
    border-color: var(--primary-color);
    background-color: rgba(139, 0, 178, 0.1);
}

.stage.completed {
    border-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.stage-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.stage-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.stage-status {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.stage.active .stage-status {
    color: var(--primary-color);
    font-weight: 500;
}

.stage.completed .stage-status {
    color: #28a745;
    font-weight: 500;
}

.video-result {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.video-result h4 {
    color: #28a745;
    margin-bottom: 1.5rem;
}

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

.spinning {
    animation: spin 1s linear infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

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

/* Fixed Left Sidebar */
.sidebar {
    width: 220px;
    background: var(--background-body);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
}

.sidebar-logo {
    padding: 32px 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.sidebar-logo i {
    font-size: 1.4rem;
    color: var(--primary-color);
}

.sidebar-nav {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav-group {
    margin-bottom: 32px;
}

.sidebar-nav-group-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 0 16px 0 16px;
    margin: 0 16px 0 16px;
    opacity: 0.5;
}

.sidebar-nav-group:first-child .sidebar-nav-group-header {
    margin-top: 0;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 6px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    margin: 0 16px 0 16px;
}

.sidebar-nav-item:hover {
    background: var(--background-btn-secondary);
    color: var(--text-primary);
    border-radius: 8px;

}

.sidebar-nav-item.active {
    color: var(--primary-color);
    font-weight: 600;
    background: transparent;
}

.sidebar-nav-item i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.sidebar-nav-item span {
    font-size: 0.95rem;
}

/* User Menu in Sidebar */
.sidebar-user {
    padding: 0;
    margin-top: auto;
    position: relative;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 8px;
    margin: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.user-info:hover {
    background: var(--hover-background);
}

.user-menu-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.sidebar-user:hover .user-menu-chevron,
.sidebar-user.active .user-menu-chevron {
    transform: rotate(-90deg);
}

.user-avatar {
    max-height: 40px;
}

.user-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 0.9rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.75rem;
    line-height: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vrd_credit_icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    color: var(--primary-color);
}

.user-menu-dropdown {
    position: absolute;
    bottom: 0;
    left: 100%;
    right: auto;
    width: 200px;
    margin-left: 4px;
    background: var(--background-card);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: all 0.2s ease;
    z-index: 1001;
}

.sidebar-user:hover .user-menu-dropdown,
.sidebar-user.active .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
    font-size: 0.875rem;
    border-radius: 6px;
    cursor: pointer;
}

.user-menu-item:hover {
    background: var(--hover-background);
}

.user-menu-item i {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.user-menu-item:hover i {
    opacity: 1;
}

.user-menu-item i {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

#signOutButton:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: 220px;
    min-height: 100vh;
    background: var(--background-body);
    padding: 8px;
}

/* Universal Button Styles */
.btn, button, .cta-button, .execute-btn, .next-btn, .back-btn, .select-image-btn, .play-btn, .action-btn, .nav-btn, .reel-action-btn, .remove-url-btn, .add-url-btn, .source-type-btn {
    font-size: 14px;
    padding: 12px 16px;
    line-height: 1;
    height: unset;
    font-family: 'Montserrat', sans-serif;
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn i.lni {
    font-size: 1.1rem;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--background-btn-secondary) !important;
    color: var(--text-secondary);
    border: none;
}

.btn-secondary:hover {
    border: none;
}

.btn-transparent {
    background: transparent !important;
    color: var(--text-secondary);
    border: none;
}

.btn-transparent:hover {
    background: transparent !important;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cta-button:hover {
    background: var(--primary-hover);
}

/* Progress Bar */
.progress-container {
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.screen {
    display: none;
    animation: fadeIn 0.5s ease;
}

.screen.active {
    display: block;
}

/* Auth screens need flex display for centering */
.auth-screen.active {
    display: flex !important;
}

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

/* Welcome Screen */
.welcome-content {
    text-align: center;
    background: white;
    border-radius: 8px;
    padding: 3rem;
    border: 1px solid #e1e5e9;
}

.welcome-hero i {
    font-size: 4rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.welcome-hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.welcome-hero p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.feature {
    padding: 1.5rem;
    border-radius: 15px;
    background: rgba(102, 126, 234, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: transform 0.3s ease;
}

.feature:hover {
    opacity: 0.7;
}

.feature i {
    font-size: 2rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.feature h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.feature p {
    color: #666;
    font-size: 0.9rem;
}

/* Buttons */

.cta-button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 1.2rem;
    padding: 1.2rem 2.5rem;
}

.cta-button:hover {
    opacity: 0.7;
}

.cta-button:disabled:hover {
    opacity: 1;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-outline {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
}

.btn:hover {
    opacity: 0.7;
}

.btn:disabled:hover {
    opacity: 1;
}

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

/* New Pipeline Layout */
.pipeline-layout {
    display: flex;
    height: calc(100vh - 300px);
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.steps-sidebar {
    width: 200px;
    background: #f8f9fa;
    border-right: 1px solid #e1e5e9;
    padding: 2rem 1rem;
}

.vertical-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step-item {
    padding: 0.75rem 1rem;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 400;
    text-align: left;
}

.step-item.active {
    color: var(--text-primary);
    font-weight: bold;
}

.step-item.completed {
    color: var(--primary-color);
    font-weight: 500;
}

.step-item.form-mode::after {
    content: ' (Form)';
    font-size: 0.8rem;
    color: #ffc107;
    font-weight: normal;
}

.step-item.preview-mode::after {
    content: ' (Preview)';
    font-size: 0.8rem;
    color: #17a2b8;
    font-weight: normal;
}

.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-mode, .preview-mode {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

.logs-section {
    height: 150px;
    border-top: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.section-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.section-header p {
    color: #666;
    margin-bottom: 2rem;
}

.form-label, .preview-header, .logs-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #dc3545;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.preview-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: #dc3545;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.logs-header {
    padding: 1rem;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.logs-content {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.debug-logs {
    flex: 1;
    overflow-y: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 1rem;
    height: 100%;
}

.log-entry {
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.log-timestamp {
    color: #666;
    font-size: 0.7rem;
}

.log-level {
    font-weight: bold;
    margin: 0 0.5rem;
}

.log-level.info {
    color: #007bff;
}

.log-level.success {
    color: #28a745;
}

.log-level.warning {
    color: #ffc107;
}

.log-level.error {
    color: #dc3545;
}

.log-message {
    color: #333;
}

.clear-logs {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.clear-logs:hover {
    color: #dc3545;
}

.preview-content {
    height: 100%;
}

.default-preview {
    color: #999;
    text-align: center;
    padding: 3rem 1rem;
}

.actions-bar {
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    background: white;
    border-top: 1px solid #e1e5e9;
}

.execute-btn {
    background: #28a745;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
}

.next-btn {
    background: #667eea;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
}

.back-btn {
    background: transparent;
    color: #6c757d;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 25px;
    font-weight: 600;
}

/* Step-specific Preview Styles */
.ingest-preview .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-item label {
    font-weight: bold;
    color: #666;
    font-size: 0.9rem;
}

.info-item span {
    color: #333;
}

.content-summary {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    line-height: 1.6;
    margin: 1rem 0;
}

.scene-block {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin: 1rem 0;
    overflow: hidden;
}

.scene-header {
    background: #f8f9fa;
    padding: 1rem;
    border-bottom: 1px solid #e1e5e9;
}

.scene-header h3 {
    margin: 0 0 0.5rem 0;
    color: #333;
}

.timing-info {
    font-size: 0.9rem;
    color: #666;
}

.scene-content {
    padding: 1rem;
}

.scene-title, .scene-script, .scene-image-prompt, .voice-section {
    margin: 1rem 0;
}

.scene-title label, .scene-script label, .scene-image-prompt label, .voice-section label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
}

.script-text {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    line-height: 1.6;
}

.image-prompt-input {
    width: 100%;
    min-height: 60px;
    padding: 0.75rem;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    font-family: inherit;
    resize: vertical;
}

.image-placeholder {
    background: #f8f9fa;
    border: 2px dashed #e1e5e9;
    padding: 2rem;
    text-align: center;
    color: #666;
    border-radius: 8px;
    margin: 1rem 0;
}

.image-proposals {
    margin: 1rem 0;
}

.image-proposals h4 {
    margin: 0 0 1rem 0;
    color: #333;
}

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

.image-option {
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-option:hover {
    border-color: #667eea;
}

.image-option.selected {
    border-color: #28a745;
    background: #f8f9fa;
}

.image-option .image-placeholder {
    margin: 0;
    border: none;
    padding: 1rem;
    background: #f8f9fa;
}

.select-image-btn {
    width: 100%;
    padding: 0.5rem;
    background: #667eea;
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.select-image-btn:hover {
    opacity: 0.7;
}

.select-image-btn:disabled:hover {
    opacity: 1;
}

.image-option.selected .select-image-btn {
    background: #28a745;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.play-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.3s ease;
}

.play-btn:hover {
    opacity: 0.7;
}

.play-btn:disabled:hover {
    opacity: 1;
}

.audio-duration {
    font-size: 0.9rem;
    color: #666;
}

/* Forms */
.step-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.form-group label {
    font-weight: 600;
    color: #333;
}

/* Label with button container for Enhance buttons */
.label-with-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.label-with-button label {
    margin-bottom: 0;
}

.label-with-button .btn-transparent {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.label-with-button .btn-transparent:hover {
    opacity: 1;
}

.form-group input,
.form-group select,
.form-group textarea {
    /*padding: 0.75rem;*/
    /*border: 2px solid #e1e5e9;*/
    /*border-radius: 8px;*/
    /*font-size: 1rem;*/
    /*transition: border-color 0.3s ease;*/
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

.form-group input[type="range"] {
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
    var(--primary-color) 0%,
    var(--primary-color) var(--slider-value, 0%),
    #ccc var(--slider-value, 0%),
    #ccc 100%);
    outline: none;
    margin-top: 12px;
}

.form-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

.form-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

.speed-label-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.speed-value {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 500;
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.required {
    color: #dc3545;
}

/* Step Progress */
.step-progress {
    text-align: center;
    padding: 2rem;
}

.progress-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Step Result */
.step-result {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.step-result h3 {
    color: #28a745;
    margin-bottom: 1rem;
}

.result-item {
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.result-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.result-value {
    color: #666;
}

/* Step Actions */
.step-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 2rem;
    border-top: 1px solid #e1e5e9;
    margin-top: auto;
}

/* Completion Screen */
.completion-content {
    text-align: center;
    background: white;
    border-radius: 8px;
    padding: 3rem;
    border: 1px solid #e1e5e9;
}

.completion-hero i {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 1rem;
}

.completion-hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.video-preview {
    margin: 2rem 0;
    background: #f8f9fa;
    border-radius: 15px;
    padding: 2rem;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
}

.toast {
    background: var(--toast-background);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: slideInRight 0.3s ease;
    border: none;
}

.toast.success {
    border-left-color: #28a745;
}

.toast.error {
    border-left-color: #dc3545;
}

.toast.warning {
    border-left-color: #ffc107;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-icon {
    font-size: 1.2rem;
    display: inline;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    padding: 0;
    line-height: 1rem;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--toast-title);
}

.toast-message {
    line-height: 1rem;
    font-size: 0.80rem;
    color: var(--toast-body);
}

.toast-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--toast-body);
    padding: 0;
    margin-left: 0.5rem;
}

/* Responsive Design */
/* Scenes Preview Styles */
.scenes-preview-container {
    width: 100%;
    height: 100%;
}

.scenes-preview-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    height: 80vh;
    width: 100%;
}

.scenes-list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.scenes-list h3 {
    margin: 0;
    padding: 15px;
    background: #667eea;
    color: white;
    font-size: 16px;
    border-bottom: 1px solid #e1e5e9;
}

.scenes-list-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.scene-item {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scene-item:hover {
    border-color: #667eea;
    background: #f8f9fa;
}

.scene-item.active {
    border-color: #667eea;
    background: #e3f2fd;
}

.scene-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.scene-number {
    font-weight: bold;
    color: #2c3e50;
    font-size: 14px;
}

.scene-actions {
    display: flex;
    gap: 6px;
}

.action-btn {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    opacity: 0.7;
}

.action-btn:disabled:hover {
    opacity: 1;
}

.image-btn {
    color: #e67e22;
    border-color: #e67e22;
}

.image-btn:hover {
    opacity: 0.7;
}

.image-btn:disabled:hover {
    opacity: 1;
}

.play-btn {
    color: #27ae60;
    border-color: #27ae60;
}

.play-btn:hover {
    background: #27ae60;
    color: white;
}

.scene-item-title {
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 4px;
    font-size: 14px;
}

.scene-item-text {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.scene-detail {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    background: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.scene-detail h3 {
    margin: 0;
    padding: 15px;
    background: #34495e;
    color: white;
    font-size: 16px;
    border-bottom: 1px solid #e1e5e9;
}

.scene-detail-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.scene-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.scene-preview-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 18px;
}

.scene-timing {
    color: #666;
    font-size: 14px;
}

.scene-preview-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scene-script-section,
.scene-image-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scene-script-section label,
.scene-image-section label {
    font-weight: bold;
    color: #2c3e50;
    font-size: 14px;
}

.scene-script-text {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e1e5e9;
    line-height: 1.6;
    font-size: 14px;
}

.selected-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    background: #f9f9f9;
}

.scene-preview-image {
    max-width: 100%;
    /*max-height: 300px;*/
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.no-image-placeholder {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 40px;
}

.image-note {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin: 0;
}

/* Image Selection Modal */
.image-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    max-height: 90%;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}

.vrd-ui-modal {
    background: var(--dialog-background);
    border-radius: var(--border-radius);
}

.filter-modal {
    min-width: 480px;
}

.vrd-ui-filter-row {
    margin-bottom: 16px;
}

.vrd-ui-filter-row label {
    font-size: 0.9rem;
}


.modal-header h3 {
    margin: 0;
    color: #2c3e50;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.modal-close:hover {
    background: #e9ecef;
}

.modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Modal Large (for details modals) */
.modal-large {
    max-width: 1000px;
}

/* Details Modal Styles */
.details-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

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

.details-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--text-primary);
}

.details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.details-table tr {
    border-bottom: 1px solid var(--border-color);
}

.details-table tr:last-child {
    border-bottom: none;
}

.details-table td {
    padding: 10px 0;
    font-size: 0.875rem;
}

.details-table td:first-child {
    font-weight: 600;
    color: var(--text-secondary);
    width: 180px;
}

.details-table td:last-child {
    color: var(--text-primary);
}

.breakdown-list {
    margin-top: 12px;
    background: var(--background-hover);
    border-radius: 8px;
    padding: 12px;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
}

.breakdown-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.breakdown-item span:first-child {
    font-weight: 500;
    color: var(--text-primary);
}

.breakdown-item span:last-child {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Cost Modal Styles */
.cost-summary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
    color: white;
}

.cost-total {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cost-total > span:first-child {
    font-size: 0.875rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/*.cost-value {*/
/*    font-size: 2rem;*/
/*    font-weight: 700;*/
/*}*/

.cost-usd {
    font-size: 1.125rem;
    opacity: 0.85;
}

.cost-breakdown {
    margin-top: 20px;
}

.cost-breakdown h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--text-primary);
}

.cost-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--background-hover);
    border-radius: 8px;
    margin-bottom: 8px;
}

.cost-breakdown-item:last-child {
    margin-bottom: 0;
}

.cost-module {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.cost-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cost-amount > span:first-child {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.cost-usd-small {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.modal-body .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.modal-body .image-option {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    transition: all 0.2s ease;
}

.modal-body .image-option:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modal-body .image-option img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.modal-body .select-image-btn {
    width: 100%;
    padding: 10px;
    background: #667eea;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

.modal-body .select-image-btn:hover {
    opacity: 0.7;
}

.select-image-btn:disabled:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .app-header {
        padding: 1rem;
    }

    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .progress-container {
        padding: 1rem;
    }

    .progress-steps {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .main-content {
        padding: 1rem;
    }

    .step-container {
        flex-direction: column;
    }

    .step-sidebar {
        width: 100%;
        padding: 1rem;
    }

    .step-navigation {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.5rem;
    }

    .nav-step {
        min-width: 120px;
        text-align: center;
    }

    .welcome-features {
        grid-template-columns: 1fr;
    }

    .step-actions {
        flex-direction: column;
    }

    .completion-actions {
        flex-direction: column;
    }

    .toast-container {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 20px);
        max-width: 400px;
    }

    .toast {
        max-width: none;
    }

    /* Mobile responsive for scenes preview */
    .scenes-preview-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        height: auto;
    }

    .scenes-list {
        height: 300px;
    }

    .scene-detail {
        height: 400px;
    }
}

/* Reel Management Styles */
.header-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nav-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    color: #666;
}

.nav-btn:hover {
    opacity: 0.7;
}

.nav-btn:disabled:hover {
    opacity: 1;
}

.nav-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.reels-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 2rem 0 1rem 0;
    border-bottom: 1px solid #e1e5e9;
}

.reels-title h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reels-title p {
    color: #666;
    margin: 0;
}

.reels-container {
    flex: 1;
}

.reels-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.loading-spinner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 0;
    color: #666;
}

.reel-card {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reel-card:hover {
    opacity: 0.7;
}

.reel-card-header {
    padding: 1.5rem 1.5rem 0 1.5rem;
}

.reel-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reel-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.reel-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reel-status.draft {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.reel-status.ready {
    background: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

.reel-status.processing {
    background: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffcc02;
}

.reel-status.completed {
    background: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.reel-status.failed {
    background: #ffebee;
    color: #d32f2f;
    border: 1px solid #ffcdd2;
}

.reel-timestamp {
    font-size: 0.8rem;
    color: #666;
}

.reel-card-content {
    padding: 0 1.5rem;
}

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

.config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.config-label {
    color: #666;
}

.config-value {
    color: #333;
    font-weight: 500;
}

.reel-source {
    margin-bottom: 1rem;
}

.reel-source-label {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.reel-source-text {
    font-size: 0.8rem;
    color: #667eea;
    background: #f0f3ff;
    padding: 0.5rem;
    border-radius: 4px;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.reel-url {
    font-size: 0.8rem;
    color: #667eea;
    text-decoration: none;
    display: block;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reel-url:hover {
    text-decoration: underline;
}

.reel-card-actions {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    background: #f8f9fa;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.reel-action-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.reel-action-btn:hover {
    opacity: 0.7;
}

.reel-action-btn:disabled:hover {
    opacity: 1;
}

.reel-action-btn.edit {
    color: #667eea;
    border-color: #667eea;
}

.reel-action-btn.edit:hover {
    opacity: 0.7;
}

.reel-action-btn.edit:disabled:hover {
    opacity: 1;
}

.reel-action-btn.preview {
    color: #28a745;
    border-color: #28a745;
}

.reel-action-btn.preview:hover {
    opacity: 0.7;
}

.reel-action-btn.preview:disabled:hover {
    opacity: 1;
}

.reel-action-btn.run {
    color: #fd7e14;
    border-color: #fd7e14;
}

.reel-action-btn.run:hover {
    opacity: 0.7;
}

.reel-action-btn.run:disabled:hover {
    opacity: 1;
}

.reel-action-btn.delete {
    color: #dc3545;
    border-color: #dc3545;
}

.reel-action-btn.delete:hover {
    opacity: 0.7;
}

.reel-action-btn.delete:disabled:hover {
    opacity: 1;
}

/* Reel Form Styles */
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem 0 1rem 0;
    border-bottom: 1px solid #e1e5e9;
}

.form-title h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-title p {
    color: #666;
    margin: 0;
}

.form-actions {
    display: flex;
    gap: 1rem;
}

.form-content {
    max-width: 800px;
    margin: 0 auto;
}

.reel-form {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: var(--border-radius);
    padding: 24px;
    max-width: 800px;
    width: 100%;
}

.form-section {
    padding-bottom: 16px;
}

.form-section:last-child {
    padding-bottom: 0;
}

.form-section h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.form-section h4 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.form-section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.form-group label {
    display: block;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
    color: var(--text-primary);
}

/* Tom Select Custom Styles */
.ts-wrapper .ts-control {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.55rem 2.5rem 0.55rem 0.75rem;
    font-size: 0.75rem;
    font-family: 'Montserrat', sans-serif;
    background: var(--background-card);
    transition: border-color 0.2s ease;
    position: relative;
    color: var(--text-primary);
    line-height: 1.2rem;
    min-height: 2.4rem;
}

.ts-wrapper .ts-control::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #666;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.ts-wrapper .ts-control:hover {
    border-color: var(--primary-color);
}

.ts-wrapper .ts-control:hover::after {
    border-top-color: var(--primary-color);
}

.ts-wrapper.dropdown-active .ts-control::after {
    transform: translateY(-50%) rotate(180deg);
}

.ts-wrapper.focus .ts-control {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 0, 178, 0.1);
}

.ts-wrapper .ts-dropdown {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--background-card);
    font-family: 'Montserrat', sans-serif;
}

.ts-dropdown .active {
    background-color: var(--hover-background);
    color: var(--text-primary);
}

.ts-wrapper .ts-dropdown .ts-option,
.ts-wrapper .ts-dropdown .optgroup-header,
.ts-wrapper .ts-dropdown .no-results,
.ts-wrapper .ts-dropdown .create {
    padding: 12px 16px;
    font-size: 0.75rem;
    border-radius: var(--border-radius);
}

.ts-control, .ts-wrapper.single.input-active .ts-control {
    background: var(--background-card);
    border-color: var(--border-color);
}

.ts-dropdown .option, .ts-dropdown .optgroup-header, .ts-dropdown .no-results, .ts-dropdown .create {
    padding: 8px 12px;
    color: var(--text-secondary);
}

.ts-wrapper .ts-dropdown .ts-option:hover {
    background: var(--hover-background);
}

.ts-wrapper .ts-dropdown .ts-option.selected {
    background: var(--primary-color);
    color: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
    resize: vertical;
    /*min-height: 100px;*/
}

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

.checkbox-group input[type="checkbox"] {
    width: auto;
}

.url-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.url-input-group input {
    flex: 1;
}

.remove-url-btn {
    padding: 0.75rem;
    background: none;
    color: var(--text-primary);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-url-btn:hover {
    background-color: var(--background-body);
    color: var(--accent-color);
}

.remove-url-btn:disabled:hover {
    opacity: 1;
}

.add-url-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--primary-color);
    border: 1px dashed var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.add-url-btn:hover {
    opacity: 0.7;
}

.add-url-btn:disabled:hover {
    opacity: 1;
}

.form-error {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.empty-reels {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-reels i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
    opacity: 0.7;
}

.empty-reels h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.empty-reels p {
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Mobile Responsive for Reel Management */
@media (max-width: 768px) {
    .reels-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .reels-list {
        grid-template-columns: 1fr;
    }

    .reel-config {
        grid-template-columns: 1fr;
    }

    .reel-card-actions {
        flex-wrap: wrap;
    }

    .form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .form-actions {
        width: 100%;
        justify-content: stretch;
    }

    .form-actions .btn {
        flex: 1;
    }

    .url-input-group {
        flex-direction: column;
    }

    .remove-url-btn {
        align-self: flex-end;
    }
}

/* Enhanced Form Styles with Vertical Tabs and 3-Column Layout */

/* Form Layout with Vertical Tabs */
.form-layout {
    display: flex;
    gap: 0;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    min-height: 600px;
}

.form-tabs {
    width: 200px;
    background: #f8f9fa;
    border-right: 1px solid #e1e5e9;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.form-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    border-left: 3px solid transparent;
}

.form-tab:hover {
    background: #e9ecef;
    color: #333;
}

.form-tab.active {
    background: white;
    color: #667eea;
    border-left-color: #667eea;
    font-weight: 500;
}

.form-tab i {
    font-size: 1rem;
    width: 16px;
    text-align: center;
}

.form-tab span {
    font-size: 0.9rem;
}

.form-content {
    flex: 1;
    padding: 0;
}

.reel-form {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.form-tab-content {
    display: none;
    padding: 2rem;
    height: 100%;
}

.form-tab-content.active {
    display: block;
}

/* 2-Column Form Grid */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}

.form-row.single {
    grid-template-columns: 1fr;
}

.form-row.double {
    grid-template-columns: 1fr 1fr;
}

.form-row.wide-triple {
    grid-template-columns: 2fr 1fr;

}

.form-row.triple {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-group {
    margin-bottom: 0;
}

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

.vrd-ui-modal .form-group .filter-row {
    margin-bottom: 0 !important;
}

.vrd-ui-modal .form-group {
    padding: 0;
}

.modal.vrd-ui-modal.edit-asset-modal .form-group {
    margin-bottom: 16px;
}

/* Enhanced Toggle Switch */
/* Removed - duplicate toggle-switch definition, using the one in settings section */

.toggle-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 43.6px;
}

.toggle-group label {
    margin-bottom: 0;
    cursor: pointer;
}

/* Source Type Selection */

.source-content {
    display: none;
    margin-top: 1rem;
}

.source-content.active {
    display: block;
}

/* Welcome Screen Adjustments */
.welcome-content {
    background: white;
    border-radius: 10px;
    padding: 3rem;
    margin: 2rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Reels Screen Adjustments */
.reels-header {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Update existing reel card styles */
.reels-container {
    background: transparent;
    padding: var(--spacing);
}

/* Mobile Responsive Updates */
@media (max-width: 768px) {
    .sidebar {
        width: 60px;
    }

    .sidebar-logo span,
    .sidebar-nav-item span {
        display: none;
    }

    .main-content {
        margin-left: 60px;
        padding: 1rem;
    }

    .form-layout {
        flex-direction: column;
    }

    .form-tabs {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
    }

    .form-tab {
        min-width: 120px;
        justify-content: center;
    }

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

    .source-type-selector {
        flex-direction: column;
    }
}

/* Side Panel Styles */
.side-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.side-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-panel {
    width: 90%;
    max-width: 1024px;
    height: 100vh;
    background: var(--background-card);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
}

.side-panel-overlay.active .side-panel {
    transform: translateX(0);
    right: 0;
}

/* Cost Logs Sidepanel - wider than default */
#costLogsSidepanel {
    width: 90%;
    max-width: 90%;
}

/* Usage Sidepanel - 80% width */
.usage-side-panel {
    width: 80%;
    max-width: 80%;
}

.side-panel-header {
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    background: var(--background-body);
}

.side-panel-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 600;
}

.side-panel-header h2 .subtitle {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.close-panel-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 2rem;
    border-radius: var(--border-radius);
    transition: color 0.2s ease, background-color 0.2s ease;
}

#backToPreviewButton {
    padding: 0 1rem 0 0;
    color: var(--text-secondary);
}

#backToPreviewButton svg[data-lucide],
.close-panel-btn svg[data-lucide] {
    width: 1.75rem;
    height: 1.75rem;
}

.close-panel-btn:hover {
    color: var(--text-primary);
    background-color: var(--hover-background);
}

.side-panel-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    background: var(--background-body);
}

.side-panel-footer {
    padding: 1rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}

.side-panel-footer .btn {
    min-width: 120px;
}

button#estimatedCostButton {
    background: var(--background-card);
    color: var(--text-primary);
}

.side-panel .form-section.first-section {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-top: 0;
}

.side-panel .form-section.first-section .form-row {
    margin-left: 0;
    padding-left: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .side-panel {
        width: 95%;
        max-width: none;
    }

    .side-panel-header {
        padding: 1rem 1.5rem;
    }

    .side-panel-content {
        padding: 0.75rem 1.5rem 1.5rem 1.5rem;
    }

    .side-panel-footer {
        padding: 0.75rem 1.5rem;
    }

    .side-panel-footer {
        flex-direction: column;
    }

    .side-panel-footer .btn {
        width: 100%;
        min-width: auto;
    }
}


@media (max-width: 480px) {
    .side-panel {
        width: 100%;
    }

    .side-panel-header {
        padding: 0.75rem 1rem;
    }

    .side-panel-content {
        padding: 0.5rem 1rem 1rem 1rem;
    }

    .side-panel-footer {
        padding: 0.5rem 1rem;
    }
}

/* Scenario/Reels Listing Layout - CSS aliases for compatibility - using duplicate styles instead of @extend */

/* Copy reel styles for scenario classes */

/* Scenarios list container */
.scenarios-list {
    display: flex;
    flex-direction: column !important;
}

.scenarios-container {
    padding: 16px;
}

.vrd-ui-row {
    display: flex;
    align-items: center;
    padding: 16px 16px;
    background: var(--background-card);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.vrd-ui-row[data-type=brand_kit] {
    padding: 16px;
}

.scenario-row,
.scenarios-container .scenario-row {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    background: var(--background-card);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

/* Hover effect removed as requested */

.scenario-info {
    flex: 1.2;
    min-width: 0;
    max-width: 480px;
}

.scenario-stats {
    flex: 0 0 auto;
}

.scenario-actions {
    flex: 0 0 auto;
}

.scenario-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vrd-ui-badges,
.scenario-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.scenario-badges{
    max-width: 320px;
}

.vrd-ui-badges .vrd-ui-badge,
.scenario-badge {
    background: var(--background-badge);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


.source-type-badge i {
    font-size: 0.65rem;
    width: 12px;
    height: 12px;
}

.scenario-badge.user-badge i {
    width: 12px;
    height: 12px;
}


.status-badge {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: none;
}

/* scenario-status and scenario-status-badge removed - status now uses .status-badge in badges section */

.scenario-stats {
    display: flex;
    gap: 16px;
    margin-left: 12px;
    margin-right: 24px;
    flex: 1.5;
    justify-content: center;
}

.providers-list .scenario-stats {
    gap: 32px;
}

.providers-list .scenario-actions .toggle-group label {
    display: none;
}

.providers-list .scenario-actions {
    min-width: 240px;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
}

.providers-list .scenario-info {
    flex: 0.6;
}

.stat-item.clickable-stat {
    cursor: pointer;
    transition: all 0.2s ease;
}

.stat-item.clickable-stat:hover {
    transform: translateY(-2px);
}

.stat-item.clickable-stat:hover .stat-number {
    color: var(--primary-color);
}

.scenario-actions {
    display: flex;
    gap: 8px;
    position: relative;
}

/* Branding List Column Layout */
div#brandingsList {
    padding: 0 16px;
}

.branding-logo-col {
    flex: 0 0 auto;
    margin-right: 16px;
}

.branding-info-col {
    flex: 1.5;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.branding-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branding-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.branding-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.branding-tags-col {
    flex: 1;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 16px;
}

/* Reels Listing Layout */
.page-header {
    padding: 32px 16px 16px 16px;
}

.page-title h2 {
    margin: 0 0 0 0;
    color: var(--text-primary);
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-weight: 600;
}

.page-title p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    opacity: 0.8;
}

/* Filters Header */
.filters-header {
    padding: 16px;
    background: var(--background-body);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.filters-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.filters-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg,
.search-box i {
    position: absolute;
    left: 0.75rem;
    color: var(--text-secondary);
    pointer-events: none;
}

.search-box input {
    padding: 0.8rem 0.75rem 0.8rem 2.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    min-width: 150px;
    width: 150px;
}

.search-box input:focus {
    outline: none;
    border-color: var(--text-primary);
}

.filter-select {
    min-width: 180px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--text-primary);
}

/* Reels Container */
.reels-container {
    padding: 16px;
}

.reels-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Reel Row */
.reel-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.reel-row:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Reel Icon */
.reel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Reel Info */
.reel-info {
    flex: 1;
    min-width: 0;
}

.reel-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.reel-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.reel-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: #f5f5f5;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

/* Reel Status */
.reel-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 100px;
}

.reel-status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-draft {
    background: #f3f4f6;
    color: #6b7280;
}

.status-ready {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-processing {
    background: #fef3c7;
    color: #d97706;
}

.status-completed {
    background: #dcfce7;
    color: #16a34a;
}

.status-failed {
    background: #fee2e2;
    color: #dc2626;
}

.status-idle {
    background: #f3f4f6;
    color: #6b7280;
}

.status-active {
    background: #dcfce7;
    color: #16a34a;
}

.reel-source-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: capitalize;
}

.source-articles {
    background: #e0e7ff;
    color: #3730a3;
}

.source-topic {
    background: #fef3c7;
    color: #b45309;
}

.source-prompt {
    background: #f3e8ff;
    color: #7c2d12;
}

.status-processing {
    background: #fef3c7;
    color: #d97706;
}

.status-completed {
    background: #dcfce7;
    color: #16a34a;
}

.status-failed {
    background: #fee2e2;
    color: #dc2626;
}

/* Reel Stats */
.reel-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
    min-width: 200px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 90px;
}

.stat-number {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1;
    margin-bottom: 6px;
}

/* Reel Actions */
.reel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: 64px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--border-radius);
    background: var(--background-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: var(--hover-background);
}


/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--border-radius);
    background: var(--background-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dropdown-btn:hover {
    background: var(--hover-background);
    color: var(--text-primary);
}

.dropdown-container {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    min-width: 120px;
    background: var(--background-dropdown-menu);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.dropdown-menu button:hover {
    background: var(--hover-background);
}

.dropdown-menu button:first-child {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.dropdown-menu button:last-child {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.dropdown-menu button.delete-option:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--background-card);
    border-radius: 16px;
}

.empty-state > svg.lucide {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.empty-state h3 {
    color: var(--text-secondary);
    font-size: 1.25rem;
    font-weight: 600;
}

.empty-state p {
    margin: 0 0 32px 0;
    color: var(--text-secondary);
    font-size: 1rem;
    opacity: 0.5;

}

/* Pagination */
.pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pagination-controls button svg,
.pagination-btn svg {
    margin:0 !important;
}
.pagination-controls button,
.pagination-btn {
    padding: 0.5rem;
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    background: none;
}

.pagination-controls button:hover:not(:disabled),
.pagination-btn:hover:not(.disabled) {
    background: var(--hover-background);
}

.pagination-controls button:disabled,
.pagination-btn.disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.pagination-current {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .filters-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .filters-left {
        flex-direction: column;
        gap: 0.75rem;
    }

    .filters-right {
        justify-content: center;
    }

    .reel-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
    }

    .reel-info {
        text-align: center;
    }

    .reel-meta {
        flex-direction: column;
        gap: 0.25rem;
    }

    .reel-status {
        justify-content: center;
        min-width: auto;
    }

    .reel-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .reel-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .action-btn {
        flex: 1;
        justify-content: center;
    }

    .search-box input {
        min-width: auto;
        width: 100%;
    }

    .filter-select {
        min-width: auto;
        width: 100%;
    }
}

/* ===== REEL PREVIEW SCREEN ===== */
#previewScreen {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 220px;
    right: 0;
    bottom: 16px;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    flex-shrink: 0;
    padding-right: 64px;
    gap: 32px;
}

.preview-header-center {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.preview-mode-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.preview-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.preview-title h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.preview-title p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.reel-metadata {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.reel-meta-item {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

.preview-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-header-right .btn {
    font-size: 0.875rem;
}

.preview-header-right .btn i {
    /*font-size: 0.75rem;*/
    /*width: 14px;*/
    /*height: 14px;*/
}

.preview-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: 0;
    height:calc( 100vh - 152px );
}

/* Left Sidebar - Scene Cards */
.preview-sidebar {
    width: 460px;
    background: none;
    border-right: none;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header {
    display: none;
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.scene-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--background-body);
    padding: 4px 8px;
    border-radius: 4px;
}

.scenes-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 0 0;
    background: none;
    max-height: 86vh;
}

.scene-card {
    background: var(--background-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 8px;
    padding: 16px;
    cursor: pointer;
    opacity: 0.6;
    position: relative;
}

.scene-card:hover {
    /*border-color: var(--text-secondary);*/
    border-width: 2px;
    opacity: 1;
}

.scene-card.active {
    border-color: var(--text-secondary);
    border-width: 2px;
    opacity: 1;
}

.scene-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.scene-card-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scene-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.scene-number {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0;
}

.scene-duration {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Scene Status Indicators */
.scene-status-indicators {
    display: flex;
    gap: 8px;
    flex: 1;
}

.scene-status-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.scene-status-item i {
    width: 14px;
    height: 14px;
}

/* Idle state */
.scene-status-item.idle {
    color: var(--text-secondary);
    background: var(--background-toggle-off);
}

/* Completed state */
.scene-status-item.completed {
    color: var(--text-primary);
    background: var(--background-toggle-on);
}

.scene-status-item.completed i {
    color: var(--primary-color);
}

/* Error state */
.scene-status-item.error {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

.scene-status-item.error i {
    animation: none;
}

/* Clickable state */
.scene-status-item.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Playing animation for voice preview */
.scene-status-item i.playing-animation {
    animation: voicePulse 1s ease-in-out infinite;
}

@keyframes voicePulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.scene-card-thumbnail {
    margin: 8px 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

.scene-card-thumbnail.format-vertical {
    aspect-ratio: 9/16;
    max-height: 120px;
}

.scene-card-thumbnail.format-horizontal {
    aspect-ratio: 16/9;
    max-height: 100px;
    width: 100%;
}

.scene-card-thumbnail.format-square {
    aspect-ratio: 1/1;
    max-height: 100px;
}

.scene-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.scene-card-thumbnail .no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.scene-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 24px 0;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
}

.scene-text.rtl {
    direction: rtl;
    text-align: right;
}

.scene-text.ltr {
    direction: ltr;
    text-align: left;
}

/* Scene visual progress bar */
.scene-visual-progress {
    margin: 12px 0;
    padding: 0 12px;
    border-radius: 6px;
}

.scene-visual-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--background-toggle-off);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.scene-visual-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.scene-visual-progress-text {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Caption Style: Classic (white text, black border) */
.scene-text[data-caption-style="classic"] {
    color: #ffffff;
    font-weight: bold;
    text-shadow: -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    3px 3px 6px rgba(0, 0, 0, 0.8);
}

/* Caption Style: Minimal (white text, subtle shadow) */
.scene-text[data-caption-style="minimal"] {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Caption Style: Bold (white text, black background) */
.scene-text[data-caption-style="bold"] {
    color: #ffffff;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
}

/* Caption Style: Outlined (white text, thick outline) */
.scene-text[data-caption-style="outlined"] {
    color: #ffffff;
    font-weight: 800;
    -webkit-text-stroke: 2px #000000;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}

/* Caption Position: Top */
.scene-text[data-caption-position="top"] {
    align-self: flex-start;
}

/* Caption Position: Middle */
.scene-text[data-caption-position="middle"] {
    align-self: center;
    text-align: center;
}

/* Caption Position: Bottom (default) */
.scene-text[data-caption-position="bottom"] {
    align-self: flex-end;
}

.scene-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.scene-action-btn {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.scene-action-btn[data-action=delete] {
    margin-left: auto;
}

.scene-action-btn:hover {
    background: var(--hover-background);
    color: var(--primary-color);
}

.scene-change-image-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
}

.scene-change-image-btn span {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Scene Menu Dropdown */
.scene-menu-container {
    position: relative;
    margin-left: auto;
}

.scene-menu-btn {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-menu-btn:hover {
    background: var(--hover-background);
    color: var(--primary-color);
}
.scene-menu-btn i,
.scene-menu-btn svg {
    margin:0;
}
.scene-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--background-dropdown-menu);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.scene-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.875rem;
    text-align: left;
    transition: background 0.2s ease;
}

.scene-menu-item i,
.scene-menu-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.scene-menu-item:hover {
    background: var(--hover-background);
}

.scene-menu-item.danger {
    color: var(--danger-color);
}

.scene-menu-item.danger i,
.scene-menu-item.danger svg {
    color: var(--danger-color);
}

.scene-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* Right Stage - Visual Preview */
.preview-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--background-body);
    overflow: hidden;
    position: relative;
}

.stage-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.stage-header-left {
    display: flex;
    align-items: center;
}

.stage-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stage-header-right .btn {
    font-size: 0.875rem;
}

.stage-header-right .btn i {
    font-size: 0.75rem;
    width: 14px;
    height: 14px;
}

.stage-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Stage Steps Bar - 3 Column Layout */
.stage-steps-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--background-card);
    border-bottom: 1px solid var(--border-color);
}

.stage-steps-left {
    flex: 0 0 auto;
    min-width: 150px;
}

.stage-steps-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.stage-steps-right {
    flex: 0 0 auto;
    min-width: 150px;
    display: flex;
    justify-content: flex-end;
}

/* Cost Display in Header */
.stage-cost-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--background-body);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.stage-cost-display:hover {
    background: var(--hover-background);
}

.stage-cost-display .cost-label-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.stage-cost-display .vrd_credit_icon {
    width: 18px;
    height: 18px;
    color: var(--primary-color);
}

/* Blinking animation for gem icon during pipeline execution */
@keyframes blink-gem {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

.stage-cost-display .vrd_credit_icon.blinking {
    animation: blink-gem 1.5s ease-in-out infinite;
}

.format-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.format-badge {
    background: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.8rem;
    height: auto;
}

.stage-content {
    flex: 1;
    /*padding: 24px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    min-height: 0;
    padding-bottom: 84px; /* Account for control bar height + padding */
}

/* Fix vertical layout stretching */
.stage-content:has(.scene-preview.format-vertical) {
    flex: none;
}

.stage-placeholder {
    text-align: center;
    color: var(--text-secondary);
}

.stage-placeholder i {
    font-size: 3rem;
    margin-bottom: 12px;
    display: block;
    opacity: 0.5;
}

.stage-placeholder p {
    margin: 0;
    font-size: 1rem;
}

.scene-preview {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    background: var(--background-card);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-preview.format-vertical {
    aspect-ratio: 9/16;
    width: auto;
    height: calc(100vh - 162px);
}

.scene-preview.format-horizontal {
    aspect-ratio: 16/9;
    width: max(720px, 50vw);
    height: auto;
}

.scene-preview.format-square {
    aspect-ratio: 1/1;
    width: min(400px, 80vh);
    height: auto;
}

.scene-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.scene-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.scene-preview-caption {
    position: absolute;
    left: 0;
    right: 0;
    color: white;
    padding: 20px 16px;
    font-weight: bolder;
    font-size: 24px;
    line-height: 1.3;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4em;
    transition: all 0.2s ease;
}

.scene-preview-caption.rtl {
    direction: rtl;
    text-align: right;
}

.scene-preview-caption.ltr {
    direction: ltr;
    text-align: left;
}

.scene-preview-caption.hidden {
    display: none;
}

/* Caption Position: Bottom (default) */
.scene-preview-caption[data-caption-position="bottom"],
.scene-preview-caption:not([data-caption-position]) {
    bottom: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding-top: 40px;
}

/* Caption Position: Top */
.scene-preview-caption[data-caption-position="top"] {
    top: 0;
    bottom: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    padding-bottom: 40px;
}

/* Caption Position: Middle */
.scene-preview-caption[data-caption-position="middle"] {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background: none;
    text-align: center;
}

/* Caption Style: Classic (white text, simple black shadow) */
.scene-preview-caption[data-caption-style="classic"] {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9),
    2px 2px 4px rgba(0, 0, 0, 0.8),
    3px 3px 6px rgba(0, 0, 0, 0.7);
}

/* Caption Style: Minimal (white text, very subtle shadow) */
.scene-preview-caption[data-caption-style="minimal"] {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: none !important;
}

/* Caption Style: Bold (white text, solid black background) */
.scene-preview-caption[data-caption-style="bold"] {
    color: #ffffff;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.85) !important;
    padding: 12px 20px;
    text-shadow: none;
}

/* Caption Style: Outlined (white text, stronger shadow) */
.scene-preview-caption[data-caption-style="outlined"] {
    color: #ffffff;
    font-weight: 900;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.9),
    3px 3px 5px rgba(0, 0, 0, 0.8),
    4px 4px 8px rgba(0, 0, 0, 0.7);
}

.scene-provider-info {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* Loading States */
.preview-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-spinner {
    text-align: center;
    color: var(--text-secondary);
}

.loading-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px;
}

.loading-spinner span {
    font-size: 0.9rem;
}

/* Progress Container */
.progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    min-width: 300px;
    margin-top: 2rem;
}

/* Progress Steps */
.progress-text {
    width: 100%;
}

.progress-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
    transition: all 0.3s ease;
}

.progress-step.completed {
    color: var(--primary-color);
}

.progress-step.completed i {
    color: var(--primary-color);
    font-size: 1rem;
}

.progress-step.completing {
    color: var(--primary-color);
}

.progress-step.pending {
    color: var(--text-secondary);
}

.progress-step span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Step Icons */
.step-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.step-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e0e0e0;
    transition: all 0.3s ease;
}

/* Progress Bar */
.progress-bar-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.progress-percentage {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Stage Cost Bar */
.stage-cost-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    gap: 2rem;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}

.stage-cost-bar .cost-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.stage-cost-bar .cost-item.clickable {
    cursor: pointer;
}

.stage-cost-bar .cost-item.clickable:hover {
    background: var(--bg-secondary);
    transform: translateY(-2px);
}

.stage-cost-bar .cost-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stage-cost-bar .cost-value {
    font-size: 1.25rem;
    color: var(--text-primary);
    font-weight: 700;
}

.stage-cost-bar .cost-separator {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

/* Play Control Bar */
.play-control-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 1rem;
}

.play-controls {
    display: flex;
    align-items: center;
}

.play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.play-btn:hover {
    background: var(--primary-color-dark);
    transform: scale(1.05);
}

.play-btn i {
    font-size: 1rem;
}

.timeline-container {
    flex: 1;
}

.timeline {
    width: 100%;
    height: 20px;
    position: relative;
    cursor: pointer;
}

.timeline-track {
    width: 100%;
    height: 2px;
    background: #e5e7eb;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: visible;
}

.scene-cues {
    position: absolute;
    top: -24px;
    height: 50px;
    opacity: 0.25;
    left: 0;
    right: 0;
    display: flex;
}

.scene-cue {
    height: 100%;
    border-radius: 2px;
    position: relative;
    transition: all 0.2s ease;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s ease;
}

.playhead {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease;
}

.playhead:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.playhead:active {
    cursor: grabbing;
}

.duration-display {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 80px;
}

.separator {
    color: var(--text-secondary);
}

/* Cache Status */
.cache-status {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1500;
}

/* Image Picker Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--dialog-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.modal-dialog {
    background: var(--dialog-background);
    border-radius: 8px;
    padding: 24px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 24px var(--dialog-shadow);
}

.modal-dialog h3 {
    margin: 0 0 16px 0;
    color: var(--text-primary);
}

.modal-dialog textarea,
.modal-dialog input[type="text"],
.modal-dialog select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.modal-dialog textarea {
    min-height: 90px;
    resize: vertical;
}

.modal-dialog .dialog-form {
    /* Container for form elements */
}

.modal-dialog .dialog-form label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
}

.modal-dialog .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.modal-dialog .form-row > div {
    flex: 1;
}

.modal-dialog .form-field {
    margin-bottom: 16px;
}

.image-picker-modal {
    background: var(--background-card);
    border-radius: var(--border-radius);
    max-width: 800px;
    max-height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
}

.close-modal-btn:hover {
    color: var(--text-primary);
}

/* Scenario Form Tabs */
.scenario-form-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin: 0 0 32px 0;
}

.scenario-tab {
    background: none;
    border: none;
    padding: 1rem 2rem;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scenario-tab i {
    width: 16px;
    height: 16px;
}

.scenario-tab:hover {
    color: var(--text-primary);
    background: var(--hover-background);
}

.scenario-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.modal-body {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.image-option {
    position: relative;
    cursor: pointer;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.image-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-option.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(139, 0, 178, 0.2);
}

.image-option img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.image-option-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.image-option:hover .image-option-overlay,
.image-option.selected .image-option-overlay {
    opacity: 1;
}

.image-option-check {
    color: white;
    font-size: 1.5rem;
}

.image-option-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 8px 8px 4px;
    color: white;
}

.image-provider {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.modal-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Responsive Design for Preview */
@media (max-width: 1024px) {
    .preview-sidebar {
        width: 300px;
    }

    .scene-preview.format-horizontal {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .preview-body {
        flex-direction: column;
    }

    .preview-sidebar {
        width: 100%;
        height: 40%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .preview-stage {
        height: 60%;
    }

    .preview-header {
        padding: 12px 16px;
    }

    .preview-header-left {
        gap: 12px;
    }

    .preview-title h2 {
        font-size: 1.1rem;
    }

    .scene-preview.format-vertical {
        max-width: 200px;
    }

    .scene-preview.format-horizontal {
        max-width: 300px;
    }

    .scene-preview.format-square {
        max-width: 250px;
    }

    .image-picker-modal {
        max-height: 95vh;
        margin: 10px;
    }

    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }
}

/* Play Control Bar Specific Styles */
.play-control-bar .play-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: var(--primary-color) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
    padding: 0 !important;
    gap: 0 !important;
}

.play-control-bar .play-btn:hover {
    color: var(--primary-hover) !important;
    transform: scale(1.1);
}

.play-control-bar .play-btn i {
    font-size: 24px !important;
    margin-left: 2px; /* Adjust for play icon centering */
}

/* Scene Cue Points on Timeline */
.scene-cue {
    position: relative;
}

.scene-cue::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -4px;
    width: 2px;
    height: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 1px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

/* Active Scene States */
.scene-card.playing {
    border: 2px solid var(--primary-color);
    background: rgba(139, 0, 178, 0.05);
}

.scene-card.playing .scene-card-header {
    background: rgba(139, 0, 178, 0.1);
}

.scene-cue.active {
    filter: brightness(1.2);
}

.scene-cue.active::after {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

/* Pulsing Animation for Scene Dot */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.scene-card.playing .scene-dot {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Scene Card Click Feedback */
.scene-card {
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.scene-card:hover {
    cursor: pointer;
}

.scene-card:active {
    transition: transform 0.05s ease;
}

/* ===== LUCIDE ICONS STYLES ===== */
/* Base Lucide icon styling for size control via CSS */
[data-lucide] {
    width: 1em;
    height: 1em;
    display: inline-block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: middle;
}

/* Icon size variants */
.icon-xs [data-lucide] {
    width: 0.75rem;
    height: 0.75rem;
}

.icon-sm [data-lucide] {
    width: 0.875rem;
    height: 0.875rem;
}

.icon-md [data-lucide] {
    width: 1rem;
    height: 1rem;
}

.icon-lg [data-lucide] {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-xl [data-lucide] {
    width: 1.5rem;
    height: 1.5rem;
}

/* Button specific icon sizing */
.btn [data-lucide] {
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
}

.btn.btn-sm [data-lucide] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn.btn-lg [data-lucide] {
    width: 1.125rem;
    height: 1.125rem;
}

/* Sidebar icon sizing */
.sidebar-logo [data-lucide] {
    width: 1.5rem;
    height: 1.5rem;
}

.sidebar-nav-item [data-lucide] {
    width: 1.125rem;
    height: 1.125rem;
}

/* Source type badge icons */
.source-type-badge [data-lucide] {
    width: 0.75rem;
    height: 0.75rem;
}

/* Action button icons */
.action-btn [data-lucide] {
    width: 1rem;
    height: 1rem;
}

/* Loader animation for loader-2 and loader-circle icons */
[data-lucide="loader-2"],
[data-lucide="loader-circle"] {
    animation: spin 1s linear infinite;
}

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

/* Toggle Button Groups */
.toggle-button-group {
    display: flex;
    gap: 8px;
    overflow: hidden;
    border-radius: var(--border-radius);
    padding: 4px;
    background: var(--background-toggle-off);
}

.toggle-button-group .btn {
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    cursor: pointer;
    background: none;
}

.toggle-button-group .btn:hover {
    color: var(--text-primary);
}

.toggle-button-group .btn.active {
    color: var(--text-primary);
    background: var(--background-toggle-on);
}

.toggle-button-group .btn [data-lucide] {
    width: 1rem;
    height: 1rem;
}

/* Filter Modal Toggle Buttons - Smaller Text */
.filter-modal .toggle-button-group .btn {
    font-size: 0.8125rem;
    padding: 0.625rem 0.875rem;
}

/* Volume Slider Components */
.volume-label-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.volume-value {
    font-size: 0.75rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Conditional Field Display */
.conditional-field {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.conditional-field.show {
    display: grid;
    opacity: 1;
    margin-bottom: 8px;
}

/* Form Help Text */
.form-help {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.375rem;
    font-style: italic;
}

.file-upload-container {
}

.file-upload-content {
    cursor: pointer;
}

.file-upload-content svg {
    margin: 1rem auto;
    display: block;
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

/* Inline file upload area for compact forms */
.file-upload-area-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--background-toggle-off);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 38px;
}

.file-upload-area-inline:hover {
    background: var(--background-toggle-on);
    border-color: var(--primary-color);
}

.file-upload-area-inline i {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.file-upload-area-inline span {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inline-file-preview {
    max-width: 100%;
    max-height: 60px;
    border-radius: 4px;
    object-fit: contain;
}

/* Navbar Buttons Widget */
.navbar-buttons-widget {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0.5rem;
}

.navbar-icon-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.navbar-icon-button:hover {
    color: var(--text-primary);
}

.navbar-icon-button i {
    width: 18px;
    height: 18px;
}

/* Theme toggle button - dual icons */
#themeToggleButton {
    position: relative;
}

#themeToggleButton .theme-icon {
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
    position: absolute;
}

#themeToggleButton .sun-icon {
    color: #f59e0b;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

#themeToggleButton .moon-icon {
    color: #6366f1;
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] #themeToggleButton .sun-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] #themeToggleButton .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Notification badge */
.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: white;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Theme Toggle in User Menu */
#themeToggle.user-menu-item {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

#themeToggle.user-menu-item:hover {
    background: var(--hover-background);
    color: var(--text-primary);
}

/* Theme toggle icon container */
#themeToggle .icon {
    width: 16px;
    height: 16px;
    transition: all var(--transition-duration) var(--transition-easing);
    position: relative;
}

span.theme-toggle-icons {
    position: relative;
    width: 16px;
    height: 16px;
}

#themeToggle .sun-icon {
    color: #f59e0b;
    opacity: 1;
    transform: rotate(0deg) scale(1);
    position: absolute;
    top: 0;
    left: 0;
}

#themeToggle .moon-icon {
    color: #6366f1;
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
    position: absolute;
    top: 0;
    left: 0;
}

/* Dark theme icon states */
[data-theme="dark"] #themeToggle .sun-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] #themeToggle .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Theme transition overlay for smooth switch */
.theme-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    transparent 0%,
    transparent var(--ripple-size, 0%),
    var(--background-body) var(--ripple-size, 0%));
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 500ms var(--transition-easing);
}

.theme-transition-overlay.active {
    opacity: 0;
}

/* Side Panel Styles */
.side-panel {
    position: fixed;
    top: 0;
    right: -500px;
    /*min-width: 500px;*/
    height: 100vh;
    background: var(--background-body);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    transition: right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.side-panel.active {
    right: 0;
}

.side-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.side-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 24px;
}

.side-panel-title h3 {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.side-panel-title p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.side-panel-close {
    flex-shrink: 0;
    margin-top: -4px;
}

.side-panel-content {
    flex: 1;
    overflow-y: auto;
}

/* Stage Top Bar Layout */
.stage-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.stage-top-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stage-top-left h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.stage-top-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.stage-scenario-meta {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Stage Info Display (Header) */
.stage-info-display {
    display: flex;
    gap: 24px;
    align-items: center;
}

.stage-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stage-info-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stage-info-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* Stage Info Section */
.stage-info-section {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}

.stage-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-bottom: 24px;
}

.stage-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stage-meta-item .label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stage-meta-item .value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.stage-meta-item .status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.status-pending {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.status-badge.status-running {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.status-badge.status-completed {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-badge.status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Progress Bar */
.stage-progress {
    margin-bottom: 24px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.stage-output {
    margin-top: 16px;
}

/* Stage Logs Section */
.stage-logs-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-body);
}

.logs-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.logs-controls {
    display: flex;
    gap: 8px;
}

.logs-container {
    flex: 1;
    padding: 16px 24px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    background: var(--background-body);
    overflow-y: auto;
    max-height: calc(100vh - 400px);
}

.logs-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.logs-placeholder i {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.logs-placeholder p {
    margin: 0;
    font-family: inherit;
}

.log-entry {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--background-card);
    border-radius: 4px;
    border-left: 3px solid var(--border-color);
}

.log-entry.log-info {
    border-left-color: #3b82f6;
}

.log-entry.log-success {
    border-left-color: #22c55e;
}

.log-entry.log-warning {
    border-left-color: #f59e0b;
}

.log-entry.log-error {
    border-left-color: #ef4444;
}

.log-timestamp {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-right: 8px;
}

.log-message {
    color: var(--text-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .side-panel {
        width: 100vw;
        right: -100vw;
    }

    .stage-meta {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Stage Details Panel Stacking - Higher z-index for stacking */
#stageDetailsOverlay {
    z-index: 11000 !important; /* Higher than regular side panels */
}

#stageDetailsSidePanel {
    z-index: 11000 !important; /* Higher than regular side panels */
}

/* ===============================
   BUILDER STAGE STYLES
   =============================== */

/* Stage Header - Two row layout */
.stage-header {
    background: var(--background-card);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.stage-header-row-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.stage-header-row-2 {
    padding: 12px 24px;
    background: rgba(139, 0, 178, 0.02);
}

.stage-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stage-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.stage-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stage-title {
    text-align: center;
}

.stage-title h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Progress Area */
.progress-area {
    width: 100%;
}

.progress-info {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.progress-percentage {
    font-weight: 600;
    color: var(--primary-color);
    min-width: 40px;
}

.progress-bar-wrapper {
    flex: 1;
}

.progress-bar {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
    width: 0%;
}

.last-action {
    color: var(--text-secondary);
    font-size: 0.875rem;
    min-width: 200px;
    text-align: right;
}

/* Stage Body */
.stage-body {
    display: flex;
    height: calc(100vh - 180px);
    overflow: hidden;
}

.stage-sidebar {
    width: 300px;
    background: var(--background-card);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    flex-shrink: 0;
}

.stage-sidebar .sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stage-sidebar .sidebar-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.stage-sidebar .scene-count {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.stage-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--background-body);
}

.stage-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
}

.stage-placeholder {
    text-align: center;
    color: var(--text-secondary);
}

.stage-placeholder i {
    font-size: 3rem;
    margin-bottom: 16px;
    display: block;
}


/* Button State Variations */
#stageStartButton.regenerate {
    background: #f59e0b;
}

#stageStartButton.regenerate:hover {
    background: #d97706;
}

#stageStartButton.render {
    background: #10b981;
}

#stageStartButton.render:hover {
    background: #059669;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .stage-sidebar {
        width: 250px;
    }

    .progress-info {
        gap: 12px;
    }

    .last-action {
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .progress-info {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .last-action {
        text-align: center;
        min-width: auto;
    }
}

.form-section-block {
    margin-bottom: 32px;
}

.form-section-block-title {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.form-row.col4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.form-row.col4[data-col="2-2-1-1"] {
    grid-template-columns: 2fr 2fr 1fr 1fr;
    grid-gap: 32px;
}

.form-row.col4[data-col="2-2-1"] {
    grid-template-columns: 2fr 2fr 1fr;
    grid-gap: 32px;
}

.form-row.col4[data-col="1-1-2"] {
    grid-template-columns: 1fr 1fr 2fr;
    grid-gap: 32px;
}

.dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 32px;
}

.dialog-form label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
}

/* ==========================================
   OUTPUTS PAGE STYLES
   ========================================== */

/* Outputs Container */
.outputs-container {
    padding: 16px;
}

/* Outputs Grid */
.outputs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 0px;
}

/* Override outputs-grid when containing video masonry grid */
.outputs-grid:has(.video-masonry-grid) {
    display: block;
    padding: 0;
    gap: 0;
}

/* Outputs Grid - Grouped Mode */
.outputs-grid.grouped {
    display: block;
}

/* Creation Card (New Design) */
.creation-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--background-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

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

/* Thumbnail Wrapper */
.creation-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio default */
    overflow: hidden;
    background: var(--background-toggle-off);
}

.creation-thumbnail-wrapper.vertical {
    padding-top: 56.25%; /* Keep consistent height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.creation-thumbnail-wrapper.vertical .creation-thumbnail {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.creation-thumbnail-wrapper.square {
    padding-top: 56.25%; /* Keep consistent height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.creation-thumbnail-wrapper.square .creation-thumbnail {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.creation-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creation-thumbnail-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--background-toggle-off) 0%, var(--border-color) 100%);
}

/* Play Overlay */
.creation-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.creation-card:hover .creation-play-overlay {
    opacity: 1;
}

.creation-play-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.creation-play-icon i {
    width: 32px;
    height: 32px;
    margin-left: 4px;
}

/* Badges (fade out on hover) */
.creation-badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.creation-card:hover .creation-badges {
    opacity: 0; /* Fade out on hover */
}

.creation-badges-bottom-left {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    margin-bottom: 4px;
}

.creation-badges-bottom-right {
    display: flex;
    justify-content: flex-end;
}

.creation-badge {
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

span.creation-badge.badge-duration {
    margin-left: auto;
}

.badge-language {
    padding: 3px 5px;
    min-width: auto;
}

.badge-language .fi {
    font-size: 0.875rem;
    line-height: 1;
}

.badge-language img {
    width: 16px;
    height: 12px;
    object-fit: contain;
}

.creation-badge i {
    width: 10px;
    height: 10px;
}

/* Card Info Section */
.creation-info {
    padding: 16px;
}

.creation-title {
    font-size: 0.90rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.creation-title:hover {
    color: var(--primary-color);
}

.creation-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.creation-time {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.creation-action-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.btn-icon:hover {
    background: var(--background-hover);
    color: var(--text-primary);
}

.btn-icon i {
    width: 18px;
    height: 18px;
}

/* Creation Menu (Dropdown) */
.creation-menu {
    position: absolute;
    right: 12px;
    bottom: 60px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 4px;
    z-index: 1000;
    min-width: 160px;
    max-width: 200px;
}

.creation-menu button {
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.creation-menu button:hover {
    background: var(--background-hover);
}

.creation-menu button.danger {
    color: var(--danger-color);
}

.creation-menu button.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.creation-menu button i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Legacy Support (for old cards) */
.reel-output-card {
    /* Redirect to new class */
}

.reel-thumbnail {
    /* Use creation-thumbnail-wrapper instead */
}

.reel-card-content {
    /* Use creation-info instead */
}

/* ==========================================
   VIDEO PLAYER MODAL
   ========================================== */

.video-player-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.video-player-modal.active {
    display: flex;
}

.video-player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1;
}

.video-player-container {
    position: relative;
    z-index: 2;
    background: var(--background-card);
    border-radius: var(--border-radius);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.video-player-title h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.video-player-meta {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.video-player-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

.video-player-content video {
    max-width: 100%;
    max-height: calc(90vh - 140px);
    width: auto;
    height: auto;
}

.video-player-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--background-card);
}

/* Responsive Grid */
@media (max-width: 1400px) {
    .outputs-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .outputs-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }

    .video-player-container {
        max-width: 95vw;
        max-height: 95vh;
    }
}

/* Reel Card Actions */
.reel-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.reel-card-actions .btn-sm {
    flex: 1;
    padding: 6px 12px;
    font-size: 0.813rem;
}

.reel-card-title {
    cursor: pointer;
}

.reel-card-title:hover {
    color: var(--primary-color);
}

/* Plyr Player Styling */
.video-player-content .plyr {
    width: 100%;
    height: 100%;
}

/* Video Player Modal - Updated */
.video-player-modal .video-player-container{
    width: 90vw;
    height: 90vh;
}
.video-player-modal .video-player-container.aspect-9-16 {
    /*width: unset;*/
    /*height: unset;*/
}

/* Video Player Close Button */
.video-player-close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10002;
    width: 64px;
    height: 64px;
    background: none;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.video-player-close-btn:hover {
    transform: scale(1.1);
}

.video-player-close-btn svg {
    width: 48px;
    height: 48px;
    stroke-width: 2.5;
}

.video-player-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    padding: 0;
    position: relative;
}

.video-player-content video {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
}

/* Aspect ratio containers for different formats */
.video-player-content.format-16-9 {
    width: min(90vw, 1200px);
    height: auto;
}

.video-player-content.format-16-9 video,
.video-player-content.format-16-9 .plyr {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.video-player-content.format-9-16 {
    width: auto;
    height: 90vh;
    max-width: calc(90vh * 9 / 16);
}

.video-player-content.format-9-16 video,
.video-player-content.format-9-16 .plyr {
    width: 100%;
    height: 100%;
    max-height: 90vh;
    aspect-ratio: 9/16;
}

.video-player-content.format-1-1 {
    width: min(90vh, 90vw, 800px);
    height: min(90vh, 90vw, 800px);
}

.video-player-content.format-1-1 video,
.video-player-content.format-1-1 .plyr {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
}

/* Plyr theme customization */
.plyr--video {
    --plyr-color-main: var(--primary-color, #3b82f6);
}

/* Ensure video fills the player container properly */
.video-player-content video {
    object-fit: contain;
    background: #000;
}

.video-player-header .btn.btn-icon svg {
    width: 24px;
    height: 24px;
    color: #666;
}

.video-player-header .btn {
    background: none;
}

/* ==========================================
   Stage Logs Viewer
   ========================================== */

/* Logs Viewer Container */
.logs-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Logs Tabs */
.logs-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    padding: 12px 16px;
    background: var(--bg-secondary, #f9f9f9);
}

.log-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    color: var(--text-secondary, #666);
    font-size: 14px;
    font-weight: 500;
}

.log-tab:hover {
    color: var(--text-primary, #333);
}

.log-tab.active {
    border-bottom-color: var(--primary-color, #2196F3);
    color: var(--primary-color, #2196F3);
    font-weight: 600;
}

/* Logs Content */
.logs-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--background-card, #ffffff);
}

.log-panel {
    display: none;
}

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

/* Log Entries */
.log-entry {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-left: 3px solid #ccc;
    font-family: 'Courier New', Monaco, monospace;
    font-size: 13px;
    line-height: 1.5;
    background: var(--bg-secondary, #f9f9f9);
    border-radius: 4px;
    transition: all 0.2s;
}

.log-entry:hover {
    background: var(--bg-hover, #f0f0f0);
}

/* Log Level Colors */
.log-entry.log-info {
    border-left-color: #2196F3;
}

.log-entry.log-success {
    border-left-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.05);
}

.log-entry.log-warn {
    border-left-color: #FF9800;
    background-color: rgba(255, 152, 0, 0.05);
}

.log-entry.log-error {
    border-left-color: #F44336;
    background-color: rgba(244, 67, 54, 0.1);
}

/* Log Entry Components */
.log-icon {
    margin-right: 8px;
    font-size: 14px;
}

.log-time {
    color: var(--text-tertiary, #999);
    margin-right: 8px;
    font-size: 12px;
}

.log-step {
    color: var(--text-primary, #333);
    font-weight: bold;
    margin-right: 8px;
    padding: 2px 6px;
    background: var(--bg-tertiary, #e0e0e0);
    border-radius: 3px;
    font-size: 11px;
}

.log-message {
    color: var(--text-primary, #000);
}

/* Log Details (JSON) */
.log-details {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-code, #f5f5f5);
    border-radius: 4px;
    font-size: 11px;
    overflow-x: auto;
    border: 1px solid var(--border-color, #e0e0e0);
    color: var(--text-code, #c7254e);
}

/* Logs Stats Footer */
.logs-stats {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f9f9f9);
    font-size: 13px;
    color: var(--text-secondary, #666);
    display: flex;
    gap: 8px;
    align-items: center;
}

.logs-stats span {
    font-weight: 500;
}

/* No Logs Message */
.no-logs {
    padding: 32px;
    text-align: center;
    color: var(--text-tertiary, #999);
    font-style: italic;
}

/* Dark Theme Support */
[data-theme="dark"] .logs-tabs {
    background: var(--bg-secondary, #1a1a1a);
    border-bottom-color: var(--border-color, #333);
}

[data-theme="dark"] .logs-content {
    background: var(--background-card, #0d0d0d);
}

[data-theme="dark"] .log-entry {
    background: var(--bg-secondary, #1a1a1a);
}

[data-theme="dark"] .log-entry:hover {
    background: var(--bg-hover, #252525);
}

[data-theme="dark"] .log-entry.log-success {
    background-color: rgba(76, 175, 80, 0.15);
}

[data-theme="dark"] .log-entry.log-warn {
    background-color: rgba(255, 152, 0, 0.15);
}

[data-theme="dark"] .log-entry.log-error {
    background-color: rgba(244, 67, 54, 0.2);
}

[data-theme="dark"] .log-step {
    background: var(--bg-tertiary, #333);
}

[data-theme="dark"] .log-details {
    background: var(--bg-code, #1a1a1a);
    border-color: var(--border-color, #333);
}

[data-theme="dark"] .logs-stats {
    background: var(--bg-secondary, #1a1a1a);
    border-top-color: var(--border-color, #333);
}

/* Sort Menu Popover */
.sort-menu {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 8px;
}

.sort-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 8px;
    font-size: 0.9rem;
}

.sort-menu-item:hover {
    background-color: var(--bg-hover);
}

.sort-menu-item.active {
    background-color: var(--primary-color);
    color: white;
}

.sort-menu-item i {
    width: 18px;
    height: 18px;
}

/* Compact Layout for Outputs Grid */
.outputs-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.outputs-grid.compact .creation-card {
    font-size: 0.9rem;
}

.outputs-grid.compact .creation-card {
    font-size: 0.9rem;
}

/* Ensure compact mode works with new cards */
.outputs-grid.compact .creation-info {
    padding: 12px;
}

.outputs-grid.compact .creation-title {
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.outputs-grid.compact .creation-time {
    font-size: 0.813rem;
}

.outputs-grid.compact .reel-card-title {
    font-size: 0.85rem;
}

.outputs-grid.compact .reel-card-meta {
    font-size: 0.75rem;
}

/* Filter Badge */
.filter-badge {
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 0.7rem;
    margin-left: 4px;
    min-width: 18px;
    text-align: center;
}


/* ================================================================================
   PROVIDERS MANAGEMENT STYLES
   ================================================================================ */

/* Providers Container */
.providers-container {
    padding: 20px;
}

/* Table Container */
.table-container {
    background: var(--background-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Providers Table */
.providers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.providers-table thead {
    background: var(--bg-secondary);
}

.providers-table th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.providers-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.providers-table tbody tr {
    transition: background-color 0.2s;
}

.providers-table tbody tr:hover {
    background: var(--bg-hover);
}

.providers-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Loading State */
.table-loading {
    text-align: center;
    padding: 60px 20px !important;
}

/* Status Badge in Table */
.providers-table .status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.providers-table .status-badge.active {
    background: #d4edda;
    color: #155724;
}

.providers-table .status-badge.inactive {
    background: #f8d7da;
    color: #721c24;
}

/* Action Buttons in Table */
.providers-table .btn-icon {
    padding: 6px;
    margin: 0 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s, background 0.2s;
    border-radius: 6px;
}

.providers-table .btn-icon:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
}

.providers-table .btn-icon svg {
    width: 18px;
    height: 18px;
}

/* Provider Modal Specific Styles */
#providerModal .filter-modal {
    width: 580px;
    max-width: 100%;
    background: var(--dialog-background);
    border-radius: 16px;
    overflow: hidden;
}

#providerModal .filter-row {
    margin-bottom: 20px;
}

#providerModal .filter-row label {
    display: block;
}

#providerModal .vrd-ui-input,
#providerModal .vrd-ui-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-card);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

#providerModal .vrd-ui-input:focus,
#providerModal .vrd-ui-dropdown:focus,
#providerModal .vrd-ui-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

#providerModal .vrd-ui-input[readonly] {
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

#providerModal .vrd-ui-textarea {
    resize: vertical;
    font-family: inherit;
}

/* Responsive Table */
@media (max-width: 1200px) {
    .providers-table {
        font-size: 0.85rem;
    }

    .providers-table th,
    .providers-table td {
        padding: 12px;
    }
}

@media (max-width: 992px) {
    .providers-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* ================================
   Jobs Queue Screen Styles
   ================================ */

/* Stats Cards Container */
.jobs-stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card .stat-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.stat-card .stat-content {
    flex: 1;
}

.stat-card .stat-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-card .stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Stat Card Colors */
.stat-pending .stat-icon {
    background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
}

.stat-pending .stat-value {
    color: #FFA500;
}

.stat-running .stat-icon {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

.stat-running .stat-value {
    color: #3B82F6;
}

.stat-completed .stat-icon {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.stat-completed .stat-value {
    color: #10B981;
}

.stat-failed .stat-icon {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.stat-failed .stat-value {
    color: #EF4444;
}

/* Jobs Table Container */
.jobs-table-container {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.jobs-table {
    width: 100%;
    border-collapse: collapse;
}

.jobs-table thead {
    background: var(--background-tertiary);
}

.jobs-table th {
    padding: 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.jobs-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.jobs-table tbody tr:hover {
    background: var(--bg-hover);
}

.jobs-table tbody tr:last-child {
    border-bottom: none;
}

.jobs-table td {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
}

.jobs-table td:first-child {
    font-weight: 600;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
}

.loading-cell {
    text-align: center;
    padding: 60px 20px !important;
}

/* Job Status Badges */
.job-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job-status-badge svg {
    width: 14px;
    height: 14px;
}

.job-status-badge.status-pending {
    background: #FFF3CD;
    color: #856404;
}

.job-status-badge.status-running {
    background: #D1ECF1;
    color: #0C5460;
}

.job-status-badge.status-running svg {
    animation: spin 1s linear infinite;
}

.job-status-badge.status-completed {
    background: #D4EDDA;
    color: #155724;
}

.job-status-badge.status-failed {
    background: #F8D7DA;
    color: #721C24;
}

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

/* Job Actions */
.job-actions {
    display: flex;
    gap: 8px;
}

.job-actions .btn {
    padding: 6px 12px;
    font-size: 12px;
}

.job-actions .btn-icon {
    padding: 6px;
}

/* Responsive Stats Grid */
@media (max-width: 1200px) {
    .jobs-stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .jobs-stats-container {
        grid-template-columns: 1fr;
    }

    .jobs-table {
        font-size: 12px;
    }

    .jobs-table th,
    .jobs-table td {
        padding: 12px 8px;
    }
}

/* Job Detail Modal */
.job-detail-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

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

.job-detail-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.job-detail-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.job-detail-section {
    margin-bottom: 24px;
}

.job-detail-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.job-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.job-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.job-detail-item .label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.job-detail-item .value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.job-logs-container {
    background: var(--background-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-primary);
}

.job-detail-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* File Upload with Preview */
.file-upload-with-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-preview {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    background: var(--background-secondary);
    max-width: 100%;
}

.file-preview img {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.file-preview video {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    display: block;
    margin: 0 auto;
}

/* Asset Picker Field */
.asset-picker-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.asset-picker-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.asset-picker-buttons .btn {
    flex-shrink: 0;
}

/* Asset Picker Inline Compact Layout */
.asset-picker-inline {
    display: flex;
    align-items: center;
}

.asset-picker-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.asset-thumbnail-compact {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    background: var(--background-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.asset-thumbnail-compact img,
.asset-thumbnail-compact video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-asset-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-tertiary);
}

.no-asset-placeholder i {
    width: 32px;
    height: 32px;
}

/* Video Thumbnail Preview */
.video-thumbnail-preview {
    margin-top: 15px;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.video-thumbnail:hover {
    transform: scale(1.02);
}

.video-thumbnail video {
    width: 100%;
    height: auto;
    display: block;
}

.video-thumbnail .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.2s;
}

.video-thumbnail:hover .play-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.video-thumbnail .play-overlay i {
    width: 64px;
    height: 64px;
    color: white;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* Video Player Modal */
.video-player-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}

.video-player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.video-player-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 10001;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.video-player-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10002;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-player-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.video-player-close i {
    width: 24px;
    height: 24px;
}

.video-player-container video {
    width: 100%;
    height: auto;
    max-height: 90vh;
    display: block;
    background: #000;
}

.video-player-container video::-webkit-media-controls-panel {
    background: rgba(0, 0, 0, 0.8);
}

.video-player-modal .video-player-container::before {
    display: none;
}

.video-player-modal h1,
.video-player-modal h2,
.video-player-modal h3,
.video-player-modal .title {
    display: none !important;
}


/* Cost Breakdown Modal */

/* Estimated Cost & Duration Button Animation */
.estimated-cost-btn .btn-content,
.estimated-duration-btn .btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.estimated-cost-btn .cost-value,
.estimated-duration-btn .duration-value {
    font-weight: 600;
    color: var(--primary);
}

.estimated-cost-btn.updating .cost-value,
.estimated-duration-btn.updating .duration-value {
    animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.95);
    }
}

/* Summary Cards */
.cost-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.summary-card .card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 8px;
    color: white;
}

.summary-card .card-icon svg {
    width: 20px;
    height: 20px;
}

.summary-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-card .card-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-card .card-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.cost-breakdown-table {
    margin-bottom: 24px;
}

.cost-breakdown-table h4 {
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--text-primary);
}

.cost-breakdown-table table {
    width: 100%;
    border-collapse: collapse;
}

.cost-breakdown-table thead {
    background: var(--bg-secondary);
}

.cost-breakdown-table th {
    padding: 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.cost-breakdown-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.cost-breakdown-table .text-right {
    text-align: left;
}

.cost-breakdown-table tbody tr:hover {
    background: var(--bg-secondary);
}

.cost-quantities {
    padding-top: 16px;
    border-top: 2px solid var(--border-color);
}

.cost-quantities h4 {
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--text-primary);
}

.quantities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.quantity-item {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quantity-item .label {
    font-size: 13px;
    color: var(--text-secondary);
}

.quantity-item .value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Component Form Modal Styles */
.info-group {
    margin-top: 24px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.info-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.info-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-text {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Cost Breakdown Total Row */
.total-row {
    /*border-top: 2px solid var(--table-border-color) !important;*/
    border-bottom: none !important;
}

.total-row td {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* ============================================
   AUTH SCREENS
   ============================================ */

.auth-screen {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, rgb(0 0 0 / 0%) 0%, rgb(60 56 110 / 0%) 100%), url(/assets/images/auth.background.jpg) center / cover no-repeat;
    padding: 32px;
    position: relative;
}

.auth-container {
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
}

.auth-card {
    background: var(--background-body);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 40px;
    animation: authSlideIn 0.3s ease-out;
    overflow-y: auto;
    max-height: calc(100vh - 40px);
}

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

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo {
    width: 56px;
    height: 56px;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.auth-header h2 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 15px;
}

.auth-form {
    margin-bottom: 24px;
}

.auth-form .form-group {
    margin-bottom: 20px;
}

.auth-form label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
}

.auth-form .form-control {
    width: 100%;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--background-card);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.auth-form .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

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

.auth-form .form-text {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.auth-form .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row;
}

.auth-form .form-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

.auth-form .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.auth-form .form-check-label {
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
}

.auth-form .alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.auth-form .alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.auth-form .alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.auth-form .btn-block {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    position: relative;
    justify-content: center;
}

.auth-form .btn-block .btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.auth-form .btn-block.loading .btn-text {
    opacity: 0;
}

.auth-form .btn-block.loading .btn-spinner {
    display: block;
}

.auth-footer {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.auth-footer p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.auth-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-footer a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

/* Logout button in sidebar */
#logoutNavButton {
    color: #ef4444;
}

#logoutNavButton:hover {
    background: rgba(239, 68, 68, 0.1);
}

#logoutNavButton i {
    color: #ef4444;
}

/* Hide sidebar on auth screens */
.auth-screen.active ~ .sidebar,
body:has(.auth-screen.active) .sidebar {
    display: none;
}

/* Make main content full width on auth screens */
body:has(.auth-screen.active) .main-content {
    margin-left: 0;
    width: 100%;
    padding: 0;
}

/* Alternative approach using class on body */
body.auth-page .sidebar {
    display: none;
}

body.auth-page .main-content {
    margin-left: 0;
    width: 100%;
}

/* Stage page - hide sidebar with overlay */
body.stage-page .sidebar {
    pointer-events: none;
}

body.stage-page .sidebar::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1005;
    backdrop-filter: blur(4px);
}

/* Responsive stage overlay for mobile */
@media (max-width: 768px) {
    body.stage-page .sidebar::before {
        width: 60px;
    }
}

/* ============================================
   SETTINGS & ACCOUNT PAGES
   ============================================ */

.settings-layout {
    max-width: 800px;
    margin: 0 auto;
}

/* Tabs */
.tabs-container {
    margin: 0 auto;
}

.tabs-container .form-group {
    max-width: 600px;
}

.tabs-nav {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 24px;
    padding: 0 4px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.tab-btn i {
    width: 18px;
    height: 18px;
}

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

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tabs-content {
    position: relative;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.2s ease;
}

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

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

.settings-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden;
}

.settings-section-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}

.settings-section-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.settings-section-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.settings-section-body {
    padding: 24px;
}

.settings-section-body .form-group {
    margin-bottom: 20px;
}

.settings-section-body .form-group:last-child {
    margin-bottom: 0;
}

/* Toggle switches for settings */
.settings-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-toggle-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.settings-toggle-item:hover {
    background: var(--bg-tertiary);
}

.toggle-info {
    flex: 1;
}

.toggle-info label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    cursor: pointer;
}

.toggle-info small {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    margin: 0;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* Toggle Switch with Label */
.toggle-switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.toggle-switch-label input[type="checkbox"] {
    display: none;
}

.toggle-switch-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: var(--border-color);
    border-radius: 24px;
    transition: background-color 0.2s ease;
}

.toggle-switch-slider:before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.toggle-switch-label input:checked + .toggle-switch-slider {
    background-color: var(--primary-color);
}

.toggle-switch-label input:checked + .toggle-switch-slider:before {
    transform: translateX(20px);
}

.toggle-switch-text {
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Date Group Styles */
.date-group {
    display: block;
    margin-bottom: 32px;
    width: 100%;
}

.date-group:last-child {
    margin-bottom: 0;
}

.date-group-header {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

.date-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Compact mode for date groups */
.outputs-grid.compact .date-group-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Button loading state for account/settings forms */
.btn.loading .btn-text {
    opacity: 0;
}

.btn .btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ============================================
   ADMIN DASHBOARD
   ============================================ */

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.stat-icon i {
    width: 28px;
    height: 28px;
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Admin Filters */
.admin-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-filters .form-control {
    flex: 1;
    min-width: 200px;
}

/* Admin Table */
.admin-table-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table thead {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

.admin-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.admin-table tbody tr:last-child {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: var(--bg-secondary);
}

.admin-table td {
    padding: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1rem;
    border-top: 1px solid var(--background-switch-off);
}

.admin-table td.text-center {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 16px;
}

/* User Table Badges - Using same style as scenario badges */
.role-badge,
.status-badge {
    background: var(--background-badge);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}

.role-badge.admin {
    background: var(--background-badge);
    color: var(--text-secondary);
}

.role-badge.customer {
    background: var(--background-badge);
    color: var(--text-secondary);
}

.status-badge.active {
    background: var(--background-badge);
    color: var(--text-secondary);
}

.status-badge.inactive {
    background: var(--background-badge);
    color: var(--text-secondary);
}

/* User Actions */
.user-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.user-actions .btn {
    padding: 6px 12px;
    font-size: 13px;
}

/* Admin Pagination */
.admin-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.pagination-info {
    font-size: 14px;
    color: var(--text-secondary);
}

.pagination-controls {
    display: flex;
    align-items: center;
}

.pagination-controls button {
    padding: 8px;
}

#adminPageInfo {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Responsive Admin Dashboard */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-filters {
        flex-direction: column;
    }

    .admin-filters .form-control {
        width: 100%;
    }

    .admin-table-container {
        overflow-x: auto;
    }

    .admin-table {
        min-width: 800px;
    }

    .admin-pagination {
        flex-direction: column;
        gap: 16px;
    }
}

/* ============================================
   COMPONENTS TABLE
   ============================================ */

.components-table input[type="number"].form-control {
    width: 140px;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
    color: var(--text-primary);
}

.components-table input[type="number"].form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

.components-table select.form-control {
    width: 160px;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    background: var(--background-card);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
    color: var(--text-primary);
    cursor: pointer;
}

.components-table select.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

.components-table .component-margin {
    font-weight: 600;
    color: var(--success-color);
}

.components-table td {
    vertical-align: middle;
    padding: 12px 16px;
}

.component-key-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
    font-family: 'Monaco', 'Courier New', monospace;
}

/* Components screen module filter as button-styled dropdown */
#componentModuleFilter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Admin Users Table - User Cell Styling */
.user-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
}

.user-email {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.user-badges {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

/* Cost Logs - Admin-only and Customer-only elements */
.admin-only-column,
.admin-only-stat,
.admin-only-filter {
    display: none !important; /* Hidden by default, shown via JS for admins */
}

.customer-only-column {
    display: none !important; /* Hidden by default, shown via JS for customers */
}

/* When shown, display as table cell */
th.admin-only-column[style*="display:"],
td.admin-only-column[style*="display:"],
th.customer-only-column[style*="display:"],
td.customer-only-column[style*="display:"] {
    display: table-cell !important;
}

/* Cost Logs Table - Margin styling */
.margin-positive {
    color: #10b981;
    font-weight: 600;
}

.margin-negative {
    color: #ef4444;
    font-weight: 600;
}

/* Cost Logs Table - Module badges */
.module-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.module-badge i {
    width: 14px;
    height: 14px;
}

/* Module Badge Variants */
.module-badge.badge-ingest {
    background-color: #dcfce7;
    color: #166534;
}

.module-badge.badge-script {
    background-color: #fef3c7;
    color: #92400e;
}

.module-badge.badge-visuals {
    background-color: #fce7f3;
    color: #9f1239;
}

.module-badge.badge-voice {
    background-color: #dbeafe;
    color: #1e40af;
}

.module-badge.badge-captions {
    background-color: #e0e7ff;
    color: #3730a3;
}

.module-badge.badge-music {
    background-color: #f3e8ff;
    color: #6b21a8;
}

.module-badge.badge-branding {
    background-color: #fed7aa;
    color: #9a3412;
}

.module-badge.badge-assembly {
    background-color: #e5e7eb;
    color: #374151;
}

.module-badge.badge-assemble {
    background-color: #e5e7eb;
    color: #374151;
}

.module-badge.badge-unknown {
    background-color: #f3f4f6;
    color: #6b7280;
}


/* ==================== Cost Breakdown Modal ==================== */
.cost-breakdown-modal {
    max-width: 1350px;
    width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.cost-breakdown-modal .modal-body {
    overflow-y: auto;
    padding: 24px;
}

.cost-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--surface-secondary);
    border-radius: 8px;
}

.cost-summary-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cost-summary-item .cost-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.cost-summary-item .cost-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.cost-breakdown-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.cost-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}


.cost-breakdown-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    opacity: 0.6;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--table-border-color);
}

.cost-breakdown-table td {
    padding: 8px 16px;
    border-bottom: 1px solid var(--table-border-color);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: left !important;
}

/* ==================== Usage Screen (Unified Cost Breakdown) ==================== */
.usage-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.usage-summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.usage-summary-card .summary-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.usage-summary-card .summary-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

/* NEW Card Layout */
.usage-summary-cards-new {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

div#assetsScreen .usage-filters-bar,
div#assetsScreen .assets-container,
div#assetsScreen .usage-summary-cards-new {
    margin: 0 16px;
}

div#assetsScreen .usage-summary-card-new {
    min-height: unset;
}


.load-more-container {
    margin-bottom: 64px;
}

@media (max-width: 1400px) {
    .usage-summary-cards-new {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .usage-summary-cards-new {
        grid-template-columns: 1fr;
    }
}

.usage-summary-card-new {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100px;
}

.usage-summary-card-new .card-content-row {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.usage-summary-card-new .card-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: auto;
}

.usage-summary-card-new .card-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: auto;
    text-align: left;
}

.usage-summary-card-new .card-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    margin-bottom: 6px;
    font-weight: 500;
}

.usage-summary-card-new .credits-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(100, 116, 139, 0.3);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}

.usage-summary-card-new .credits-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.usage-summary-card .summary-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 500;
}

.usage-summary-card .summary-stats-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.usage-summary-card .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.usage-summary-card .stat-label-small {
    color: var(--text-secondary);
    font-weight: 500;
}

.usage-summary-card .stat-value-small {
    color: var(--text-primary);
    font-weight: 600;
}

/* Empty State */
.usage-empty-state.empty-state {
    padding: 80px 40px;
    margin: 40px 0;
}


.usage-filters-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.usage-filters-bar .filters-left,
.usage-filters-bar .filters-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.usage-table-container {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
}

.usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.usage-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.usage-table th {
    padding: 12px;
    opacity: 0.6;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--table-border-color);
    white-space: nowrap;
}

.usage-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--table-border-color);
    color: var(--text-primary);
}

.usage-table tbody tr:hover {
    background: var(--background-card);
}

.usage-table .text-right {
    text-align: left;
}

.usage-table .total-row {
    font-weight: 500;
    background: var(--bg-tertiary);
    border-top: 2px solid var(--border-color);
}

.usage-table .total-row td strong {
    font-weight: 700;
}

.usage-table .total-row td {
    padding: 14px 12px;
}

.usage-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;

}

.usage-pagination > div {
    width: 100%;
}

.usage-pagination .pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.usage-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.usage-pagination .pagination-controls span {
    font-size: 13px;
    color: var(--text-primary);
}

.usage-initiator {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.usage-initiator-primary {
    font-weight: 600;
    color: var(--text-primary);
}

.usage-initiator-secondary {
    font-size: 11px;
    color: var(--text-secondary);
}

.usage-user-tooltip {
    position: relative;
    cursor: help;
    color: var(--accent);
    font-weight: 600;
}

/* ==================== Cost Badge/Display ==================== */
.cost-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cost-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.cost-badge i {
    width: 14px;
    height: 14px;
}

/* Cost display in tables */
.cost-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cost-provider {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cost-customer {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ==================== Cost Logs Table ==================== */
.cost-logs-table th,
.cost-logs-table td {
    white-space: nowrap;
}

.cost-logs-table .text-center {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* Cost stat cards in cost logs tab */
.cost-stat-card {
    background: var(--surface-secondary);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* Margin color coding */
.margin-positive {
    color: #10b981;
    font-weight: 600;
}

.margin-negative {
    color: #ef4444;
    font-weight: 600;
}

/* ==================== Selector Component ==================== */

/* Selector Button - replaces traditional dropdown */
.selector-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 12px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 0.95rem;
}

.selector-button#customMusicSelector{
    padding:14px 12px;
}

.selector-button-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 260px;
}

.selector-button-preview {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.selector-button-label {
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* Music Track Duration Badge */
.music-track-duration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: var(--background-toggle-off);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
    min-width: 42px;
}

/* Music Track Preview Button */
.music-track-preview-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--background-toggle-off);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
}

.music-track-preview-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

.music-track-preview-btn i,
.music-track-preview-btn svg {
    width: 14px;
    height: 14px;
    color: inherit;
}

.music-track-preview-btn:hover i,
.music-track-preview-btn:hover svg {
    color: white;
}

/* Playing state for music preview button */
.music-track-preview-btn.playing {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    animation: audioPulse 1.5s ease-in-out infinite;
}

.music-track-preview-btn.playing i,
.music-track-preview-btn.playing svg {
    color: white;
}

.music-track-preview-btn.playing::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 10px;
    background: var(--primary-color);
    opacity: 0.3;
    animation: audioRipple 1.5s ease-out infinite;
    z-index: -1;
}

.selector-button-icon {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Selector Modal */
.selector-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10100;
    padding: 20px;
}

.selector-modal.active {
    display: flex;
}

.selector-modal-content {
    background: var(--dialog-background);
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

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

.selector-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
    margin-bottom: 8px;
}

.selector-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.selector-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.selector-modal-close svg {
    width: 24px;
    height: 24px;
}

.selector-modal-close:hover {
    color: var(--text-primary);
}

.selector-modal-body {
    padding: 8px 32px 32px 32px;
    overflow-y: auto;
}

.selector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Language selector uses 3 columns */
#selector-modal-language .selector-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Language selector cards - horizontal layout with flag + name */
#selector-modal-language .selector-card-preview {
    aspect-ratio: auto;
    min-height: auto;
    padding: 8px 16px;
    justify-content: flex-start;
    background: transparent;
}

#selector-modal-language .selector-card.selected .selector-card-preview {
    background: transparent;
}

#selector-modal-language .selector-card-title {
    display: none;
}

#videoStockProviderSelectorContainer .selector-button-preview,
#imageStockProviderSelectorContainer .selector-button-preview,
#aiImageModelSelectorContainer .selector-button-preview,
#aiVideoModelSelectorContainer .selector-button-preview {
    display: none !important;
}

#videoStockProviderSelectorContainer .selector-button-content,
#imageStockProviderSelectorContainer .selector-button-content,
#aiImageModelSelectorContainer .selector-button-content,
#aiVideoModelSelectorContainer .selector-button-content {
    min-height: 32px;
    padding-left: 8px;
}

/* AI Model & Stock Provider selector cards - background image with overlay text */
#selector-modal-aiImageModel .selector-grid,
#selector-modal-aiVideoModel .selector-grid,
#selector-modal-imageStockProvider .selector-grid,
#selector-modal-videoStockProvider .selector-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

#selector-modal-aiImageModel .selector-card,
#selector-modal-aiVideoModel .selector-card,
#selector-modal-imageStockProvider .selector-card,
#selector-modal-videoStockProvider .selector-card {
    min-height: 160px;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    background: none;
}

#selector-modal-aiImageModel .selector-card-preview > div,
#selector-modal-aiVideoModel .selector-card-preview > div,
#selector-modal-imageStockProvider .selector-card-preview > div,
#selector-modal-videoStockProvider .selector-card-preview > div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#selector-modal-aiImageModel .selector-card-preview,
#selector-modal-aiVideoModel .selector-card-preview,
#selector-modal-imageStockProvider .selector-card-preview,
#selector-modal-videoStockProvider .selector-card-preview {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    position: absolute;
    min-height: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Dark overlay for better text readability */
#selector-modal-aiImageModel .selector-card-preview::before,
#selector-modal-aiVideoModel .selector-card-preview::before,
#selector-modal-imageStockProvider .selector-card-preview::before,
#selector-modal-videoStockProvider .selector-card-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

#selector-modal-aiImageModel .selector-card-title,
#selector-modal-aiVideoModel .selector-card-title,
#selector-modal-imageStockProvider .selector-card-title,
#selector-modal-videoStockProvider .selector-card-title {
    padding: 12px 16px;
    text-align: left;
    background: none;
    border-top: none;
    font-size: 0.9rem;
    line-height: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

/* Stock providers only show name (no provider) */
#selector-modal-imageStockProvider .selector-card-title,
#selector-modal-videoStockProvider .selector-card-title {
    font-weight: 700;
    color: white;
}


/* Model name and provider styling */
.model-card-name {
    font-weight: 700;
    color: #FFF;
    font-size: 0.95rem;
}

.model-card-provider {
    font-weight: 400;
    color: #FFF;
    font-size: 0.8rem;
}

/* Model card badges */
.model-card-badge-left,
.model-card-badge-right {
    position: absolute;
    bottom: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    color: white;
    font-size: 0.7rem;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.model-card-badge-left {
    left: 8px;
    display: none;
}

.model-card-badge-right {
    right: 8px;
}

.model-card-badge-right .vrd_credit_icon {
    color: #fbbf24;
}

/* Selector Card */
.selector-card {
    background: var(--background-toggle-off);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.selector-card .selector-card-preview > div {
    transition: all 0.5s ease-in-out;
}

.selector-card:hover {
    transform: translateY(-2px);
}

.selector-card:hover .selector-card-preview > div {
    /*transform: scale(1.15);*/
}


.selector-card.selected {
    background: var(--background-toggle-on);
}

.selector-card-preview {
    width: 100%;
    min-height: 48px;
    background: var(--background-toggle-on);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 48px;
    overflow: hidden;
    position: relative;
}

#aiDebugModelSelector .selector-button-preview,
#selector-modal-aiDebugModel .selector-card-preview {
    display: none !important;
}

.selector-card.selected .selector-card-preview {
    background: var(--background-toggle-off);
}

.selector-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.selector-card-selected-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

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

    .selector-modal-content {
        max-width: 95%;
    }

    .selector-modal-body {
        padding: 20px;
    }
}

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

/* ===================================
   CONNECTED CHANNELS STYLES
   =================================== */

.channels-container {
    padding: 20px;
}

.channels-list {
    display: flex;
    flex-direction: column;
}


.channel-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin-right: 20px;
    object-fit: cover;
    border: none;
    flex-shrink: 0;
}

.channel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.channel-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.channel-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--background-badge);
}

/* YouTube publish modal */
.youtube-publish-modal .form-field {
    margin-bottom: 16px;
}

.youtube-publish-modal .form-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
}

.youtube-publish-modal .form-field input[type="text"],
.youtube-publish-modal .form-field textarea,
.youtube-publish-modal .form-field select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.youtube-publish-modal .form-field textarea {
    resize: vertical;
    font-family: inherit;
}

.youtube-publish-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.youtube-publish-modal .form-field input[type="checkbox"] {
    margin-right: 8px;
}

.channel-status-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.status-connected {
    background: #e8f5e9;
    color: #2e7d32;
}

body.dark-mode .status-connected {
    background: rgba(46, 125, 50, 0.2);
    color: #81c784;
}

.status-expired {
    background: #fff3e0;
    color: #f57c00;
}

body.dark-mode .status-expired {
    background: rgba(245, 124, 0, 0.2);
    color: #ffb74d;
}

.status-error {
    background: #ffebee;
    color: #c62828;
}

body.dark-mode .status-error {
    background: rgba(198, 40, 40, 0.2);
    color: #e57373;
}

.channel-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.channel-actions .btn {
    padding: 8px 16px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.channel-actions .btn svg {
    width: 16px;
    height: 16px;
}

.btn-warning {
    background: #ff9800;
    color: white;
    border: none;
}

.btn-warning:hover {
    background: #f57c00;
}

.btn-danger {
    background: #f44336;
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #d32f2f;
}

/* Platform Selection Modal */
.platform-selection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: var(--background-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-width: 160px;
}

.platform-btn:hover:not(.platform-disabled) {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.platform-btn:active:not(.platform-disabled) {
    transform: translateY(0);
}

.platform-btn.platform-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.platform-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--background-switch-off);
}

.platform-btn[data-platform="tiktok"]:hover .platform-icon {
    color: #fe2c55;
}

.platform-btn[data-platform="youtube"]:hover .platform-icon {
    color: #ff0000;
}

.platform-btn[data-platform="instagram"]:hover .platform-icon {
    color: #e4405f;
}

.platform-disabled .platform-icon {
    color: var(--text-secondary);
}

.platform-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: block;
}

.platform-description {
    display: none;
}

.platform-disabled .platform-description {
    /*font-size: 12px;*/
    /*color: var(--text-secondary);*/
    /*display: block;*/
}

/* Filter Select */
.filter-select {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-card);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:hover {
    border-color: var(--primary-color);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .channel-row {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .channel-thumbnail {
        margin-right: 0;
        margin-bottom: 12px;
    }

    .channel-info {
        align-items: center;
    }

    .channel-meta {
        justify-content: center;
    }

    .channel-actions {
        width: 100%;
        margin-top: 12px;
        justify-content: center;
    }

    .platform-selection {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   AI Debug Page Styles
   ============================================ */

.ai-debug-container {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 24px;
    max-width: 1400px;
}

.ai-debug-form-card .selector-button {
    padding: 16px 16px;
}

.ai-debug-form-card {
    background: var(--background-toggle-on);
    border-radius: 12px;
    padding: 24px;
}

.ai-debug-result-card {
    background: var(--background-card);
    border-radius: 12px;
    padding: 24px;
}

.ai-debug-form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.ai-debug-form-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.ai-debug-costs {
    display: flex;
    gap: 16px;
}

.ai-debug-costs .cost-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.ai-debug-costs .cost-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.ai-debug-costs .cost-value {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 700;
}

.ai-debug-result-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.btn-group-toggle {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-toggle {
    padding: 8px 16px;
    border: 2px solid var(--border-color);
    background: var(--background-body);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-toggle i {
    width: 16px;
    height: 16px;
}

.btn-toggle:hover {
    border-color: var(--primary-color);
    background: var(--background-card);
}

.btn-toggle.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.ai-debug-form-card .form-group {
    margin-bottom: 16px;
}

.ai-debug-form-card label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.ai-debug-form-card .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: var(--background-body);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.ai-debug-form-card .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

.ai-debug-form-card textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.ai-debug-form-card .form-text {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.ai-debug-form-card .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
}

.ai-debug-form-card .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.ai-debug-form-card .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.ai-debug-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.ai-debug-loading .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

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

.ai-debug-loading p {
    color: var(--text-secondary);
    font-size: 14px;
}

.ai-debug-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.ai-debug-empty i {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    opacity: 0.3;
}

.ai-debug-empty p {
    font-size: 14px;
}

.ai-debug-success {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.result-preview {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--background-body);
    border: 1px solid var(--border-color);
}

.result-preview img,
.result-preview video {
    width: 100%;
    height: auto;
    display: block;
}

.result-details {
    background: var(--background-body);
    border-radius: 8px;
    padding: 16px;
}

.result-details h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.result-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.result-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-detail-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.result-detail-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.result-detail-value.success {
    color: var(--success-color);
}

.result-detail-value.mock {
    color: var(--warning-color);
}

.ai-debug-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.ai-debug-error i {
    width: 48px;
    height: 48px;
    color: var(--danger-color);
    margin-bottom: 12px;
}

.ai-debug-error h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--danger-color);
    margin-bottom: 8px;
}

.ai-debug-error p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 500px;
}

/* Responsive */
@media (max-width: 1024px) {
    .ai-debug-container {
        grid-template-columns: 1fr;
    }

    .ai-debug-form-card {
        order: 1;
    }

    .ai-debug-result-card {
        order: 2;
    }
}

/* URL Validation Badges */
.input-with-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-badge input {
    flex: 1;
}

.url-validation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.url-validation-badge.loading {
    color: #6B7280;
}

.url-validation-badge.success {
    color: #10B981;
    background: #D1FAE5;
}

.url-validation-badge.error {
    color: #EF4444;
    background: #FEE2E2;
}

.url-validation-badge .spin {
    animation: spin 1s linear infinite;
    width: 16px;
    height: 16px;
}

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

/* RSS Preview Modal */
.rss-preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.rss-preview-modal.active {
    display: flex;
}

.rss-preview-content {
    background: var(--background-card);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

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

.rss-preview-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.rss-preview-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s;
}

.rss-preview-close:hover {
    background: var(--background-hover);
}

.rss-preview-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.rss-preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
}

.rss-preview-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.rss-stories-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rss-story-item {
    background: var(--background-badge);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 16px;
    cursor: pointer;
    align-items: center;
    transition: all 0.2s;
}

.rss-story-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rss-story-item.selected {
    border-color: var(--primary-color);
    background: rgba(79, 70, 229, 0.05);
}

.rss-story-item.dragging {
    opacity: 0.5;
}

.rss-story-drag-handle {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    cursor: grab;
}

.rss-story-drag-handle:active {
    cursor: grabbing;
}

.rss-story-checkbox {
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

.rss-story-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.rss-story-thumbnail {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--background-alt);
}

.rss-story-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rss-story-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rss-story-date {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.rss-story-content h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rss-story-excerpt {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rss-story-content p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rss-story-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.rss-story-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 12px;
}

.rss-story-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rss-story-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.5;
}

.rss-preview-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.rss-preview-actions-left {
    display: flex;
    gap: 12px;
}

.rss-preview-info-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.rss-preview-actions-right {
    display: flex;
    gap: 12px;
}

.rss-selection-progress {
    width: 100%;
    max-width: 300px;
    height: 6px;
    background: var(--background-alt);
    border-radius: 3px;
    overflow: hidden;
}

.rss-selection-progress-bar {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.rss-preview-info-center span {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.rss-preview-info {
    font-size: 14px;
    color: var(--text-secondary);
}

.rss-preview-actions {
    display: flex;
    gap: 12px;
}

/* Post to Social Media Modal */
.post-to-social-modal {
    max-width: 600px;
    width: 90%;
}

.post-to-social-modal .modal-overlay.show {
    display: flex !important;
}

.channel-selection-header {
    margin-bottom: 20px;
}

.channel-selection-header p {
    color: var(--text-secondary);
    margin: 0;
}

.channel-selection-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.channel-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.channel-option:hover {
    border-color: var(--primary-color);
    background: var(--background-hover);
}

.channel-option-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-secondary);
}

.channel-option-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-option-thumbnail i {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
}

.channel-option-info {
    flex: 1;
}

.channel-option-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.channel-option-meta {
    display: flex;
    gap: 8px;
}

.channel-option-select input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.selected-channel-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--background-secondary);
    border-radius: 8px;
    margin-bottom: 24px;
}

.selected-channel-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selected-channel-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.selected-channel-info i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-card);
    border-radius: 50%;
    color: var(--text-secondary);
}

.selected-channel-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.selected-channel-platform {
    font-size: 12px;
    color: var(--text-secondary);
}

#postToSocialModal.show {
    display: flex !important;
}

#postToSocialModal .modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.form-hint {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.spinning {
    animation: spin 1s linear infinite;
}

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

/* Top-Up Modal Styles */
#topUpCreditsModal .modal-content {
    background: var(--dialog-background);
    color: var(--text-primary);
}

#topUpCreditsModal .modal-body {
    color: var(--text-primary);
}

#topUpCreditsModal .modal-body p {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

#topUpCreditsModal .modal-header {
    border-bottom: 1px solid var(--border-color);
}

#topUpCreditsModal .modal-header h2 {
    color: var(--text-primary);
}

#topUpCreditsModal .btn-close {
    color: var(--text-primary);
    background: transparent;
}

#topUpCreditsModal .btn-close:hover {
    background: var(--background-hover);
}

#topUpCreditsModal .modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.credit-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.credit-option-btn svg {
    color: var(--primary-color);
}

.credit-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-card);
    cursor: pointer;
    transition: all 0.2s ease;
}

.credit-option-btn:hover {
    border-color: var(--primary-color);
    background: var(--background-toggle-on);
    transform: translateY(-2px);
}

.credit-option-btn.selected {
    border-color: var(--primary-color);
    background: var(--background-toggle-on);
}

.credit-option-btn i {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
}

.credit-option-btn .credit-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.credit-option-btn .credit-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.top-up-summary {
    background: var(--background-hover);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.top-up-summary p {
    margin: 8px 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.top-up-summary strong {
    color: var(--success-color);
    font-size: 1.125rem;
}

#topUpCreditsModal .form-group label {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

#topUpReason {
    background: var(--background-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 10px 12px;
    border-radius: 6px;
    width: 100%;
    font-size: 0.9375rem;
}

#topUpReason:focus {
    border-color: var(--primary-color);
    outline: none;
}

#topUpReason::placeholder {
    color: var(--text-secondary);
}

/* ===== Channel Configuration Selector ===== */
.channel-search-box {
    position: relative;
    margin-bottom: 16px;
}

.channel-search-box svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    width: 18px;
    height: 18px;
}

.channel-search-box input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: border-color 0.2s ease;
}

.channel-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.channel-search-box input::placeholder {
    color: var(--text-secondary);
}

.channel-config-list {
    max-height: 400px;
    overflow-y: auto;
}

.channel-config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px;
    transition: background-color 0.2s ease;
    margin-bottom: 8px;
    background: var(--background-card);
    border-radius: var(--border-radius);
}

.channel-config-item:last-child {
    border-bottom: none;
}

.channel-config-item .channel-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    flex-direction: row;
}

.channel-config-item .channel-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--border-color);
    margin-right: 0;
}

.channel-config-item .channel-thumbnail-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--background-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
}

.channel-config-item .channel-thumbnail-placeholder i {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.channel-config-item .channel-details {
    flex: 1;
    line-height: 1.2;
}

.channel-config-item .channel-title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9375rem;
    margin-bottom: 2px;
}

.channel-config-item .channel-platform {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.channel-posting-mode {
    flex-shrink: 0;
}

.channel-posting-mode .toggle-button-group {
    display: flex;
    gap: 8px;
    overflow: hidden;
    border-radius: var(--border-radius);
    padding: 4px;
    background: var(--background-toggle-off);
}

.channel-posting-mode .toggle-button-group .btn {
    padding: 6px 12px;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    border: none;
    background: none;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: calc(var(--border-radius) - 2px);
}

.channel-posting-mode .toggle-button-group .btn i {
    width: 14px;
    height: 14px;
}

.channel-posting-mode .toggle-button-group .btn:hover:not(.active) {
    color: var(--text-primary);
}

.channel-posting-mode .toggle-button-group .btn.active {
    background: var(--background-toggle-on);
    color: var(--text-primary);
}

.loading-channels,
.no-channels-message,
.no-results-message,
.error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.loading-channels i,
.no-channels-message i,
.no-results-message i,
.error-message i {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.loading-channels i {
    animation: spin 1s linear infinite;
}

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

.no-channels-message p,
.no-results-message p,
.error-message p {
    font-size: 0.9375rem;
    margin: 0;
}

.no-channels-message a {
    color: var(--primary-color);
    text-decoration: none;
}

.no-channels-message a:hover {
    text-decoration: underline;
}

.error-message {
    color: var(--error-color);
}

.error-message i {
    color: var(--error-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .channel-config-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .channel-posting-mode {
        width: 100%;
    }

    .channel-posting-mode .toggle-button-group {
        width: 100%;
    }

    .channel-posting-mode .toggle-button-group .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ===== Channel Post Count Badges ===== */
.channel-posts-summary {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-right: 16px;
}

.post-counts-loading,
.post-counts-empty {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
}

.post-count-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.post-count-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.post-count-badge i {
    width: 14px;
    height: 14px;
}

.post-count-badge.badge-pending {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.post-count-badge.badge-pending:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
}

.post-count-badge.badge-scheduled {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

.post-count-badge.badge-scheduled:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

.post-count-badge.badge-posted {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.post-count-badge.badge-posted:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
}

/* Responsive adjustments for post count badges */
@media (max-width: 1024px) {
    .channel-posts-summary {
        margin-right: 8px;
    }

    .post-count-badge {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .post-count-badge span {
        display: none;
    }

    .post-count-badge i {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 768px) {
    .channel-row {
        flex-wrap: wrap;
    }

    .channel-posts-summary {
        width: 100%;
        margin: 8px 0;
        order: 2;
    }

    .channel-actions {
        order: 3;
    }

    .post-count-badges {
        width: 100%;
        justify-content: flex-start;
    }

    .post-count-badge span {
        display: inline;
    }
}

/* =====================================================
   Channel Posts Panel Styles
   ===================================================== */

/* Panel Tabs */
.panel-tabs {
    display: flex;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-card);
}

.panel-tabs .tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.panel-tabs .tab-btn:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.panel-tabs .tab-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.panel-tabs .tab-btn i {
    width: 16px;
    height: 16px;
}

/* Posts List Container */
#postsListContainer {
    padding: 16px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Post Item */
.post-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.post-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Thumbnail Wrapper with Aspect Ratios */
.post-thumbnail-wrapper {
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hover-bg);
    cursor: pointer;
    transition: all 0.2s;
}

.post-thumbnail-wrapper:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

.post-thumbnail-wrapper::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.post-thumbnail-wrapper:hover::after {
    opacity: 0.9;
}

/* Aspect Ratio Classes */
.post-thumbnail-wrapper.aspect-16-9 {
    width: 120px;
    height: 68px;
}

.post-thumbnail-wrapper.aspect-9-16 {
    width: 68px;
    height: 120px;
}

.post-thumbnail-wrapper.aspect-1-1 {
    width: 96px;
    height: 96px;
}

.post-thumbnail-wrapper.aspect-4-3 {
    width: 120px;
    height: 90px;
}

.post-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.post-info {
    flex: 1;
    min-width: 0;
}

.post-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Post Badges */
.post-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.post-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
}

.post-badge i {
    width: 12px;
    height: 12px;
}

.badge-lang {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(59, 130, 246);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-format {
    background: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-duration {
    background: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-scenario {
    background: rgba(139, 92, 246, 0.1);
    color: rgb(139, 92, 246);
    border: 1px solid rgba(139, 92, 246, 0.2);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.post-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
}

.post-actions .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
}

.post-scheduled-info,
.post-success-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 12px;
    background: var(--hover-bg);
    border-radius: 6px;
}

.post-success-info {
    color: var(--success-color);
    background: rgba(34, 197, 94, 0.1);
}

/* Empty/Loading/Error States */
.loading-state,
.empty-state,
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.loading-state i,
.empty-state i,
.error-state i {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.loading-state i.animate-spin {
    animation: spin 1s linear infinite;
}

.error-state p {
    margin: 0;
    font-size: 14px;
}

.error-state .btn {
    margin-top: 16px;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .post-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-thumbnail {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }

    .post-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .panel-tabs {
        flex-direction: column;
    }

    .panel-tabs .tab-btn {
        justify-content: flex-start;
    }
}

/* =====================================================
   Info Box (for modals and forms)
   ===================================================== */

.info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    margin-top: 16px;
}

.info-box i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgb(59, 130, 246);
    margin-top: 2px;
}

.info-content {
    flex: 1;
}

.info-content strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.info-content p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   CREATION DETAILS MODAL
   ============================================ */

.creation-details-modal {
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.creation-details-modal .modal-header {
    border-bottom: 1px solid var(--border-color);
}

.creation-details-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Modal Tabs */
.modal-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    justify-content: center;
    border-bottom: 1px solid var(--table-border-color);
}

.modal-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.modal-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.modal-tab i {
    width: 18px;
    height: 18px;
}

/* Tab Content */
.tab-content {
    padding: 24px;
}

/* Details Grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
}

.detail-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
}

.detail-value i {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.detail-value code {
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
}

/* Cost Summary Row */
.cost-summary-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.cost-summary-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cost-summary-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cost-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cost-summary-value i {
    width: 20px;
    height: 20px;
}

/* Creation Details Usage Table Wrapper */
.creation-details-modal .usage-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.creation-details-modal .usage-table {
    margin: 0;
}

.creation-details-modal .usage-table th,
.creation-details-modal .usage-table td {
    font-size: 13px;
}

/* Usage Breakdown Table */
.usage-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.usage-breakdown-table thead {
    background: var(--bg-secondary);
}

.usage-breakdown-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--table-border-color);
    opacity: 0.6;
}

.usage-breakdown-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--table-border-color);
    color: var(--text-primary);
}

.usage-breakdown-table tbody tr:hover {
    background: var(--background-card);
}

.usage-breakdown-table .total-row {
    font-weight: 700;
    background: var(--bg-tertiary);
    border-top: 2px solid var(--border-color);
}

.usage-breakdown-table .total-row td {
    padding: 14px 12px;
}

.usage-breakdown-table tr.not-run {
    /*opacity: 0.6;*/
}

/* Loading Spinner in Tab Content */
.tab-content .loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.tab-content .loading-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .creation-details-modal {
        width: 95%;
        max-height: 95vh;
    }

    .details-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cost-summary-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .modal-tabs {
        gap: 2px;
        padding: 0 8px;
    }

    .modal-tab {
        padding: 10px 12px;
        font-size: 13px;
    }

    .modal-tab i {
        width: 16px;
        height: 16px;
    }

    .tab-content {
        padding: 16px;
    }

    .creation-details-modal .usage-table-wrapper {
        overflow-x: scroll;
    }

    .creation-details-modal .usage-table {
        min-width: 600px;
    }
}

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

.reference-images-uploader {
    margin-bottom: 16px;
}

.reference-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 8px;
}

.reference-image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--background-card);
    border: 2px solid var(--border-color);
    transition: all 0.2s ease;
    cursor: pointer;
}

.reference-image-item:hover {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.reference-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reference-image-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.reference-image-item.reference-image-upload svg {
    width: 24px;
    height: 24px;
}

.reference-image-upload:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.reference-image-upload i {
    width: 32px;
    height: 32px;
}

.reference-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--background-body);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0;
}

.reference-image-item:hover .reference-image-remove {
    opacity: 1;
}

.reference-image-remove:hover {
    background: var(--background-card);
}

.reference-image-remove svg {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
}

.form-help-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Image Preview Modal */
.image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.image-preview-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}

.image-preview-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}

.image-preview-close {
    position: absolute;
    top: 0px;
    right: -72px;
    background: none;
    border: none;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}


.image-preview-close svg {
    width: 32px;
    height: 32px;
}

/* ==================== GridSelector Component ==================== */

/* Modal Overlay */
.grid-selector-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.grid-selector-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal */
.grid-selector-modal {
    background: var(--background-body);
    border-radius: 16px;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

/* Header */
.grid-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
}

.grid-selector-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.grid-selector-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Inline Search in Header */
.grid-selector-search-inline {
    position: relative;
    display: flex;
    align-items: center;
}

.grid-selector-search-inline input {
    width: 280px;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--background-card);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.grid-selector-search-inline input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--background-card);
}

.grid-selector-search-inline i,
.grid-selector-search-inline svg {
    position: absolute;
    left: 0.75rem;
    color: var(--text-secondary);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.grid-selector-close {
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.grid-selector-close:hover {
    color: var(--text-primary);
}

.grid-selector-close i,
.grid-selector-close svg {
    width: 24px;
    height: 24px;
}

/* Filter Chips */
.grid-selector-filters {
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border-color);
}

/* Tabs and Chips Layout for Tracks */
.filter-tabs-and-chips {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.filter-tab {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-tab:hover {
    background: var(--hover-background);
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--primary-color);
    color: white;
}

.filter-tab i {
    width: 14px;
    height: 14px;
}

/* Small Genre Chips */
.filter-chips-container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: 32px;
}

.filter-chips-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-chip-small {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: none;
}

.filter-chip-small:hover {
    background: var(--background-btn-secondary);
    color: var(--text-primary);
}

.filter-chip-small.active {
    background: var(--primary-color);
    color: #FFFFFF;
}

/* Stacked filters for voices (multiple rows) */
.filter-stacked {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
}

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

.filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 60px;
}

.filter-chip {
    padding: 0.4rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-chip:hover {
    background: var(--hover-background);
    color: var(--text-primary);
}

.filter-chip.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Grid Container */
.grid-selector-container {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.grid-selector-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 32px;
}


/* Voice cards: 7 columns */
.grid-selector-grid.voice-grid {
    grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1440px) {
    .grid-selector-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-selector-grid.voice-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

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

    .grid-selector-grid.voice-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

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

    .grid-selector-grid.voice-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

    .grid-selector-grid.voice-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .grid-selector-grid.voice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Empty State */
.grid-selector-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.grid-selector-empty i {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.grid-selector-empty p {
    font-size: 1.1rem;
    margin: 0;
}

/* Grid Card */
.grid-card {
    overflow: hidden;
    border: 2px solid transparent;
}

.track-card {
    cursor: pointer;
}

/* Track card play button overlay (bottom left) */
.track-card .grid-card-image .image-play-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 12px;
    border-radius: 14px;
    background: var(--cards-overlay-button-background);
    border: none;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.track-card .grid-card-image:hover .image-play-overlay {
    opacity: 1;
}

.track-card .grid-card-image .image-play-overlay:hover {
    background: var(--cards-overlay-button-background-hover);
    color: white;
    transform: scale(1.1);
}

.track-card .grid-card-image .image-play-overlay i,
.track-card .grid-card-image .image-play-overlay svg {
    width: 16px;
    height: 16px;
}

/* Track card favorite button (top right) */
.track-card-favorite {
    position: absolute;
    bottom: 12px;
    left: 8px;
    padding: 6px;
    border-radius: 8px;
    background: var(--cards-overlay-button-background);
    border: none;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.track-card-favorite:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--primary-color);
    transform: scale(1.1);
}

.track-card-favorite.active {
    background: var(--primary-color);
    color: white;
}

.track-card-favorite.active:hover {
    background: var(--primary-color-dark);
}

.track-card-favorite i,
.track-card-favorite svg {
    width: 16px;
    height: 16px;
}

/* Track duration badge (top left) */
.track-duration-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--cards-overlay-button-background);
    color: #FFF;
    font-size: 0.75rem;
    font-weight: 400;
    pointer-events: none;
    z-index: 1;
}

/* Card Image */
.grid-card-image {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--background-badge);
    border-radius: 16px;
    transition: all 0.3s ease;
}

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


.track-card .grid-card-image:hover img {
    transform: scale(1.15);
}

/* Card Content */
.grid-card-content {
    padding: 8px;
}

.grid-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.grid-card-flag {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Track Card - New subtitle layout */
.track-card .grid-card-content {
    padding: 0.6rem 0.75rem;
}

.grid-card-subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.subtitle-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.subtitle-play {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.subtitle-play:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.subtitle-play i {
    width: 12px;
    height: 12px;
}

.subtitle-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subtitle-favorite {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.subtitle-favorite:hover {
    background: var(--hover-background);
    color: #ef4444;
}

.subtitle-favorite.active {
    color: #ef4444;
}

.subtitle-favorite.active svg {
    fill: #ef4444;
}

.subtitle-favorite svg {
    width: 14px;
    height: 14px;
}

/* Overlay Actions (for track cards) */
.overlay-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.overlay-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.overlay-btn i {
    width: 18px;
    height: 18px;
}

.overlay-btn-play:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

.overlay-btn-use {
    background: var(--primary-color);
    color: white;
}

.overlay-btn-use:hover {
    background: var(--primary-color-dark);
    transform: scale(1.05);
}

/* Voice Selector - Filter Layout (single line) */
.voice-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.voice-filters .filter-tabs {
    flex-shrink: 0;
}

.voice-filter-rows {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: 32px; /* Same separation as track chips */
    align-items: center;
}

/* Voice Filter Dropdowns */
.voice-filter-dropdowns {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
    align-items: center;
}

.voice-filter-dropdown-wrapper {
    position: relative;
}

.voice-filter-dropdown {
    appearance: none;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 2.25rem 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 16px;
}

.voice-filter-dropdown:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

/* Voice Card - 1:1 aspect ratio images with overlay play button */
.voice-card {
    cursor: pointer;
}

.voice-card .grid-card-image {
    aspect-ratio: 1 / 1; /* Square images for voices */
    position: relative;
}


.voice-card .grid-card-image:hover img {
    transform: scale(1.15);
}

/* Voice card play button overlay (bottom right) */
.voice-card .grid-card-image .image-play-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 12px;
    border-radius: 14px;
    background: var(--cards-overlay-button-background);
    border: none;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.voice-card .grid-card-image:hover .image-play-overlay {
    opacity: 1;
}

.voice-card .grid-card-image .image-play-overlay:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.voice-card .grid-card-image .image-play-overlay i,
.voice-card .grid-card-image .image-play-overlay svg {
    width: 16px;
    height: 16px;
}

/* Audio playing animation */
.voice-card .grid-card-image .image-play-overlay.playing {
    background: var(--primary-color);
    animation: audioPulse 1.5s ease-in-out infinite;
}

.voice-card .grid-card-image .image-play-overlay.playing::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    background: var(--primary-color);
    opacity: 0.3;
    animation: audioRipple 1.5s ease-out infinite;
}

.voice-card .grid-card-image .image-play-overlay.playing::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 22px;
    background: var(--primary-color);
    opacity: 0.15;
    animation: audioRipple 1.5s ease-out 0.3s infinite;
}

@keyframes audioPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes audioRipple {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Voice card favorite button (bottom right, above flag) */
.voice-card-favorite {
    position: absolute;
    bottom: 12px;
    left: 8px;
    padding: 6px;
    border-radius: 8px;
    background: var(--cards-overlay-button-background);
    border: none;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.voice-card-favorite:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--primary-color);
    transform: scale(1.1);
}

.voice-card-favorite.active {
    background: var(--primary-color);
    color: white;
}

.voice-card-favorite.active:hover {
    background: var(--primary-color-dark);
}

/* Style and Effect Cards */
.style-card,
.effect-card {
    cursor: pointer;
}

.style-card .grid-card-image,
.effect-card .grid-card-image {
    aspect-ratio: 1 / 1;
    position: relative;
}

.style-card .grid-card-image:hover img,
.effect-card .grid-card-image:hover img {
    transform: scale(1.1);
}

/* Random icon placeholder for style/effect */
.random-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-badge);
}

.random-icon-placeholder i,
.random-icon-placeholder svg {
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
}

/* Style and Effect card favorite button (bottom left) */
.style-card-favorite,
.effect-card-favorite {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 6px;
    border-radius: 8px;
    background: var(--cards-overlay-button-background);
    border: none;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.style-card-favorite:hover,
.effect-card-favorite:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--primary-color);
    transform: scale(1.1);
}

.style-card-favorite.active,
.effect-card-favorite.active {
    background: var(--primary-color);
    color: white;
}

.style-card-favorite.active:hover,
.effect-card-favorite.active:hover {
    background: var(--primary-color-dark);
}

.style-card-favorite i,
.style-card-favorite svg,
.effect-card-favorite i,
.effect-card-favorite svg {
    width: 16px;
    height: 16px;
}

/* Grid Selector Tooltip */
.grid-selector-tooltip {
    position: absolute;
    z-index: 10000;
    max-width: 320px;
    pointer-events: none;
}

.grid-selector-tooltip .tooltip-content {
    position: initial;
    background: var(--background-badge);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.voice-card-favorite i,
.voice-card-favorite svg {
    width: 16px;
    height: 16px;
}

/* Voice card language flag (bottom right corner) */
.voice-card-flag {
    position: absolute;
    left: 12px;
    top: 12px;
    font-size: 1.5rem;
    width: 24px;
    height: 18px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1;
}

.voice-card .grid-card-content {
    padding: 0.6rem 0.75rem;
}

/* Old voice card styles (deprecated, kept for reference) */
.grid-card-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.grid-meta-duration,
.grid-meta-platform {
    display: inline-block;
}

.grid-card-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.grid-tag {
    padding: 0.25rem 0.6rem;
    background: var(--background-tertiary);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Card Actions (for voice cards) */
.grid-card-actions {
    display: flex;
    gap: 0.5rem;
}

.grid-btn {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.grid-btn i {
    width: 14px;
    height: 14px;
}

.grid-btn-play:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.grid-btn-play.playing {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.grid-btn-use {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.grid-btn-use:hover {
    opacity: 0.9;
}

.grid-btn-favorite {
    flex: 0;
    width: 40px;
}

.grid-btn-favorite:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.grid-btn-favorite.active {
    color: #ef4444;
    border-color: #ef4444;
}

.grid-btn-favorite.active i {
    fill: #ef4444;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .grid-selector-modal {
        width: 95%;
        max-height: 95vh;
    }

    .grid-selector-header {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .grid-selector-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .grid-selector-search-inline input {
        width: 100%;
        flex: 1;
    }

    .grid-selector-title {
        font-size: 1.25rem;
    }

    .grid-selector-filters {
        padding: 0.75rem 1rem;
    }

    .filter-tabs-and-chips {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .filter-tabs {
        width: 100%;
    }

    .filter-chips-container {
        width: 100%;
        margin-left: 0;
    }

    .filter-label {
        min-width: 50px;
        font-size: 0.8rem;
    }

    .grid-selector-container {
        padding: 1rem;
    }

    .grid-card-content {
        padding: 0.75rem;
    }

    .grid-card-actions {
        flex-direction: column;
    }

    .grid-btn {
        width: 100%;
    }

    .grid-btn-favorite {
        width: 100%;
    }
}

/* ==================== GridSelector Trigger Button ==================== */

.grid-selector-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 0.95rem;
}


/* Selector Preview */
.selector-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.selector-preview-img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.selector-preview-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.selector-preview-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selector-preview-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selector-placeholder {
    color: var(--text-secondary);
    font-style: italic;
}

/* ============================================
   VIDEO MASONRY GRID
   ============================================ */

/* Masonry Grid Container */
.video-masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    /*padding: 32px 0;*/
}

/* Responsive grid columns */
@media (max-width: 600px) {
    .video-masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .video-masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (min-width: 901px) and (max-width: 1200px) {
    .video-masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (min-width: 1201px) and (max-width: 1600px) {
    .video-masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (min-width: 1601px) {
    .video-masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

/* Video Masonry Item */
.video-masonry-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--surface-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 100%;
    aspect-ratio: 1 / 1;
}

.video-masonry-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Video Thumbnail (full card background) */
.video-masonry-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Video Title (absolute positioned at top) */
.video-card-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: white;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Language Flag (absolute positioned bottom left) */
.video-lang-flag {
    position: absolute;
    height: 15px;
    border-radius: 6px;
    bottom: 15px;
    left: 10px;
    font-size: 1.25rem;
    line-height: 1;
    z-index: 2;
}

/* Format Tag (absolute positioned bottom left, next to flag) */
.video-format-tag {
    position: absolute;
    bottom: 10px;
    left: 42px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    z-index: 2;
}

/* Duration (absolute positioned bottom right) */
.video-duration-text {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    z-index: 2;
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state i,
.empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* ============================================
   VIDEO PLAYER MODAL (60/40 SPLIT)
   ============================================ */

.video-player-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.video-player-modal.visible {
    display: flex;
}

.video-player-container {
    display: flex;
    flex-direction: row;
    width: 90%;
    max-width: 1400px;
    height: 80vh;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

/* Video Player Area (60%) */
.video-player-area {
    flex: 0 0 60%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
}

/* Aspect Ratio Classes on Container */
.video-player-container.aspect-16-9 .video-player-area {

}

.video-player-container.aspect-9-16 .video-player-area {

}

.video-player-container.aspect-1-1 .video-player-area {

}

.video-player-area video {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Maintain aspect ratio, no cropping */
    pointer-events: auto;
}

/* Plyr player in modal */
.video-player-area .plyr {
    width: 100%;
    height: 100%;
}

.video-player-area .plyr__video-wrapper {
    background: #000;
}

/* Portrait video (9:16) control optimizations */
/* Show play button overlay for portrait videos */
.video-player-container.aspect-9-16 .plyr__control--overlaid {
    display: flex !important;
}

/* Hide volume slider for portrait videos, show only icon */
.video-player-container.aspect-9-16 .plyr__volume input[type="range"] {
    display: none !important;
}

/* Hide current time and duration for portrait videos */
.video-player-container.aspect-9-16 .plyr__time {
    display: none !important;
}

/* Ensure no title overlay appears in modal */
.video-player-modal .video-title-overlay {
    display: none !important;
}

/* Prevent any hover effects on video player */
.video-player-area:hover::after {
    display: none !important;
}

.video-player-area video:hover {
    cursor: default;
}

/* Video Metadata Area (40%) */
.video-metadata-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: transparent;
    min-width: 0;
}

/* External Close Button */
.modal-close-btn-external {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
    z-index: 10001;
    backdrop-filter: blur(10px);
}

.modal-close-btn-external:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.modal-close-btn-external i,
.modal-close-btn-external svg {
    width: 24px;
    height: 24px;
}

/* Modal Content */
.video-player-modal .modal-content {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: transparent;
}

.video-player-modal .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Modal Badges */
.video-player-modal .modal-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1rem 1.5rem 0;
    background: transparent;
}

.video-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: var(--surface-color);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Status-specific badge colors */
.video-modal-badge.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.video-modal-badge.status-posted {
    background: #d1fae5;
    color: #065f46;
}

.video-modal-badge.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.video-modal-badge.status-completed {
    background: #dbeafe;
    color: #1e40af;
}

/* Modal Meta */
.video-player-modal .modal-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0 1.5rem 1rem;
    background: transparent;
}

.video-player-modal .modal-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.video-player-modal .modal-meta-item i,
.video-player-modal .modal-meta-item svg {
    width: 14px;
    height: 14px;
}

/* Modal Actions */
.video-player-modal .modal-actions {
    padding: 1.5rem;
    border-top: none;
    background: transparent;
    display: flex;
    gap: 0.75rem;
}

.modal-action-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

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

.modal-action-btn.primary {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.modal-action-btn.primary:hover {
    background: var(--primary-hover);
}

.modal-action-btn i,
.modal-action-btn svg {
    width: 18px;
    height: 18px;
}

/* Video Player Modal Tabs */
.video-player-modal .modal-tabs {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 0 1.5rem;
}

.video-player-modal .tab-content {
    padding: 0;
    min-height: 200px;
    max-height:380px;
}

.video-player-modal .tab-pane {
    display: none;
}

.video-player-modal .tab-pane.active {
    display: block;
}

.video-player-modal .tab-placeholder {
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem 0;
    text-align: center;
}

.video-player-modal .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.video-player-modal .detail-row:last-child {
    border-bottom: none;
}

.video-player-modal .detail-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.video-player-modal .detail-value {
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* Video Info Section */
.video-info-section {
    padding: 16px;
}

.video-info-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    line-height: 1.4;
    display: block;
}

.video-info-description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.video-info-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hashtag-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--bg-tertiary);
    color: var(--primary-color);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.video-info-channels {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.connected-channels-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-color);
    border-radius: 6px;
    font-size: 0.875rem;
    width: fit-content;
}

.channel-badge i,
.channel-badge svg {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

.no-data {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-style: italic;
}

/* Scenario Section Styling */
.scenario-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

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

.scenario-section h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tab Content Wrapper */
.modal-tab-content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
}

/* 3-Column Grid for Details */
.details-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.details-grid-3col .detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.details-grid-3col .detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.details-grid-3col .detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .details-grid-3col {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .video-player-container {
        flex-direction: column;
        height: auto;
        max-height: 90vh;
    }

    .video-player-area {
        flex: 0 0 auto;
        min-height: 50vh;
    }

    .video-metadata-area {
        flex: 1 1 auto;
    }
}

/* ========================================
   IMPORT PAGE STYLES
   ======================================== */

.import-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.import-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

.import-input-section,
.import-preview-section {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

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

.section-header h2 {
    margin: 0;
    font-size: 1.4em;
    color: #333;
}

/* JSON Input */
.json-input {
    width: 100%;
    min-height: 500px;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    background: #f9f9f9;
}

.json-input:focus {
    outline: none;
    border-color: #007bff;
    background: white;
}

.import-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* Validation Results */
.validation-results {
    margin-bottom: 25px;
}

.validation-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-weight: 500;
}

.validation-status.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.validation-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.validation-status i {
    width: 20px;
    height: 20px;
}

.validation-errors,
.validation-warnings {
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.validation-errors {
    background: #fff3cd;
    border: 1px solid #ffc107;
}

.validation-warnings {
    background: #fff3cd;
    border: 1px solid #ffc107;
}

.validation-errors h4,
.validation-warnings h4 {
    margin: 0 0 10px 0;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.validation-errors ul,
.validation-warnings ul {
    margin: 0;
    padding-left: 20px;
}

.validation-errors li,
.validation-warnings li {
    margin-bottom: 5px;
    color: #856404;
}

/* Stats Grid */
.validation-stats {
    background: #e7f3ff;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #b3d7ff;
}

.validation-stats h4 {
    margin: 0 0 12px 0;
    font-size: 0.95em;
    color: #0056b3;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
}

.stat-label {
    font-size: 0.9em;
    color: #666;
}

.stat-value {
    font-weight: 600;
    color: #007bff;
}

/* Scenario Preview */
.scenario-preview {
    margin-top: 20px;
}

.scenario-preview h3 {
    margin-top: 0;
    font-size: 1.2em;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.preview-details {
    margin-bottom: 20px;
}

.preview-item {
    padding: 10px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.95em;
}

.preview-item strong {
    color: #555;
    margin-right: 8px;
}

.scenes-preview {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.scenes-preview h4 {
    margin-top: 0;
    font-size: 1em;
    color: #666;
}

.scene-preview-item {
    background: #f9f9f9;
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 6px;
}


.scene-narration {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #333;
}

.scene-visual {
    font-size: 0.9em;
    color: #666;
}

.scene-more {
    text-align: center;
    padding: 10px;
    color: #999;
    font-style: italic;
}

/* Prompt Preview */
.prompt-preview {
    margin-top: 20px;
}

.prompt-preview h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1em;
    color: #555;
}

.prompt-text {
    padding: 15px;
    background: #f8f9fa;
    border-left: 4px solid #007bff;
    border-radius: 4px;
    line-height: 1.6;
    color: #333;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Configuration Section */
.config-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.config-section h4 {
    margin-top: 0;
    font-size: 1em;
    color: #666;
    margin-bottom: 15px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Import Final Actions */
.import-final-actions {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
    text-align: center;
}

.import-final-actions .btn-primary {
    min-width: 200px;
    padding: 12px 30px;
    font-size: 1.05em;
}

/* Help Section */
.import-help {
    margin-top: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
}

.import-help details {
    padding: 0;
}

.import-help summary {
    padding: 20px;
    cursor: pointer;
    background: #e9ecef;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.import-help summary:hover {
    background: #dee2e6;
}

.import-help summary i {
    width: 20px;
    height: 20px;
}

.help-content {
    padding: 25px;
}

.help-content h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
}

.help-content h4:first-child {
    margin-top: 0;
}

.help-content ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.help-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.help-content a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

.help-content a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
    .import-layout {
        grid-template-columns: 1fr;
    }

    .json-input {
        min-height: 350px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Assets Library Styles ===== */

/* Stats Cards */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--background-dropdown-menu);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.stat-icon i {
    width: 24px;
    height: 24px;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 0.5rem;
}

.view-toggle .btn {
    padding: 0.5rem;
}

.view-toggle .btn.active {
    background: var(--primary-color);
    color: white;
}

/* Assets Container */
.assets-container {
    margin-top: 1rem;
}

.assets-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 2rem;
}

.assets-container.grid-view .assets-grid {
    /*grid-template-columns: repeat(6, 1fr);*/
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))
}

.assets-container.list-view .assets-grid {
    grid-template-columns: 1fr;
}

/* Asset Card - Voice Selector Style */
.asset-card {
    background: transparent;
    border: none;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 200px;
}

.asset-card:hover .asset-thumbnail {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.asset-thumbnail {
    width: 100%;
    aspect-ratio: 1;
    background: var(--background-toggle-off);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.asset-thumbnail img,
.asset-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-icon {
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
}

.asset-icon svg {
    width: 48px;
    height: 48px;
}

.asset-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.asset-type-badge i {
    width: 14px;
    height: 14px;
}

.asset-duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Asset Preview Button for Audio Files */
.asset-preview-btn {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.asset-preview-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.asset-preview-btn i,
.asset-preview-btn svg {
    width: 16px;
    height: 16px;
    color: white;
}

/* Playing state for asset preview button */
.asset-preview-btn.playing {
    background: var(--primary-color);
    border-color: var(--primary-color);
    animation: audioPulse 1.5s ease-in-out infinite;
}

.asset-preview-btn.playing::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.3;
    animation: audioRipple 1.5s ease-out infinite;
    z-index: -1;
}

.asset-preview-btn.playing::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.15;
    animation: audioRipple 1.5s ease-out 0.3s infinite;
    z-index: -1;
}

.asset-info {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asset-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 20px;
}

.asset-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}

.asset-menu-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

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

.asset-menu-btn i {
    width: 16px;
    height: 16px;
}

.asset-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.asset-date {
    display: none;
}

.asset-actions {
    display: none;
}

/* Asset Dropdown Menu */
.asset-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--background-dropdown-menu);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 150px;
    padding: 4px 0;
    display: none;
}

.asset-dropdown-menu.show {
    display: block;
}

.asset-dropdown-menu button {
    width: 100%;
    padding: 8px 16px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease;
}

.asset-dropdown-menu button:hover {
    background: var(--background-secondary);
}

.asset-dropdown-menu button i {
    width: 16px;
    height: 16px;
}

.asset-dropdown-menu button.danger {
    color: var(--danger-color);
}

.asset-dropdown-menu button.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* List View */
.assets-container.list-view .asset-card {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.assets-container.list-view .asset-thumbnail {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.assets-container.list-view .asset-info {
    flex: 1;
}

.assets-container.list-view .asset-actions {
    flex-shrink: 0;
    padding: 1rem;
}

/* Upload Modal */
.upload-asset-modal {
    width: 80vw;
    max-width: 80vw;
}

.upload-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--background-card);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.upload-drop-zone:hover {
    border-color: var(--primary-color);
    background: var(--background-toggle-off);
}

.upload-drop-zone.drag-over {
    border-color: var(--primary-color);
    background: var(--background-toggle-on);
}

.upload-drop-zone i {
    width: 48px;
    height: 48px;
    color: var(--primary-color);
}

.upload-drop-zone h4 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.upload-drop-zone p {
    margin: 0;
    color: var(--text-secondary);
}

.upload-info {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Upload Progress */
.upload-progress {
    padding: 2rem;
}

.upload-file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.upload-file-item i {
    width: 32px;
    height: 32px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.upload-file-info {
    flex: 1;
}

.upload-file-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.upload-status {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Asset Metadata Form */
.asset-metadata-form {
    padding: 1rem 0;
}

.asset-metadata-form .form-group {
    margin-bottom: 1rem;
}

.asset-metadata-form .form-group:last-child {
    margin-bottom: 0;
}

/* Edit Asset Modal */
.edit-asset-modal {
    width: 380px;
    max-width: 80vw;
}

/* Pagination */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0;
}

.page-info {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ===== Asset Picker Modal ===== */
.asset-picker-modal {
    width: 80vw;
    max-width: 80vw;
    max-height: 80vh;
}

.picker-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.picker-controls .search-box {
    /*flex: 1;*/
}

.picker-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.5rem;
}

.picker-asset-card {
    background: transparent;
    border: none;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.picker-asset-card:hover .picker-asset-thumbnail {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.picker-asset-card.selected .picker-asset-thumbnail {
    border-color: var(--primary-color);
    border-width: 3px;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.picker-asset-checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 10;
    background: var(--primary-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.picker-asset-checkmark svg {
    width: 32px;
    height: 32px;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.picker-asset-card.selected .picker-asset-checkmark {
    opacity: 1;
}

.picker-asset-thumbnail {
    width: 100%;
    aspect-ratio: 1;
    background: var(--background-toggle-off);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.picker-asset-thumbnail img,
.picker-asset-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picker-asset-thumbnail .asset-icon {
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
}

.picker-asset-thumbnail .asset-icon svg {
    width: 48px;
    height: 48px;
}

.picker-asset-type {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.picker-asset-info {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.picker-asset-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-asset-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.picker-empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
    width: 100%;
    background: var(--background-body);
    border-radius: 12px;
}

.picker-empty-state svg {
    width: 32px;
    height: 32px;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.picker-empty-state p {
    margin: 1rem 0;
    font-size: 1rem;
}

/* ===== Image Lightbox ===== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.lightbox-overlay.active {
    opacity: 1;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10001;
    backdrop-filter: blur(10px);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.lightbox-close i {
    width: 24px;
    height: 24px;
}

/* Video lightbox */
.video-lightbox .lightbox-video {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    outline: none;
}

/* ===== Audio Player Toast ===== */
.audio-player-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    overflow: hidden;
    transform: translateX(calc(100% + 24px));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.audio-player-toast.show {
    transform: translateX(0);
}

.audio-toast-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--background-secondary);
    border-bottom: 1px solid var(--border-color);
}

.audio-toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audio-toast-icon i {
    width: 24px;
    height: 24px;
    color: white;
}

.audio-toast-info {
    flex: 1;
    min-width: 0;
}

.audio-toast-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audio-toast-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.audio-toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.audio-toast-close:hover {
    background: var(--background-tertiary);
    color: var(--text-primary);
}

.audio-toast-player {
    padding: 16px;
}

.audio-toast-player audio {
    width: 100%;
    outline: none;
}


/* ========================================
   OverlayScrollbars Custom Theme
   ======================================== */

/* Hide default scrollbars when OverlayScrollbars is active */
.os-scrollbar-handle {
    background: var(--text-primary);
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.os-scrollbar-handle:hover {
    opacity: 1;
    background: var(--text-primary);
}

.os-scrollbar-track {
    background: transparent;
}

.os-scrollbar {
    padding: 2px;
}

.os-scrollbar-vertical {
    width: 10px;
    right: 2px;
}

.os-scrollbar-horizontal {
    height: 10px;
    bottom: 2px;
}

/* Dark theme variant */
.os-theme-dark .os-scrollbar-handle {
    background: var(--text-primary);
}

.os-theme-dark .os-scrollbar-handle:hover {
    background: var(--text-secondary);
}

/* Light theme for modals */
[data-theme="light"] .os-scrollbar-handle {
    background: var(--text-secondary);
    opacity: 0.4;
}

[data-theme="light"] .os-scrollbar-handle:hover {
    opacity: 0.7;
}

/* Ensure native scrollbar is hidden when OverlayScrollbars initializes */
.os-host,
.os-host-textarea,
.os-host-scrollbar-hidden {
    scrollbar-width: none;
}

.os-host::-webkit-scrollbar,
.os-host-textarea::-webkit-scrollbar {
    display: none;
}


/* Side Panel Overlay - Prevent background scroll */
.side-panel-overlay {
    overflow: hidden;
    overscroll-behavior: contain;
}

.side-panel-overlay.active {
    touch-action: none;
}

/* Hide native scrollbars on side panel content */
.side-panel-content {
    scrollbar-width: none; /* Firefox */
}

.side-panel-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}


/* Selector Modal Body scrollbar handling is at the end of this file */

/* Tom Select Dropdown - Hide native scrollbars */
.ts-dropdown-content {
    scrollbar-width: none; /* Firefox */
}

.ts-dropdown-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Force hide native scrollbars on selector modals */
.selector-modal-body:not(.os-host) {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.selector-modal-body:not(.os-host)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* When OverlayScrollbars is active, let it control overflow */
.selector-modal-body.os-host {
    overflow: hidden !important;
}

.selector-modal-body.os-host > .os-viewport {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

/* Grid Selector Container - Hide native scrollbars */
.grid-selector-container:not(.os-host) {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.grid-selector-container:not(.os-host)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* When OverlayScrollbars is active, let it control overflow */
.grid-selector-container.os-host {
    overflow: hidden !important;
}

.grid-selector-container.os-host > .os-viewport {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

/* Hide body scrollbar when scroll is locked (side panel, modals, etc) */
body[style*="overflow: hidden"] > .os-scrollbar,
body[style*="overflow: hidden"] > .os-scrollbar-track,
body.os-host[style*="overflow: hidden"] > .os-scrollbar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ensure side panel overlay is above body scrollbar */
.side-panel-overlay {
    z-index: 9998;
}

.side-panel {
    z-index: 9999;
}


/* ===== GROK IMAGINE IMAGE PICKER ===== */
.grok-image-picker-modal {
    max-width: 800px;
    width: 90%;
}

.grok-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem 0;
}

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

.grok-image-item {
    position: relative;
    aspect-ratio: 1;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.grok-image-item:hover {
    transform: scale(1.05);
    border-color: var(--primary-color);
}

.grok-image-item.selected {
    border-color: var(--success-color);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

.grok-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grok-image-number {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

.grok-image-checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(34, 197, 94, 0.9);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.grok-image-checkmark i {
    width: 24px;
    height: 24px;
}

/* Scene action buttons */
.scene-action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.scene-action-buttons .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.scene-action-buttons .btn-sm i {
    width: 16px;
    height: 16px;
}

.grok-change-image-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.grok-change-image-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.convert-to-video-btn {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;
    color: white;
}

.convert-to-video-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* I2V Model Picker Modal */
.i2v-model-picker-content {
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
}

.i2v-prompt-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.i2v-prompt-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.i2v-prompt-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.i2v-prompt-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.i2v-info {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.i2v-models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.i2v-model-card {
    background: var(--background-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.i2v-model-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.i2v-model-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.i2v-model-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.i2v-model-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.i2v-type-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.i2v-type-badge-i2v {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.i2v-type-badge-t2v {
    background: var(--background-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.i2v-model-provider {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--background-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
}

.i2v-model-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.4;
}

.i2v-model-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.i2v-model-cost {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

/* Converting to Video Animation - DISABLED (now using progress bar instead) */
/*
@keyframes convertingPulse {
    0%, 100% {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        border-color: var(--primary-color-hover);
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

@keyframes convertingShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.converting-to-video {
    position: relative;
    border: 2px solid var(--primary-color) !important;
    animation: convertingPulse 2s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.8;
}

.converting-to-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(59, 130, 246, 0.15) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: convertingShimmer 2s linear infinite;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.converting-to-video::after {
    content: 'Converting to Video...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
*/

/* Scene Progress Bar */
.scene-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: rgba(0, 0, 0, 0.85);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    overflow: hidden;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color-hover));
    transition: width 0.3s ease;
    width: 0;
}

.progress-bar-text {
    position: relative;
    z-index: 1;
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.scene-progress-bar.complete .progress-bar-fill {
    background: linear-gradient(90deg, #10b981, #059669);
}

.scene-progress-bar.failed .progress-bar-fill {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Spinner Animation for Badge Icon */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinning {
    animation: spin 1s linear infinite;
}