/* Layout fixed v3 (Branch Optimized) - Logo & Sticky Bar Stable */
:root {
    --primary: #0d9488;
    --primary-hover: #0f766e;
    --secondary: #6366f1;
    --accent: #f43f5e;
    --background: #f0f9ff;
    --surface: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-lg: 1rem;
    --radius-md: 0.75rem;
    --radius-sm: 0.5rem;
    --header-height: 80px;
    --success: #10b981;
    --error: #ef4444;
}

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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--background);
    /* Background image removed in favor of parallax blobs */
    color: var(--text-main);
    line-height: 1.5;
    min-height: 100vh;
    padding: 0; /* Remove body padding to allow full width sticky */
    overflow-x: auto; /* Allow horizontal scroll for zoom/accessibility */
    overflow-y: auto; /* Ensure vertical scroll works */
}

/* Lightbox Styles (Inserted here for certainty) */
.lightbox {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}
.lightbox.visible { opacity: 1; pointer-events: auto; }
.lightbox.hidden { display: none; }
.lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.lightbox img { max-width: 100%; max-height: 85vh; border-radius: 4px; box-shadow: 0 5px 30px rgba(0,0,0,0.5); user-select: none; }
.lightbox-close { position: absolute; top: 20px; right: 30px; width: 44px; height: 44px; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; cursor: pointer; z-index: 1001; transition: background 0.2s; }
.lightbox-close:hover { background: rgba(255,255,255,0.25); }
.lightbox-close::before, .lightbox-close::after { content: ''; position: absolute; width: 24px; height: 2px; background: white; top: 50%; left: 50%; }
.lightbox-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; color: rgba(255,255,255,0.6); border: none; width: 60px; height: 100%; cursor: pointer; z-index: 1001; font-size: 3rem; display: flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; outline: none; }
.lightbox-nav:hover { color: white; background: rgba(255,255,255,0.05); }
.lightbox-nav.prev { left: 0; } .lightbox-nav.prev::after { content: '‹'; }
.lightbox-nav.next { right: 0; } .lightbox-nav.next::after { content: '›'; }
#lightbox-caption { margin-top: 1rem; color: rgba(255,255,255,0.9); font-size: 1.1rem; font-weight: 500; text-align: center; }

html {
    scroll-behavior: smooth;
    overflow-x: auto; /* Allow horizontal scroll for zoom */
}

/* Parallax Background */
.parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.8; /* Increased from 0.6 */
    transition: transform 0.1s linear;
    will-change: transform;
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(99, 102, 241, 0) 70%); /* Increased alpha */
}

.blob-2 {
    bottom: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.35) 0%, rgba(13, 148, 136, 0) 70%); /* Increased alpha */
}

.blob-3 {
    top: 40%;
    left: 40%;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.25) 0%, rgba(244, 63, 94, 0) 70%); /* Increased alpha */
    opacity: 0.6;
}

/* Ensure container allows sticky children */
.app-container {
    max-width: 1000px;
    margin: 1rem auto; /* Reduced from 2rem */
    margin-top: 90px; /* Space for fixed header (70px + 20px gap) */
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.5);
    overflow: visible; /* CRITICAL for sticky */
    transition: max-width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.app-container.expanded {
    max-width: 95%;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    
    /* Fixed Positioning Strategy */
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1000px; /* Match app-container width */
    
    z-index: 1000;
    transition: all 0.3s ease;
    height: 70px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Optional: match container top radius if user wants, or keep square */
}

/* Adjust header width when container expands */
.app-container.expanded header {
    max-width: 95%; /* Match expanded container */
}

/* Logo Styles - RESTORED */
.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--primary);
    text-decoration: none;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-main);
    line-height: 1;
    margin: 0;
}

/* Header Sticky Stats */
.header-sticky-stats {
    display: none; /* Completely remove from layout by default */
    align-items: center;
    gap: 1rem; /* Reduced gap */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    flex: 1;
    justify-content: center;
    /* Prevent stats from taking too much space if controls need it */
    min-width: 0; 
}

body.scrolled .header-sticky-stats,
.header-sticky-stats.visible {
    display: flex; /* Only take space when active */
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
} /* Reduced from 1.5rem */

/* ... existing stats styles ... */

.header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduced from 1.5rem */
    flex-shrink: 0; /* Prevent shrinking */
}

.setting-group {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduced gap */
    background: var(--surface);
    padding: 0.4rem 0.8rem; /* Reduced padding */
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.setting-group label {
    font-weight: 500;
    font-size: 0.8rem; /* Slightly smaller text */
    color: var(--text-muted);
    white-space: nowrap;
}

input[type="range"] {
    width: 80px; /* Reduced width */
    accent-color: var(--primary);
    cursor: pointer;
}

/* Tom Select Integration */
.ts-wrapper {
    width: 90px; /* Reduced width */
    display: inline-block;
}

/* Language Dropdown Wrapper */
.lang-dropdown-wrapper {
    position: relative;
    margin-left: 0.75rem; /* Reduced from 16px */
    flex-shrink: 0;
}
.ts-control {
    border: none;
    background: transparent;
    padding: 0 0.5rem;
    box-shadow: none;
    font-weight: 500;
    color: var(--text-main);
}
.ts-wrapper.single .ts-control:after {
    border-color: #64748b transparent transparent transparent;
}
.ts-dropdown {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-sm);
    z-index: 1000;
}

main {
    padding: 2rem;
}

/* Drop Zone and Progress Bar styles moved to end of file */

/* Sticky bar styles moved to end of file */

/* Scrolled State Overrides */
/* Note: We REMOVED the rule that collapses the drop-zone to prevent flickering */

body.scrolled .sticky-progress-container {
    opacity: 1;
}

/* Sticky bar constraint removed - Header is fixed now */


/* Sticky Carousel */
#carousel-section {
    position: sticky;
    top: 70px; /* Header Height (70px) */
    z-index: 30;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    padding-top: 0.5rem;
    margin-top: 0;
}

/* Removed resizing logic for carousel on scroll to prevent flickering */

.drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /* pointer-events: none; - REMOVE this so we can click if needed, though drag is global */
    pointer-events: auto; 
    transition: all 0.3s ease;
}

.upload-icon {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.drop-zone:hover .upload-icon {
    color: var(--primary);
}

.drop-zone h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-main);
}

.drop-zone p {
    color: var(--text-muted);
}

.stats-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    text-align: center;
    transition: opacity 0.3s ease;
}

.stats-text-container.hidden {
    display: none;
}

.stat-main-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000; /* Pure black as requested */
    margin-bottom: 0.25rem;
    text-shadow: none;
}

.stat-sub-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: #000000; /* Pure black */
    opacity: 0.8;
}



/* Stats Bar */
.stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    animation: slideDown 0.3s ease-out;
}

.stats-bar.hidden {
    display: none;
}

.stats-bar span {
    font-weight: 500;
    color: var(--text-main);
}

.stats-bar .divider {
    margin: 0 1rem;
    color: var(--border);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: white;
    border: none;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.2);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgba(13, 148, 136, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-text {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: 500;
    margin-left: 1rem;
}

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

/* File List */
.file-list {
    display: flex; /* Flex is often lighter than grid for simple lists */
    flex-direction: column;
    gap: 0.5rem;
    contain: content; /* Isolate layout */
}

.file-item {
    display: flex;
    align-items: center;
    background: var(--surface);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
    /* Removed animation fadeIn to prevent jank on insert */
    
    /* Performance */
    contain: content;
    content-visibility: auto;
    contain-intrinsic-size: 80px; /* Reduces layout shift */
}

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

.file-preview-wrapper {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.file-info {
    flex: 1;
    margin-left: 1rem;
    min-width: 0;
}

.file-name {
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.file-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.arrow-icon {
    color: var(--primary);
    opacity: 0.6;
}

.file-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 1rem;
}

.badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: var(--text-muted);
}

.badge.success {
    background: #dcfce7;
    color: #166534;
}

.btn-icon {
    background: white;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: #f0fdfa;
}

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

/* Spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
}

.converting .spinner {
    display: block;
}

.converting .download-btn {
    display: none;
}

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

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

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

/* Responsive */
@media (max-width: 640px) {
    header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stats-bar {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .file-item {
        flex-wrap: wrap;
    }
}

/* Carousel Styling */
.carousel-section {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    animation: slideDown 0.3s ease-out;
}

.carousel-section.hidden {
    display: none;
}

.carousel-track-container {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    margin: 0 1rem;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.carousel-track-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.carousel-track {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
}

.carousel-card {
    min-width: 160px;
    max-width: 160px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: fadeIn 0.3s ease-out;
}

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

.card-image-wrapper {
    position: relative;
    height: 120px;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

.card-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.card-close-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.2s, background 0.2s;
    z-index: 10;
}

.card-close-btn:hover {
    color: var(--accent);
    background: white;
}

.card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.1);
    pointer-events: none;
    transition: background 0.3s;
}

.check-icon {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    width: 40px;
    height: 40px;
    opacity: 1;
    transition: opacity 0.3s;
}

.card-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
}

/* Pending/Processing State */
.carousel-card.pending .card-image-wrapper {
    background: #f0f0f0; 
}
.carousel-card.pending .card-preview {
    opacity: 0.6;
    filter: grayscale(0.5);
    transition: opacity 0.3s;
}
.carousel-card.pending .check-icon {
    display: none; 
}
.carousel-card.pending .card-spinner {
    display: block;
}
.carousel-card.pending .card-download-btn {
    opacity: 0.6;
    pointer-events: none;
    background: var(--text-muted);
}
.carousel-card.pending .card-overlay {
    background: rgba(0,0,0,0.2) !important;
}

.card-info {
    padding: 0.5rem;
}

.card-filename {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    text-align: center;
}

/* Dropdown Menu - 3 COLUMNS & RIGHT ALIGNMENT */
.lang-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 480px; /* Wider for 3 columns */
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    padding: 12px;
    
    /* Animation */
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
    
    display: block;
}

.lang-menu:not(.hidden) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.lang-menu-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    gap: 8px; /* More space */
    padding: 0;
    max-height: 500px;
    overflow-y: auto;
}

.lang-option {
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
    color: var(--text-main);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none !important;
    margin: 0;
}

/* Flag Icons Styling */
.lang-option .fi {
    font-size: 1.25em;
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(0,0,0,0.3);
    min-width: 1.33em;
    flex-shrink: 0;
}

.lang-option:hover {
    background: #f1f5f9;
    border-color: var(--border);
    color: var(--primary);
}

.lang-option.active {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-weight: 600;
}

/* Ensure controls stick to the right */
.header-controls {
    margin-left: auto; /* Push to the right forcefully if flex gap fails */
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* On mobile, revert to less columns */
@media (max-width: 768px) {
    .lang-menu {
        width: 320px;
    }
    .lang-menu-list {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .lang-menu {
        width: 280px;
        right: -10px;
    }
    .lang-menu-list {
        grid-template-columns: 1fr;
    }
}

.card-actions {
    display: flex;
    padding: 0.5rem;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
    justify-content: space-between;
}

.card-download-btn {
    flex: 1;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.2s;
}

.card-download-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.card-settings-btn {
    padding: 0.25rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-settings-btn:hover {
    color: var(--text-main);
    border-color: var(--text-main);
}

.nav-btn {
    background: white;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    flex-shrink: 0;
    z-index: 20;
}

.nav-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* Pie Chart */
.pie-chart-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 1.5rem;
}

.pie-chart {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(var(--primary) var(--p), #e2e8f0 0deg);
    position: relative;
    box-shadow: inset 0 0 0 4px #fff;
    cursor: help;
    transition: --p 0.2s ease;
}

/* Tooltip */
.pie-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 50;
}

.pie-chart-wrapper:hover .pie-tooltip {
    opacity: 1;
}

.dot-compressed {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary);
    margin-right: 4px;
}

.dot-saved {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #cbd5e1;
    margin-right: 4px;
}
/* Big Pie Chart */
.pie-chart-wrapper.large {
    width: 240px;
    height: 240px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Center the wrapper itself in the container */
}



/* Center Text */
/* Center Text */
/* Center Text Container */
.progress-ring-svg-container svg {
    overflow: visible;
    pointer-events: none; /* Ensure SVG doesn't block clicks */
}

/* Center Text Container */
.pie-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%; /* Fill parent */
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary); /* Was primary, ensure it contrasts with white */
    z-index: 30;
    pointer-events: none; /* Let clicks pass to parent .pie-chart */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pie-chart:hover .pie-center-text {
    /* Scale effect on text is fine, but ensure recenter works. 
       Actually with the new parent scale, we don't strictly need to scale text separately 
       if the whole bubble scales. 
       Let's REMOVE text scaling to be safe and avoid double scaling issues or translation errors.
    */
    transform: translate(-50%, -50%); 
}

/* Default Drag & Drop View - Transparent */
#pie-default-content {
    /* No background, just centered icon/text */
    animation: fadeIn 0.5s ease-out;
    color: var(--text-main); /* Ensure visible text */
}

/* Active Stats View - Styled Pill */
/* ID styles removed to allow class-based styling for stats text */
#pie-active-content {
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Removed fixed height/color overrides */
}

#pie-percent {
    font-size: 1.5rem; /* Adjusted from 2.5rem which was huge */
    font-weight: 800;
    line-height: 1;
}

.pie-center-text small {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Progress Ring (SVG Container) */
.progress-ring-svg-container {
    width: 240px;
    height: 240px;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Optional: Apply filter to the whole SVG for liquid feel */
    filter: url(#liquid-glow);
}

/* Ensure SVG overflow is visible for glow/shadows */
.progress-ring-svg-container svg {
    overflow: visible;
}

#progress-circle-inner, #progress-circle-outer {
    transition: opacity 1.5s ease;
}

/* We use SVG strokes now, so we don't need the ::before dot or ::after mask! */
/* Clean and performant */

/* Image Zoom Overlay */
.image-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: overlayFadeIn 0.2s ease-out;
}

.image-zoom-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: scale(0.9);
    animation: imageZoomIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    object-fit: contain;
    pointer-events: none; /* Click goes to overlay to close */
}

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

.pie-chart {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pie-chart:hover {
    transform: scale(1.1); /* Bigger scale */
}
/* Ensure inner text doesn't double scale if needed, or let it scale with parent. 
   If we want just the text to scale more, we can do that too, but scaling parent is best for "circle bigger". 
*/


@keyframes imageZoomIn {
    to { transform: scale(1); }
}

/* Also ensure wrapper has pointer cursor */
.file-preview-wrapper {
    cursor: zoom-in;
}
.pie-chart-wrapper.large .pie-chart {
    width: 210px; 
    height: 210px;
    z-index: 20;
    /* White bubble */
    background-color: var(--surface);
    border-radius: 50%;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15);
    /* Flex center content */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* contain ripples or content */
}


/* 
   Since pie-chart is inside progress-ring, and pie-chart is 200px, 
   progress-ring is 240px. 
   Area between 200px and 240px is visible progress ring.
   Area inside 200px is pie chart.
*/

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

/* Info Section */
.info-section {
    max-width: 1000px;
    margin: 3rem auto;
    padding: 0 1rem;
    /* Initially hidden for typewriter effect */
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.info-card {
    /* Minimalist look - no background/border, just floating text/icon */
    background: transparent;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s;
}

.info-card:hover {
    transform: translateY(-4px);
    /* No shadow/bg on hover, keep it clean */
}

.info-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column; /* Stack icon and text */
    align-items: center;
    gap: 0.5rem;
}

.info-card p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0.8;
}
@property --prog {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --p {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --ring-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #0d9488;
}

.diff-better {
    color: var(--success);
    font-weight: 600;
}

.diff-worse {
    color: var(--error);
    font-weight: 600;
}

/* Pillars / Info Grid */
.info-section {
    padding: 1.5rem 2rem; /* Reduced from 3rem */
    max-width: 1200px;
    margin: 0 auto;
    /* Opacity controlled by JS */
    opacity: 0; 
    transition: opacity 1s ease-out;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns */
    gap: 2rem;
}

/* Responsive Pillars */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.info-card {
    text-align: center;
    padding: 1.5rem;
    /* background: var(--surface);  Optional card background */
    border-radius: var(--radius-lg);
    /* box-shadow: var(--shadow-sm); Optional */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.info-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    visibility: hidden; /* Initial state for typewriter */
    min-height: 1.5em; /* Reserve space to prevent layout jump */
}

.info-card p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    visibility: hidden; /* Initial state for typewriter */
    min-height: 3em;
}

.typewriter-cursor::after {
    content: '|';
    animation: cursorBlink 1s infinite;
    color: var(--primary);
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* SEO Description Section */
.seo-description {
    max-width: 800px;
    margin: 4rem auto 2rem;
    text-align: center;
    padding: 0 1rem;
    animation: fadeIn 0.8s ease-out 0.5s backwards; /* Delay appearance slightly */
}

.seo-description h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1.5rem;
}

.seo-description p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.seo-description strong {
    color: var(--primary);
    font-weight: 600;
}

/* RESTORED MISSING STYLES */

/* Drop Zone */
.drop-zone {
    border: none;
    background: transparent;
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    margin-bottom: 1.5rem;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.drop-zone:hover, .drop-zone.drag-over {
    transform: scale(1.02);
}

/* Sticky Progress Bar System (Moved to Header) */
.sticky-progress-container {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.05);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    overflow: hidden;
    z-index: 100;
}

body.scrolled .sticky-progress-container {
    opacity: 1;
}

.sticky-bar-parsing {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: rgba(250, 204, 21, 0.5);
    width: 0%;
    transition: width 0.2s linear;
    z-index: 1;
}

.sticky-bar-conversion {
    position: absolute;
    top: 0; left: 0; height: 100%;
    width: 0%;
    transition: width 0.1s linear;
    z-index: 2;
    overflow: hidden;
    background: rgba(13, 148, 136, 0.35);
}

.sticky-bar-saved {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    height: 100%;
    background: var(--primary);
    transform-origin: bottom center;
    transform: scaleY(0);
    transition: transform 0.3s ease;
    z-index: 3;
}

.drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    pointer-events: auto; 
    transition: all 0.3s ease;
}

.upload-icon {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.drop-zone:hover .upload-icon {
    color: var(--primary);
}

.drop-zone h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-main);
}

.drop-zone p {
    color: var(--text-muted);
}
/* Force Update */