:root {
    --jn-accent: #c66f42;
    --jn-accent-dark: #a8562e;
    --jn-accent-soft: rgba(198,111,66,.14);
    --jn-glass: rgba(255,255,255,.62);
    --jn-glass-strong: rgba(255,255,255,.78);
    --jn-glass-line: rgba(255,255,255,.64);
    --jn-text-main: #201914;
    --jn-text-muted: #74665c;
    --jn-soft-shadow: 0 24px 70px rgba(66,48,32,.10);
}
body[data-theme="night"] {
    --jn-glass: rgba(23,31,43,.62);
    --jn-glass-strong: rgba(23,31,43,.78);
    --jn-glass-line: rgba(255,255,255,.10);
    --jn-text-main: #f3efe8;
    --jn-text-muted: #bdc7d2;
    --jn-soft-shadow: 0 28px 76px rgba(0,0,0,.26);
}
body.jn-app-page,
body.admin-page,
body.auth-clean-page {
    color: var(--jn-text-main);
}
body.jn-app-page::after,
body.admin-page::after,
body.auth-clean-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(248,244,239,.82), rgba(248,244,239,.92)),
        var(--jn-page-bg-day);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transform: translateZ(0);
}
body[data-theme="night"].jn-app-page::after,
body[data-theme="night"].admin-page::after,
body[data-theme="night"].auth-clean-page::after {
    background-image:
        linear-gradient(180deg, rgba(16,23,32,.84), rgba(16,23,32,.94)),
        var(--jn-page-bg-night);
}
.jn-sidebar,
.admin-tabs,
.admin-card,
.dashboard-action-card,
.dashboard-recent-card,
.jn-insight-card,
.support-action-card,
.support-tickets-card,
.settings-option-card,
.jn-article-card,
.jn-upgrade-hero,
.support-hero-card,
.settings-hero-card,
.dashboard-hero-card {
    border-color: var(--jn-glass-line) !important;
    box-shadow: var(--jn-soft-shadow), inset 0 1px 0 rgba(255,255,255,.46) !important;
    backdrop-filter: blur(22px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}
.jn-side-brand span,
.nav-icon.active,
.dashboard-kicker,
.settings-kicker,
.support-kicker,
.jn-upgrade-hero p,
.admin-eyebrow,
.bc-copy-kicker,
.bc-meta-pill,
.support-card-head button,
.settings-dialog-head p,
.support-dialog-head p,
.jn-article-category,
.jn-article-number i,
.dashboard-action-link,
.support-action-card em,
.settings-option-card em {
    color: var(--jn-accent-dark) !important;
}
.jn-side-nav a.active,
.bc-tag-chip.active,
.support-status-pill,
.settings-theme-options label.active,
.settings-accent-options label.active,
.admin-tabs a:hover,
.btn.soft,
.line-button.primary-soft {
    background: var(--jn-accent-soft) !important;
    color: var(--jn-accent-dark) !important;
}
.solid-action,
.support-primary-button,
.settings-primary-button,
.btn.primary {
    background: linear-gradient(180deg, var(--jn-accent), var(--jn-accent-dark)) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.settings-accent-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.settings-accent-options label {
    min-height: 84px;
    border: 1px solid rgba(133,95,64,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.56);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    cursor: pointer;
}
.settings-accent-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.settings-accent-options span {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-preview), var(--accent-preview-dark));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 22px rgba(0,0,0,.10);
}
.settings-accent-options strong {
    font-size: 13px;
}
.design-card.full,
.field.full {
    grid-column: 1 / -1;
}
.design-card h3 {
    margin: 0 0 14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    letter-spacing: -.04em;
}
.jn-missing-filterbar .button-row,
#backup .settings-grid {
    align-items: stretch;
}
.jn-article-profishop-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--jn-accent-soft);
    color: var(--jn-accent-dark);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}
.bc-duplicate-warning {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(210,137,36,.13);
    color: #9a651e;
    font-size: 12px;
    font-weight: 800;
}
.jn-undo-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 9999;
    transform: translate(-50%, 20px);
    opacity: 0;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px 0 18px;
    border-radius: 999px;
    background: rgba(32,25,20,.92);
    color: #fff;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    transition: opacity .18s ease, transform .18s ease;
}
.jn-undo-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.jn-undo-toast button {
    border: 0;
    min-height: 34px;
    border-radius: 999px;
    padding: 0 12px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 850;
}
.support-attachment-list {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(133,95,64,.12);
    background: rgba(255,255,255,.54);
    display: grid;
    gap: 8px;
}
.support-attachment-list a {
    color: var(--jn-accent-dark);
    font-weight: 850;
    text-decoration: none;
}
@media (max-width: 760px) {
    body.jn-app-page::after,
    body.admin-page::after,
    body.auth-clean-page::after {
        background-attachment: scroll;
    }
    .settings-accent-options {
        grid-template-columns: 1fr 1fr;
    }
}

.support-history-list {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(133,95,64,.12);
    background: rgba(255,255,255,.46);
    display: grid;
    gap: 8px;
}
.support-history-list span {
    color: var(--jn-text-muted);
    font-size: 13px;
}

/* JN Accent Fix V35 1 */
.settings-accent-options label {
    position: relative !important;
    overflow: hidden !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.settings-accent-options label:hover {
    transform: translateY(-2px) !important;
    border-color: var(--jn-accent-dark) !important;
}
.settings-accent-options label.active,
.settings-accent-options label:has(input:checked) {
    border-color: var(--jn-accent-dark) !important;
    background: var(--jn-accent-soft) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.38) !important;
}
.settings-accent-options input[type="radio"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}
.settings-accent-options label span {
    pointer-events: none !important;
}
.settings-accent-options label strong {
    pointer-events: none !important;
    color: var(--jn-text-main) !important;
}
.settings-accent-options label.active strong,
.settings-accent-options label:has(input:checked) strong {
    color: var(--jn-accent-dark) !important;
}
body.page-copy {
    --force-accent: var(--jn-accent) !important;
    --force-accent-dark: var(--jn-accent-dark) !important;
    --force-accent-soft: var(--jn-accent-soft) !important;
    --bc-accent: var(--jn-accent) !important;
    --bc-accent-dark: var(--jn-accent-dark) !important;
    --bc-accent-soft: var(--jn-accent-soft) !important;
    --kt-accent: var(--jn-accent) !important;
    --kt-accent-dark: var(--jn-accent-dark) !important;
    --kt-accent-soft: var(--jn-accent-soft) !important;
}
body.page-copy .solid-action,
body.page-copy .settings-primary-button,
body.page-copy .bc-new-group-button {
    background: linear-gradient(180deg, var(--jn-accent), var(--jn-accent-dark)) !important;
    color: #fff !important;
    border-color: transparent !important;
}
body.page-copy .line-button.primary-soft,
body.page-copy .bc-tag-chip.active,
body.page-copy .bc-meta-pill,
body.page-copy .bc-filter-btn.active,
body.page-copy .bc-icon-toggle.active {
    background: var(--jn-accent-soft) !important;
    color: var(--jn-accent-dark) !important;
    border-color: transparent !important;
}
body.page-copy .bc-copy-kicker,
body.page-copy .bc-copy-hero span,
body.page-copy .bc-group-card:hover .bc-title-input,
body.page-copy .bc-group-card:hover .bc-group-title-static,
body.page-copy #saveStatus,
body.page-copy .bc-search-box::before {
    color: var(--jn-accent-dark) !important;
}
body.page-copy .bc-title-input,
body.page-copy .bc-group-card,
body.page-copy .bc-new-group-button,
body.page-copy .bc-search-box:focus-within {
    border-color: var(--jn-accent-soft) !important;
}
body.page-copy .bc-group-card {
    border-left-color: var(--jn-accent) !important;
}
body.page-copy input:focus,
body.page-copy textarea:focus,
body.page-copy select:focus {
    border-color: var(--jn-accent-dark) !important;
    box-shadow: 0 0 0 4px var(--jn-accent-soft) !important;
}

/* JN Fix V36 Neue Gruppe Button
   Der Button hebt sich wieder sichtbar von Gruppe kopieren ab */
body.page-copy #addGroupHeroBtn.bc-new-group-button {
    min-height: 54px !important;
    padding: 0 26px !important;
    border-radius: 20px !important;
    border: 1px solid color-mix(in srgb, var(--jn-accent) 42%, rgba(255,255,255,.55)) !important;
    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.95), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.98), var(--jn-accent-soft)) !important;
    color: var(--jn-accent-dark) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: .01em !important;
    box-shadow:
        0 20px 46px rgba(78, 45, 24, .16),
        0 0 0 5px color-mix(in srgb, var(--jn-accent) 9%, transparent),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    transform: translateY(-1px) !important;
}

body.page-copy #addGroupHeroBtn.bc-new-group-button::before {
    content: "+" !important;
    width: 27px !important;
    height: 27px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, var(--jn-accent), var(--jn-accent-dark)) !important;
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 22px rgba(78, 45, 24, .18), inset 0 1px 0 rgba(255,255,255,.26) !important;
}

body.page-copy #addGroupHeroBtn.bc-new-group-button:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--jn-accent) 58%, rgba(255,255,255,.45)) !important;
    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,1), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,1), color-mix(in srgb, var(--jn-accent-soft) 78%, white)) !important;
    box-shadow:
        0 26px 58px rgba(78, 45, 24, .20),
        0 0 0 6px color-mix(in srgb, var(--jn-accent) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.page-copy #addGroupHeroBtn.bc-new-group-button:active {
    transform: translateY(0) scale(.985) !important;
}

body[data-theme="night"].page-copy #addGroupHeroBtn.bc-new-group-button {
    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.10), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.085), color-mix(in srgb, var(--jn-accent) 18%, transparent)) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--jn-accent) 44%, rgba(255,255,255,.12)) !important;
    box-shadow:
        0 22px 52px rgba(0,0,0,.26),
        0 0 0 5px color-mix(in srgb, var(--jn-accent) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

@media (max-width: 720px) {
    body.page-copy #addGroupHeroBtn.bc-new-group-button {
        min-height: 50px !important;
        padding: 0 22px !important;
    }
}

/* Persönliche Ansichtsgrösse: Die Sidebar bleibt immer unverändert */
@media (min-width: 761px) {
    body[data-display-size="compact"],
    body[data-display-size="extra_compact"] {
        overflow-x: hidden;
    }

    body[data-display-size="compact"] > .jn-app-layout > main {
        width: 111.111111%;
        min-height: 111.111111vh;
        zoom: .9;
    }

    body[data-display-size="extra_compact"] > .jn-app-layout > main {
        width: 121.95122%;
        min-height: 121.95122vh;
        zoom: .82;
    }
}