/* YekanBakhFaNum Variable Font */
@font-face {
    font-family: 'YekanBakhFaNum';
    src: url('/static/fonts/YekanBakhFaNum-VF.woff2') format('woff2'),
        url('/static/fonts/YekanBakhFaNum-VF.woff') format('woff');
    font-weight: 100 900;
    /* Variable font weight range */
    font-style: normal;
    font-display: swap;
    /* Better performance - shows fallback while loading */
}

/* ============================================================================
   CSS Custom Properties - Professional Color System
   ============================================================================ */

:root {
    /* Primary Brand Color */
    --primary: hsl(32, 100%, 50%);
    --primary-rgb: 229, 167, 105;
    --primary-hover: hsl(27, 100%, 45%);
    --primary-light: hsl(27, 100%, 95%);
    --primary-dark: hsl(27, 100%, 40%);

    /* Dark Theme Colors (Default) */
    --dark-bg-page: #000000;
    /* Main page background */
    --dark-bg-header: #141414;
    /* Header background */
    --dark-bg-card: #141414;
    /* Card background */
    --dark-bg-input: #040404;
    /* Input field background */
    --dark-bg-subtle: #2a2a2a;
    /* Subtle elements */

    --dark-text-primary: #ffffff;
    /* Main titles */
    --dark-text-secondary: #888888;
    /* Subtitles and labels */
    --dark-text-muted: #666666;
    /* Placeholder text */

    --dark-border-card: #2a2a2a;
    /* Card borders */
    --dark-border-input: #333333;
    /* Input borders */
    --dark-border-subtle: #404040;
    /* Subtle borders */

    /* Light Theme Colors */
    --light-bg-page: #f5f5f5;
    /* Main page background */
    --light-bg-header: #e8e8e8;
    /* Header background */
    --light-bg-card: #e8e8e8;
    /* Card background */
    --light-bg-input: #ffffff;
    /* Input field background */
    --light-bg-subtle: #f0f0f0;
    /* Subtle elements */

    --light-text-primary: #141414;
    /* Main titles */
    --light-text-secondary: #656565;
    /* Subtitles and labels */
    --light-text-muted: #c0c0c0;
    /* Placeholder text */

    --light-border-card: #e3e3e3;
    /* Card borders */
    --light-border-input: #e4e4e4;
    /* Input borders */
    --light-border-subtle: #e4e4e4;
    /* Subtle borders */

    /* Status Colors */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --info: #2196f3;

    /* Shadow System */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.25);
    --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Input Field Shadows */
    --shadow-input-light:
        0 0 0 6px rgba(255, 255, 255, 0.6),
        0 12px 32px rgba(0, 0, 0, 0.1);
    --shadow-input-dark:
        0 0 0 6px rgba(255, 255, 255, 0.1),
        0 12px 32px rgba(0, 0, 0, 0.3);
    --shadow-input-focus:
        0 0 0 1px var(--primary),
        0 16px 48px rgba(0, 0, 0, 0.15);

    /* Typography */
    --font-family: 'YekanBakhFaNum', 'Vazirmatn', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2.2rem;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --spacing-5xl: 48px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.3s ease;
}

/* Maintain consistent height for the main status panel, with compact idle state */
.status-card.main-panel {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: min-height 0.25s ease;
}

.status-card.main-panel.is-processing {
    min-height: 360px;
}

@media (max-width: 768px) {
    .status-card.main-panel {
        min-height: 260px;
    }

    .status-card.main-panel.is-processing {
        min-height: 320px;
    }
}

/* ============================================================================
   Theme System - Dynamic Color Mapping
   ============================================================================ */

/* Default (Dark) Theme Variables */
:root {
    --bg-page: var(--dark-bg-page);
    --bg-header: var(--dark-bg-header);
    --bg-card: var(--dark-bg-card);
    --bg-input: var(--dark-bg-input);
    --bg-subtle: var(--dark-bg-subtle);
    --bg-secondary: var(--dark-bg-card);
    /* Added for contact card */

    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);

    --border-card: var(--dark-border-card);
    --border-input: var(--dark-border-input);
    --border-subtle: var(--dark-border-subtle);
    --border-color: var(--dark-border-card);
    /* Added for contact card */

    --shadow-input: var(--shadow-input-dark);

    --bg-progress-track: rgba(255, 255, 255, 0.1);
}

/* Light Theme Override */
body.light-theme {
    --bg-page: var(--light-bg-page);
    --bg-header: var(--light-bg-header);
    --bg-card: var(--light-bg-card);
    --bg-input: var(--light-bg-input);
    --bg-subtle: var(--light-bg-subtle);
    --bg-secondary: #ffffff;
    /* White card for light mode */

    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-muted: var(--light-text-muted);

    --border-card: var(--light-border-card);
    --border-input: var(--light-border-input);
    --border-subtle: var(--light-border-subtle);
    --border-color: var(--light-border-card);
    /* Added for contact card */

    --shadow-input: var(--shadow-input-light);

    --bg-progress-track: rgba(0, 0, 0, 0.1);
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
input,
button,
select,
textarea {
    font-family: 'YekanBakhFaNum', 'Vazirmatn', Arial, sans-serif;
}

textarea {
    font-family: 'YekanBakhFaNum', 'Vazirmatn', Arial, sans-serif;
}

body {
    font-family: var(--font-family);
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 0;
    direction: rtl;
    text-align: right;
}

.simple-page {
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    font-family: var(--font-family);
    direction: rtl;
    text-align: right;
}

/* Site Header */
.site-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-subtle);
    width: 100%;
    box-sizing: border-box;
}

.site-header-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: ltr;
    /* toggle left, logo right */
    padding: var(--spacing-md) 40px;
    box-sizing: border-box;
}

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

.logo-container {
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.theme-toggle {
    background: linear-gradient(135deg, #ff9a1f, #ff7a00);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    transition: background 0.25s ease;
    width: 70px;
    height: 32px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    direction: ltr;
}

body.light-theme .theme-toggle {
    background: #111111;
}

.theme-toggle::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% - 24px);
    transition: left 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

body.light-theme .theme-toggle::after {
    left: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.theme-toggle-icon {
    position: absolute;
    top: 59%;
    transform: translateY(calc(-50%));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.55;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
}

.theme-toggle-icon.moon {
    left: 10px;
}

.theme-toggle-icon.sun {
    right: 10px;
    left: auto;
}

body:not(.light-theme) .theme-toggle-icon.moon {
    opacity: 0.95;
}

body:not(.light-theme) .theme-toggle-icon.sun {
    opacity: 0;
}

body.light-theme .theme-toggle-icon.sun {
    opacity: 0.95;
}

body.light-theme .theme-toggle-icon.moon {
    opacity: 0;
}

/* Mobile: Responsive adjustments */
@media (max-width: 768px) {
    .site-header-inner {
        padding: 12px 16px;
    }

    .logo {
        height: 32px;
    }

    .simple-shell {
        padding: 24px 16px;
        gap: 20px;
    }

    .simple-card {
        padding: 32px 24px;
        border-radius: 12px;
        max-width: 100%;
    }

    .hero-title {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    /* Analytics Page Mobile Fixes */
    .analytics-container {
        padding: 16px 4px;
    }

    .analytics-page .realtime-compact-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .analytics-page .two-column-section {
        grid-template-columns: 1fr !important;
    }

    .analytics-page .stats-list {
        grid-template-columns: 1fr 1fr !important;
    }

    .performance-layout {
        grid-template-columns: 1fr !important;
    }

    .performance-column .compact-section {
        margin-top: 16px !important;
    }
}

/* Main shell layout */
.simple-page {
    background: var(--bg-page);
    min-height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.simple-shell {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin: 0 auto;
    padding: var(--spacing-2xl) 16px;
    flex: 1;
}

.hero-block {
    text-align: center;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.hero-title::after {
    content: none;
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-secondary);
    margin: calc(-1 * var(--spacing-sm));
    letter-spacing: 0.3px;
}


.simple-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl) 40px var(--spacing-2xl);
    border: 1px solid var(--border-card);
    width: 100%;
    box-sizing: border-box;
    max-width: 960px;
    margin: 0 auto 0;
}


.simple-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
}

.form-group {
    position: relative;
}

.simple-form label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    display: block;
    margin: 0 0 var(--spacing-md) 0;
    pointer-events: auto;
    text-align: center;
    width: 90%;
    margin-inline: auto;
}

.simple-form .url-input {
    width: 90%;
    padding: 10px var(--spacing-2xl);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    background: var(--bg-input);
    color: var(--text-primary);
    transition: var(--transition-base);
    box-shadow: var(--shadow-input);
    margin-inline: auto;
}

.simple-form .url-input::placeholder {
    color: var(--text-muted);
}

.simple-form .url-input:focus {
    outline: none;
    border: 1px solid var(--primary);
    box-shadow: var(--shadow-input-focus);
}

.main-panel .status-header {
    gap: 0;
}

.status-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 0;
}

.message {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 8px 0;
}

.message.warning {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1.1rem;
    background: linear-gradient(135deg, rgba(235, 51, 73, 0.08) 0%, rgba(235, 51, 73, 0.04) 100%);
    padding: 12px 20px;
    border-radius: 18px;
    border: 1px solid rgba(235, 51, 73, 0.25);
    box-shadow: none;
    margin-bottom: 15px;
    display: inline-block;
    min-width: 200px;
}

.video-result.card {
    margin-top: 24px;
    padding: 28px;
    background: var(--bg-subtle);
    border-radius: 20px;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 100%;
    overflow: hidden;
}

.video-result.card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.result-video {
    max-width: 100%;
    max-height: 500px;
    height: 500px;
    width: 100%;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    display: block;
    margin: 0 auto;
    background: #000;
}

/* Ensure video respects size limits */
.video-result.card video.result-video {
    max-width: 100% !important;
    max-height: 500px !important;
    height: 500px !important;
    width: 100% !important;
}

/* Desktop: Make horizontal videos larger, limit portrait videos */
@media (min-width: 769px) {

    /* Horizontal videos: use most of the container width (960px max) */
    .result-video:not(.portrait-video) {
        max-width: min(900px, 95vw);
        height: 500px;
    }

    .video-result.card video.result-video:not(.portrait-video) {
        max-width: min(900px, 95vw) !important;
        height: 500px !important;
    }

    /* For portrait videos (detected via JavaScript), same height as horizontal */
    .result-video.portrait-video {
        max-width: 100%;
        height: 500px;
    }

    .video-result.card video.result-video.portrait-video {
        max-width: 100% !important;
        height: 500px !important;
    }
}

/* Mobile: Keep videos responsive with fixed height */
@media (max-width: 768px) {
    .result-video {
        max-width: 100%;
        width: 100%;
        height: 400px;
        max-height: 400px;
    }

    .video-result.card video.result-video {
        max-width: 100% !important;
        width: 100% !important;
        height: 400px !important;
        max-height: 400px !important;
    }
}

.video-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
    justify-items: center;
}

.video-actions form {
    display: flex;
    width: 100%;
    justify-content: center;
}

.video-actions .btn {
    width: 100%;
    max-width: 280px;
    margin-top: 0 !important;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    box-sizing: border-box;
}

.btn-primary,
.btn.btn-download,
.btn.btn-secondary,
.btn.btn-gradient,
.home-button {
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 999px;
    padding: 14px 32px;
    min-height: 50px;
}

.btn.btn-gradient,
.home-button {
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-base);
    border: none;
    box-shadow: var(--shadow-md);
    transition: var(--transition-slow);
    width: 100%;
    max-width: 280px;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--spacing-md) var(--spacing-2xl);
    min-height: 50px;
}

.btn-primary:hover,
.btn.btn-download:hover,
.btn.btn-secondary:hover,
.btn.btn-gradient:hover,
.home-button:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Light theme specific button styles - must be after main button styles */
body.light-theme .btn.btn-download,
body.light-theme .btn.btn-secondary {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: var(--shadow-md) !important;
}

body.light-theme .btn.btn-download:hover,
body.light-theme .btn.btn-secondary:hover {
    background: var(--primary-hover) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Light theme styles for all buttons */
body.light-theme .btn:not(.btn-download):not(.btn-secondary):not(.btn-subtitle):not(.btn-subtitle-srt):not(.btn-subtitle-vtt):not(.btn-subtitle-ass) {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.light-theme .btn:hover:not(.btn-download):not(.btn-secondary):not(.btn-subtitle):not(.btn-subtitle-srt):not(.btn-subtitle-vtt):not(.btn-subtitle-ass) {
    background: hsl(40 100% 50%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Specific button types in light theme */
body.light-theme .btn-primary,
body.light-theme .btn.btn-gradient,
body.light-theme .home-button {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.light-theme .btn-primary:hover,
body.light-theme .btn.btn-gradient:hover,
body.light-theme .home-button:hover {
    background: hsl(40 100% 50%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Success and Danger buttons in light theme */
body.light-theme .btn-success,
body.light-theme .btn-danger {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.light-theme .btn-success:hover,
body.light-theme .btn-danger:hover {
    background: hsl(40 100% 50%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.simple-footer {
    text-align: center;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 960px;
    margin: 40px auto 0;
    padding: 24px 20px 40px;
    border-top: none;
}

.simple-footer a {
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.simple-footer a:hover {
    color: var(--primary);
}

.donation-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px;
    border-radius: 12px;
    background: transparent;
    border-bottom: 1px solid var(--primary);
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.donation-link:hover {
    color: var(--primary) !important;
    border-bottom-color: var(--primary);
    background: transparent;
}

/* Unified Footer Design */
.footer-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.footer-section {
    /* Box styling removed - no background, border, or padding */
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.section-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Platforms Section */
.platforms-section .section-content {
    gap: 12px;
    flex-direction: column;
}

.platforms-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0;
    display: block;
}

.platforms-logos {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.platform-logo {
    height: 24px;
    width: 24px;
    object-fit: contain;
    cursor: help;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.platform-logo:hover {
    transform: scale(1.2) translateY(-2px);
    opacity: 1;
    filter: none;
}

/* Light theme - show logos in black/dark (not colorful) */
body.light-theme .platform-logo {
    filter: brightness(0);
    opacity: 0.8;
}

body.light-theme .platform-logo:hover {
    transform: scale(1.3) translateY(-3px);
    opacity: 1;
    filter: none;
    /* Show colorful version on hover */
}

.platforms-link {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 12px;
    background: transparent;
    border-radius: 12px;
    border-bottom: 1px solid var(--primary);
    transition: all 0.3s ease;
    margin-right: 4px;
    position: relative;
}


.platforms-link:hover {
    color: var(--primary) !important;
    border-bottom-color: var(--primary);
    background: transparent;
}


/* Powered By Section */
.powered-section .section-content {
    gap: 10px;
}

/* Combined Platforms & Powered Section */
.footer-unified-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-radius: 18px;
}

.footer-section-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.platforms-powered-section .section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.platforms-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.platforms-powered-section .platforms-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.platforms-powered-section .powered-part {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.footer-section-divider {
    width: 100%;
    max-width: 400px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 4px auto;
}

.powered-badge-unified {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    padding: 1px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid rgba(var(--primary-rgb), 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.powered-badge-unified:hover {
    background: rgba(var(--primary-rgb), 0.2);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.powered-badge-unified .ai-dev-badge {
    background: transparent;
    border: none;
    padding: 0;
}

.powered-badge-unified .ai-dev-badge:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
}

.powered-badge-unified .tech-badge {
    background: transparent;
    border: none;
    padding: 0;
}

.powered-badge-unified .tech-badge:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
}

.powered-badge-unified .site-header {
    background: transparent;
    border-bottom: none;
    padding: 20px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.ai-dev-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    padding: 0px 14px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid rgba(var(--primary-rgb), 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-dev-badge:hover {
    background: rgba(var(--primary-rgb), 0.2);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.ai-icon {
    font-size: 1.1rem;
}

.tech-separator {
    color: var(--text-secondary);
    font-weight: 300;
    font-size: 1rem;
}

.powered-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 400;
}

.label-icon {
    font-size: 1.1rem;
}

.tech-badges {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tech-badge {
    background: var(--bg-muted);
    color: var(--text-secondary);
    padding: 5px 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid rgba(var(--primary-rgb), 0.2);
}

.tech-badge:hover {
    background: rgba(var(--primary-rgb), 0.2);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.tech-plus {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 600px) {
    .footer-container {
        padding: 0 10px;
    }

    .footer-section {
        padding: 12px 18px;
    }

    .credits-row {
        font-size: 0.8rem;
    }

    .platform-logo {
        height: 20px;
        width: 20px;
    }
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

/* Header */
header {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 30px;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Card */
.card {
    background: var(--bg-subtle);
    border-radius: 18px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: none;
    animation: fadeIn 0.5s ease-in;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card h2 {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 1.8rem;
}

/* Input Section */
.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.url-input {
    flex: 1;
    height: 46px;
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    font-size: 0.875rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    direction: ltr;
    background: var(--bg-page);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    width: 100%;
}

.url-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.url-input:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

.url-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.hint {
    color: var(--light-text-secondary);
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
    font-weight: 600;
}

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

/* Unified Button System - Base Styles */
.btn {
    padding: 14px 32px;
    min-height: 50px;
    border: none;
    border-radius: 28px;
    /* Pill shape */
    font-size: 1rem;
    font-family: 'YekanBakhFaNum', 'Vazirmatn', Arial, sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-grid;
    place-items: center;
    grid-template-areas: 'stack';
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Primary Button Style (Default for most buttons) */
.btn,
.btn-primary,
.btn.btn-download,
.btn.btn-secondary,
.btn.btn-gradient,
.home-button {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn:hover,
.btn-primary:hover,
.btn.btn-download:hover,
.btn.btn-secondary:hover,
.btn.btn-gradient:hover,
.home-button:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    border: 1px solid var(--border-default);
}

.btn-success:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 15%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, #f56565 0%, #ed8936 100%);
    color: white;
    border: 1px solid var(--border-default);
}

.btn-danger:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 15%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Subtitle Buttons (Special case) */
.btn-subtitle,
.btn-subtitle-srt,
.btn-subtitle-vtt,
.btn-subtitle-ass,
.btn-subtitle-sbv {
    background: var(--bg-muted);
    border: 2px solid var(--border-default);
    color: var(--text-secondary);
    padding: 12px 8px;
    min-height: 48px;
    max-width: none;
    border-radius: 18px;
}

.btn-subtitle:hover,
.btn-subtitle-srt:hover,
.btn-subtitle-vtt:hover,
.btn-subtitle-ass:hover,
.btn-subtitle-sbv:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Light Theme Button Overrides */
body.light-theme .btn,
body.light-theme .btn-primary,
body.light-theme .btn.btn-download,
body.light-theme .btn.btn-secondary,
body.light-theme .btn.btn-gradient,
body.light-theme .home-button {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.light-theme .btn:hover,
body.light-theme .btn-primary:hover,
body.light-theme .btn.btn-download:hover,
body.light-theme .btn.btn-secondary:hover,
body.light-theme .btn.btn-gradient:hover,
body.light-theme .home-button:hover {
    background: hsl(40 100% 50%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

body.light-theme .btn-success,
body.light-theme .btn-danger {
    background: var(--primary) !important;
    color: white !important;
}

body.light-theme .btn-subtitle {
    background: var(--darklight-bg-1) !important;
    border: 2px solid var(--border-default) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* Button States */
.btn:active {
    transform: translateY(0);
}

.btn.is-pending .btn-content {
    opacity: 0.7;
}

.btn.is-pending .btn-spinner {
    opacity: 1;
    transform: scale(1);
}

/* Button Content Structure */
.btn .btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.3s ease;
    line-height: 1;
}

.btn .btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: all 0.3s ease;
}

.btn.is-pending .btn-spinner {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Button Icons */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
    transform: translateY(0.16em);
}

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

/* Link buttons should not have underline */
a.btn {
    text-decoration: none;
    display: inline-grid;
}

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

.btn .btn-spinner {
    grid-area: stack;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.btn.is-pending .btn-spinner {
    opacity: 1;
    visibility: visible;
}

.btn.is-pending {
    pointer-events: none;
    cursor: wait;
}

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

.btn-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: var(--text-primary);
    font-size: 0.9rem;
    flex: 1;
    border: 1px solid var(--border-default);
}

.btn-success:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 15%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #f45c43 100%);
    color: var(--text-primary);
    font-size: 0.9rem;
    flex: 1;
    border: 1px solid var(--border-default);
}

.btn-danger:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 15%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Removed redundant button styles - now handled by unified button system */

.btn.btn-gradient .btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    transform: translateY(0.16em);
}

.btn-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Progress Section */
.progress-container {
    margin-bottom: 15px;
}

.progress-bar {
    width: 50%;
    height: 6px;
    background: #ffffff;
    border: none;
    border-radius: 3px;
    overflow: visible;
    position: relative;
    box-shadow: none;
    margin: 24px auto 0 auto;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
}

/* Stage Info - Detailed descriptions */
.stage-info-container {
    margin: 20px 0 14px 0;
}

.stage-info {
    padding: 12px 18px;
    background: var(--bg-subtle);
    border-radius: 16px;
    border: 1px solid var(--border-default);
}

/* Light theme stage info */
body.light-theme .stage-info {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}

/* Dark theme stage info */
body:not(.light-theme) .stage-info {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}

.stage-info.translating {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}

/* Light theme translating stage */
body.light-theme .stage-info.translating {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}

/* Dark theme translating stage */
body:not(.light-theme) .stage-info.translating {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}

.stage-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stage-description {
    margin-top: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: justify;
}

/* Success Section */
.success {
    margin-top: 20px;
}

.success-box {
    padding: 16px 20px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 16px;
    border: 1px solid rgba(76, 175, 80, 0.2);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Error Section Styling */
.error-section {
    margin-top: 20px;
    text-align: center;
}

.error-details {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-secondary);
    text-align: justify;

    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(235, 51, 73, 0.2);
    box-shadow: 0 2px 8px rgba(235, 51, 73, 0.08);
    margin-bottom: 10px;
}

.warning-icon {
    display: inline-block;
    font-size: 20px;
    margin-left: 5px;
}

/* Error return button - matches site button standards */
.error-return-btn {
    width: 100% !important;
    max-width: 280px !important;
    margin: 20px auto 0 auto !important;
    padding: 14px 32px !important;
    min-height: 50px !important;
    display: inline-grid !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(270deg, var(--primary) 0%, var(--primary-hover) 100%);
    /* 270deg = right to left */
    border-radius: 3px;
    transition: width 0.4s ease-out;
    width: 0%;
    position: absolute;
    right: 0;
    /* Start from right for RTL */
    top: 0;
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
    min-width: 2px;
    /* Ensure it's always visible even at 0% */
}

/* Ensure progress bar works correctly with JavaScript */
.progress-fill[data-progress] {
    width: var(--progress-width, 0%);
}

/* Add a subtle shine effect when progress is active */
.progress-fill:not([data-progress="0"]) {
    background: linear-gradient(270deg,
            var(--primary) 0%,
            var(--primary-hover) 50%,
            var(--primary) 100%);
    background-size: 200% 100%;
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% {
        background-position: 100% 50%;
    }

    /* Start from right */
    50% {
        background-position: 0% 50%;
    }

    /* Move to left */
    100% {
        background-position: 100% 50%;
    }

    /* Back to right */
}

.progress-overlay {
    position: absolute;
    top: 140%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 100%;
    margin-bottom: 8px;
}

.progress-percent {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    text-shadow: none;
}

.progress-text-dark .progress-percent {
    color: var(--text-muted);
    text-shadow: none;
}

/* Stages */
.stages {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stage {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg-subtle);
    border-radius: 18px;
    border: 2px solid transparent;
    transition: all 0.3s;
    opacity: 0.5;
}

.stage.active {
    opacity: 1;
    border-color: var(--text-secondary);
    background: rgba(var(--primary-rgb), 0.1);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

.stage.completed {
    opacity: 0.7;
    border-color: var(--text-secondary);
}

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

.stage-text {
    flex: 1;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Result Section */
.success-title {
    margin: 0 0 20px 0;
    text-align: center;
}

.success-box {
    background: var(--bg-subtle);
    color: var(--text-primary);
    padding: 20px 24px;
    border-radius: 16px;
    margin: 0 0 20px 0;
    text-align: center;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-box::before {
    display: none;
}

.success-box>div:first-child {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.success-box>div:first-child::before {
    content: '✓';
    font-size: 1.3rem;
    color: var(--primary);
    font-weight: 700;
    opacity: 0.6;
    line-height: 1;
    flex-shrink: 0;
}

.success-box>div:last-child {
    font-size: 0.85rem;
    opacity: 0.85;
    padding-top: 4px;
    margin-top: 0px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.video-container {
    margin: 20px 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

/* Error Section */
.error-card {
    border: 2px solid var(--danger);
}

.error-card h2 {
    color: var(--text-secondary);
    text-align: center;
}

.error-message {
    text-align: center;
    color: var(--danger);
    font-size: 1.1rem;
    margin: 20px 0;
    padding: 15px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-radius: 18px;
    white-space: pre-wrap;
}

/* Footer */
footer {
    text-align: center;
    color: var(--text-primary);
    margin-top: 30px;
    opacity: 0.9;
}

footer small {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }

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

    .card {
        padding: 30px 4px !important;
    }

    .action-buttons {
        flex-direction: column;
    }

    .stage-text {
        font-size: 0.95rem;
    }

    /* Ensure proper width on mobile (same max-width as desktop) */
    .simple-shell {
        width: 100%;
        max-width: 960px;
        gap: 10px;
        margin: 0 auto;
    }

    /* Full width for analytics container on mobile */


    /* Minimal padding for simple-page on mobile - handled in later media query */
}

.platform-list li {
    background-color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 5px;
    text-align: center;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    /* Ensure it respects parent width */
    direction: ltr;
}

/* ============================================================================
   Supported Platforms Page Styles
   ============================================================================ */

.supported-platforms-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.supported-platforms-title {
    font-size: var(--font-size-3xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-bottom: var(--spacing-xl);
}

.supported-platforms-title::after {
    content: '';
    position: absolute;
    bottom: var(--spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    border-radius: 2px;
}

.supported-platforms-description-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-2xl);
    margin: 0 auto;
    max-width: 600px;
    margin-top: var(--spacing-xl);
}

.supported-platforms-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.platforms-grid-container {
    margin: var(--spacing-3xl) 0;
}

.platform-list-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
    list-style: none;
    padding: 0;
    margin: 0;
}

.platform-item-modern {
    background: var(--bg-subtle);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    direction: ltr;
    transition: var(--transition-slow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.platform-item-modern:hover {
    border-color: var(--primary);
    background: var(--bg-input);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.supported-platforms-footer {
    text-align: center;
    margin-top: var(--spacing-3xl);
}

.supported-platforms-footer .btn {
    text-decoration: none;
}

.no-platforms-message {
    text-align: center;
    padding: var(--spacing-3xl);
    color: var(--text-secondary);
}

.no-platforms-message p {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
}

.no-platforms-message p:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .platform-list-modern {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--spacing-sm);
    }

    .platform-item-modern {
        font-size: var(--font-size-xs);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .supported-platforms-title {
        font-size: var(--font-size-2xl);
    }
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Ensure it respects parent width */
}

/* Ultra Compact Timing Info Section */
/* Two Column Layout Container */
.result-details-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .result-details-container {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .video-actions {
        grid-template-columns: 1fr;
        gap: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .video-actions form {
        width: 100%;
        flex: 0 0 auto;
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    .video-actions .btn {
        width: 396px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Fix video on mobile - use default styles (already defined above) */
    /* Video sizes are handled in the main .result-video rule and mobile media query */

    /* Reduce padding on mobile/tablet for better space usage */
    .video-result.card {
        padding: 20px 16px !important;
        gap: 16px;
        margin-top: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .simple-card {
        padding: 20px 12px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Reduce gaps in forms and containers */
    .simple-form {
        gap: 12px;
    }

    /* Ensure boxes have proper width on mobile (not larger than desktop) */
    .timing-info-column,
    .subtitle-download-column {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 10px !important;
    }

    /* Reduce padding on mobile/tablet for better space usage */
    .section-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 8px !important;
    }

    /* Reduce padding on mobile/tablet for better space usage */
    .stat-card {
        padding: 14px 12px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Keep same padding as desktop for consistent box widths */
    /* Keep same padding as desktop for consistent box widths */
    /* .analytics-page padding removed to fix header alignment */

    /* Reduce padding on mobile/tablet for better space usage */
    .success-box {
        padding: 16px 20px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Reduce padding on mobile/tablet for better space usage */
    .card {
        padding: 18px 14px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* Ensure video container doesn't overflow */
    .video-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
}

/* LEFT Column: Timing Info */
.timing-info-column {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 12px;
    border: 1px solid var(--border-default);
    box-shadow: none;
    color: var(--text-secondary);
}

/* Legacy timing-info (for compatibility if used elsewhere) */
.timing-info {
    background: rgba(var(--primary-rgb), 0.05);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 12px 0;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
}

.timing-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-default);
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stage-timing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 10px;
    border: 1px solid var(--border-default);
    background: var(--bg-input);
    border-radius: 8px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stage-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 400;
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 3px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.stage-duration {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Subtitle Download Section
   ═══════════════════════════════════════════════════════════════════════════ */

/* RIGHT Column: Subtitle Download */
.subtitle-download-column {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 12px;
    border: 1px solid var(--border-default);
    box-shadow: none;
}

/* Legacy subtitle-download-section (for compatibility) */
.subtitle-download-section {
    margin-top: 30px;
    padding: 25px;
    background: var(--bg-subtle);
    border-radius: 16px;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
}

.subtitle-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-align: center;
}

.subtitle-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.btn-subtitle {
    display: inline-grid;
    place-items: center;
    grid-template-areas: 'stack';
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    min-height: 48px;
    background: var(--bg-muted);
    border: 2px solid var(--border-default);
    border-radius: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.6),
        0 6px 16px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.15);
}

.btn-subtitle .btn-content {
    grid-area: stack;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: opacity 0.2s ease;
}

.btn-subtitle.is-pending .btn-content {
    opacity: 0;
    visibility: hidden;
}

.btn-subtitle .btn-spinner {
    grid-area: stack;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.btn-subtitle.is-pending .btn-spinner {
    opacity: 1;
    visibility: visible;
}

.btn-subtitle.is-pending {
    pointer-events: none;
    cursor: wait;
}

.btn-subtitle:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.08);
    border-color: currentColor;
}

.btn-subtitle .format-name {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.btn-subtitle .format-desc {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.8;
}

/* Individual format colors */
.btn-subtitle-srt {
    background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
    color: white;
}

.btn-subtitle-srt:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 15%);
}

.btn-subtitle-vtt {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    color: white;
}

.btn-subtitle-vtt:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 15%);
}

.btn-subtitle-ass {
    background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
    color: white;
}

.btn-subtitle-ass:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 15%);
}

.btn-subtitle-sbv {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
    color: white;
}

.btn-subtitle-sbv:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 15%);
}

/* Light theme specific styles for subtitle buttons */
body.light-theme .btn-subtitle {
    background: var(--darklight-bg-1) !important;
    border: 2px solid var(--border-default) !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .btn-subtitle-srt,
body.light-theme .btn-subtitle-vtt,
body.light-theme .btn-subtitle-ass {
    color: white !important;
}

body.light-theme .btn-subtitle-srt {
    background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%) !important;
}

body.light-theme .btn-subtitle-vtt {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
}

body.light-theme .btn-subtitle-ass {
    background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%) !important;
}

/* Keep hover effects working in light theme */
body.light-theme .btn-subtitle:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

body.light-theme .btn-subtitle-srt:hover {
    background: var(--darklight-bg-1) !important;
    color: var(--darklight-text-1) !important;
}

body.light-theme .btn-subtitle-vtt:hover {
    background: var(--darklight-bg-1) !important;
    color: var(--darklight-text-1) !important;
}

body.light-theme .btn-subtitle-ass:hover {
    background: var(--darklight-bg-1) !important;
    color: var(--darklight-text-1) !important;
}

.subtitle-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    margin-top: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    /* Hero title styles removed to inherit from main media query */

    .subtitle-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .subtitle-buttons .btn-subtitle:last-child {
        grid-column: 1 / -1;
    }

    .btn-subtitle {
        padding: 14px 10px;
    }

    .btn-subtitle .format-name {
        font-size: 1.1rem;
    }

    .subtitle-hint {
        font-size: 0.8rem;
    }
}

/* ============================================================================
   Monitor Page Styles
   ============================================================================ */

body.monitor-page,
body:has(.container h1:contains("🖥️ مانیتور سیستم")) {
    font-family: var(--font-family);
    background: var(--bg-page);
    color: var(--text-primary);
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--spacing-xl);
}

/* Override h1 and subtitle for monitor page */
.container h1 {
    text-align: center;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    text-shadow: none;
}

.subtitle {
    text-align: center;
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-3xl);
    color: var(--text-secondary);
}

/* Overall Status Banner */
.status-banner {
    background: var(--success);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: var(--spacing-md);
    box-shadow: none;
    border: 1px solid var(--border-card);
    color: white;
    font-weight: 600;
}

.status-banner.unhealthy {
    background: var(--danger);
}

.status-banner h2 {
    font-size: var(--font-size-lg);
    color: white;
    margin-bottom: var(--spacing-sm);
}

.status-banner:not(.healthy):not(.unhealthy) h2 {
    color: var(--text-secondary);
    font-weight: 600;
}

.component-pills {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.component-pill {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.component-pill.ok {
    background: rgba(72, 187, 120, 0.3);
}

.component-pill.fail {
    background: rgba(245, 101, 101, 0.3);
}

/* Section */
.section {
    background: var(--bg-surface);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: none;
    border: 1px solid var(--border-default);
}

.section-title {
    font-size: 1.05em;
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 8px;
}

.section-title i {
    color: var(--text-secondary);
    font-size: 1.1em;
}

/* Cards Grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.card {
    background: var(--bg-subtle);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--border-default);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: none;
    border-color: var(--primary);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.card-title i {
    color: var(--text-secondary);
    font-size: 1em;
}

.card-value {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.card-subtitle {
    font-size: 0.75em;
    color: var(--text-muted);
}

.card-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    margin-top: 8px;
}

.card-badge.success {
    background: rgba(72, 187, 120, 0.2);
    color: var(--success);
}

.card-badge.warning {
    background: rgba(237, 137, 54, 0.2);
    color: var(--warning);
}

.card-badge.danger {
    background: rgba(245, 101, 101, 0.2);
    color: var(--danger);
}

/* Progress Bar */
.progress-bar-container {
    width: 100%;
    height: 6px;
    background: var(--bg-muted);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, #ff9a1f, #ff7a00);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-bar-fill.success {
    background: var(--success);
}

.progress-bar-fill.warning {
    background: var(--warning);
}

.progress-bar-fill.danger {
    background: var(--danger);
}

/* Active Task Card */
.active-task-card {
    background: rgba(var(--primary-rgb), 0.1);
    border: 2px solid var(--primary);
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.active-task-title {
    font-size: 0.95em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 6px;
}

.active-task-stage {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.active-task-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.active-task-progress-text {
    font-size: 0.9em;
    color: var(--primary);
    font-weight: 700;
    min-width: 45px;
}

/* Queue List */
.queue-list {
    list-style: none;
    padding: 0;
}

.queue-item {
    background: var(--bg-subtle);
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-default);
}

.queue-position {
    background: var(--secondary);
    color: var(--text-primary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75em;
    flex-shrink: 0;
}

.queue-title {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.8em;
}

/* Error List */
.error-list {
    list-style: none;
    padding: 0;
}

.error-item {
    background: rgba(var(--danger-rgb, 245 101 101), 0.1);
    border-right: 3px solid var(--danger);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 6px;
}

.error-time {
    color: var(--danger);
    font-size: 0.75em;
    font-weight: 600;
    margin-bottom: 4px;
}

.error-message {
    color: var(--text-secondary);
    font-size: 0.8em;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 25px 12px;
    color: var(--text-muted);
    font-size: 0.8em;
}

.empty-state i {
    font-size: 2em;
    margin-bottom: 10px;
    opacity: 0.4;
    color: var(--text-disabled);
}

/* Loading Spinner */
.loading-spinner {
    text-align: center;
    padding: 25px;
    color: var(--text-muted);
    font-size: 0.8em;
}

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

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

    100% {
        transform: rotate(360deg);
    }
}

/* Home Button */
.home-button {
    display: block;
    width: 396px;
    max-width: 100%;
    margin: 15px auto;
    padding: 18px 16px;
    min-height: 48px;
    box-sizing: border-box;
    border-radius: 18px;
    text-decoration: none;
    text-align: center;
}

/* Refresh Indicator */
.refresh-indicator {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(var(--primary-rgb), 0.9);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85em;
    display: none;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.refresh-indicator.show {
    display: flex;
}

/* Monitor Page Responsive */
@media (max-width: 768px) {
    .container h1 {
        font-size: 1.2em;
    }

    .container .subtitle {
        font-size: 0.7em;
    }

    .section {
        padding: 12px;
    }

    .section-title {
        font-size: 0.95em;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .card {
        padding: 10px;
    }

    .card-value {
        font-size: 1.2em;
    }

    .card-title {
        font-size: 0.75em;
    }

    .status-banner h2 {
        font-size: 1em;
    }
}

/* ============================================================================
   Analytics Page Styles
   ============================================================================ */
.analytics-page {
    background: var(--bg-page);
    min-height: 100vh;
    padding: 0;
}

.analytics-container {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.page-header {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4xl);
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, #ff9a1f, #ff7a00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-header p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin: 0;
}

.live-indicator {
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-surface);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    padding: 20px;
    box-shadow: none;
    border: 1px solid var(--border-default);
    text-align: center;
    transition: transform 0.3s ease;
}

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

.stat-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 5px;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.section-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    box-shadow: none;
    border: 1px solid var(--border-card);
}

.section-card h2 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xl);
    font-weight: 600;
    border-bottom: 2px solid #ff9a1f;
    padding-bottom: var(--spacing-md);
}

.section-description {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

/* Realtime Monitoring */
.realtime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.realtime-item {
    background: var(--bg-subtle);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-default);
}

.realtime-label {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 10px;
}

.realtime-value {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.realtime-icon {
    font-size: 1.2rem;
}

/* Resource Meter */
.resource-meter {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-default);
}

.resource-item {
    margin-bottom: 16px;
}

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

.resource-bar {
    background: var(--bg-progress-track);
    height: 34px;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.resource-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
    background: linear-gradient(135deg, #ff9a1f, #ff7a00);
}

.resource-fill.cpu-good {
    background: linear-gradient(135deg, #10b981, #059669);
}

.resource-fill.cpu-medium {
    background: linear-gradient(135deg, #ff9a1f, #ff7a00);
}

.resource-fill.cpu-high {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Bottleneck Card */
.bottleneck-card {
    background: var(--bg-subtle);
    border: 2px solid var(--danger);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 24px;
}

.bottleneck-card h3 {
    color: var(--text-primary);
}

.bottleneck-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
}

.bottleneck-stat {
    text-align: center;
}

.bottleneck-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--danger);
    margin-bottom: 5px;
}

.bottleneck-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Insights List */
.insights-list {
    list-style: none;
    padding: 0;
}

.insight-item {
    background: var(--bg-subtle);
    padding: 12px 16px;
    border-radius: 18px;
    margin-bottom: 8px;
    border: 1px solid var(--border-default);
}

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

/* Efficiency Grid */
.efficiency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.efficiency-item {
    background: var(--bg-subtle);
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--border-default);
}

.efficiency-item h4 {
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-size: 1rem;
}

.efficiency-bar {
    background: var(--bg-muted);
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.efficiency-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.efficiency-fast {
    background: linear-gradient(135deg, #10b981, #059669);
}

.efficiency-good {
    background: linear-gradient(135deg, #ff9a1f, #ff7a00);
}

.efficiency-slow {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Recommendation Card */
.recommendation-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 16px;
}

.recommendation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

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

/* Platform, Duration, Error Items */
.platform-item,
.error-item,
.duration-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-default);
}

.platform-item:last-child,
.error-item:last-child,
.duration-item:last-child {
    border-bottom: none;
}

.item-name {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.item-stats {
    display: flex;
    gap: 12px;
    align-items: center;
}

.item-count {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 1rem;
}

.item-percentage {
    font-size: 0.875rem;
    color: var(--text-disabled);
}

.progress-bar-container {
    background: rgba(255, 154, 31, 0.15);
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
    width: 100%;
    position: relative;
    /* Neomorphic inset effect */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, #ff9a1f, #ff7a00);
    border-radius: 12px;
    transition: width 0.3s ease;
    position: relative;
    /* Neomorphic raised effect */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.05),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.badge-warning {
    background: linear-gradient(135deg, #ff9a1f, #ff7a00);
    color: white;
}

.badge-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

/* No Data, Error Message */
.no-data {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 1rem;
}

.no-data h2 {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.error-message {
    background: linear-gradient(135deg, var(--danger) 0%, #e53e3e 100%);
    color: var(--text-primary);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-size: 1rem;
    margin-bottom: 24px;
}

.error-message strong {
    font-weight: 700;
}

/* Stats List (Redesigned) */
.stats-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.stat-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px;
    background: var(--bg-subtle);
    border-radius: 18px;
    border: 1px solid var(--border-default);
    transition: background 0.2s ease;
}

.stat-row:hover {
    background: var(--bg-muted);
}

.stat-row-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-row-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.stat-row-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-row-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Two Column Section */
.two-column-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.two-column-section>.section-card {
    margin-bottom: 0;
}

/* Hourly Chart */
.hourly-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
    gap: 8px;
    margin-top: 20px;
}

.hour-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 120px;
}

.hour-bar-fill {
    background: var(--text-muted);
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
    min-height: 2px;
    width: 100%;
}

.hour-label {
    font-size: 0.75rem;
    color: var(--text-disabled);
    margin-top: 8px;
    text-align: center;
}

/* Analytics Icons */
.section-card h2 i,
.section-card h3 i,
.page-header h1 i,
.realtime-icon,
.stat-row-icon i,
.section-description i {
    color: #ff9a1f;
    margin-left: 8px;
}

.section-description i {
    margin-left: 0;
    margin-right: 8px;
}

.stat-row-icon i {
    font-size: 1.5rem;
}

.realtime-icon {
    font-size: 1.2rem;
    color: #ff9a1f;
}

/* Realtime Compact Layout */
.realtime-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 16px;
}

.realtime-compact-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.realtime-compact-column h4 {
    margin-top: 0;
}

.realtime-compact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-subtle);
    border-radius: 18px;
    border: 1px solid var(--border-default);
}

.realtime-compact-label {
    flex: 1;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.realtime-compact-value {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.resource-compact-item {
    margin-bottom: 8px;
}

.resource-compact-item:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   Compact Styles for Analytics Performance Section
   ============================================================================ */
.compact-heading {
    font-size: 1.05rem !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #ff9a1f !important;
}

.compact-description {
    font-size: 0.8rem !important;
    margin-bottom: 14px !important;
    line-height: 1.4 !important;
}

.compact-section {
    margin-top: 14px !important;
}

.compact-subheading {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

.compact-bottleneck {
    padding: 14px !important;
    margin-bottom: 14px !important;
}

.compact-bottleneck h3 {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
}

.compact-bottleneck-grid {
    gap: 14px !important;
}

.compact-bottleneck-grid .bottleneck-stat {
    padding: 4px 0;
}

.compact-bottleneck-grid .bottleneck-value {
    font-size: 1.2rem !important;
}

.compact-bottleneck-grid .bottleneck-label {
    font-size: 0.75rem !important;
}

.compact-list {
    gap: 6px !important;
}

.compact-item {
    padding: 10px 12px !important;
    border-radius: 18px !important;
    margin-bottom: 6px !important;
}

.compact-header {
    gap: 8px !important;
}

.compact-text {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

.compact-badge {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
}

.compact-grid {
    gap: 12px !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

.compact-card {
    padding: 10px 12px !important;
    border-radius: 18px !important;
}

.compact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.compact-stage {
    font-weight: 600;
    font-size: 0.8rem;
}

.compact-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.compact-bar {
    height: 14px !important;
    margin-bottom: 6px !important;
}

.compact-badge-wrapper {
    margin-top: 4px !important;
}

.compact-badge-wrapper .badge {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
}

.compact-rec {
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: var(--bg-subtle) !important;
    border: 1px solid var(--border-default) !important;
}

.compact-details {
    color: var(--text-muted) !important;
    margin-top: 4px !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

.compact-rec .compact-text {
    font-size: 0.85rem !important;
}

.compact-rec .badge {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    margin-top: 6px !important;
    align-self: flex-end !important;
}

/* Compact overrides removed to match main page style */

/* Compact stats section */
.analytics-page .stat-row {
    padding: 10px 12px !important;
    gap: 10px !important;
}

.analytics-page .stat-row-icon {
    font-size: 1.2rem !important;
    width: 32px !important;
    height: 32px !important;
}

.analytics-page .stat-row-label {
    font-size: 0.8rem !important;
}

.analytics-page .stat-row-value {
    font-size: 1.1rem !important;
}

/* Compact platform/duration/error items */
.analytics-page .platform-item,
.analytics-page .duration-item,
.analytics-page .error-item {
    padding: 10px 0 !important;
    background: transparent !important;
    border: none !important;
    margin-bottom: 6px !important;
}

.analytics-page .item-name {
    font-size: 0.85rem !important;
}

.analytics-page .item-count {
    font-size: 0.95rem !important;
}

.analytics-page .item-percentage {
    font-size: 0.8rem !important;
}

.analytics-page .progress-bar-container {
    margin-top: 6px !important;
    height: 6px !important;
}

/* Compact realtime section */
.analytics-page .realtime-compact-grid {
    gap: 16px !important;
}

.analytics-page .realtime-compact-item {
    padding: 8px 10px !important;
}

.analytics-page .realtime-compact-label {
    font-size: 0.75rem !important;
}

.analytics-page .realtime-compact-value {
    font-size: 0.8rem !important;
}

.analytics-page .resource-compact-item {
    margin-bottom: 6px !important;
}

.analytics-page .resource-bar {
    height: 34px !important;
    border-radius: 999px !important;
}

.analytics-page .resource-bar span {
    font-size: 0.85rem !important;
}

/* Compact hourly chart */
.analytics-page .hourly-chart {
    gap: 6px !important;
    margin-top: 12px !important;
}

.analytics-page .hour-bar {
    min-height: 80px !important;
}

.analytics-page .hour-bar-fill {
    min-height: 2px !important;
}

.analytics-page .hour-label {
    font-size: 0.7rem !important;
    margin-top: 4px !important;
}

/* Compact page header */
.analytics-page .page-header h1 {
    font-size: 1.6rem !important;
    margin-bottom: 6px !important;
}

.analytics-page .page-header p {
    font-size: 0.85rem !important;
}

.analytics-page .live-indicator {
    width: 8px !important;
    height: 8px !important;
}

/* Compact two-column section */
.analytics-page .two-column-section {
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.analytics-page .two-column-section>.section-card {
    margin-bottom: 0;
}

/* Compact stats list */
.analytics-page .stats-list {
    gap: 8px !important;
}

/* Unified border radius for all elements */
.analytics-page .section-card,
.analytics-page .stat-row,
.analytics-page .bottleneck-card,
.analytics-page .insight-item,
.analytics-page .efficiency-item,
.analytics-page .recommendation-item {
    border-radius: 18px !important;
}

.analytics-page .realtime-compact-item {
    border-radius: 18px !important;
}

/* Performance Layout - 2 Column Grid (top row) */
.performance-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.performance-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.performance-column .compact-section {
    margin-top: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.performance-column .bottleneck-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}

.performance-column .insight-item,
.performance-column .recommendation-item {
    margin-bottom: 0 !important;
}

.performance-column .compact-list {
    gap: 6px !important;
}

.performance-column .compact-section>div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.performance-column .insight-item:last-child,
.performance-column .recommendation-item:last-child {
    margin-bottom: 0 !important;
}

/* Bottom section for efficiency scores */
.performance-bottom-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-default);
}

.performance-bottom-section .compact-subheading {
    margin-bottom: 12px;
}

.performance-bottom-section .compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
}

.performance-bottom-section .compact-card {
    padding: 12px 4px !important;
}

/* Make efficiency grid inside performance column better */
.performance-column .compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 8px !important;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1024px) {
    .performance-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .performance-column .compact-section {
        margin-top: 12px !important;
    }
}

/* ============================================================================
   Donation Page Styles
   ============================================================================ */

/* Donation link in footer */
.donation-link-container {
    margin-top: 16px;
    text-align: center;
}

.donation-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 12px;
    background: transparent;
    border-radius: 12px;
    border-bottom: 1px solid var(--primary);
    transition: all 0.3s ease;
    position: relative;
}


.donation-link .donation-icon {
    font-size: 0.85rem;
}

.donation-link .donation-text {
    text-decoration: none !important;
    font-size: 0.765rem;
    /* 10% smaller than 0.85rem */
}

.donation-link:hover {
    color: var(--primary) !important;
    border-bottom-color: var(--primary);
    background: transparent;
}


/* Donation page */
.donation-header {
    text-align: center;
    margin-bottom: var(--spacing-4xl);
}

.donation-title {
    font-size: var(--font-size-3xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-bottom: var(--spacing-xl);
}

.donation-title::after {
    content: '';
    position: absolute;
    bottom: var(--spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    border-radius: 2px;
}

.donation-description-box {
    background: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: var(--radius-2xl);
    padding: 20px 24px;
    margin: 0 auto;
    max-width: 600px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Light theme: better contrast */
body.light-theme .donation-description-box {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-input) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Dark theme: better contrast */
body:not(.light-theme) .donation-description-box {
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.donation-description {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.8;
    margin: 0;
}

.donation-networks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.donation-network-card {
    background: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    transition: var(--transition-slow);
    direction: ltr;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Light theme: lighter background with better contrast */
body.light-theme .donation-network-card {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-input) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Dark theme: better contrast */
body:not(.light-theme) .donation-network-card {
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.donation-network-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

body.light-theme .donation-network-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.network-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.network-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Light theme: make network icons dark/visible */
body.light-theme .network-icon {
    filter: brightness(0);
    /* Make icons dark/black in light theme */
    opacity: 0.8;
}

body.light-theme .network-icon:hover {
    opacity: 1;
}

.network-icon-ton {
    filter: none;
}

/* Light theme: TON icon should also be dark */
body.light-theme .network-icon-ton {
    filter: brightness(0);
    opacity: 0.8;
}

body.light-theme .network-icon-ton:hover {
    opacity: 1;
}

.network-name {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
    direction: ltr;
    text-align: left;
}

.network-address-container {
    position: relative;
}

.donation-address {
    display: block;
    padding: 12px 16px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 500;
    word-break: break-all;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: all;
    direction: ltr;
    text-align: left;
}

/* Light theme: better contrast */
body.light-theme .donation-address {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-input) !important;
}

/* Dark theme: better contrast */
body:not(.light-theme) .donation-address {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

.donation-address:hover {
    background: var(--bg-input);
    border-color: var(--primary);
    color: var(--text-primary);
    font-weight: 600;
}

.donation-address:active {
    transform: scale(0.98);
}

.donation-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-disabled);
}

.donation-footer {
    text-align: center;
    margin-top: 30px;
}

.donation-footer .btn {
    text-decoration: none;
}

/* Copy toast notification */
.copy-toast {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 12px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    animation: toastSlideIn 0.3s ease;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast-icon {
    color: var(--success);
    font-weight: bold;
    font-size: 16px;
}

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

/* Responsive: Donation networks */
@media (max-width: 768px) {
    .donation-networks {
        grid-template-columns: 1fr;
    }

    .donation-title {
        font-size: 24px;
    }

    .donation-description {
        font-size: 14px;
    }

    /* Ensure donation boxes have full width on mobile (only horizontal) */
    .donation-description-box,
    .donation-network-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* ============================================================================
   Site Header (Logo) - Above cards, Left side
   ============================================================================ */
/* Mobile: minimal padding for simple-page */
@media (max-width: 768px) {
    .simple-page {
        padding: 0 !important;
    }

    /* Reduce result-details-container gap */
    .result-details-container {
        gap: 10px;
        margin-top: 12px;
    }
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    order: 2;
    position: relative;
    padding: 0;
}

.logo-container::after {
    content: none;
}

.logo-link {
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    outline: none;
}

.logo-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: 8px;
}

.logo-link:hover {
    transform: scale(1.05);
}

.logo-link:active {
    transform: scale(0.98);
}

.logo {
    height: 64px;
    width: auto;
    max-width: none;
    display: block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    object-fit: contain;
    margin: 0;
    padding-left: 20px;
    filter: none;
}

.logo-link:hover .logo {
    filter: none;
}

.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

/* In light theme, show black logo and hide white logo */
body.light-theme .logo-light {
    display: none !important;
}

body.light-theme .logo-dark {
    display: block !important;
}

/* Ensure logo is visible in dark theme (default) */
body:not(.light-theme) .logo-light {
    display: block !important;
}

body:not(.light-theme) .logo-dark {
    display: none !important;
}

/* Responsive layout */
@media (max-width: 768px) {
    /* .site-header styles are already defined in earlier media query (line ~3666) */
    /* Duplicate removed to avoid conflicts */

    .logo-link {
        display: inline-block;
    }

    .logo {
        height: 48px;
        padding-left: 12px;
    }

    .logo-container::after,
    .theme-toggle-wrapper::before {
        height: 32px;
        opacity: 0.2;
    }

    .theme-toggle-wrapper {
        padding: 8px 0;
    }
}

/* ============================================================================
   Theme Toggle Switch - Inside cards
   ============================================================================ */
.theme-toggle-wrapper {
    position: relative;
    z-index: 100;
    order: 1;
    /* In RTL, order 1 means visual right */
    padding: 8px 0;
    display: flex;
    align-items: center;
}

.theme-toggle-wrapper::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg,
            transparent,
            var(--primary),
            transparent);
    opacity: 0.3;
    border-radius: 2px;
}

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 64px;
    height: 32px;
    background: var(--primary);
    /* Use primary color for dark theme */
    border: 1px solid var(--border-default);
    /* Match site-wide border */
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 2px;
    box-shadow: none;
    direction: ltr;
    /* Force LTR for toggle switch in RTL page */
    color: white;
    /* Make icons visible on primary background */
    margin-right: 12px;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    outline-color: var(--primary);
}


body.light-theme .theme-toggle-icon.sun {
    opacity: 1;
}

/* Position toggle relative to cards */
.simple-card,
.donation-page,
.section-card,
.card {
    position: relative;
}

/* Analytics page header positioning */
.analytics-page .theme-toggle-wrapper {
    position: relative;
    z-index: 100;
}

/* Monitor page - theme-toggle is now in header */
body.monitor-page .theme-toggle-wrapper,
.container .theme-toggle-wrapper {
    position: relative;
    z-index: 100;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Theme toggle is now in header, no absolute positioning needed */

    .theme-toggle {
        width: 56px;
        height: 28px;
    }

    .theme-toggle::before {
        width: 24px;
        height: 24px;
        left: 2px;
    }

    body:not(.light-theme) .theme-toggle::before {
        transform: translateY(-50%) translateX(calc(56px - 24px - 4px));
        /* Move to right in LTR */
    }

    body.light-theme .theme-toggle::before {
        transform: translateY(-50%) translateX(0);
        /* Move to left in LTR */
    }

    .theme-toggle-icon {
        width: 18px;
        height: 18px;
        font-size: 16px;
        /* Increased size for better visibility on mobile */
        line-height: 1;
    }
}

/* Simple page: header toggle - using transform for positioning */
.simple-page .theme-toggle {
    background: var(--primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border-radius: 999px;
    transition: background-color 0.3s ease;
    width: 56px;
    height: 28px;
    position: relative;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    direction: ltr !important;
}


/* Footer Links */
.footer-links {
    margin: 15px 0;
    text-align: center;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    padding: 5px 10px;
}

.footer-link:hover {
    color: var(--primary-hover);
}

/* Inline Footer Design */
.footer-inline-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    /* Increased gap */
    width: 100%;
}

/* Override existing styles to ensure inline flow */
.platforms-label {
    display: inline-block !important;
    margin: 0 !important;
    white-space: nowrap;
    font-size: 0.9rem !important;
    /* Standardized size */
    font-weight: 500;
}

.platforms-logos {
    display: inline-flex !important;
    gap: 15px !important;
}

.footer-separator {
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    margin: 0 8px;
    /* Increased margin */
}

.contact-link,
.donation-link-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 0.9rem !important;
    /* Standardized size */
}

.contact-link:hover,
.donation-link-inline:hover {
    color: var(--primary-hover) !important;
    transform: translateY(-1px);
}

/* Mobile Responsiveness for Footer */
@media (max-width: 768px) {
    .footer-inline-container {
        flex-direction: column;
        gap: 15px;
    }

    .footer-separator {
        display: none;
    }

    .platforms-label {
        display: block !important;
        margin-bottom: 5px !important;
    }
}

/* Contact Form Styles */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
}

.form-group label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.form-control {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-input);
    border-radius: 16px;
    padding: 16px 20px;
    color: var(--text-primary) !important;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(229, 167, 105, 0.2);
}

.btn-submit {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.btn-submit:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(229, 167, 105, 0.3);
}

/* Success Message Styles */
.success-message {
    text-align: center;
    padding: 40px 20px;
    animation: fadeIn 0.5s ease;
}

.success-message i {
    font-size: 4rem;
    color: var(--success);
    margin-bottom: 20px;
}

.success-message h2 {
    color: var(--text-primary);
    margin-bottom: 15px;
}

.success-message p {
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.btn-home {
    display: inline-block;
    background: var(--bg-subtle);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-home:hover {
    background: var(--border-color);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FAQ Section Styles */
.faq-section {
    width: 100%;
    max-width: 960px;
    margin: 60px auto 40px;
    padding: 0 20px;
}

.faq-title {
    text-align: center;
    color: var(--text-primary);
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--primary);
}

.faq-item[open] {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.faq-question {
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    list-style: none;
    /* Remove default marker */
}

.faq-question::-webkit-details-marker {
    display: none;
    /* Remove default marker in WebKit */
}

.faq-icon {
    color: var(--primary);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 15px 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.8rem;
    border-top: 1px solid transparent;
}

.faq-item[open] .faq-answer {
    border-top-color: var(--border-subtle);
    padding-top: 15px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}