style.css

:root {
    /* Apple-inspired color system */
    --blue: #007AFF;
    --blue-dark: #0051D5;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --green: #34D399;
    --orange: #FB923C;
    --red: #EF4444;
    --purple: #A78BFA;
    --white: #FFFFFF;
    --black: #000000;
    
   Copied /* Spacing scale (8px base) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;

/* Border radius */
--radius-sm: 0.375rem;
--radius: 0.75rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;

/* Typography scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

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

body {    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;    background: var(--gray-50);    color: var(--gray-900);    line-height: 1.6;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}
/* Header */.header {    background: rgba(255, 255, 255, 0.95);    backdrop-filter: saturate(180%) blur(20px);    -webkit-backdrop-filter: saturate(180%) blur(20px);    border-bottom: 1px solid var(--gray-200);    position: sticky;    top: 0;    z-index: 1000;}
.header-content {    max-width: 1200px;    margin: 0 auto;    padding: var(--space-4) var(--space-6);    display: flex;    justify-content: space-between;    align-items: center;}
.logo {    display: flex;    align-items: center;    gap: var(--space-3);    font-size: var(--text-2xl);    font-weight: 600;    color: var(--gray-900);}
.precision-indicator {    display: flex;    align-items: center;    gap: var(--space-2);    padding: var(--space-2) var(--space-4);    background: var(--gray-100);    border-radius: var(--radius-xl);    font-size: var(--text-sm);    font-weight: 500;    color: var(--gray-600);}
/* Main Container */.main-container {    max-width: 1200px;    margin: 0 auto;    padding: var(--space-8) var(--space-6);}
/* Upload Grid */.upload-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));    gap: var(--space-6);    margin-bottom: var(--space-12);}
.upload-card {    background: var(--white);    border-radius: var(--radius-xl);    padding: var(--space-6);    box-shadow: var(--shadow);    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.upload-card:hover {    transform: translateY(-2px);    box-shadow: var(--shadow-lg);}
.section-title {    font-size: var(--text-xl);    font-weight: 600;    margin-bottom: var(--space-4);    display: flex;    align-items: center;    gap: var(--space-2);}
.precision-badge,.audio-badge {    background: var(--blue);    color: var(--white);    padding: var(--space-1) var(--space-3);    border-radius: var(--radius-sm);    font-size: var(--text-xs);    font-weight: 600;    text-transform: uppercase;    letter-spacing: 0.05em;}
.audio-badge {    background: var(--orange);}
/* Upload Zone */.upload-zone {    border: 2px dashed var(--gray-300);    border-radius: var(--radius-lg);    padding: var(--space-8) var(--space-6);    text-align: center;    cursor: pointer;    transition: all 0.2s ease;    background: var(--gray-50);}
.upload-zone:hover {    border-color: var(--blue);    background: rgba(0, 122, 255, 0.02);}
.upload-zone.dragover {    border-color: var(--blue);    background: rgba(0, 122, 255, 0.05);    transform: scale(1.01);}
.upload-icon {    font-size: var(--text-4xl);    color: var(--gray-400);    margin-bottom: var(--space-4);}
/* File List */.file-list {    margin-top: var(--space-4);    max-height: 200px;    overflow-y: auto;}
.file-item {    display: flex;    justify-content: space-between;    align-items: center;    padding: var(--space-3) var(--space-4);    background: var(--gray-50);    border-radius: var(--radius);    margin-bottom: var(--space-2);    transition: all 0.2s ease;}
.file-item:hover {    background: var(--gray-100);}
.file-info {    display: flex;    align-items: center;    gap: var(--space-3);}
.file-status {    width: 6px;    height: 6px;    border-radius: 50%;    background: var(--green);}
.file-remove {    background: none;    border: none;    color: var(--gray-400);    cursor: pointer;    padding: var(--space-2);    border-radius: var(--radius-sm);    transition: all 0.2s ease;}
.file-remove:hover {    color: var(--red);    background: rgba(239, 68, 68, 0.1);}
/* Control Panel */.control-panel {    background: var(--white);    border-radius: var(--radius-xl);    padding: var(--space-8);    margin-bottom: var(--space-8);    box-shadow: var(--shadow);}
.info-banner {    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));    border: 1px solid var(--gray-200);    border-radius: var(--radius-lg);    padding: var(--space-6);    margin-bottom: var(--space-6);}
.info-banner h3 {    color: var(--gray-900);    margin-bottom: var(--space-2);    font-weight: 600;    display: flex;    align-items: center;    gap: var(--space-2);}
.info-banner p {    color: var(--gray-600);    font-size: var(--text-sm);}
/* Audience Selector */.audience-selector {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));    gap: var(--space-4);    margin-bottom: var(--space-6);}
.audience-option {    padding: var(--space-6);    background: var(--gray-50);    border: 2px solid transparent;    border-radius: var(--radius-lg);    cursor: pointer;    transition: all 0.2s ease;}
.audience-option:hover {    background: var(--gray-100);    border-color: var(--gray-300);}
.audience-option.selected {    background: rgba(0, 122, 255, 0.05);    border-color: var(--blue);}
.audience-title {    font-weight: 600;    font-size: var(--text-lg);    margin-bottom: var(--space-2);    display: flex;    align-items: center;    gap: var(--space-2);}
.audience-desc {    font-size: var(--text-sm);    color: var(--gray-600);}
/* Analyze Button */.analyze-btn {    width: 100%;    background: var(--blue);    color: var(--white);    border: none;    padding: var(--space-4) var(--space-6);    font-size: var(--text-lg);    font-weight: 600;    border-radius: var(--radius-lg);    cursor: pointer;    transition: all 0.2s ease;    display: flex;    align-items: center;    justify-content: center;    gap: var(--space-2);}
.analyze-btn:hover:not(:disabled) {    background: var(--blue-dark);    transform: translateY(-1px);    box-shadow: var(--shadow-lg);}
.analyze-btn:disabled {    opacity: 0.6;    cursor: not-allowed;}
/* Loading Section */.loading-section {    display: none;    text-align: center;    padding: var(--space-12);    background: var(--white);    border-radius: var(--radius-xl);    margin-bottom: var(--space-8);    box-shadow: var(--shadow);}
.loading-section.active {    display: block;}
.progress-bar {    width: 100%;    height: 4px;    background: var(--gray-200);    border-radius: var(--radius-sm);    overflow: hidden;    margin: var(--space-6) 0;}
.progress-fill {    height: 100%;    background: var(--blue);    border-radius: var(--radius-sm);    transition: width 0.3s ease;}
.analysis-steps {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));    gap: var(--space-4);    margin-top: var(--space-6);}
.step-card {    padding: var(--space-4);    background: var(--gray-50);    border-radius: var(--radius);    border: 1px solid var(--gray-200);    transition: all 0.2s ease;    text-align: center;}
.step-card.active {    border-color: var(--blue);    background: rgba(0, 122, 255, 0.05);}
.step-card.completed {    border-color: var(--green);    background: rgba(52, 211, 153, 0.05);}
/* Results Section */.results-section {    display: none;    background: var(--white);    border-radius: var(--radius-xl);    padding: var(--space-8);    box-shadow: var(--shadow-xl);    border: 1px solid var(--gray-200);}
.results-section.active {    display: block;    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
@keyframes slideIn {    from {        opacity: 0;        transform: translateY(20px);    }    to {        opacity: 1;        transform: translateY(0);    }}
/* Stats Grid */.stats-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));    gap: var(--space-4);    margin: var(--space-6) 0;}
.stat-card {    background: var(--gray-50);    padding: var(--space-6);    border-radius: var(--radius-lg);    text-align: center;    border: 1px solid var(--gray-200);    transition: all 0.2s ease;}
.stat-card:hover {    transform: translateY(-2px);    box-shadow: var(--shadow);}
.stat-number {    font-size: var(--text-3xl);    font-weight: 700;    color: var(--blue);}
.stat-label {    font-size: var(--text-sm);    color: var(--gray-600);    margin-top: var(--space-2);    text-transform: uppercase;    letter-spacing: 0.05em;}
/* Timeline */.timeline-container {    background: var(--gray-50);    border-radius: var(--radius-lg);    padding: var(--space-6);    margin: var(--space-6) 0;    border: 1px solid var(--gray-200);}
.timeline-header {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: var(--space-4);}
.timeline-ruler {    height: 40px;    background: linear-gradient(90deg, var(--gray-100), var(--gray-200));    border-radius: var(--radius);    position: relative;    margin-bottom: var(--space-6);}
.timeline-takes {    position: relative;    min-height: 100px;}
.timeline-take {    position: absolute;    height: 32px;    background: var(--blue);    border-radius: var(--radius-sm);    display: flex;    align-items: center;    padding: 0 var(--space-3);    color: var(--white);    font-weight: 500;    font-size: var(--text-xs);    cursor: pointer;    transition: all 0.2s ease;}
.timeline-take:hover {    transform: scale(1.02);    box-shadow: var(--shadow-md);}
.timeline-take.audio-track {    background: var(--orange);    height: 24px;}
.timeline-take.grouped {    background: var(--purple);    height: 40px;}
.timeline-take.missing {    background: var(--red);    opacity: 0.7;}
/* Script Blocks */.blocks-container {    margin-top: var(--space-8);}
.script-group {    background: var(--white);    border-radius: var(--radius-xl);    margin-bottom: var(--space-6);    overflow: hidden;    border: 1px solid var(--gray-200);    transition: all 0.2s ease;}
.script-group:hover {    box-shadow: var(--shadow);}
.group-header {    background: var(--gray-50);    padding: var(--space-4) var(--space-6);    border-bottom: 1px solid var(--gray-200);    display: flex;    justify-content: space-between;    align-items: center;}
.group-info {    display: flex;    align-items: center;    gap: var(--space-3);}
.group-badge {    background: var(--purple);    color: var(--white);    padding: var(--space-2) var(--space-4);    border-radius: var(--radius-sm);    font-weight: 600;    font-size: var(--text-sm);}
.group-single .group-badge {    background: var(--green);}
.flow-score {    display: flex;    align-items: center;    gap: var(--space-2);    padding: var(--space-2) var(--space-4);    background: var(--gray-100);    border-radius: var(--radius-xl);    font-weight: 500;    color: var(--gray-700);}
.script-block {    padding: var(--space-6);    border-left: 3px solid var(--blue);    transition: all 0.2s ease;}
.script-block:not(:last-child) {    border-bottom: 1px solid var(--gray-100);}
.script-block:hover {    background: var(--gray-50);}
.script-block.missing-take {    border-left-color: var(--red);    background: rgba(239, 68, 68, 0.02);}
.block-header {    display: flex;    justify-content: space-between;    align-items: flex-start;    margin-bottom: var(--space-4);}
.block-number {    background: var(--blue);    color: var(--white);    padding: var(--space-1) var(--space-3);    border-radius: var(--radius-sm);    font-weight: 600;    font-size: var(--text-sm);}
.script-block.missing-take .block-number {    background: var(--red);}
.precision-score {    display: flex;    align-items: center;    gap: var(--space-2);    padding: var(--space-1) var(--space-3);    background: var(--gray-100);    border-radius: var(--radius-sm);    font-weight: 500;    color: var(--green);    font-size: var(--text-sm);}
.script-text {    font-size: var(--text-base);    line-height: 1.7;    margin-bottom: var(--space-4);    background: var(--gray-50);    padding: var(--space-4);    border-radius: var(--radius);    border-left: 3px solid var(--blue);}
.script-block.missing-take .script-text {    border-left-color: var(--red);}
/* Audio Waveform */.audio-waveform {    background: var(--gray-900);    border-radius: var(--radius);    padding: var(--space-3);    margin: var(--space-4) 0;    height: 48px;    position: relative;    overflow: hidden;}
.waveform-bars {    display: flex;    align-items: flex-end;    height: 100%;    gap: 1px;}
.waveform-bar {    flex: 1;    background: var(--orange);    border-radius: 1px 1px 0 0;    transition: height 0.2s ease;}
/* Take Selection */.take-selection {    display: grid;    grid-template-columns: 1fr 2fr;    gap: var(--space-6);    margin-top: var(--space-6);}
.take-video-container {    background: var(--gray-900);    border-radius: var(--radius-lg);    overflow: hidden;    position: relative;}
.take-video {    width: 100%;    height: 180px;    object-fit: cover;}
.take-overlay {    position: absolute;    top: var(--space-3);    right: var(--space-3);    background: var(--green);    color: var(--white);    padding: var(--space-1) var(--space-3);    border-radius: var(--radius-sm);    font-weight: 600;    font-size: var(--text-xs);}
.take-details {    background: var(--gray-50);    border-radius: var(--radius-lg);    padding: var(--space-6);}
.take-metrics {    display: grid;    grid-template-columns: repeat(2, 1fr);    gap: var(--space-3);    margin-top: var(--space-4);}
.metric-item {    display: flex;    justify-content: space-between;    padding: var(--space-3);    background: var(--white);    border-radius: var(--radius);    font-size: var(--text-sm);}
.metric-label {    color: var(--gray-600);}
.metric-value {    font-weight: 600;    color: var(--blue);}
/* Export Section */.export-section {    margin-top: var(--space-8);    padding: var(--space-6);    background: var(--gray-50);    border-radius: var(--radius-xl);    border: 2px dashed var(--gray-300);}
.export-buttons {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));    gap: var(--space-3);    margin-top: var(--space-4);}
.export-btn {    background: var(--white);    color: var(--gray-900);    border: 1px solid var(--gray-300);    padding: var(--space-3) var(--space-4);    border-radius: var(--radius-lg);    cursor: pointer;    font-weight: 500;    transition: all 0.2s ease;    display: flex;    align-items: center;    justify-content: center;    gap: var(--space-2);}
.export-btn:hover {    background: var(--gray-900);    color: var(--white);    border-color: var(--gray-900);}
.export-btn:disabled {    opacity: 0.5;    cursor: not-allowed;}
/* Small indicators */.precision-indicator-small {    display: inline-flex;    align-items: center;    gap: var(--space-1);    padding: var(--space-1) var(--space-2);    background: var(--gray-100);    border-radius: var(--radius-sm);    font-size: var(--text-xs);    font-weight: 500;    color: var(--green);}
.audio-indicator-small {    display: inline-flex;    align-items: center;    gap: var(--space-1);    padding: var(--space-1) var(--space-2);    background: var(--gray-100);    border-radius: var(--radius-sm);    font-size: var(--text-xs);    font-weight: 500;    color: var(--orange);}
/* SRT Preview */.srt-preview {    background: var(--gray-50);    border: 1px solid var(--gray-200);    border-radius: var(--radius-lg);    padding: var(--space-4);    margin-top: var(--space-4);    max-height: 200px;    overflow-y: auto;    font-family: 'SF Mono', Monaco, Consolas, monospace;    font-size: var(--text-sm);}
.srt-preview h4 {    margin-bottom: var(--space-3);    color: var(--gray-900);    font-weight: 600;    display: flex;    align-items: center;    gap: var(--space-2);}
.srt-block {    margin-bottom: var(--space-2);    padding: var(--space-3);    background: var(--white);    border-radius: var(--radius);    border-left: 3px solid var(--blue);}
/* Whisper Status */.whisper-status {    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));    border: 1px solid var(--gray-200);    border-radius: var(--radius-lg);    padding: var(--space-6);    margin: var(--space-6) 0;    text-align: center;}
.whisper-status h3 {    color: var(--gray-900);    margin-bottom: var(--space-4);    font-weight: 600;    display: flex;    align-items: center;    justify-content: center;    gap: var(--space-2);}
.whisper-metrics {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));    gap: var(--space-3);    margin-top: var(--space-4);}
.whisper-metric {    background: var(--white);    padding: var(--space-4);    border-radius: var(--radius);    text-align: center;}
.whisper-metric-value {    font-size: var(--text-2xl);    font-weight: 700;    color: var(--blue);}
.whisper-metric-label {    font-size: var(--text-xs);    color: var(--gray-600);    margin-top: var(--space-2);    text-transform: uppercase;    letter-spacing: 0.05em;}
/* Modals */.video-preview-modal,.export-progress {    display: none;    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.8);    z-index: 10000;}
.video-preview-modal.active,.export-progress.active {    display: flex;    align-items: center;    justify-content: center;}
.preview-content {    background: var(--white);    border-radius: var(--radius-xl);    padding: var(--space-6);    max-width: 1000px;    width: 90%;    max-height: 90vh;    overflow-y: auto;}
.preview-header {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: var(--space-6);}
.preview-header button {    background: none;    border: none;    color: var(--gray-600);    font-size: var(--text-xl);    cursor: pointer;    padding: var(--space-2);}
.preview-video-container {    background: var(--gray-900);    border-radius: var(--radius-lg);    overflow: hidden;    margin-bottom: var(--space-6);}
.preview-video {    width: 100%;    max-height: 400px;    object-fit: contain;}
.preview-controls {    display: flex;    gap: var(--space-3);    justify-content: center;    flex-wrap: wrap;}
.export-progress {    padding: var(--space-6);    background: var(--white);    border-radius: var(--radius-xl);    min-width: 300px;}
/* Additional utility classes */.flow-indicator {    display: inline-flex;    align-items: center;    gap: var(--space-1);    padding: var(--space-1) var(--space-2);    background: var(--gray-100);    border-radius: var(--radius-sm);    font-size: var(--text-xs);    font-weight: 500;    color: var(--purple);}
.transcription-status {    display: none;    background: var(--gray-50);    border: 1px solid var(--gray-200);    border-radius: var(--radius-lg);    padding: var(--space-4);    margin: var(--space-4) 0;    text-align: center;}
.transcription-status.active {    display: block;}
.missing-take-warning {    background: rgba(239, 68, 68, 0.05);    border: 1px solid var(--red);    border-radius: var(--radius-lg);    padding: var(--space-4);    margin-top: var(--space-4);    color: var(--red);}
.audio-sync-indicator {    display: inline-flex;    align-items: center;    gap: var(--space-2);    padding: var(--space-2) var(--space-3);    background: var(--gray-100);    border-radius: var(--radius-xl);    font-weight: 500;    color: var(--orange);    font-size: var(--text-sm);}
/* Error and warning states */.error-indicator {    color: var(--red);}
.warning-indicator {    color: var(--orange);}
/* Responsive Design */@media (max-width: 1024px) {    .upload-grid {        grid-template-columns: repeat(2, 1fr);    }
   Copied .take-selection {
    grid-template-columns: 1fr;
} }
@media (max-width: 768px) {    .header-content {        padding: var(--space-3) var(--space-4);    }
   Copied .main-container {
    padding: var(--space-6) var(--space-4);
}

.upload-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.audience-selector {
    grid-template-columns: 1fr;
}

.export-buttons {
    grid-template-columns: 1fr;
}

.stats-grid {
    grid-template-columns: repeat(2, 1fr);
} }
@media (max-width: 480px) {    .logo {        font-size: var(--text-lg);    }
   Copied .section-title {
    font-size: var(--text-lg);
}

.stats-grid {
    grid-template-columns: 1fr;
}

.take-metrics {
    grid-template-columns: 1fr;
} }