/**
 * Helles, modernes App-Theme (überlagert ältere Stylesheets).
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --app-bg: #f4f7fb;
    --app-surface: #ffffff;
    --app-elevated: #f8fafc;
    --app-text: #0f172a;
    /* Sekundärtext dunkler lesbar (nicht „hell auf hell“) */
    --app-muted: #475569;
    --app-text-secondary: #334155;
    --app-border: #e2e8f0;
    --app-border-strong: #cbd5e1;
    --app-accent: #0284c7;
    --app-accent-hover: #0369a1;
    --app-accent-soft: #e0f2fe;
    --app-radius: 14px;
    --app-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    --app-shadow-lg: 0 10px 40px rgba(15, 23, 42, 0.08);
}

html {
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, -apple-system, sans-serif !important;
    background: linear-gradient(165deg, #f8fafc 0%, #eef6ff 45%, #f1f5f9 100%) !important;
    background-attachment: fixed !important;
    color: var(--app-text) !important;
}

/* ——— Header / Navigation ——— */
.header {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
    border-bottom: 1px solid var(--app-border) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 4px 20px rgba(15, 23, 42, 0.05) !important;
    padding: 0.6rem 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

.nav {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1.25rem !important;
    align-items: center !important;
}

.nav_logo {
    color: var(--app-text) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    font-size: 1.2rem !important;
}

.nav_logo-mark,
.nav_logo > i:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #0ea5e9 0%, #0284c7 100%) !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
    flex-shrink: 0 !important;
}

.nav_logo-text {
    color: var(--app-text) !important;
    font-weight: 700 !important;
}

.menu-toggle {
    background: var(--app-elevated) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 10px !important;
}

.menu-toggle span {
    background-color: var(--app-text) !important;
}

.menu-toggle i {
    color: var(--app-text) !important;
}

/* Nav-Buttons (Dashboard-Stil + Geräte-Seiten mit .btn) */
.nav_button,
.header .nav_buttons > a.btn,
.header .nav .nav_buttons > a.btn {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    box-shadow: var(--app-shadow) !important;
    min-width: auto !important;
}

.nav_button:hover,
.header .nav_buttons > a.btn:hover {
    background: var(--app-accent-soft) !important;
    color: var(--app-accent-hover) !important;
    border-color: #bae6fd !important;
    transform: translateY(-1px) !important;
}

.btn-admin,
.nav_button.btn-admin {
    background: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fecdd3 !important;
}

.btn-admin:hover {
    background: #ffe4e6 !important;
    color: #9f1239 !important;
}

@media (max-width: 768px) {
    /* style_cloud setzt .nav auf column — App-Header bleibt eine Zeile (Logo + Menü) */
    .header .nav,
    header.header .nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /*
     * backdrop-filter auf .header erzeugt eine Containing-Block für position:fixed —
     * ohne diese Zeilen bleibt das Schiebe-Menü nur in der Header-Höhe sichtbar.
     */
    .header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible !important;
    }

    .nav_buttons.active {
        z-index: 10050 !important;
    }

    .menu-toggle {
        z-index: 10060 !important;
        position: relative;
    }

    .nav_buttons {
        background: var(--app-surface) !important;
        box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12) !important;
        border-left: 1px solid var(--app-border) !important;
    }

    .nav_button,
    .header .nav_buttons > a.btn {
        background: var(--app-elevated) !important;
        color: var(--app-text) !important;
        border: 1px solid var(--app-border) !important;
    }

    .menu-overlay.active {
        z-index: 10040 !important;
        background: rgba(15, 23, 42, 0.35) !important;
    }
}

/* ——— Geräte-Kontextzeile + Tab-Leiste (Lesbarkeit) ——— */
.device-nav-bundle {
    background: var(--app-surface) !important;
    border-bottom: 1px solid var(--app-border-strong) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06) !important;
}

.device-nav-context {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
}

.device-nav-context--bar {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
}

.device-nav-context__title {
    margin: 0 !important;
    font-size: 1rem !important;
    color: var(--app-text) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.45rem 0.6rem !important;
}

.device-nav-context__badge {
    display: inline-block !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--app-text-secondary) !important;
    border: 1px solid var(--app-border-strong) !important;
    border-radius: 6px !important;
    padding: 0.2rem 0.5rem !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.device-nav-context__name {
    font-weight: 600 !important;
    color: var(--app-text) !important;
}

.device-nav-context__id {
    font-size: 0.9rem !important;
    color: var(--app-text-secondary) !important;
    background: #e2e8f0 !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: 6px !important;
    border: 1px solid var(--app-border-strong) !important;
}

.device-transport-lead {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: var(--app-text) !important;
    margin: 0 0 1rem !important;
}

/* Transport: LAN nur im ausklappbaren Sonderfall */
.transport-advanced {
    margin-top: 0.5rem !important;
    border: 1px solid var(--app-border-strong) !important;
    border-radius: var(--app-radius) !important;
    background: var(--app-elevated) !important;
    padding: 0 0.75rem 0.75rem !important;
}

.transport-advanced__summary {
    list-style: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--app-text-secondary) !important;
    padding: 0.75rem 0.25rem !important;
    user-select: none !important;
}

.transport-advanced__summary::-webkit-details-marker {
    display: none !important;
}

.transport-advanced__summary::before {
    content: '▸' !important;
    display: inline-block !important;
    margin-right: 0.45rem !important;
    transition: transform 0.15s ease !important;
    color: var(--app-accent) !important;
}

.transport-advanced[open] .transport-advanced__summary::before {
    transform: rotate(90deg) !important;
}

.transport-advanced__body {
    padding: 0 0.25rem 0.5rem !important;
}

/* Geräte-Verbindung: Hersteller-/Protokollhinweise pro Tab */
.connections-doc-card {
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--app-border) !important;
}

.connections-doc-card--category {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    border-left: 4px solid var(--app-accent) !important;
    background: rgba(15, 23, 42, 0.03) !important;
}

.connections-doc-card__title {
    margin: 0 0 0.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--app-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
}

.connections-doc-card__heading {
    margin: 0 0 0.75rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--app-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.connections-doc-card__heading .fas {
    color: var(--app-accent) !important;
    opacity: 0.95 !important;
}

.connections-doc-card__text {
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
    color: var(--app-muted) !important;
    word-break: break-word !important;
}

.main-content .connections-heating-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin: 1.15rem 0 0 !important;
}

/* ——— Geräte-Untermenü (Tab-Streifen unter dem Header) ——— */
.device-subnav {
    background: #e8edf4 !important;
    border-bottom: 1px solid var(--app-border-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.device-subnav__scroll {
    max-width: 1200px !important;
    margin: 0 auto !important;
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent) !important;
}

.device-subnav__inner {
    padding: 0 0.5rem !important;
    min-height: 2.85rem !important;
}

@media (min-width: 900px) {
    .device-subnav__inner {
        justify-content: center !important;
    }
}

.device-subnav__link {
    padding: 0.65rem 0.85rem 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--app-text-secondary) !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
}

.device-subnav__link:hover {
    color: var(--app-text) !important;
    background: rgba(255, 255, 255, 0.65) !important;
}

.device-subnav__link--active {
    color: #0c4a6e !important;
    font-weight: 700 !important;
    border-bottom-color: var(--app-accent) !important;
    background: rgba(255, 255, 255, 0.92) !important;
}

.device-subnav__link--active .device-subnav__icon {
    opacity: 1 !important;
}

.device-subnav__icon {
    color: inherit !important;
}

@media (max-width: 520px) {
    .device-subnav__text {
        display: none !important;
    }

    .device-subnav__link {
        padding: 0.65rem 0.75rem !important;
        min-width: 2.75rem !important;
        justify-content: center !important;
    }

    .device-subnav__icon {
        font-size: 1.1rem !important;
    }

    .device-subnav__scroll {
        mask-image: none !important;
    }
}

/* ——— Inhalt ——— */
.main-content,
.content {
    color: var(--app-text) !important;
}

.welcome-text,
.content .welcome-text {
    color: var(--app-text) !important;
    text-shadow: none !important;
}

.connect-status-line {
    color: var(--app-muted) !important;
}

.devices_section h2,
.live_status h2,
section h2 {
    color: var(--app-text) !important;
    text-shadow: none !important;
}

/* Gerätekarten */
.device_card {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow-lg) !important;
    backdrop-filter: none !important;
    color: var(--app-text) !important;
}

.device_card::before {
    background: linear-gradient(180deg, #0ea5e9, #0284c7) !important;
    opacity: 1 !important;
}

.device_card::after {
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.06), transparent 70%) !important;
}

.device_card h3 {
    color: var(--app-text) !important;
    border-bottom-color: var(--app-border) !important;
}

.device_card p {
    background: var(--app-elevated) !important;
    border-color: transparent !important;
    color: var(--app-text) !important;
}

.device_card p span:first-child {
    color: var(--app-muted) !important;
}

.device_card p span:last-child {
    color: var(--app-text) !important;
    background: var(--app-accent-soft) !important;
    border: 1px solid #bae6fd !important;
}

.device_name_display #deviceName {
    color: var(--app-accent) !important;
    background: var(--app-accent-soft) !important;
    border-radius: 999px !important;
    padding: 0.35rem 1rem !important;
}

/* Status-Kacheln */
.status_circle {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
    color: var(--app-text) !important;
    backdrop-filter: none !important;
}

.status_circle p,
.status_circle span {
    color: var(--app-text) !important;
}

.license_status {
    background: var(--app-elevated) !important;
    color: var(--app-muted) !important;
    border: 1px solid var(--app-border) !important;
}

.device_info p {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

.device_info p span:first-child {
    color: var(--app-muted) !important;
}

.device_info p span:last-child {
    color: var(--app-text) !important;
}

/* Footer */
.footer {
    background: rgba(255, 255, 255, 0.75) !important;
    border-top: 1px solid var(--app-border) !important;
    backdrop-filter: blur(8px) !important;
}

.footer-bottom,
.footer-bottom a {
    color: var(--app-muted) !important;
}

.footer-bottom a:hover {
    color: var(--app-accent) !important;
}

/* Cookie-Banner */
.cookie-banner {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow-lg) !important;
    color: var(--app-text) !important;
}

.cookie-text p {
    color: var(--app-muted) !important;
}

.cookie-btn.decline {
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

/* Cloud / Dashboard-Seiten */
.cloud-header {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
    backdrop-filter: none !important;
}

.cloud-header h1 {
    color: var(--app-text) !important;
}

/* Geräte-Verbindung: Unter-Tabs (fix „weiß auf hell“ aus style_device_settings) */
.main-content .device-connections-intro {
    color: var(--app-text-secondary) !important;
    opacity: 1 !important;
}

.main-content .connections-subnav__link {
    color: var(--app-text-secondary) !important;
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border-strong) !important;
    box-shadow: var(--app-shadow) !important;
}

.main-content .connections-subnav__link:hover {
    color: var(--app-text) !important;
    background: var(--app-accent-soft) !important;
    border-color: #7dd3fc !important;
}

.main-content .connections-subnav__link--active {
    color: #0c4a6e !important;
    background: var(--app-accent-soft) !important;
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.25) !important;
}

.device-status {
    background: var(--app-elevated) !important;
    color: var(--app-text-secondary) !important;
    border: 1px solid var(--app-border-strong) !important;
}

.control-card {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
}

.control-card h2 {
    color: var(--app-text) !important;
    background: var(--app-elevated) !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.control-card .content,
.control-card .content p {
    color: var(--app-text) !important;
}

/* Cloud (style_cloud): Formulare, Protokoll, Filter — hell */
.main-content .control-card .form-group label {
    color: var(--app-text) !important;
}

.main-content .control-card .form-group select,
.main-content .control-card .form-group input,
.main-content .cloud-header .form-group select,
.main-content .cloud-header .form-group input {
    background: var(--app-elevated) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

.main-content .control-card .form-group select option {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

.main-content .control-card .form-group::after {
    color: var(--app-muted) !important;
}

.main-content .control-card .form-group select:focus,
.main-content .control-card .form-group input:focus {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 2px var(--app-accent-soft) !important;
}

.main-content .command-history {
    background: var(--app-elevated) !important;
    border: 1px solid var(--app-border) !important;
}

.main-content .command-history h3 {
    color: var(--app-text) !important;
}

.main-content .history-item {
    border-bottom-color: var(--app-border) !important;
}

.main-content .history-item .time {
    color: var(--app-muted) !important;
}

.main-content .event-logs h2 {
    color: var(--app-text) !important;
}

.main-content .log-info-header {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    backdrop-filter: none !important;
}

.main-content .log-info-text {
    color: var(--app-text) !important;
}

.main-content .info-content strong {
    color: var(--app-text) !important;
}

.main-content .btn-download {
    background: var(--app-accent-soft) !important;
    color: var(--app-accent-hover) !important;
    border: 1px solid #bae6fd !important;
}

.main-content .btn-download:hover {
    background: #e0f2fe !important;
    color: var(--app-accent-hover) !important;
}

.main-content .log-grid {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    backdrop-filter: none !important;
}

.main-content .log-header {
    background: var(--app-elevated) !important;
    color: var(--app-text) !important;
    border-bottom-color: var(--app-border) !important;
}

.main-content .log-row > * {
    color: var(--app-text) !important;
    border-bottom-color: var(--app-border) !important;
}

.main-content .log-time {
    color: var(--app-muted) !important;
}

.main-content .local-connect-hint {
    background: var(--app-elevated) !important;
    color: var(--app-muted) !important;
    border: 1px solid var(--app-border) !important;
}

.main-content .cooldown-timer {
    color: var(--app-text) !important;
    background: var(--app-elevated) !important;
    border: 1px solid var(--app-border) !important;
}

.main-content .control-card .btn[disabled] {
    background: var(--app-elevated) !important;
    color: var(--app-muted) !important;
}

.main-content .filter-btn {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

.main-content .filter-btn:hover {
    background: var(--app-elevated) !important;
}

.main-content .filter-btn.active {
    background: var(--app-accent-soft) !important;
    border-color: #bae6fd !important;
    color: var(--app-accent-hover) !important;
}

.main-content .btn-delete {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.main-content .btn-delete:hover {
    background: #fee2e2 !important;
}

/* Einstellungen */
.settings_section {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
    backdrop-filter: none !important;
}

.settings_section .form-group label {
    color: var(--app-text) !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: var(--app-elevated) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

.welcome-text {
    color: var(--app-text) !important;
}

.menu-popup {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
}

.menu-category {
    background: var(--app-elevated) !important;
    border: 1px solid var(--app-border) !important;
}

/* Primär-Buttons allgemein */
.btn-update {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.35) !important;
}

.btn-settings {
    background: var(--app-accent-soft) !important;
    border: 1px solid #bae6fd !important;
    color: var(--app-accent-hover) !important;
}

/* Sprachwahl / Select in der Kopfzeile (z. B. home.php) */
.nav_buttons select.btn,
.nav_buttons select {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
    border-radius: 10px !important;
    padding: 0.55rem 1rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: var(--app-shadow) !important;
}

/* ——— App-Header: einheitliches Flex-Layout (Dashboard + Einstellungen + Gerät) ——— */
.header .nav,
header.header .nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
}

.header .nav_left {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.header .nav_buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    flex: 0 1 auto !important;
}

/* Status-Kacheln im Geräte-Header (style_device_settings + cloud-header) */
.cloud-header .status-grid .status-item,
.status-grid .status-item {
    background: var(--app-elevated) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
    backdrop-filter: none !important;
}

.cloud-header .status-item .label,
.status-item .label {
    color: var(--app-text-secondary) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

.cloud-header .status-item .value,
.status-item .value {
    color: var(--app-text) !important;
}

.cloud-header .status-item i,
.status-grid .status-item i {
    color: var(--app-accent) !important;
}

/* Einstellungen: Überschriften & Icons (gegen style_settings „weiß auf Glas“) */
.settings_section h3 {
    color: var(--app-text) !important;
}

.settings_section h3 i {
    color: var(--app-accent) !important;
}

.welcome-text i {
    color: var(--app-accent) !important;
}

/* Meldungen */
.response-message {
    background: var(--app-elevated) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

.response-message.success {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

.response-message.error {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

/* Aktions-Buttons im Hauptbereich (Kopfzeile liegt außerhalb von .main-content) */
.main-content .btn-primary,
.main-content a.btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3) !important;
}

.main-content form button.btn:not(.btn-warning):not(.btn-danger):not(.btn-primary) {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3) !important;
}

.main-content .btn-warning,
.main-content a.btn-warning {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    color: #fff !important;
    border: none !important;
}

.main-content .btn-danger,
.main-content a.btn-danger {
    background: linear-gradient(135deg, #f87171, #dc2626) !important;
    color: #fff !important;
    border: none !important;
}

/* Kontolöschung (user/settings Inline-Styles abfedern) */
.account-deletion-container {
    background: rgba(254, 226, 226, 0.45) !important;
    border: 1px solid #fecaca !important;
}

.warning-text {
    color: #b91c1c !important;
}

/* Profil & Datei-Upload (style_settings Glas-Optik → hell) */
.current-picture {
    border-color: var(--app-border) !important;
    background: var(--app-elevated) !important;
    backdrop-filter: none !important;
}

.default-avatar {
    color: var(--app-muted) !important;
    background: var(--app-elevated) !important;
    backdrop-filter: none !important;
}

.file-input {
    background: var(--app-elevated) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
    backdrop-filter: none !important;
}

.file-input::-webkit-file-upload-button {
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

.file-input::-webkit-file-upload-button:hover {
    background: var(--app-accent-soft) !important;
    color: var(--app-accent-hover) !important;
}