style.css

/* Force light mode implementation */
:root, .dark, body, gradio-app {
    --background-fill-primary: #ffffff !important;
    --background-fill-secondary: #f3f4f6 !important;
    --background-fill-tertiary: #e5e7eb !important;
    --block-background-fill: #ffffff !important;
    --block-border-color: #e5e7eb !important;
    --block-label-text-color: #374151 !important;
    --body-background-fill: #ffffff !important;
    --body-text-color: #1f2937 !important;
    --input-background-fill: #ffffff !important;
    color-scheme: light !important;
}

/* Override dark mode specific styles */
.dark .gradio-container {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

/* Ensure all text is dark and readable */
p, h1, h2, h3, span, label, textarea, .prose {
    color: #1f2937 !important;
}

/* Transcription textboxes */
textarea {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Audio component styling */
.audio-container {
    background-color: #ffffff !important;
}

/* Footer readability */
.footer {
    color: #1f2937 !important;
}
.footer p {
    color: #1f2937 !important;
}

/* Model Card styling */
.model-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff !important; 
}

/* Force Textbox background to white explicitly */
.block.textarea, .block.textbox {
    background: #ffffff !important;
}

/* Ensure model card text is dark */
.model-card h2, .model-card p, .model-card span {
    color: #1f2937 !important;
}

.run-button {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: white !important;
}

/* Fix the specific "Transcription" label element */
span[data-testid="block-info"], .svelte-jdcl7l {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #e5e7eb !important;
}

/* Fix label headers for Audio and Transcription inputs - most aggressive approach */
* [class*="label"], * [class*="Label"], .label, .Label,
.block-label, span.label-wrap, .label-wrap span, label,
.textbox label, .textbox .label-wrap, .textbox .block-label,
.gr-textbox label, .gr-textbox .label-wrap, .gr-textbox .block-label,
[data-testid="textbox"] label, [data-testid="textbox"] .label-wrap,
.gradio-textbox label, .gradio-textbox .label-wrap {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: none !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
    margin-bottom: 8px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* Ensure specific component headers are readable */
.svelte-1b6s6s { 
    /* This targets Gradio specific label classes if needed */
    color: #374151 !important; 
}

/* Title section centering - universal approach */
[data-testid="markdown"] {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

[data-testid="markdown"] > * {
    width: 100% !important;
    max-width: 800px !important;
    text-align: center !important;
}

/* Target any element with title-text class and all its children */
.title-text,
.title-text > *,
.title-text span,
.title-text div {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Force center alignment on all heading and paragraph elements in title */
.title-text h1,
.title-text h2, 
.title-text h3,
.title-text p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
}

.title-text h1 {
    color: #4f46e5 !important;
    margin-bottom: 0.5em !important;
}

.title-text h3 {
    margin-bottom: 1.5em !important;
    color: #6b7280 !important;
}