/* Theme: Hell-Modus – lädt nach Inline-/Brand-Styles */

/* ── Variablen & Basis (Hell, explizit) ── */
html[data-theme="light"] body.convtr-app,
html[data-theme="light"] .convtr-app {
    --cv-bg: #f8fafc;
    --cv-surface: #ffffff;
    --cv-surface-muted: #f1f5f9;
    --cv-border: #cbd5e1;
    --cv-text: #0f172a;
    --cv-text-muted: #475569;
    --cv-header-bg: rgba(248, 250, 252, 0.92);
    --cv-flow-muted: #64748b;
    --cv-flow-active-text: #0f172a;
    --cv-drop-icon-bg: #e2e8f0;
    --cv-disabled-bg: #e2e8f0;
    --cv-disabled-text: #64748b;
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] body.convtr-app,
    html[data-theme="system"] .convtr-app {
        --cv-bg: #f8fafc;
        --cv-surface: #ffffff;
        --cv-surface-muted: #f1f5f9;
        --cv-border: #cbd5e1;
        --cv-text: #0f172a;
        --cv-text-muted: #475569;
        --cv-header-bg: rgba(248, 250, 252, 0.92);
        --cv-flow-muted: #64748b;
        --cv-flow-active-text: #0f172a;
        --cv-drop-icon-bg: #e2e8f0;
        --cv-disabled-bg: #e2e8f0;
        --cv-disabled-text: #64748b;
    }
}

/* ── Gemeinsame Hell-Regeln ── */
html[data-theme="light"] body.convtr-app,
html[data-theme="light"] .convtr-app.gradient-bg,
html[data-theme="light"] body.convtr-app.gradient-bg {
    background-color: var(--cv-bg) !important;
    color: var(--cv-text) !important;
}

html[data-theme="light"] .convtr-app .bg-slate-950,
html[data-theme="light"] .convtr-app .bg-slate-950\/70,
html[data-theme="light"] .convtr-app .bg-slate-950\/95 {
    background-color: var(--cv-bg) !important;
}

html[data-theme="light"] .convtr-app .bg-slate-900\/50,
html[data-theme="light"] .convtr-app .bg-slate-900\/60,
html[data-theme="light"] .convtr-app .bg-slate-900\/40,
html[data-theme="light"] .convtr-app .bg-slate-800,
html[data-theme="light"] .convtr-app .bg-slate-800\/80 {
    background-color: var(--cv-surface-muted) !important;
}

html[data-theme="light"] .convtr-app .settings-panel,
html[data-theme="light"] .convtr-app #mobileBar {
    background-color: var(--cv-surface) !important;
}

html[data-theme="light"] .convtr-app .border-slate-800,
html[data-theme="light"] .convtr-app .border-slate-800\/60,
html[data-theme="light"] .convtr-app .border-slate-700 {
    border-color: var(--cv-border) !important;
}

html[data-theme="light"] .convtr-app .text-slate-300,
html[data-theme="light"] .convtr-app .text-slate-400,
html[data-theme="light"] .convtr-app .text-slate-500,
html[data-theme="light"] .convtr-app .text-slate-600 {
    color: var(--cv-text-muted) !important;
}

html[data-theme="light"] .convtr-app .text-slate-100,
html[data-theme="light"] .convtr-app .text-slate-200 {
    color: var(--cv-text) !important;
}

html[data-theme="light"] .convtr-app .brand-btn,
html[data-theme="light"] .convtr-app .brand-btn .convert-btn-label,
html[data-theme="light"] .convtr-app a.brand-btn {
    color: #fff !important;
}

html[data-theme="light"] .convtr-app .brand-btn:disabled,
html[data-theme="light"] .convtr-app .brand-btn:disabled .convert-btn-label {
    background-color: var(--cv-disabled-bg) !important;
    color: var(--cv-disabled-text) !important;
    box-shadow: none !important;
    filter: none !important;
}

html[data-theme="light"] .convtr-app header {
    background-color: var(--cv-header-bg) !important;
}

html[data-theme="light"] .convtr-app .hero-title {
    background-image: linear-gradient(to right, #0f172a, #334155, #64748b) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

html[data-theme="light"] .convtr-app .flow-step {
    color: var(--cv-flow-muted) !important;
}

html[data-theme="light"] .convtr-app .flow-step-num {
    border-color: var(--cv-border) !important;
    color: var(--cv-text-muted) !important;
    background: var(--cv-surface) !important;
}

html[data-theme="light"] .convtr-app .flow-step-active {
    color: var(--cv-flow-active-text) !important;
}

html[data-theme="light"] .convtr-app .flow-step-active .flow-step-num {
    border-color: rgb(var(--brand-rgb)) !important;
    background: rgba(var(--brand-rgb), 0.12) !important;
    color: rgb(var(--brand-rgb)) !important;
}

html[data-theme="light"] .convtr-app .flow-step-done {
    color: #047857 !important;
}

html[data-theme="light"] .convtr-app .flow-step-done .flow-step-num {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
}

html[data-theme="light"] .convtr-app .flow-connector {
    background: var(--cv-border) !important;
}

html[data-theme="light"] .convtr-app .flow-step-done + .flow-connector,
html[data-theme="light"] .convtr-app .flow-step-active + .flow-connector {
    background: rgba(var(--brand-rgb), 0.35) !important;
}

html[data-theme="light"] .convtr-app .drop-zone:hover {
    background-color: rgba(var(--brand-rgb), 0.06) !important;
}

html[data-theme="light"] .convtr-app .drop-zone-icon-block {
    background-color: var(--cv-drop-icon-bg) !important;
}

html[data-theme="light"] .convtr-app .drop-zone-icon-block svg {
    color: var(--cv-text-muted) !important;
}

html[data-theme="light"] .convtr-app .drop-zone:hover .drop-zone-icon-block {
    background-color: rgba(var(--brand-rgb), 0.1) !important;
}

html[data-theme="light"] .convtr-app .drop-zone:hover .drop-zone-icon-block svg {
    color: rgb(var(--brand-rgb)) !important;
}

html[data-theme="light"] .convtr-app .drop-zone-title {
    color: var(--cv-text) !important;
}

html[data-theme="light"] .convtr-app .drop-zone-folder-btn {
    color: rgb(var(--brand-rgb)) !important;
    border-color: rgba(var(--brand-rgb), 0.35) !important;
    background: var(--cv-surface) !important;
}

html[data-theme="light"] .convtr-app .drop-zone-paste-hint kbd {
    background: var(--cv-surface-muted);
    border-color: var(--cv-border);
    color: var(--cv-text-muted);
}

html[data-theme="light"] .convtr-app #uploadFeedback {
    color: rgb(var(--brand-rgb)) !important;
    background: rgba(var(--brand-rgb), 0.08) !important;
    border-color: rgba(var(--brand-rgb), 0.28) !important;
}

html[data-theme="light"] .convtr-app .format-btn.border-indigo-500 {
    border-color: rgb(var(--brand-rgb)) !important;
    background-color: rgba(var(--brand-rgb), 0.12) !important;
    color: rgb(var(--brand-rgb)) !important;
}

html[data-theme="light"] .convtr-app .format-btn.border-slate-700 {
    border-color: var(--cv-border) !important;
    background-color: var(--cv-surface) !important;
    color: var(--cv-text-muted) !important;
}

html[data-theme="light"] .convtr-app .format-btn.border-slate-700:hover {
    border-color: #94a3b8 !important;
    color: var(--cv-text) !important;
}

html[data-theme="light"] .convtr-app #openSettingsBtn,
html[data-theme="light"] .convtr-app #themeToggle,
html[data-theme="light"] .convtr-app #shortcutsHelpBtn,
html[data-theme="light"] .convtr-app #presetModalCancel,
html[data-theme="light"] .convtr-app #savePresetBtn {
    background-color: var(--cv-surface) !important;
    border-color: var(--cv-border) !important;
    color: var(--cv-text-muted) !important;
}

html[data-theme="light"] .convtr-app #openSettingsBtn:hover,
html[data-theme="light"] .convtr-app #themeToggle:hover,
html[data-theme="light"] .convtr-app #shortcutsHelpBtn:hover,
html[data-theme="light"] .convtr-app #presetModalCancel:hover,
html[data-theme="light"] .convtr-app #savePresetBtn:hover {
    color: var(--cv-text) !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] .convtr-app .text-indigo-400,
html[data-theme="light"] .convtr-app .text-indigo-300 {
    color: rgb(var(--brand-rgb)) !important;
}

html[data-theme="light"] .convtr-app #progressBar,
html[data-theme="light"] .convtr-app #loadingConvertBar {
    background-color: rgb(var(--brand-rgb)) !important;
}

html[data-theme="light"] .convtr-app input.bg-slate-800,
html[data-theme="light"] .convtr-app select.bg-slate-800 {
    background-color: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    border-color: var(--cv-border) !important;
}

html[data-theme="light"] .convtr-app input::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .convtr-app.gradient-bg,
html[data-theme="light"] body.convtr-app.gradient-bg {
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(var(--brand-rgb), 0.12), transparent),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--brand-rgb), 0.06), transparent),
        var(--cv-bg) !important;
}

html[data-theme="light"] .convtr-app .exif-panel {
    background: var(--cv-surface-muted);
    border-color: var(--cv-border);
    color: var(--cv-text-muted);
}

html[data-theme="light"] .convtr-app .exif-panel details summary {
    color: rgb(var(--brand-rgb));
}

html[data-theme="light"] .convtr-app .exif-detail-row {
    border-top-color: var(--cv-border);
}

html[data-theme="light"] .convtr-app .exif-detail-row dd {
    color: var(--cv-text);
}

html[data-theme="light"] .convtr-app .shortcuts-kbd {
    background: var(--cv-surface-muted);
    border-color: var(--cv-border);
    color: var(--cv-text);
}

html[data-theme="light"] .convtr-app .preset-action-btn {
    color: var(--cv-text-muted);
}

html[data-theme="light"] .convtr-app .preset-action-btn:hover:not(:disabled) {
    color: var(--cv-text);
}

html[data-theme="light"] .convtr-app .preset-action-btn-danger:hover:not(:disabled) {
    color: #dc2626;
}

html[data-theme="light"] .convtr-app #presetSection.preset-editing-active {
    background: rgba(var(--brand-rgb), 0.08);
    border-color: rgba(var(--brand-rgb), 0.28);
}

html[data-theme="light"] .convtr-app #presetEditBar {
    background: rgba(var(--brand-rgb), 0.06);
    border-color: rgba(var(--brand-rgb), 0.22);
}

/* ── System-Hell (prefers-color-scheme) ── */
@media (prefers-color-scheme: light) {
    html[data-theme="system"] body.convtr-app,
    html[data-theme="system"] .convtr-app.gradient-bg,
    html[data-theme="system"] body.convtr-app.gradient-bg {
        background-color: var(--cv-bg) !important;
        color: var(--cv-text) !important;
    }

    html[data-theme="system"] .convtr-app .bg-slate-950,
    html[data-theme="system"] .convtr-app .bg-slate-950\/70,
    html[data-theme="system"] .convtr-app .bg-slate-950\/95 {
        background-color: var(--cv-bg) !important;
    }

    html[data-theme="system"] .convtr-app .bg-slate-900\/50,
    html[data-theme="system"] .convtr-app .bg-slate-900\/60,
    html[data-theme="system"] .convtr-app .bg-slate-900\/40,
    html[data-theme="system"] .convtr-app .bg-slate-800,
    html[data-theme="system"] .convtr-app .bg-slate-800\/80 {
        background-color: var(--cv-surface-muted) !important;
    }

    html[data-theme="system"] .convtr-app .settings-panel,
    html[data-theme="system"] .convtr-app #mobileBar {
        background-color: var(--cv-surface) !important;
    }

    html[data-theme="system"] .convtr-app .border-slate-800,
    html[data-theme="system"] .convtr-app .border-slate-800\/60,
    html[data-theme="system"] .convtr-app .border-slate-700 {
        border-color: var(--cv-border) !important;
    }

    html[data-theme="system"] .convtr-app .text-slate-300,
    html[data-theme="system"] .convtr-app .text-slate-400,
    html[data-theme="system"] .convtr-app .text-slate-500,
    html[data-theme="system"] .convtr-app .text-slate-600 {
        color: var(--cv-text-muted) !important;
    }

    html[data-theme="system"] .convtr-app .text-slate-100,
    html[data-theme="system"] .convtr-app .text-slate-200 {
        color: var(--cv-text) !important;
    }

    html[data-theme="system"] .convtr-app .brand-btn,
    html[data-theme="system"] .convtr-app .brand-btn .convert-btn-label,
    html[data-theme="system"] .convtr-app a.brand-btn {
        color: #fff !important;
    }

    html[data-theme="system"] .convtr-app .brand-btn:disabled,
    html[data-theme="system"] .convtr-app .brand-btn:disabled .convert-btn-label {
        background-color: var(--cv-disabled-bg) !important;
        color: var(--cv-disabled-text) !important;
        box-shadow: none !important;
        filter: none !important;
    }

    html[data-theme="system"] .convtr-app header {
        background-color: var(--cv-header-bg) !important;
    }

    html[data-theme="system"] .convtr-app .hero-title {
        background-image: linear-gradient(to right, #0f172a, #334155, #64748b) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }

    html[data-theme="system"] .convtr-app .flow-step {
        color: var(--cv-flow-muted) !important;
    }

    html[data-theme="system"] .convtr-app .flow-step-num {
        border-color: var(--cv-border) !important;
        color: var(--cv-text-muted) !important;
        background: var(--cv-surface) !important;
    }

    html[data-theme="system"] .convtr-app .flow-step-active {
        color: var(--cv-flow-active-text) !important;
    }

    html[data-theme="system"] .convtr-app .flow-step-active .flow-step-num {
        border-color: rgb(var(--brand-rgb)) !important;
        background: rgba(var(--brand-rgb), 0.12) !important;
        color: rgb(var(--brand-rgb)) !important;
    }

    html[data-theme="system"] .convtr-app .flow-step-done {
        color: #047857 !important;
    }

    html[data-theme="system"] .convtr-app .flow-step-done .flow-step-num {
        border-color: #10b981 !important;
        background: rgba(16, 185, 129, 0.12) !important;
        color: #059669 !important;
    }

    html[data-theme="system"] .convtr-app .flow-connector {
        background: var(--cv-border) !important;
    }

    html[data-theme="system"] .convtr-app .flow-step-done + .flow-connector,
    html[data-theme="system"] .convtr-app .flow-step-active + .flow-connector {
        background: rgba(var(--brand-rgb), 0.35) !important;
    }

    html[data-theme="system"] .convtr-app .drop-zone:hover {
        background-color: rgba(var(--brand-rgb), 0.06) !important;
    }

    html[data-theme="system"] .convtr-app .drop-zone-icon-block {
        background-color: var(--cv-drop-icon-bg) !important;
    }

    html[data-theme="system"] .convtr-app .drop-zone-icon-block svg {
        color: var(--cv-text-muted) !important;
    }

    html[data-theme="system"] .convtr-app .drop-zone:hover .drop-zone-icon-block {
        background-color: rgba(var(--brand-rgb), 0.1) !important;
    }

    html[data-theme="system"] .convtr-app .drop-zone:hover .drop-zone-icon-block svg {
        color: rgb(var(--brand-rgb)) !important;
    }

    html[data-theme="system"] .convtr-app .drop-zone-title {
        color: var(--cv-text) !important;
    }

    html[data-theme="system"] .convtr-app .drop-zone-folder-btn {
        color: rgb(var(--brand-rgb)) !important;
        border-color: rgba(var(--brand-rgb), 0.35) !important;
        background: var(--cv-surface) !important;
    }

    html[data-theme="system"] .convtr-app .drop-zone-paste-hint kbd {
        background: var(--cv-surface-muted);
        border-color: var(--cv-border);
        color: var(--cv-text-muted);
    }

    html[data-theme="system"] .convtr-app #uploadFeedback {
        color: rgb(var(--brand-rgb)) !important;
        background: rgba(var(--brand-rgb), 0.08) !important;
        border-color: rgba(var(--brand-rgb), 0.28) !important;
    }

    html[data-theme="system"] .convtr-app .format-btn.border-indigo-500 {
        border-color: rgb(var(--brand-rgb)) !important;
        background-color: rgba(var(--brand-rgb), 0.12) !important;
        color: rgb(var(--brand-rgb)) !important;
    }

    html[data-theme="system"] .convtr-app .format-btn.border-slate-700 {
        border-color: var(--cv-border) !important;
        background-color: var(--cv-surface) !important;
        color: var(--cv-text-muted) !important;
    }

    html[data-theme="system"] .convtr-app .format-btn.border-slate-700:hover {
        border-color: #94a3b8 !important;
        color: var(--cv-text) !important;
    }

    html[data-theme="system"] .convtr-app #openSettingsBtn,
    html[data-theme="system"] .convtr-app #themeToggle,
    html[data-theme="system"] .convtr-app #shortcutsHelpBtn,
    html[data-theme="system"] .convtr-app #presetModalCancel,
    html[data-theme="system"] .convtr-app #savePresetBtn {
        background-color: var(--cv-surface) !important;
        border-color: var(--cv-border) !important;
        color: var(--cv-text-muted) !important;
    }

    html[data-theme="system"] .convtr-app #openSettingsBtn:hover,
    html[data-theme="system"] .convtr-app #themeToggle:hover,
    html[data-theme="system"] .convtr-app #shortcutsHelpBtn:hover,
    html[data-theme="system"] .convtr-app #presetModalCancel:hover,
    html[data-theme="system"] .convtr-app #savePresetBtn:hover {
        color: var(--cv-text) !important;
        border-color: #94a3b8 !important;
    }

    html[data-theme="system"] .convtr-app .text-indigo-400,
    html[data-theme="system"] .convtr-app .text-indigo-300 {
        color: rgb(var(--brand-rgb)) !important;
    }

    html[data-theme="system"] .convtr-app #progressBar,
    html[data-theme="system"] .convtr-app #loadingConvertBar {
        background-color: rgb(var(--brand-rgb)) !important;
    }

    html[data-theme="system"] .convtr-app input.bg-slate-800,
    html[data-theme="system"] .convtr-app select.bg-slate-800 {
        background-color: var(--cv-surface) !important;
        color: var(--cv-text) !important;
        border-color: var(--cv-border) !important;
    }

    html[data-theme="system"] .convtr-app input::placeholder {
        color: #94a3b8 !important;
    }

    html[data-theme="system"] .convtr-app.gradient-bg,
    html[data-theme="system"] body.convtr-app.gradient-bg {
        background:
            radial-gradient(ellipse 80% 60% at 50% -20%, rgba(var(--brand-rgb), 0.12), transparent),
            radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--brand-rgb), 0.06), transparent),
            var(--cv-bg) !important;
    }

    html[data-theme="system"] .convtr-app .exif-panel {
        background: var(--cv-surface-muted);
        border-color: var(--cv-border);
        color: var(--cv-text-muted);
    }

    html[data-theme="system"] .convtr-app .exif-panel details summary {
        color: rgb(var(--brand-rgb));
    }

    html[data-theme="system"] .convtr-app .exif-detail-row {
        border-top-color: var(--cv-border);
    }

    html[data-theme="system"] .convtr-app .exif-detail-row dd {
        color: var(--cv-text);
    }

    html[data-theme="system"] .convtr-app .shortcuts-kbd {
        background: var(--cv-surface-muted);
        border-color: var(--cv-border);
        color: var(--cv-text);
    }
}

/* Theme-Toggle Icons */
html[data-theme="light"] .theme-icon-dark,
html[data-theme="dark"] .theme-icon-light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .theme-icon-light { display: none; }
    html[data-theme="system"] .theme-icon-dark { display: block; }
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] .theme-icon-light { display: block; }
    html[data-theme="system"] .theme-icon-dark { display: none; }
}

/* ── Barrierefreiheit ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 200;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.5rem 1rem;
    clip: auto;
    overflow: visible;
    background: rgb(var(--brand-rgb, 99 102 241));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.exif-panel details summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: #a5b4fc;
}

.exif-panel details summary::-webkit-details-marker { display: none; }

.exif-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 2px 0;
    border-top: 1px solid rgba(51, 65, 85, 0.5);
}

.exif-detail-row dt { color: #64748b; flex-shrink: 0; }
.exif-detail-row dd { text-align: right; margin: 0; }

#shortcutsModal.open { display: flex !important; }

@media (prefers-reduced-motion: reduce) {
    .convtr-app *,
    .convtr-app *::before,
    .convtr-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}