/* Theme: Hell-Modus (data-theme-resolved via theme.js) */

/* ── Design-Tokens (Hell) ── */
html[data-theme-resolved="light"] body.convtr-app,
html[data-theme-resolved="light"] .convtr-app {
    --cv-bg: #f4f4f5;
    --cv-surface: #ffffff;
    --cv-surface-muted: #fafafa;
    --cv-surface-inset: #f4f4f5;
    --cv-border: #e4e4e7;
    --cv-border-strong: #d4d4d8;
    --cv-text: #18181b;
    --cv-text-muted: #52525b;
    --cv-text-subtle: #71717a;
    --cv-header-bg: rgba(255, 255, 255, 0.88);
    --cv-header-border: rgba(24, 24, 27, 0.06);
    --cv-flow-muted: #71717a;
    --cv-flow-active-text: #18181b;
    --cv-drop-icon-bg: #f4f4f5;
    --cv-drop-zone-bg: #fafafa;
    --cv-disabled-bg: #e4e4e7;
    --cv-disabled-text: #a1a1aa;
    --cv-shadow-sm: 0 1px 2px rgb(24 24 27 / 0.05);
    --cv-shadow-md: 0 4px 16px rgb(24 24 27 / 0.07);
    --cv-shadow-lg: 0 12px 32px rgb(24 24 27 / 0.08);
    --cv-accent-soft: color-mix(in srgb, rgb(var(--brand-rgb)) 9%, white);
    --cv-accent-muted: color-mix(in srgb, rgb(var(--brand-rgb)) 14%, white);
    --cv-success-text: #047857;
    --cv-success-bg: #ecfdf5;
    --cv-success-border: #a7f3d0;
    --cv-warning-text: #b45309;
    --cv-warning-bg: #fffbeb;
    --cv-warning-border: #fde68a;
}

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

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

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

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

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

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

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

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

html[data-theme-resolved="light"] .convtr-app .brand-btn:disabled,
html[data-theme-resolved="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-resolved="light"] .convtr-app header {
    background-color: var(--cv-header-bg) !important;
}

html[data-theme-resolved="light"] .convtr-app .hero-title {
    background-image: linear-gradient(
        115deg,
        var(--cv-text) 0%,
        color-mix(in srgb, rgb(var(--brand-rgb)) 45%, var(--cv-text)) 55%,
        var(--cv-text-subtle) 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

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

html[data-theme-resolved="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-resolved="light"] .convtr-app .flow-step-active {
    color: var(--cv-flow-active-text) !important;
}

html[data-theme-resolved="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-resolved="light"] .convtr-app .flow-step-done {
    color: var(--cv-success-text) !important;
}

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

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

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

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

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

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

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

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

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

html[data-theme-resolved="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-resolved="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-resolved="light"] .convtr-app #uploadFeedback.upload-feedback--info {
    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-resolved="light"] .convtr-app #uploadFeedback.upload-feedback--error {
    color: #991b1b !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    box-shadow: 0 4px 16px rgb(239 68 68 / 0.1);
}
html[data-theme-resolved="light"] .convtr-app #uploadFeedback.upload-feedback--error .upload-feedback-icon,
html[data-theme-resolved="light"] .convtr-app #uploadFeedback.upload-feedback--error .upload-feedback-dismiss {
    color: #b91c1c;
}
html[data-theme-resolved="light"] .convtr-app #uploadFeedback.upload-feedback--error .upload-feedback-dismiss {
    background: rgb(254 226 226);
    border-color: #fecaca;
}
html[data-theme-resolved="light"] .convtr-app #errorArea.error-area-file-size {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fca5a5;
    box-shadow: 0 4px 16px rgb(239 68 68 / 0.08);
}

html[data-theme-resolved="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-resolved="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-resolved="light"] .convtr-app .format-btn.border-slate-700:hover {
    border-color: var(--cv-border-strong) !important;
    color: var(--cv-text) !important;
    background-color: var(--cv-surface-muted) !important;
}

html[data-theme-resolved="light"] .convtr-app #openSettingsBtn,
html[data-theme-resolved="light"] .convtr-app #themeToggle,
html[data-theme-resolved="light"] .convtr-app #shortcutsHelpBtn,
html[data-theme-resolved="light"] .convtr-app #presetModalCancel,
html[data-theme-resolved="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-resolved="light"] .convtr-app #openSettingsBtn:hover,
html[data-theme-resolved="light"] .convtr-app #themeToggle:hover,
html[data-theme-resolved="light"] .convtr-app #shortcutsHelpBtn:hover,
html[data-theme-resolved="light"] .convtr-app #presetModalCancel:hover,
html[data-theme-resolved="light"] .convtr-app #savePresetBtn:hover {
    color: var(--cv-text) !important;
    border-color: var(--cv-border-strong) !important;
    background-color: var(--cv-accent-soft) !important;
}

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

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

html[data-theme-resolved="light"] .convtr-app input.bg-slate-800,
html[data-theme-resolved="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-resolved="light"] .convtr-app input::placeholder {
    color: var(--cv-text-subtle) !important;
}

html[data-theme-resolved="light"] .convtr-app.gradient-bg,
html[data-theme-resolved="light"] body.convtr-app.gradient-bg {
    background:
        radial-gradient(ellipse 85% 55% at 50% -15%, color-mix(in srgb, rgb(var(--brand-rgb)) 14%, white), transparent 72%),
        radial-gradient(ellipse 50% 35% at 92% 55%, color-mix(in srgb, rgb(var(--brand-rgb)) 6%, white), transparent),
        var(--cv-bg) !important;
}

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

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

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

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

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

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

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

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

html[data-theme-resolved="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-resolved="light"] .convtr-app #presetEditBar {
    background: var(--cv-accent-soft);
    border-color: color-mix(in srgb, rgb(var(--brand-rgb)) 22%, var(--cv-border));
}

/* ── Hell: Panels, Karten & Akzente (ergänzend) ── */
html[data-theme-resolved="light"] .convtr-app .bg-slate-900,
html[data-theme-resolved="light"] .convtr-app .bg-slate-900\/60,
html[data-theme-resolved="light"] .convtr-app .bg-slate-900\/50 {
    background-color: var(--cv-surface) !important;
    box-shadow: var(--cv-shadow-sm);
}

html[data-theme-resolved="light"] .convtr-app .bg-slate-950\/95 {
    background-color: color-mix(in srgb, var(--cv-surface) 95%, transparent) !important;
    backdrop-filter: blur(12px);
}

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

html[data-theme-resolved="light"] .convtr-app header {
    border-bottom: 1px solid var(--cv-header-border);
    box-shadow: var(--cv-shadow-sm);
}

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

html[data-theme-resolved="light"] .convtr-app .drop-zone.drag-over,
html[data-theme-resolved="light"] .convtr-app .drop-zone:hover {
    border-color: color-mix(in srgb, rgb(var(--brand-rgb)) 40%, var(--cv-border-strong)) !important;
    background-color: var(--cv-accent-soft) !important;
}

html[data-theme-resolved="light"] .convtr-app #uploadFeedback.upload-feedback--info,
html[data-theme-resolved="light"] .convtr-app .bg-indigo-500\/10 {
    color: rgb(var(--brand-rgb)) !important;
    background: var(--cv-accent-soft) !important;
    border-color: color-mix(in srgb, rgb(var(--brand-rgb)) 24%, var(--cv-border)) !important;
}

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

html[data-theme-resolved="light"] .convtr-app .border-indigo-500\/25,
html[data-theme-resolved="light"] .convtr-app .border-indigo-500\/35 {
    border-color: color-mix(in srgb, rgb(var(--brand-rgb)) 28%, var(--cv-border)) !important;
}

html[data-theme-resolved="light"] .convtr-app .hover\:bg-indigo-500\/10:hover,
html[data-theme-resolved="light"] .convtr-app .bg-indigo-500\/5 {
    background-color: var(--cv-accent-soft) !important;
}

html[data-theme-resolved="light"] .convtr-app .text-emerald-300,
html[data-theme-resolved="light"] .convtr-app .text-emerald-400 {
    color: var(--cv-success-text) !important;
}

html[data-theme-resolved="light"] .convtr-app .text-amber-200\/90,
html[data-theme-resolved="light"] .convtr-app .text-amber-400\/90 {
    color: var(--cv-warning-text) !important;
}

html[data-theme-resolved="light"] .convtr-app #flowSuccessBanner {
    border-color: var(--cv-success-border) !important;
    background: linear-gradient(135deg, var(--cv-success-bg), var(--cv-accent-soft)) !important;
}

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

html[data-theme-resolved="light"] .convtr-app .hover\:bg-slate-900\/50:hover {
    background-color: var(--cv-accent-soft) !important;
}


html[data-theme-resolved="light"] .convtr-app #shortcutsModal .bg-slate-900,
html[data-theme-resolved="light"] .convtr-app #shareQrModal .bg-slate-900,
html[data-theme-resolved="light"] .convtr-app #deleteAllResultsModal .bg-slate-900,
html[data-theme-resolved="light"] .convtr-app #presetModal .bg-slate-900,
html[data-theme-resolved="light"] .convtr-app #presetDeleteModal .bg-slate-900 {
    background-color: var(--cv-surface) !important;
    border-color: var(--cv-border) !important;
    box-shadow: var(--cv-shadow-lg);
}

html[data-theme-resolved="light"] .convtr-app .hover\:bg-slate-700:hover,
html[data-theme-resolved="light"] .convtr-app .hover\:bg-slate-800:hover {
    background-color: var(--cv-surface-muted) !important;
}

html[data-theme-resolved="light"] .convtr-app .hover\:text-white:hover,
html[data-theme-resolved="light"] .convtr-app #closeSettingsBtn:hover {
    color: var(--cv-text) !important;
}

html[data-theme-resolved="light"] .convtr-app .settings-panel,
html[data-theme-resolved="light"] .convtr-app #fileListArea,
html[data-theme-resolved="light"] .convtr-app #loadingProgressPanel,
html[data-theme-resolved="light"] .convtr-app #loadingConvertHeader {
    box-shadow: var(--cv-shadow-md);
}

html[data-theme-resolved="light"] .convtr-app #presetSection.preset-editing-active {
    background: var(--cv-accent-soft);
    border-color: color-mix(in srgb, rgb(var(--brand-rgb)) 26%, var(--cv-border));
}

html[data-theme-resolved="light"] .convtr-app input[type="range"].bg-slate-700 {
    background-color: var(--cv-border) !important;
}

html[data-theme-resolved="light"] .convtr-app .accent-indigo-500 {
    accent-color: rgb(var(--brand-rgb));
}

html[data-theme-resolved="light"] .convtr-app input[type="file"]::file-selector-button,
html[data-theme-resolved="light"] .convtr-app .file\:bg-slate-700 {
    background-color: var(--cv-surface-inset) !important;
    color: var(--cv-text) !important;
}

html[data-theme-resolved="light"] .convtr-app #fileList::-webkit-scrollbar-thumb,
html[data-theme-resolved="light"] .convtr-app #resultList::-webkit-scrollbar-thumb {
    background: var(--cv-border-strong);
}

html[data-theme-resolved="light"] .convtr-app .result-tile:hover {
    box-shadow: var(--cv-shadow-md);
}

html[data-theme-resolved="light"] .convtr-app .brand-format-active {
    background: var(--cv-accent-muted) !important;
    color: rgb(var(--brand-rgb)) !important;
}

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

@media (max-width: 1023px) {
    html[data-theme-resolved="light"] .convtr-app .settings-aside .settings-panel {
        background: var(--cv-surface) !important;
        border-color: var(--cv-border) !important;
    }
}

/* Theme-Toggle Icons */
html[data-theme-resolved="light"] .theme-icon-dark,
html[data-theme="dark"] .theme-icon-light,
html[data-theme-resolved="dark"] .theme-icon-light {
    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;
    }
}