.push-prompt{
    position:fixed;
    bottom:20px;
    left:20px;
    right:20px;
    max-width:400px;
    margin:0 auto;
    background:var(--surface-card);
    border-radius:12px;
    padding:16px;
    box-shadow:var(--elev-shadow-dialog);
    z-index:10000;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.3s ease,transform 0.3s ease;
    border:1px solid var(--line-soft);
}
.push-prompt.show{
    opacity:1;
    transform:translateY(0);
}
.push-prompt-content{
    display:flex;
    align-items:center;
    gap:12px;
}
.push-prompt-icon{
    font-size:24px;
    flex-shrink:0;
}
.push-prompt-text{
    flex:1;
}
.push-prompt-title{
    font-size:15px;
    font-weight:500;
    color:var(--text-title);
    margin-bottom:4px;
}
.push-prompt-desc{
    font-size:13px;
    color:var(--color-text-secondary);
    line-height:1.4;
}
.push-prompt-btn{
    background:var(--color-accent);
    color:var(--text-title);
    border:none;
    border-radius:8px;
    padding:8px 16px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:background 0.2s;
    flex-shrink:0;
}
.push-prompt-btn:hover{
    background:var(--color-accent-hover);
}
.push-prompt-close{
    background:transparent;
    border:none;
    color:var(--color-text-secondary);
    font-size:20px;
    cursor:pointer;
    padding:0;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:color 0.2s;
}
.push-prompt-close:hover{
    color:var(--text-title);
}

.top-nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:calc(44px + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);
    background:var(--surface-nav);
    backdrop-filter:blur(10px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    border-bottom:1px solid var(--line-soft);
    box-shadow:var(--elev-shadow-soft);
}
.top-nav-inner{
    width:100%;
    max-width:960px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
}
.top-nav-inner > div:first-child{
    font-size:15px;
    color:var(--text-title);
    font-weight:500;
}
.app-logo{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    color:var(--text-title);
    text-decoration:none;
}
.app-logo:visited{
    color:var(--text-title);
}
.app-logo:hover{
    color:var(--text-title);
    text-decoration:none;
}
.app-logo img{
    width:22px;
    height:22px;
    object-fit:contain;
    display:block;
}
.header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}
.connection-pill{
    display:none;
    align-items:center;
    justify-content:center;
    min-width:82px;
    height:28px;
    padding:0 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    line-height:1;
    border:1px solid var(--line-strong);
    color:var(--color-text-primary);
    background:var(--legacy-panel-bg-strong);
}
.connection-pill.show{
    display:inline-flex;
}
.connection-pill.state-connecting{
    color:var(--status-warning);
    border-color:var(--legacy-accent-border);
    background:var(--legacy-danger-bg);
}
.connection-pill.state-updating{
    color:var(--legacy-text-info-soft);
    border-color:var(--legacy-accent-border);
    background:var(--legacy-indigo-soft);
}
.connection-pill.state-offline{
    color:var(--legacy-text-danger-pale);
    border-color:var(--legacy-danger-border);
    background:var(--legacy-danger-bg);
}
.refresh-btn{
    background:var(--btn-ghost-bg);
    border:1px solid var(--line-strong);
    border-radius:50%;
    color:var(--text-title);
    font-size:20px;
    cursor:pointer;
    padding:0;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.15s ease, transform 0.1s ease;
    box-shadow:var(--elev-shadow-soft);
}
.refresh-btn:hover{
    background:var(--btn-ghost-hover);
}
.refresh-btn:active{
    transform:scale(0.95);
}
.refresh-btn.refreshing{
    animation:spin 0.6s linear infinite;
}
@keyframes spin{
    to{ transform:rotate(360deg); }
}
.menu-toggle{
    background:var(--btn-ghost-bg);
    border:1px solid var(--line-strong);
    border-radius:50%;
    color:var(--text-title);
    font-size:20px;
    cursor:pointer;
    padding:0;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    display:none;
    align-items:center;
    justify-content:center;
    transition:background 0.15s ease, transform 0.1s ease;
    box-shadow:var(--elev-shadow-soft);
}
.menu-toggle:hover{
    background:var(--btn-ghost-hover);
}
.theme-toggle-btn{
    background:var(--btn-ghost-bg);
    border:1px solid var(--line-strong);
    border-radius:50%;
    color:var(--text-title);
    font-size:18px;
    cursor:pointer;
    padding:0;
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background var(--transition-base), transform var(--transition-fast);
}
.theme-toggle-icon{
    width:18px;
    height:18px;
    display:block;
    object-fit:contain;
    filter:brightness(0) saturate(100%) invert(100%);
}
[data-theme="light"] .theme-toggle-icon{
    filter:brightness(0) saturate(100%) invert(12%) sepia(16%) saturate(1655%) hue-rotate(182deg) brightness(96%) contrast(92%);
}
.theme-toggle-btn:hover{
    background:var(--btn-ghost-hover);
}
.theme-toggle-btn:active{
    transform:scale(0.95);
}
.menu-toggle:active{
    transform:scale(0.95);
}
[data-theme="light"] .header-actions .theme-toggle-btn,
[data-theme="light"] .header-actions .menu-toggle{
    background:transparent;
    border:none;
    box-shadow:none;
}
[data-theme="light"] .header-actions .theme-toggle-btn:hover,
[data-theme="light"] .header-actions .menu-toggle:hover,
[data-theme="light"] .header-actions .theme-toggle-btn:active,
[data-theme="light"] .header-actions .menu-toggle:active{
    background:transparent;
}
@media (min-width:769px){
    .top-nav .menu-toggle{
        display:none !important;
    }
}
.top-nav-links{
    display:flex;
    gap:6px;
    font-size:13px;
}
.top-nav-links a{
    color:var(--text-title);
    text-decoration:none;
    padding:6px 12px;
    border-radius:20px;
    border:none;
    background:var(--surface-muted);
    transition:background 0.15s;
    font-weight:400;
}
.top-nav-links a:hover{
    background:var(--btn-ghost-hover);
}
.top-nav-links a.active{
    background:var(--legacy-info-soft);
    color:var(--text-title);
}
.mobile-bottom-sticky-nav{
    display:none;
}
@media (max-width:768px){   
    .connection-pill{
        min-width:76px;
        height:26px;
        padding:0 8px;
        font-size:10px;
    }
    .mobile-bottom-sticky-nav{
        position:fixed;
        left:24px;
        right:24px;
        bottom:calc(8px + env(safe-area-inset-bottom, 0px));
        z-index:12000;
        display:flex;
        align-items:flex-start;
        justify-content:space-around;
        gap:2px;
        background:var(--surface-nav);
        border:1px solid var(--line-soft);
        border-radius:100px;
        padding:2px 1px;
        box-shadow:0 8px 24px var(--elev-shadow-menu);
        backdrop-filter:blur(10px);
    }
    .mobile-bottom-sticky-nav .mobile-bottom-item{
        flex:1;
        min-width:0;
        text-decoration:none;
        color:var(--text-title);
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        font-size:9px;
        font-weight:500;
        padding:3px 0;
        border-radius:100px;
        transition:background 0.12s ease,color 0.12s ease;
        -webkit-tap-highlight-color:transparent;
        tap-highlight-color:transparent;
    }
    .mobile-bottom-sticky-nav .mobile-bottom-item:active{
        background:transparent;
    }
    .mobile-bottom-sticky-nav .mobile-bottom-item img{
        width:30px;
        height:30px;
        object-fit:contain;
        opacity:1;
        padding:4px;
        box-sizing:border-box;
        border-radius:50%;
        background:transparent;
        filter:brightness(0) saturate(100%) invert(100%);
    }
    .mobile-bottom-sticky-nav .mobile-bottom-item .mobile-bottom-profile-avatar{
        width:30px;
        height:30px;
        box-sizing:border-box;
        border-radius:100px;
        border:1px solid var(--line-strong);
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
        background-color:var(--line-soft);
    }
    .mobile-bottom-sticky-nav .mobile-bottom-item.active{
        color:var(--color-accent-hover);
        background:transparent;
    }
    .mobile-bottom-sticky-nav .mobile-bottom-item.active img{
        background:transparent;
        filter:brightness(0) saturate(100%) invert(24%) sepia(89%) saturate(2618%) hue-rotate(220deg) brightness(89%) contrast(95%);
        opacity:1;
        box-shadow:none;
    }
    .mobile-bottom-sticky-nav .mobile-bottom-item.active .mobile-bottom-profile-avatar{
        border-color:var(--color-accent-hover);
        box-shadow:none;
    }
    .mobile-bottom-sticky-nav .mobile-bottom-item.active span{
        color:var(--color-accent-hover);
        font-weight:700;
    }
    body.has-mobile-bottom-nav{
        padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px));
    }
    body.telegram-layout.has-mobile-bottom-nav .telegram-app{
        padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px));
        box-sizing:border-box;
    }
}
.mobile-menu-overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--surface-overlay);
    z-index:1998;
    opacity:0;
    transition:opacity 0.3s ease;
    backdrop-filter:blur(2px);
}
.mobile-menu-overlay.active{
    display:block;
    opacity:1;
}
.mobile-menu{
    position:fixed;
    top:0;
    right:-80%;
    width:80%;
    max-width:320px;
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    background:var(--surface-menu);
    backdrop-filter:blur(20px);
    z-index:1999;
    padding:20px;
    padding-top:calc(20px + env(safe-area-inset-top, 0px));
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y:auto;
    transition:right 0.3s ease;
    border-left:1px solid var(--line-soft);
}
.mobile-menu.active{
    right:0;
}
body.telegram-layout .mobile-menu-overlay{
    z-index:90003 !important;
}
body.telegram-layout .mobile-menu{
    z-index:90003  !important;
}
.mobile-menu-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line-soft);
}
.mobile-menu-header .app-logo{
    font-size:16px;
}
.mobile-menu-close{
    height: 40px;
    width: 40px;
    background:none;
    border:none;
    color:var(--text-title);
    font-size:24px;
    cursor:pointer;
    padding:4px;
    border-radius:50%;
    transition:background 0.15s;
}
.mobile-menu-close:hover{
    background:var(--btn-ghost-bg);
}
.mobile-menu-links{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.mobile-menu-links a,
.mobile-menu-links span{
    display:block;
    color:var(--text-title);
    text-decoration:none;
    padding:12px 16px;
    border-radius:12px;
    border:none;
    background:var(--surface-muted);
    transition:background 0.15s,color 0.15s;
    font-size:15px;
    text-align:right;
}
.mobile-menu-links a:hover,
.mobile-menu-links a.active{
    background:var(--btn-ghost-hover);
    border:none;
    color:var(--text-title);
}
[data-theme="dark"] .mobile-menu-links a:hover{
    background:rgba(51,144,236,0.14);
    color:#ffffff;
}
[data-theme="dark"] .mobile-menu-links a.active{
    background:rgba(51,144,236,0.22);
    color:#ffffff;
}
[data-theme="light"] .mobile-menu-links a.active{
    background:var(--legacy-info-soft);
    border:none;
}
.mobile-menu-links .user-badge{
    background:var(--legacy-teal-soft);
    color:var(--legacy-text-success-soft);
    border-color:var(--legacy-teal-border);
}
.mobile-menu-links a[href="logout.php"]{
    background:var(--legacy-danger-bg);
    color:var(--status-danger);
    border-color:var(--legacy-danger-border);
}
.mobile-menu-links a[href="logout.php"]:hover{
    background:var(--legacy-danger-mid);
}
.user-badge{
    padding:4px 10px;
    border-radius:var(--radius-full);
    background:var(--legacy-teal-soft);
    color:var(--legacy-text-success-soft);
    border:1px solid var(--legacy-teal-border);
}
.logout-link{
    color:var(--color-error);
    text-decoration:none;
    font-size:13px;
    border-radius:var(--radius-full);
    padding:4px 10px;
    border:1px solid var(--legacy-danger-border);
    background:var(--legacy-danger-bg);
    transition:background var(--transition-base);
}
.logout-link:hover{
    background:var(--legacy-danger-mid);
}
.footer-link{
    color:var(--color-accent);
    text-decoration:none;
}
.footer{
    margin-top:var(--spacing-lg);
}
.status-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:var(--status-success);
    box-shadow:var(--legacy-status-glow);
}
.status-dot-small{
    width:7px;
    height:7px;
    border-radius:999px;
    background:var(--status-success);
    box-shadow:var(--legacy-status-glow-soft);
    margin-inline-end:4px;
}
.dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:var(--status-success);
    box-shadow:var(--legacy-status-glow);
}
.back-link{
    font-size:12px;
    color:var(--text-muted);
    text-decoration:none;
    border-radius:999px;
    padding:6px 12px;
    border:1px solid var(--legacy-info-border);
    transition:all 0.15s;
}
.back-link:hover{
    background:var(--legacy-info-soft);
    color:var(--legacy-text-soft-2);
}
.image-lightbox{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:10000;
    touch-action: none;
}
.image-lightbox.active{
    display:flex;
    align-items:center;
    justify-content:center;
}
.lightbox-overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--legacy-panel-bg-strong-2);
    backdrop-filter:blur(10px);
}
.lightbox-content{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    touch-action: none;
}
.lightbox-content img{
    max-width:90vw;
    max-height:90vh;
    object-fit:contain;
    border-radius:12px;
    box-shadow:none;
}
.lightbox-content .lightbox-video-host{
    display:none;
    max-width:90vw;
    max-height:90vh;
    width:90vw;
    height:90vh;
    align-items:center;
    justify-content:center;
}
.lightbox-content .lightbox-video-host .attachment-video-frame{
    max-width:90vw !important;
    max-height:90vh !important;
}
.lightbox-nav{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    background:var(--legacy-panel-bg-strong);
    border:1px solid var(--line-strong);
    color:var(--text-title);
    width:36px;
    height:36px;
    border-radius:50%;
    font-size:24px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10001;
    touch-action: manipulation;
}
.lightbox-prev{
    right:16px;
}
.lightbox-next{
    left:16px;
}
.lightbox-counter{
    position:fixed;
    bottom:70px;
    left:50%;
    transform:translateX(-50%);
    color:var(--color-text-primary);
    background:var(--legacy-panel-bg-strong);
    border:1px solid var(--legacy-info-border);
    border-radius:999px;
    padding:4px 10px;
    font-size:12px;
    z-index:10002;
}
.lightbox-thumbs{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 2px;
    z-index:10002;
    max-width:calc(100vw - 24px);
}
.lightbox-thumbs::-webkit-scrollbar{
    height:4px;
}
.lightbox-thumbs::-webkit-scrollbar-thumb{
    background:var(--legacy-info-soft);
    border-radius:999px;
}
.lightbox-thumb{
    width:50px;
    height:50px;
    min-width:50px;
    position:relative;
    border-radius:8px;
    border:1px solid var(--legacy-info-border);
    background:var(--legacy-panel-bg-strong);
    padding:0;
    overflow:hidden;
    cursor:pointer;
    opacity:0.75;
}
.lightbox-thumb.active{
    border-color:var(--color-accent);
    box-shadow:var(--legacy-accent-glow);
    opacity:1;
}
.lightbox-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.lightbox-thumb video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:var(--media-surface);
}
.lightbox-thumb.video-thumb::after{
    content:'';
    position:absolute;
    left:4px;
    bottom:4px;
    width:0;
    height:0;
    border-top:3px solid transparent;
    border-bottom:3px solid transparent;
    border-left:5px solid var(--surface-card);
    z-index:2;
    pointer-events:none;
}
.lightbox-close{
    position:fixed;
    top:calc(56px + env(safe-area-inset-top, 0px));
    left:calc(12px + env(safe-area-inset-left, 0px));
    background:transparent;
    border:none;
    color:var(--text-title);
    width:36px;
    height:36px;
    min-width:24px;
    min-height:24px;
    border-radius:0;
    font-size:30px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.15s;
    font-family:var(--font-family);
    z-index:10003;
    touch-action: manipulation;
    pointer-events: auto;
}
.lightbox-close::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
}
.lightbox-close:hover{
    transform:scale(1.08);
}
.notif-badge{
    min-width:18px;
    height:18px;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:0 5px;
    margin-right:6px;
    background:var(--status-danger);
    color:#ffffff;
    font-size:11px;
    font-weight:700;
    line-height:1;
}
.notif-toast-wrap{
    position:fixed;
    top:calc(8px + env(safe-area-inset-top, 0px));
    right:14px;
    z-index:90010;
    display:none;
    flex-direction:column;
    gap:6px;
    width:min(312px, calc(100vw - 28px));
}
.notif-toast-wrap.show{
    display:flex;
}
.notif-stack{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.notif-stack-toggle{
    width:100%;
    min-height:32px;
    border:none;
    border-radius:16px;
    background:var(--legacy-panel-bg-strong);
    color:var(--color-text-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    box-shadow:var(--elev-shadow-menu);
}
.notif-stack-close-all{
    width:100%;
    min-height:32px;
    border:none;
    border-radius:16px;
    background:var(--legacy-danger-bg);
    color:var(--legacy-text-danger-pale);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    box-shadow:var(--elev-shadow-menu);
}
.notif-toast{
    display:block;
    text-decoration:none;
    border-radius:16px;
    padding:8px 34px 8px 10px;
    background:var(--legacy-gradient-chat-primary);
    border:1px solid var(--legacy-accent-border);
    color:var(--text-title);
    box-shadow:0 10px 24px var(--elev-shadow-menu);
    text-align:right;
    direction:rtl;
    position:relative;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
    transition:transform 0.18s ease, opacity 0.18s ease;
}
.notif-toast.closing{
    opacity:0;
    transform:translateX(18px);
}
.notif-toast-close{
    position:absolute;
    top:7px;
    left:7px;
    width:20px;
    height:20px;
    border:none;
    background:transparent;
    padding:0;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0.85;
}
.notif-toast-close:hover{
    opacity:1;
    background:var(--line-soft);
}
.notif-toast-close img{
    width:14px;
    height:14px;
    filter:brightness(0) saturate(100%) invert(100%);
    pointer-events:none;
}
.notif-toast-title{
    font-size:13px;
    font-weight:700;
    margin-bottom:2px;
}
.notif-toast-body{
    font-size:11px;
    color:var(--color-text-primary);
    line-height:1.35;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
[data-theme="light"] .mobile-bottom-sticky-nav .mobile-bottom-item{
    color:var(--color-text-primary);
}
[data-theme="light"] .mobile-bottom-sticky-nav .mobile-bottom-item img{
    filter:none;
}
[data-theme="light"] .mobile-bottom-sticky-nav .mobile-bottom-item.active img{
    filter:none;
}
[data-theme="light"] .mobile-menu-links .user-badge{
    background:var(--legacy-teal-soft);
    color:var(--status-success);
}
[data-theme="light"] .mobile-menu-links a[href="logout.php"]{
    background:var(--legacy-danger-soft);
    color:var(--status-danger);
    border-color:var(--legacy-danger-border);
}
[data-theme="light"] .lightbox-overlay{
    background:var(--surface-card);
}
[data-theme="light"] .lightbox-counter{
    color:var(--color-text-primary);
    background:var(--surface-card);
    border-color:var(--legacy-info-border);
}
[data-theme="light"] .lightbox-nav{
    background:var(--surface-card);
    border-color:var(--legacy-info-border);
    color:var(--color-text-primary);
}
[data-theme="light"] .notif-stack-toggle{
    background:#ffffff;
    color:var(--color-text-primary);
    border:1px solid rgba(15,23,42,0.12);
}
[data-theme="light"] .notif-toast{
    background:#ffffff;
    border-color:rgba(15,23,42,0.14);
    color:var(--color-text-primary);
}
[data-theme="light"] .notif-toast-body{
    color:var(--color-text-secondary);
}
[data-theme="light"] .notif-toast-title{
    color:var(--color-text-primary);
}
[data-theme="light"] .notif-toast-from{
    color:var(--color-accent);
}
[data-theme="light"] .notif-toast-badge{
    background:rgba(37,99,235,0.1);
    border-color:rgba(37,99,235,0.25);
    color:#1d4ed8;
}
[data-theme="light"] .notif-toast-close:hover{
    background:rgba(15,23,42,0.08);
}
[data-theme="light"] .notif-toast-close img{
    filter:brightness(0) saturate(100%) invert(18%) sepia(23%) saturate(1007%) hue-rotate(180deg) brightness(95%) contrast(92%);
}
.notif-toast-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:18px;
    padding:0 7px;
    border-radius:999px;
    background:var(--legacy-info-soft);
    border:1px solid var(--legacy-accent-border);
    color:var(--legacy-text-info-soft);
    font-size:10px;
    font-weight:700;
    margin-bottom:4px;
}
.notif-toast-from{
    color:var(--legacy-text-info-soft);
    font-size:11px;
    font-weight:600;
    margin-bottom:2px;
}
[data-theme="light"] .notif-toast{
    background:#ffffff;
    border-color:rgba(15,23,42,0.14);
    color:var(--color-text-primary);
    box-shadow:0 10px 24px rgba(15,23,42,0.16);
}
[data-theme="light"] .notif-toast-title{
    color:var(--color-text-primary);
}
[data-theme="light"] .notif-toast-body{
    color:var(--color-text-secondary);
}
[data-theme="light"] .notif-toast-from{
    color:#1d4ed8;
}
[data-theme="light"] .notif-toast-badge{
    background:rgba(37,99,235,0.1);
    border-color:rgba(37,99,235,0.25);
    color:#1d4ed8;
}
[data-theme="light"] .notif-stack-toggle{
    background:#ffffff;
    color:var(--color-text-primary);
    border:1px solid rgba(15,23,42,0.12);
}
[data-theme="light"] .notif-toast-close:hover{
    background:rgba(15,23,42,0.08);
}
[data-theme="light"] .notif-toast-close img{
    filter:brightness(0) saturate(100%) invert(18%) sepia(23%) saturate(1007%) hue-rotate(180deg) brightness(95%) contrast(92%);
}
[data-theme="dark"] .notif-toast{
    background:#182536;
    border-color:rgba(148,163,184,0.24);
    color:#f8fafc;
    box-shadow:0 10px 24px rgba(2,6,23,0.32);
}
[data-theme="dark"] .notif-toast-title{
    color:#f8fafc;
}
[data-theme="dark"] .notif-toast-body{
    color:#cbd5e1;
}
[data-theme="dark"] .notif-toast-from{
    color:#93c5fd;
}
[data-theme="dark"] .notif-toast-badge{
    background:rgba(37,99,235,0.18);
    border-color:rgba(37,99,235,0.35);
    color:#93c5fd;
}
[data-theme="dark"] .notif-stack-toggle{
    background:#1b2635;
    color:#e2e8f0;
    border:1px solid rgba(148,163,184,0.24);
}
[data-theme="dark"] .notif-stack-close-all{
    background:rgba(220,38,38,0.2);
    color:#fecaca;
    border:1px solid rgba(220,38,38,0.35);
}
@media (max-width:768px){
    .notif-toast-wrap{
        right:10px;
        left:10px;
        width:auto;
        top:calc(8px + env(safe-area-inset-top, 0px));
    }
    .notif-toast{
        border-radius:14px;
        padding:8px 32px 8px 10px;
    }
    .notif-toast-close{
        top:7px;
        left:7px;
    }
}