/* JN Tools professionelle Dunkelblau Oberfläche */
:root,
body {
    --bg: #f3f6fa !important;
    --bg-soft: #f7f9fc !important;
    --paper: rgba(255, 255, 255, .94) !important;
    --paper-solid: #ffffff !important;
    --paper-warm: #eef2f6 !important;
    --line: #d8e0ea !important;
    --line-soft: rgba(15, 39, 71, .11) !important;
    --text: #172033 !important;
    --muted: #667085 !important;
    --accent: #174a7e !important;
    --accent-soft: rgba(23, 74, 126, .12) !important;
    --accent-light: #e8f0f8 !important;
    --shadow: 0 22px 60px rgba(15, 39, 71, .09) !important;
    --shadow-soft: 0 10px 30px rgba(15, 39, 71, .07) !important;
    --font-title: Inter, Arial, sans-serif !important;
    --jn-navy: #0f355d;
    --jn-navy-strong: #0b2747;
    --jn-blue: #174a7e;
    --jn-blue-soft: #e9f0f7;
    --jn-surface: #ffffff;
    --jn-surface-soft: #f3f6fa;
    --jn-border: rgba(15, 39, 71, .12);
    --force-bg: #f3f6fa !important;
    --force-card: rgba(255,255,255,.94) !important;
    --force-panel: rgba(255,255,255,.76) !important;
    --force-line: rgba(15,39,71,.12) !important;
    --force-text: #172033 !important;
    --force-muted: #667085 !important;
    --force-shadow: 0 22px 60px rgba(15,39,71,.09) !important;
    --az-bg: #f3f6fa !important;
    --az-card: rgba(255,255,255,.92) !important;
    --az-card-strong: rgba(255,255,255,.98) !important;
    --az-line: rgba(15,39,71,.12) !important;
    --az-text: #172033 !important;
    --az-muted: #667085 !important;
    --az-shadow: 0 22px 60px rgba(15,39,71,.09) !important;
    --auth-bg: #f3f6fa !important;
    --auth-card: rgba(255,255,255,.94) !important;
    --auth-line: rgba(15,39,71,.12) !important;
    --auth-text: #172033 !important;
    --auth-muted: #667085 !important;
}

body[data-theme="night"] {
    --bg: #091522 !important;
    --bg-soft: #0d1b2d !important;
    --paper: rgba(17, 31, 51, .94) !important;
    --paper-solid: #111f33 !important;
    --paper-warm: #15263d !important;
    --line: rgba(207, 220, 238, .16) !important;
    --line-soft: rgba(207, 220, 238, .11) !important;
    --text: #f2f6fb !important;
    --muted: #aebdce !important;
    --accent: #6fa2cf !important;
    --accent-soft: rgba(111, 162, 207, .15) !important;
    --accent-light: rgba(111, 162, 207, .20) !important;
    --force-bg: #091522 !important;
    --force-card: rgba(17,31,51,.94) !important;
    --force-panel: rgba(22,40,64,.80) !important;
    --force-line: rgba(207,220,238,.13) !important;
    --force-text: #f2f6fb !important;
    --force-muted: #aebdce !important;
    --force-shadow: 0 24px 68px rgba(0,0,0,.30) !important;
    --az-bg: #091522 !important;
    --az-card: rgba(17,31,51,.92) !important;
    --az-card-strong: rgba(20,37,59,.98) !important;
    --az-line: rgba(207,220,238,.13) !important;
    --az-text: #f2f6fb !important;
    --az-muted: #aebdce !important;
    --az-shadow: 0 26px 72px rgba(0,0,0,.30) !important;
}

html,
body {
    background: #f3f6fa !important;
    color: var(--text) !important;
}

body[data-theme="night"] {
    background: #091522 !important;
}

body:not([data-theme="night"])::before,
body:not([data-theme="night"])::after {
    background-color: transparent;
}

body.jn-app-page,
body.admin-page,
body.admin-users-page,
body.auth-clean-page,
body.jn-start-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(23,74,126,.055), transparent 30rem),
        linear-gradient(180deg, #f7f9fc 0%, #f3f6fa 100%) !important;
}

body[data-theme="night"].jn-app-page,
body[data-theme="night"].admin-page,
body[data-theme="night"].admin-users-page,
body[data-theme="night"].auth-clean-page,
body[data-theme="night"].jn-start-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(111,162,207,.10), transparent 30rem),
        linear-gradient(180deg, #0d1b2d 0%, #091522 100%) !important;
}

h1,
h2,
h3,
h4,
.hero h1,
.admin-hero h1,
.dashboard-hero-content h1,
.support-hero-content h1,
.settings-hero-content h1,
.auth-card h1,
.jn-start-content h1 {
    font-family: Inter, Arial, sans-serif !important;
    letter-spacing: -.035em !important;
}

.jn-sidebar {
    background: rgba(255,255,255,.94) !important;
    border-right: 1px solid rgba(15,39,71,.10) !important;
    box-shadow: 14px 0 40px rgba(15,39,71,.055) !important;
    backdrop-filter: blur(22px) !important;
}

body[data-theme="night"] .jn-sidebar {
    background: rgba(12,27,45,.94) !important;
    border-right-color: rgba(207,220,238,.10) !important;
    box-shadow: 14px 0 42px rgba(0,0,0,.20) !important;
}

.jn-side-brand,
.jn-side-brand span,
.jn-side-brand strong {
    color: #0f355d !important;
}

body[data-theme="night"] .jn-side-brand,
body[data-theme="night"] .jn-side-brand span,
body[data-theme="night"] .jn-side-brand strong {
    color: #f2f6fb !important;
}

.jn-side-nav .nav-icon,
.premium-nav .nav-icon {
    color: #667085 !important;
    border-color: transparent !important;
    background: transparent !important;
}

.jn-side-nav .nav-icon:hover,
.premium-nav .nav-icon:hover {
    color: #0f355d !important;
    background: #eef3f8 !important;
    border-color: rgba(15,39,71,.08) !important;
}

.jn-side-nav .nav-icon.active,
.premium-nav .nav-icon.active {
    color: #ffffff !important;
    background: linear-gradient(180deg, #174a7e, #0f355d) !important;
    border-color: #174a7e !important;
    box-shadow: 0 10px 24px rgba(23,74,126,.22) !important;
}

body[data-theme="night"] .jn-side-nav .nav-icon,
body[data-theme="night"] .premium-nav .nav-icon {
    color: #aebdce !important;
}

body[data-theme="night"] .jn-side-nav .nav-icon:hover,
body[data-theme="night"] .premium-nav .nav-icon:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(207,220,238,.10) !important;
}

.dashboard-hero-card,
.support-hero-card,
.settings-hero-card,
.bc-copy-hero,
.hero,
.admin-hero,
.az-hero,
.jn-start-card {
    background:
        radial-gradient(circle at 92% 5%, rgba(23,74,126,.09), transparent 22rem),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
    border-color: rgba(15,39,71,.11) !important;
    box-shadow: 0 22px 56px rgba(15,39,71,.085) !important;
}

body[data-theme="night"] .dashboard-hero-card,
body[data-theme="night"] .support-hero-card,
body[data-theme="night"] .settings-hero-card,
body[data-theme="night"] .bc-copy-hero,
body[data-theme="night"] .hero,
body[data-theme="night"] .admin-hero,
body[data-theme="night"] .az-hero,
body[data-theme="night"] .jn-start-card {
    background:
        radial-gradient(circle at 92% 5%, rgba(111,162,207,.12), transparent 22rem),
        linear-gradient(180deg, rgba(20,37,59,.97), rgba(14,28,47,.95)) !important;
    border-color: rgba(207,220,238,.11) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.25) !important;
}

.dashboard-kicker,
.support-kicker,
.settings-kicker,
.admin-kicker,
.auth-eyebrow,
.jn-start-content > p,
.hero > div > p,
.bc-copy-hero p {
    color: #174a7e !important;
}

body[data-theme="night"] .dashboard-kicker,
body[data-theme="night"] .support-kicker,
body[data-theme="night"] .settings-kicker,
body[data-theme="night"] .admin-kicker,
body[data-theme="night"] .auth-eyebrow,
body[data-theme="night"] .jn-start-content > p,
body[data-theme="night"] .hero > div > p,
body[data-theme="night"] .bc-copy-hero p {
    color: #8eb7da !important;
}

.dashboard-action-card,
.dashboard-recent-card,
.jn-insight-card,
.support-action-card,
.support-tickets-card,
.settings-option-card,
.group-card,
.variant-card,
.bc-recent-card,
.bc-library-dialog,
.bc-library-card,
.article-card,
.article-gallery-card,
.admin-card,
.az-card,
.admin-stat-card,
.admin-users-card,
.auth-card,
.settings-dialog,
.support-dialog,
.modal-card,
.coming-soon-card {
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(15,39,71,.11) !important;
    box-shadow: 0 14px 38px rgba(15,39,71,.065) !important;
}

body[data-theme="night"] .dashboard-action-card,
body[data-theme="night"] .dashboard-recent-card,
body[data-theme="night"] .jn-insight-card,
body[data-theme="night"] .support-action-card,
body[data-theme="night"] .support-tickets-card,
body[data-theme="night"] .settings-option-card,
body[data-theme="night"] .group-card,
body[data-theme="night"] .variant-card,
body[data-theme="night"] .bc-recent-card,
body[data-theme="night"] .bc-library-dialog,
body[data-theme="night"] .bc-library-card,
body[data-theme="night"] .article-card,
body[data-theme="night"] .article-gallery-card,
body[data-theme="night"] .admin-card,
body[data-theme="night"] .az-card,
body[data-theme="night"] .admin-stat-card,
body[data-theme="night"] .admin-users-card,
body[data-theme="night"] .auth-card,
body[data-theme="night"] .settings-dialog,
body[data-theme="night"] .support-dialog,
body[data-theme="night"] .modal-card,
body[data-theme="night"] .coming-soon-card {
    background: rgba(17,31,51,.94) !important;
    border-color: rgba(207,220,238,.11) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.22) !important;
}

.dashboard-action-card:hover,
.support-action-card:hover,
.settings-option-card:hover,
.article-card:hover,
.group-card:hover {
    border-color: rgba(23,74,126,.24) !important;
    box-shadow: 0 18px 46px rgba(15,39,71,.11) !important;
}

input,
select,
textarea,
#searchInput,
.bc-search-box,
.bc-library-search,
.support-form input,
.support-form select,
.support-form textarea,
.settings-form input,
.settings-form select,
.settings-form textarea,
.auth-card input {
    background: rgba(255,255,255,.92) !important;
    color: #172033 !important;
    border-color: rgba(15,39,71,.14) !important;
    box-shadow: none !important;
}

body[data-theme="night"] input,
body[data-theme="night"] select,
body[data-theme="night"] textarea,
body[data-theme="night"] #searchInput,
body[data-theme="night"] .bc-search-box,
body[data-theme="night"] .bc-library-search,
body[data-theme="night"] .support-form input,
body[data-theme="night"] .support-form select,
body[data-theme="night"] .support-form textarea,
body[data-theme="night"] .settings-form input,
body[data-theme="night"] .settings-form select,
body[data-theme="night"] .settings-form textarea,
body[data-theme="night"] .auth-card input {
    background: rgba(255,255,255,.055) !important;
    color: #f2f6fb !important;
    border-color: rgba(207,220,238,.14) !important;
}

input:focus,
select:focus,
textarea:focus,
#searchInput:focus,
.bc-search-box:focus-within,
.bc-library-search:focus-within {
    border-color: rgba(23,74,126,.48) !important;
    box-shadow: 0 0 0 4px rgba(23,74,126,.10) !important;
    outline: none !important;
}

.solid-action,
.primary-action,
.support-primary-button,
.settings-primary-button,
.auth-primary-button,
button[type="submit"]:not(.soft-action):not(.line-button),
.bc-new-group-button,
.admin-primary-button,
.az-primary {
    background: linear-gradient(180deg, #174a7e, #0f355d) !important;
    border-color: #174a7e !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(23,74,126,.22) !important;
}

.solid-action:hover,
.primary-action:hover,
.support-primary-button:hover,
.settings-primary-button:hover,
.auth-primary-button:hover,
button[type="submit"]:not(.soft-action):not(.line-button):hover,
.bc-new-group-button:hover,
.admin-primary-button:hover,
.az-primary:hover {
    background: linear-gradient(180deg, #1d568f, #0b2c50) !important;
    box-shadow: 0 16px 34px rgba(23,74,126,.27) !important;
}

.soft-action,
.line-button,
.support-soft-button,
.settings-soft-button,
.bc-filter-btn,
.bc-library-tab,
.dashboard-pill {
    background: rgba(255,255,255,.82) !important;
    border-color: rgba(15,39,71,.12) !important;
    color: #26354a !important;
}

body[data-theme="night"] .soft-action,
body[data-theme="night"] .line-button,
body[data-theme="night"] .support-soft-button,
body[data-theme="night"] .settings-soft-button,
body[data-theme="night"] .bc-filter-btn,
body[data-theme="night"] .bc-library-tab,
body[data-theme="night"] .dashboard-pill {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(207,220,238,.12) !important;
    color: #dce7f3 !important;
}

.bc-library-tab.is-active,
.bc-filter-btn.is-active,
.bc-filter-btn.active,
.settings-theme-options label.active {
    background: rgba(23,74,126,.12) !important;
    border-color: rgba(23,74,126,.28) !important;
    color: #0f355d !important;
}

body[data-theme="night"] .bc-library-tab.is-active,
body[data-theme="night"] .bc-filter-btn.is-active,
body[data-theme="night"] .bc-filter-btn.active,
body[data-theme="night"] .settings-theme-options label.active {
    background: rgba(111,162,207,.15) !important;
    border-color: rgba(111,162,207,.30) !important;
    color: #dcecff !important;
}

.dashboard-action-icon,
.support-action-icon,
.settings-option-icon,
.dashboard-file-icon,
.article-icon,
.admin-icon,
.az-icon {
    background: #e9f0f7 !important;
    color: #174a7e !important;
    border-color: rgba(23,74,126,.10) !important;
}

body[data-theme="night"] .dashboard-action-icon,
body[data-theme="night"] .support-action-icon,
body[data-theme="night"] .settings-option-icon,
body[data-theme="night"] .dashboard-file-icon,
body[data-theme="night"] .article-icon,
body[data-theme="night"] .admin-icon,
body[data-theme="night"] .az-icon {
    background: rgba(111,162,207,.13) !important;
    color: #9bc1e2 !important;
    border-color: rgba(111,162,207,.16) !important;
}

.dashboard-recent-row,
.support-ticket-row,
.bc-recent-list > *,
.admin-list-row,
.az-list-row {
    border-color: rgba(15,39,71,.09) !important;
}

body[data-theme="night"] .dashboard-recent-row,
body[data-theme="night"] .support-ticket-row,
body[data-theme="night"] .bc-recent-list > *,
body[data-theme="night"] .admin-list-row,
body[data-theme="night"] .az-list-row {
    border-color: rgba(207,220,238,.09) !important;
}

.auth-clean-page::after,
.auth-page::after {
    background:
        linear-gradient(180deg, rgba(243,246,250,.74), rgba(243,246,250,.94)),
        radial-gradient(circle at 18% 0%, rgba(23,74,126,.08), transparent 28rem) !important;
}

body[data-theme="night"].auth-clean-page::after,
body[data-theme="night"].auth-page::after {
    background:
        linear-gradient(180deg, rgba(9,21,34,.72), rgba(9,21,34,.94)),
        radial-gradient(circle at 18% 0%, rgba(111,162,207,.12), transparent 28rem) !important;
}

.jn-start-card::after,
body.jn-start-page .jn-start-card::after {
    background: radial-gradient(circle, rgba(23,74,126,.10), transparent 68%) !important;
}

body.jn-start-page .jn-start-content,
body.jn-start-page .jn-start-content::before {
    background:
        radial-gradient(circle at 88% 12%, rgba(23,74,126,.07), transparent 13rem),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent) !important;
}

body[data-theme="night"].jn-start-page .jn-start-content {
    background:
        radial-gradient(circle at 88% 12%, rgba(111,162,207,.10), transparent 13rem),
        linear-gradient(180deg, rgba(255,255,255,.025), transparent) !important;
}

.jn-page-credit,
.dashboard-footer,
.support-footer,
.settings-footer {
    color: #7b8798 !important;
}

::selection {
    background: rgba(23,74,126,.20);
    color: #0b2747;
}

@media (max-width: 760px) {
    .jn-sidebar {
        box-shadow: 0 10px 34px rgba(15,39,71,.08) !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(15,39,71,.10) !important;
    }
}

/* Ruhige, professionelle Bildbehandlung */
.dashboard-hero-card::before,
.support-hero-card::before,
.settings-hero-card::before,
.bc-copy-hero::before,
.admin-hero::before,
.az-hero::before {
    background:
        linear-gradient(110deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 45%, rgba(232,240,248,.88) 100%),
        radial-gradient(circle at 86% 20%, rgba(23,74,126,.13), transparent 22rem) !important;
    opacity: 1 !important;
    filter: none !important;
}

body[data-theme="night"] .dashboard-hero-card::before,
body[data-theme="night"] .support-hero-card::before,
body[data-theme="night"] .settings-hero-card::before,
body[data-theme="night"] .bc-copy-hero::before,
body[data-theme="night"] .admin-hero::before,
body[data-theme="night"] .az-hero::before {
    background:
        linear-gradient(110deg, rgba(17,31,51,.98) 0%, rgba(17,31,51,.95) 45%, rgba(24,48,76,.90) 100%),
        radial-gradient(circle at 86% 20%, rgba(111,162,207,.14), transparent 22rem) !important;
    opacity: 1 !important;
}

.jn-start-photo {
    filter: grayscale(.72) saturate(.45) contrast(1.03) brightness(1.02) !important;
}

.jn-start-photo-overlay {
    background:
        linear-gradient(180deg, rgba(15,53,93,.08), rgba(15,53,93,.28)),
        linear-gradient(0deg, rgba(232,240,248,.20), transparent) !important;
}