* {
    --toast-white: 255,255,255;
    --toast-black: 0,0,0;
    --toast-green: 102, 187, 106;
    --toast-red: 239, 83, 80;
    --toast-nutral: 189, 189, 189;
    --toast-orange: 255, 165, 0;
    --toast-yellow: 212 194 129;
    --toast-gray: 238, 238, 238;
    --toast-dark-gray: 140, 140, 140;

    --white: 255, 255, 255;

    --box-shaddow-inset: inset 10px -10px 15px -15px;
    --box-shaddow-outset: 0px 10px 10px -4px rgb(0 0 0 / 0.4);
    --toast-lightmode: #ffffff;
    --toast-darkmode: #1b1b1e;
    --toast-progressbar: #8f8f8f;

    --glass-bg: rgba(17, 24, 39, 0.55);        /* #111827 @ ~55% */
    --glass-bg-light: rgba(31, 41, 55, 0.40);  /* #1F2937 */
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-ring: rgba(34, 197, 94, 0.35);     /* soft green glow */

}

.notification {
    position: fixed;
    z-index: 999999;
    max-width: 350px;
    width: 100%;
}

.top-right {
    top: 20px;
    right: 20px;
}

.top-center {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-left {
    bottom: 20px;
    left: 20px;
}

.bottom-right {
    bottom: 20px;
    right: 20px;
}

.bottom-center {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.top-left {
    top: 20px;
    left: 20px;
}

.notification-title {
    padding-right: 30px;
}

.notification-icon {
    min-width: 1.7rem;
    background-repeat: no-repeat;
    background-position: center;
    padding: 2px;
    border-radius: 5px;
}

.notification-dismiss-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    backdrop-filter: blur(10px);
    border-radius: 5px;
    box-shadow: 0 0 6px -2px black;
    transition: background 200ms;
}

.notification-dismiss-btn:hover {
    background: rgba(255, 255, 255, 0.44);
}

.notification-dismiss-btn svg {
    width: 1.5rem;
}

/*.default-mode {*/
.notification-toast-default {
    background: var(--toast-white);
    color: rgba(var(--toast-black));
    /*box-shadow: var(--box-shaddow-inset) rgba(var(--black-300)), var(--box-shaddow-outset);*/
}

.notification-toast-update {
    color: var(--toast-white);
    svg :nth-child(1) {
        stroke: rgba(var(--toast-white));
    }
}


.notification-toast-success {
    color: rgba(var(--toast-black));
    svg path {
        stroke: rgba(var(--toast-green));
    }
    .notification-icon {
        background: rgba(var(--toast-green),.1);
        box-shadow: var(--box-shaddow-inset) rgba(var(--toast-green),.5);
    }
    .notification-title {
        color: rgba(var(--toast-green));
    }
    .notification-dismiss-btn {
        background: rgba(var(--toast-green),.1);
    }
}

.notification-toast-success:before {
    background: rgba(var(--toast-green));
}

.notification-toast-warning {
    color: rgba(var(--toast-black));
    svg path {
        stroke: rgba(var(--toast-orange));
    }
    .notification-icon {
        background: rgba(var(--toast-orange),.1);
        box-shadow: var(--box-shaddow-inset) rgba(var(--toast-orange),.5);
    }
    .notification-title {
        color: rgba(var(--toast-orange));
    }
    .notification-dismiss-btn {
        background: rgba(var(--toast-orange),.1);
    }
}

.notification-toast-warning:before {
    background: rgba(var(--toast-orange));
}

.notification-toast-info {
    color: rgba(var(--toast-black));
    svg path {
        stroke: rgba(var(--toast-gray));
    }
    .notification-icon {
        background: rgba(var(--toast-dark-gray),.1);
        box-shadow: var(--box-shaddow-inset) rgba(var(--toast-dark-gray),.5);
    }
    .notification-title {
        color: rgba(var(--toast-gray));
    }
    .notification-dismiss-btn {
        background: rgba(var(--toast-gray),.1);
    }
}

.notification-toast-info:before {
    background: rgba(var(--toast-dark-gray));
}

.notification-toast-error {
    color: rgba(var(--toast-black));
    svg path {
        stroke: rgba(var(--toast-red));
    }
    .notification-icon {
        background: rgba(var(--toast-red),.1);
        box-shadow: var(--box-shaddow-inset) rgba(var(--toast-red),.5);
    }
    .notification-title {
        color: rgba(var(--toast-red));
    }
    .notification-dismiss-btn {
        background: rgba(var(--toast-red),.1);
    }
}

.notification-toast-error:before {
    background: rgba(var(--toast-red));
}

/*}*/

.light-mode {
    .notification-toast-default,
    .notification-toast-success,
    .notification-toast-update,
    .notification-toast-warning,
    .notification-toast-info,
    .notification-toast-error {
        background: var(--toast-lightmode);
        color: rgba(var(--toast-black));
    }
}

.dark-mode {
    .notification-toast-default,
    .notification-toast-success,
    .notification-toast-update,
    .notification-toast-warning,
    .notification-toast-info,
    .notification-toast-error {
        background: var(--toast-darkmode);
        color: var(--toast-white);
    }
}

.notification-toast-default .notification-progressbar {
    background: var(--toast-progressbar);
}

.notification-toast-success .notification-progressbar {
    background: rgba(var(--toast-green));
}

.notification-toast-info .notification-progressbar {
    background: var(--toast-progressbar);
}

.notification-toast-warning .notification-progressbar {
    background: rgba(var(--toast-orange));
}

.notification-toast-error .notification-progressbar {
    background: rgba(var(--toast-red));
}

.notification-toast-update .notification-progressbar {
    background: var(--toast-progressbar);
}

.top-right .notification-container,
.bottom-right .notification-container {
    margin-left: auto;
}

.top-left .notification-container,
.bottom-left .notification-container {
    margin-right: auto;
}

.top-center .notification-container,
.bottom-center .notification-container {
    margin-right: auto;
    margin-left: auto;
}

.notification-progressbar {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 3px;
    width: 0;
    transition: width attr(data-duration ms) linear;
    border-radius: 2px;
}

.notification-container {
    position: relative;
    margin: 5px;
    width: fit-content;
    border-radius: 10px;
    opacity: 0.95;
    overflow: hidden;
    transition: opacity 500ms ease-in-out,
    transform 500ms;
}


.notification-container:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    filter: blur(15px);
    top: 50%;
    transform: translateY(-50%);
    left: -20px;
    border-radius: 100%;
}

.notification-message {
    font-size: 13px;
    line-height: 1;
}

.notification-active {
    right: 5px;
}

.notification-block {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px 15px;
    gap: 10px;
}

.notification-block b {
    line-height: 2;
}

.notification-animation {
    padding: 0.125rem;
    animation: update 1s linear infinite;
}

@keyframes update {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.slide-in.slide-down {
    animation: slideInDown 600ms;
}

.slide-out.slide-down {
    animation: slideOutDown 600ms;
}

@keyframes slideInDown {
    from {
        transform: translateY(-100vh);
    }
    to {
        transform: unset;
    }
}

@keyframes slideOutDown {
    from {
        transform: unset;
    }
    to {
        transform: translateY(-100vh);
    }
}

.slide-in.slide-up {
    animation: slideInUp 600ms;
}

.slide-out.slide-up {
    animation: slideOutUp 600ms;
}

@keyframes slideInUp {
    from {
        transform: translateY(100vh);
    }
    to {
        transform: unset;
    }
}

@keyframes slideOutUp {
    from {
        transform: unset;
    }
    to {
        transform: translateY(100vh);
    }
}

.slide-in.slide-right {
    animation: slideInRight 600ms;
}

.slide-out.slide-right {
    animation: slideOutRight 600ms;
}

@keyframes slideInRight {
    from {
        transform: translateX(100vh);
    }
    to {
        transform: unset;
    }
}

@keyframes slideOutRight {
    from {
        transform: unset;
    }
    to {
        transform: translateX(100vh);
    }
}

.slide-in.slide-left {
    animation: slideInLeft 600ms;
}

.slide-out.slide-left {
    animation: slideOutLeft 600ms;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100vh);
    }
    to {
        transform: unset;
    }
}

@keyframes slideOutLeft {
    from {
        transform: unset;
    }
    to {
        transform: translateX(-100vh);
    }
}



/*.notification.glass-mode .notification-container {*/
/*    backdrop-filter: blur(10px);*/
/*    background: rgba(31,41,55,.45);*/
/*    border: 1px solid rgba(255,255,255,.08);*/
/*    border-radius: 14px;*/
/*    box-shadow: 0 8px 30px rgba(0,0,0,.25);*/
/*}*/
/*.notification-title { color: #e5e7eb; }     !* text-gray-200 *!*/
/*.notification-text  { color: #cbd5e1; }     !* text-gray-300 *!*/


/*!* Root container gets .glass-mode in addition to .notification *!*/
/*.notification.glass-mode {*/
/*    !* Positions bleiben wie gehabt *!*/
/*}*/

/*!* Ein einzelner Toast *!*/
/*.notification.glass-mode .notification-container {*/
/*    background: var(--glass-bg);*/
/*    backdrop-filter: blur(10px);*/
/*    -webkit-backdrop-filter: blur(10px);*/
/*    border: 1px solid var(--glass-border);*/
/*    border-radius: 14px;*/
/*    box-shadow: 0 8px 30px rgba(0,0,0,.25);*/
/*    color: rgba(var(--toast-white), .95);*/
/*}*/

/*!* Innerer Block *!*/
/*.notification.glass-mode .notification-block {*/
/*    background: linear-gradient(*/
/*        180deg,*/
/*        rgba(255,255,255,0.02) 0%,*/
/*        rgba(0,0,0,0.05) 100%*/
/*    );*/
/*    border-radius: 12px;*/
/*}*/

/*!* Titel/Copy *!*/
/*.notification.glass-mode .notification-title {*/
/*    color: rgba(229,231,235,.95); !* gray-200 *!*/
/*    font-weight: 600;*/
/*}*/
/*.notification.glass-mode .notification-message {*/
/*    color: rgba(203,213,225,.95); !* gray-300 *!*/
/*}*/

/*!* Dismiss *!*/
/*.notification.glass-mode .notification-dismiss-btn {*/
/*    background: rgba(255,255,255,0.06);*/
/*    border: 1px solid var(--glass-border);*/
/*    box-shadow: 0 4px 16px rgba(0,0,0,.2);*/
/*}*/
/*.notification.glass-mode .notification-dismiss-btn:hover {*/
/*    background: rgba(255,255,255,0.12);*/
/*}*/

/*!* Icon-Kapsel *!*/
/*.notification.glass-mode .notification-icon {*/
/*    background: var(--glass-bg-light);*/
/*    border: 1px solid var(--glass-border);*/
/*    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);*/
/*}*/

/*!* Progressbar (fein, halbtransparent) *!*/
/*.notification.glass-mode .notification-progressbar {*/
/*    height: 2px;*/
/*    border-radius: 1px;*/
/*    opacity: .9;*/
/*}*/

/*!* Variants – dezente Akzentfarbe + linkes Accent-Bar *!*/
/*.notification.glass-mode .notification-container { position: relative; }*/
/*.notification.glass-mode .notification-container::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    inset: 0 0 0 auto;  !* deaktiviert — wir nutzen unten per Variant *!*/
/*}*/

/*!* SUCCESS *!*/
/*.notification.glass-mode .notification-toast-success {*/
/*    --accent: rgba(var(--toast-green), 1);*/
/*}*/
/*.notification.glass-mode .notification-toast-success .notification-icon {*/
/*    background: rgba(var(--toast-green), .12);*/
/*    border-color: rgba(var(--toast-green), .25);*/
/*}*/
/*.notification.glass-mode .notification-toast-success .notification-title {*/
/*    color: rgba(var(--toast-green), .95);*/
/*}*/
/*.notification.glass-mode .notification-toast-success .notification-progressbar {*/
/*    background: var(--accent);*/
/*}*/
/*.notification.glass-mode .notification-toast-success::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0; top: 0; bottom: 0; width: 3px;*/
/*    background: linear-gradient(180deg, var(--accent), rgba(var(--toast-green), .6));*/
/*    border-radius: 3px 0 0 3px;*/
/*}*/

/*!* INFO / UPDATE (neutral) *!*/
/*.notification.glass-mode .notification-toast-info,*/
/*.notification.glass-mode .notification-toast-update {*/
/*    --accent: rgba(var(--toast-dark-gray), 1);*/
/*}*/
/*.notification.glass-mode .notification-toast-info .notification-icon,*/
/*.notification.glass-mode .notification-toast-update .notification-icon {*/
/*    background: rgba(var(--toast-dark-gray), .12);*/
/*    border-color: rgba(var(--toast-dark-gray), .25);*/
/*}*/
/*.notification.glass-mode .notification-toast-info .notification-title,*/
/*.notification.glass-mode .notification-toast-update .notification-title {*/
/*    color: rgba(var(--toast-gray), .95);*/
/*}*/
/*.notification.glass-mode .notification-toast-info .notification-progressbar,*/
/*.notification.glass-mode .notification-toast-update .notification-progressbar {*/
/*    background: var(--accent);*/
/*}*/
/*.notification.glass-mode .notification-toast-info::before,*/
/*.notification.glass-mode .notification-toast-update::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0; top: 0; bottom: 0; width: 3px;*/
/*    background: linear-gradient(180deg, var(--accent), rgba(var(--toast-dark-gray), .6));*/
/*    border-radius: 3px 0 0 3px;*/
/*}*/

/*!* WARNING *!*/
/*.notification.glass-mode .notification-toast-warning {*/
/*    --accent: rgba(var(--toast-orange), 1);*/
/*}*/
/*.notification.glass-mode .notification-toast-warning .notification-icon {*/
/*    background: rgba(var(--toast-orange), .12);*/
/*    border-color: rgba(var(--toast-orange), .25);*/
/*}*/
/*.notification.glass-mode .notification-toast-warning .notification-title {*/
/*    color: rgba(var(--toast-orange), .95);*/
/*}*/
/*.notification.glass-mode .notification-toast-warning .notification-progressbar {*/
/*    background: var(--accent);*/
/*}*/
/*.notification.glass-mode .notification-toast-warning::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0; top: 0; bottom: 0; width: 3px;*/
/*    background: linear-gradient(180deg, var(--accent), rgba(var(--toast-orange), .6));*/
/*    border-radius: 3px 0 0 3px;*/
/*}*/

/*!* ERROR *!*/
/*.notification.glass-mode .notification-toast-error {*/
/*    --accent: rgba(var(--toast-red), 1);*/
/*}*/
/*.notification.glass-mode .notification-toast-error .notification-icon {*/
/*    background: rgba(var(--toast-red), .12);*/
/*    border-color: rgba(var(--toast-red), .25);*/
/*}*/
/*.notification.glass-mode .notification-toast-error .notification-title {*/
/*    color: rgba(var(--toast-red), .95);*/
/*}*/
/*.notification.glass-mode .notification-toast-error .notification-progressbar {*/
/*    background: var(--accent);*/
/*}*/
/*.notification.glass-mode .notification-toast-error::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0; top: 0; bottom: 0; width: 3px;*/
/*    background: linear-gradient(180deg, var(--accent), rgba(var(--toast-red), .6));*/
/*    border-radius: 3px 0 0 3px;*/
/*}*/
/* ===== Toast · Glass v2 (Badge) ===== */
.notification.glass-mode .notification-container {
    backdrop-filter: blur(14px);
    background: rgba(17, 24, 39, .52);          /* dunkleres Glas */
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
}

.notification.glass-mode .notification-block {
    padding: 14px 16px 16px 16px;
    gap: 12px;
}

/* Icon als soft pill */
.notification.glass-mode .notification-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Headline-Zeile: Badge + Title */
.notification.glass-mode .notification-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 36px;                    /* Platz für Close */
    font-weight: 700;
    letter-spacing: .2px;
    color: #e5e7eb;                         /* text-gray-200 */
}

/* Badge aus data-badge rendern */
.notification.glass-mode .notification-container[data-badge] .notification-title::before {
    content: attr(data-badge);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 4px 8px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(31,41,55,.55);         /* dunkles Glas */
    color: #cbd5e1;                          /* text-gray-300 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* Subtext */
.notification.glass-mode .notification-message {
    margin-top: 6px;
    line-height: 1.35;
    color: #cbd5e1;                          /* text-gray-300 */
}

/* Close-Button dezenter */
.notification.glass-mode .notification-dismiss-btn {
    top: 10px; right: 10px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.notification.glass-mode .notification-dismiss-btn:hover {
    background: rgba(255,255,255,.12);
}

/* Progressbar dünn & soft */
.notification.glass-mode .notification-progressbar {
    height: 2px;
    border-radius: 2px;
    opacity: .9;
}

/* --- State-Akzente -------------------------------------------------- */
:root {
    --toast-accent-cyan:  14,116,144;  /* cyan-700 */
    --toast-accent-green: 34,197, 94;  /* green-500 */
    --toast-accent-red: 239, 68, 68;   /* red-500 */
    --toast-accent-amber:245,158, 11;  /* amber-500 */
    --toast-accent-gray: 148,163,184;  /* slate-400 */
}

/* Update / running */
.notification-toast-update .notification-icon {
    background: rgba(var(--toast-accent-cyan), .12);
    border-color: rgba(var(--toast-accent-cyan), .28);
}
.notification-toast-update .notification-title { color:#e6fbff; }
.notification-toast-update .notification-progressbar {
    background: rgba(var(--toast-accent-cyan), .85);
}

/* Success */
.notification-toast-success .notification-icon {
    background: rgba(var(--toast-accent-green), .10);
    border-color: rgba(var(--toast-accent-green), .25);
}
.notification-toast-success .notification-title { color: #bbf7d0; } /* green-200 */
.notification-toast-success .notification-progressbar {
    background: rgba(var(--toast-accent-green), .9);
}

/* Error */
.notification-toast-error .notification-icon {
    background: rgba(var(--toast-accent-red), .10);
    border-color: rgba(var(--toast-accent-red), .28);
}
.notification-toast-error .notification-title { color: #fecaca; } /* red-200 */
.notification-toast-error .notification-progressbar {
    background: rgba(var(--toast-accent-red), .9);
}

/* Info */
.notification-toast-info .notification-icon {
    background: rgba(var(--toast-accent-gray), .10);
    border-color: rgba(var(--toast-accent-gray), .25);
}
.notification-toast-info .notification-title { color:#e5e7eb; }
.notification-toast-info .notification-progressbar {
    background: rgba(var(--toast-accent-gray), .85);
}


/* Title row with inline badge */
.notification-title {
    display: flex;
    align-items: center;
    gap: .5rem;           /* Space between badge and title */
    line-height: 1.2;
    margin-bottom: .15rem;
}

/* The badge itself (glass-styled) */
.notification-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 4px 8px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(31,41,55,.55);
    color: #cbd5e1; /* gray-300 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* keep your bold style on the title text itself */
.notification-title-text b {
    color: #e5e7eb; /* gray-200 */
    font-weight: 800;
    letter-spacing: .3px;
}

/* Subtitle (domain) on its own line, slightly larger and brighter */
.notification-subtitle {
    margin-top: .25rem;
    font-weight: 700;
    color: #e5e7eb; /* gray-200 */
}

/* Glass container (you already had this, listing again for completeness) */
.notification.glass-mode .notification-container {
    backdrop-filter: blur(10px);
    background: rgba(31,41,55,.45);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
}