/* =========================================================
   NotificationNext v1.2.6 — DisplayName Runtime Sync
   Basis: globaler STOSSACHSE Bronze-Shell/Card-Standard.
   Äußere Sammelcard wird neutraler/dunkler, Hero bleibt Fokus.
   DisplayName-/Charname-Sync für Benachrichtigungsseite, Widgets und Payload-/Actor-Zeilen.
========================================================= */

body.design-system-core-active .notificationnext-page-shell,
body.st-origin .notificationnext-page-shell,
.notificationnext-page-shell{
    position:relative;
    isolation:isolate;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    margin:0 0 24px 0;
    padding:18px;
    border:1px solid rgba(214,152,69,.28);
    border-radius:24px;
    background:
        radial-gradient(ellipse at 12% 12%, rgba(255,153,0,.035), transparent 68%),
        radial-gradient(ellipse at 78% 42%, rgba(214,126,42,.024), transparent 72%),
        radial-gradient(ellipse at 88% 92%, rgba(180,96,28,.026), transparent 74%),
        linear-gradient(135deg,
            rgba(30,20,12,.120) 0%,
            rgba(16,12,8,.080) 32%,
            rgba(6,6,5,.975) 56%,
            rgba(15,11,7,.075) 78%,
            rgba(28,18,10,.105) 100%
        ),
        linear-gradient(180deg, rgba(8,7,6,.992), rgba(4,4,3,.998));
    box-shadow:
        0 22px 54px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,231,184,.038),
        inset 0 0 92px rgba(255,153,0,.010);
    overflow:hidden;
}

.notificationnext-page-shell::before{
    content:'';
    position:absolute;
    inset:1px;
    border-radius:23px;
    pointer-events:none;
    background:
        linear-gradient(135deg, rgba(255,190,89,.018), transparent 38%, rgba(255,153,0,.012) 72%, transparent 100%),
        linear-gradient(180deg, rgba(255,190,89,.012), transparent 52%, rgba(255,153,0,.008) 100%);
    opacity:.82;
    z-index:0;
}

.notificationnext-page-shell > *{
    position:relative;
    z-index:1;
}


.notificationnext-hero-tabs{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:8px;
    padding:0 14px;
    margin:0 0 -2px 0;
}

.notificationnext-hero-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:50px;
    padding:0 22px;
    border:1px solid rgba(214,152,69,.34);
    border-bottom-color:rgba(214,152,69,.18);
    border-radius:16px 16px 0 0;
    background:linear-gradient(180deg, rgba(42,26,14,.88), rgba(12,9,7,.98));
    color:#efd5ae;
    text-decoration:none;
    font-weight:900;
    letter-spacing:.01em;
    box-shadow:inset 0 1px 0 rgba(255,230,178,.045);
    transition:background .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
}

.notificationnext-hero-tab:hover{
    color:#fff1d7;
    border-color:rgba(255,190,89,.46);
    background:linear-gradient(180deg, rgba(62,36,15,.96), rgba(18,12,8,.99));
    transform:translateY(-1px);
}

.notificationnext-hero-tab.is-active{
    color:#fff1d7;
    border-color:rgba(255,190,89,.56);
    border-bottom-color:rgba(28,17,10,.99);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255,153,0,.15), transparent 55%),
        linear-gradient(180deg, rgba(67,38,16,.98), rgba(20,13,8,.99));
}

.notificationnext-page-shell .notificationnext-hero-tabs + .notificationnext-hero-card{
    margin-top:0 !important;
}

.notificationnext-panel,
.notificationnext-content-card,
.notificationnext-message{
    max-width:100%;
    box-sizing:border-box;
    border:1px solid rgba(100,62,28,.62);
    border-radius:16px;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(255,153,0,.022), transparent 58%),
        linear-gradient(180deg,rgba(18,15,12,.965) 0%,rgba(9,8,7,.992) 100%);
    box-shadow:0 0 25px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,231,184,.024);
}

.notificationnext-panel{
    padding:18px;
    margin-bottom:20px;
}

body.design-system-core-active .notificationnext-hero-card,
body.st-origin .notificationnext-hero-card,
.notificationnext-hero-card{
    margin-top:0;
    margin-bottom:18px;
    padding:26px 28px;
    border-color:rgba(214,152,69,.42) !important;
    border-radius:22px !important;
    background:
        radial-gradient(ellipse at 14% 10%, rgba(255,153,0,.115), transparent 42%),
        linear-gradient(135deg, rgba(78,44,16,.92) 0%, rgba(20,13,8,.985) 70%, rgba(8,7,5,.995) 100%) !important;
    box-shadow:
        0 16px 36px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,231,184,.065) !important;
}

.notificationnext-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.notificationnext-header-main{
    min-width:0;
    flex:1 1 420px;
}

.notificationnext-kicker,
.notificationnext-section-kicker{
    display:inline-flex;
    color:#c9975b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:8px;
}

.notificationnext-header h2{
    margin:0;
    color:#ffbe73;
    font-size:30px;
    font-weight:900;
    letter-spacing:.03em;
    text-shadow:0 0 18px rgba(255,153,48,.15);
}

.notificationnext-header p{
    margin:8px 0 0;
    color:#c8b39b;
    line-height:1.55;
}

.notificationnext-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    margin-left:auto;
}

.notificationnext-action-form,
.notificationnext-row-actions form{
    margin:0;
    display:inline-flex;
}

.notificationnext-badge,
.notificationnext-pill,
.notificationnext-state{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    background:#23170f;
    border:1px solid #6b421d;
    color:#ffc47f;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.notificationnext-badge strong{
    color:#ffe1b7;
}

.notificationnext-badge.is-unread,
.notificationnext-state{
    border-color:#d2842d;
    background:#2a190d;
    color:#ffe2bd;
}

.notificationnext-action-form button,
.notificationnext-row-actions button,
.notificationnext-row-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(180deg,#d2842d 0%,#9b5714 100%);
    border:1px solid #f2b066;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    padding:10px 16px;
    font-weight:800;
    transition:.2s;
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 12px rgba(210,132,45,.22);
    font-family:inherit;
    line-height:1.15;
}

.notificationnext-action-form button:hover,
.notificationnext-row-actions button:hover,
.notificationnext-row-actions a:hover{
    transform:translateY(-1px);
    background:linear-gradient(180deg,#ea9b42 0%,#b76a1f 100%);
}

.notificationnext-message{
    padding:14px 16px;
    margin:0 0 14px 0;
    font-weight:800;
}

.notificationnext-error{
    background:#381717;
    border-color:#8a2d2d;
    color:#ff9b9b;
}

.notificationnext-success{
    background:#10381b;
    border-color:#2f7a45;
    color:#9dffb7;
}

.notificationnext-content-card{
    margin:22px 0 0;
    overflow:hidden;
}

/* v1.2.4: NotificationNext hat viele Listeneinträge. Deshalb bleibt die äußere
   Sammelcard neutraler/dunkler als z.B. NewsNext, während die Hero-Box den
   Bronze-Fokus behält. */
.notificationnext-page-shell .notificationnext-content-card{
    background:
        radial-gradient(ellipse at 12% 0%, rgba(255,153,0,.018), transparent 48%),
        linear-gradient(180deg, rgba(17,14,11,.965), rgba(8,8,7,.992));
}


.notificationnext-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:14px 18px;
    background:linear-gradient(180deg,rgba(31,24,17,.94) 0%,rgba(16,13,10,.985) 100%);
    border-bottom:1px solid rgba(91,56,24,.64);
    flex-wrap:wrap;
}

.notificationnext-section-head h3{
    margin:0;
    color:#ffbe73;
    font-size:22px;
    font-weight:900;
    letter-spacing:.03em;
}

.notificationnext-list{
    display:grid;
    gap:0;
    background:rgba(8,8,7,.975);
}

.notificationnext-empty{
    display:grid;
    justify-items:center;
    gap:8px;
    padding:28px 22px;
    color:#aaa;
    text-align:center;
    border:0;
    background:rgba(13,11,9,.94);
}

.notificationnext-empty > span{
    font-size:34px;
}

.notificationnext-empty strong{
    color:#ffbe73;
    font-size:20px;
}

.notificationnext-empty p{
    max-width:560px;
    margin:0;
    line-height:1.6;
    color:#aaa;
}

.notificationnext-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px;
    background:linear-gradient(180deg,rgba(18,16,13,.985) 0%,rgba(9,9,8,.995) 100%);
    border-bottom:1px solid rgba(45,33,23,.95);
    transition:.18s;
}

.notificationnext-item:nth-child(even){
    background:linear-gradient(180deg,rgba(20,18,15,.985) 0%,rgba(10,10,9,.995) 100%);
}

.notificationnext-item:last-child{
    border-bottom:0;
}

.notificationnext-item:hover{
    background:linear-gradient(180deg,#171513 0%,#10100f 100%);
}

.notificationnext-item.is-unread{
    background:
        linear-gradient(90deg,rgba(210,132,45,.085),transparent 46%),
        linear-gradient(180deg,#17120d 0%,#0d0c0a 100%);
    box-shadow:inset 4px 0 0 rgba(210,132,45,.72);
}

.notificationnext-item.is-read{
    opacity:.86;
}

.notificationnext-icon{
    width:52px;
    height:52px;
    flex:0 0 auto;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#27180f 0%,#17110d 100%);
    border:1px solid #6f431c;
    font-size:24px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 14px rgba(181,110,33,.08);
}

.notificationnext-body{
    min-width:0;
    flex:1;
}

.notificationnext-item-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.notificationnext-body h3{
    margin:0;
    color:#ffbc70;
    font-size:20px;
    font-weight:900;
    line-height:1.3;
}

.notificationnext-body p{
    margin:8px 0 0;
    color:#a9a9a9;
    line-height:1.55;
    font-size:14px;
}

.notificationnext-body small{
    display:block;
    margin-top:8px;
    color:#7d7d7d;
    font-size:12px;
}

.notificationnext-row-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.notificationnext-row-actions button,
.notificationnext-row-actions a{
    padding:8px 12px;
    border-radius:9px;
    font-size:13px;
}

.notificationnext-widget a,
.notificationnext-bell-widget{
    display:block;
    color:#ffd54a;
    text-decoration:none;
    margin-top:7px;
}

.notificationnext-bell-widget strong{
    display:inline-flex;
    min-width:20px;
    height:20px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ff7b00;
    color:#fff;
    font-size:12px;
}

@media(max-width:900px){
    .notificationnext-hero-tabs{
        padding:0 6px;
        gap:6px;
    }

    .notificationnext-hero-tab{
        min-height:44px;
        padding:0 14px;
        font-size:14px;
    }

    .notificationnext-page-shell{
        padding:14px;
        border-radius:20px;
    }

    .notificationnext-page-shell::before{
        border-radius:19px;
    }
}

@media(max-width:640px){
    .notificationnext-hero-tabs{
        align-items:stretch;
    }

    .notificationnext-hero-tab{
        flex:1 1 calc(50% - 8px);
        border-radius:14px;
        min-height:42px;
    }

    .notificationnext-hero-tab.is-active{
        border-bottom-color:rgba(255,190,89,.56);
    }

    .notificationnext-header h2{
        font-size:24px;
    }

    .notificationnext-item{
        flex-direction:column;
    }

    .notificationnext-header-actions,
    .notificationnext-action-form,
    .notificationnext-action-form button,
    .notificationnext-row-actions,
    .notificationnext-row-actions form,
    .notificationnext-row-actions button,
    .notificationnext-row-actions a{
        width:100%;
    }

    .notificationnext-row-actions button,
    .notificationnext-row-actions a,
    .notificationnext-action-form button{
        justify-content:center;
    }
}

.notificationnext-action-form button.is-danger,
.notificationnext-row-actions button.is-danger{
    background:linear-gradient(180deg,#9f382d 0%,#682018 100%);
    border-color:#c85a4d;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 12px rgba(160,54,44,.18);
}

.notificationnext-action-form button.is-danger:hover,
.notificationnext-row-actions button.is-danger:hover{
    background:linear-gradient(180deg,#bd4638 0%,#7f271e 100%);
}

.notificationnext-action-form button.is-secondary,
.notificationnext-row-actions button.is-secondary{
    background:linear-gradient(180deg,#33271c 0%,#18120d 100%);
    border-color:rgba(214,152,69,.34);
    color:#efd5ae;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.notificationnext-action-form button.is-secondary:hover,
.notificationnext-row-actions button.is-secondary:hover{
    background:linear-gradient(180deg,#4a3420 0%,#20160f 100%);
    color:#fff1d7;
}

/* Legacy-/generische Modulnavigation innerhalb NotificationNext bewusst ausblenden.
   Die interne Navigation sitzt als Hero-Tabs direkt an der Hero-Card. */
.notificationnext-page-shell .module-navigation,
.notificationnext-page-shell .module-nav,
.notificationnext-page-shell .notificationnext-module-nav,
.notificationnext-page-shell .dsc-module-navigation{
    display:none !important;
}


/* v1.2.6 — DisplayName/Charname-Polish */
.notificationnext-userline{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
    padding:7px 11px;
    border:1px solid rgba(214,152,69,.28);
    border-radius:999px;
    background:rgba(0,0,0,.20);
    color:#d7c2a8;
    font-size:13px;
}

.notificationnext-userline strong{
    color:#ffd08b;
}

.notificationnext-userline span{
    color:#a99479;
    font-style:italic;
}

.notificationnext-actorline{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:2px 0 8px 0;
    padding:5px 9px;
    border:1px solid rgba(214,152,69,.20);
    border-radius:999px;
    background:rgba(255,153,0,.055);
    color:#cdb596;
    font-size:12px;
    font-weight:800;
}

.notificationnext-actorline a,
.notificationnext-actorline strong{
    color:#ffd08b;
    text-decoration:none;
}

.notificationnext-widget p strong{
    color:#ffd08b;
}