.notif-stack{
    position:fixed;
    right:1.25rem;
    bottom:1.25rem;
    z-index:600;
    display:flex;
    flex-direction:column-reverse;
    gap:.55rem;
    max-height:calc(100vh - 2.5rem);
    pointer-events:none;
}

.notif{
    position:relative;
    display:flex;
    align-items:stretch;
    min-width:290px;
    max-width:410px;
    overflow:hidden;
    border:1px solid rgba(31,78,52,.14);
    border-radius:12px;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 54px -34px rgba(8,48,27,.55);
    pointer-events:auto;
    animation:notifIn .25s cubic-bezier(.22,1,.36,1) both;
}

.notif.exit{animation:notifOut .2s ease both}
.notif-accent{width:3px;flex-shrink:0}
.notif-accent.ok{background:#237a4b}
.notif-accent.err{background:#c74545}
.notif-accent.info{background:#3c718d}
.notif-accent.warn{background:#a06a28}
.notif-body{display:flex;align-items:center;gap:.7rem;min-width:0;flex:1;padding:.75rem .5rem .75rem .85rem}
.notif-icon{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:8px}
.notif-icon.ok{background:rgba(35,122,75,.09)}
.notif-icon.err{background:rgba(199,69,69,.09)}
.notif-icon.info{background:rgba(60,113,141,.09)}
.notif-icon.warn{background:rgba(160,106,40,.09)}
.notif-icon svg{width:16px;height:16px}
.notif-icon.ok svg{color:#237a4b}
.notif-icon.err svg{color:#c74545}
.notif-icon.info svg{color:#3c718d}
.notif-icon.warn svg{color:#a06a28}
.notif-icon svg path.draw{stroke-dasharray:30;stroke-dashoffset:30;animation:notifDraw .45s .08s ease forwards}
.notif-text{min-width:0;flex:1;color:#122219;font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:.83rem;font-weight:600;line-height:1.45;word-break:break-word}
.notif-close{display:grid;place-items:center;width:28px;height:28px;margin-right:.2rem;flex-shrink:0;border:0;border-radius:7px;background:transparent;color:rgba(18,34,25,.42);cursor:pointer;opacity:.7;transition:background-color .16s ease,color .16s ease,opacity .16s ease}
.notif-close:hover{background:rgba(35,122,75,.07);color:#155c38;opacity:1}
.notif-close svg{width:11px;height:11px}
.notif-bar{position:absolute;right:0;bottom:0;left:3px;height:2px;transform-origin:left}
.notif-bar.ok{background:#237a4b}
.notif-bar.err{background:#c74545}
.notif-bar.info{background:#3c718d}
.notif-bar.warn{background:#a06a28}

.cfd-overlay{
    position:fixed;
    inset:0;
    z-index:700;
    display:grid;
    place-items:center;
    padding:1rem;
    background:rgba(4,20,11,.54);
    backdrop-filter:blur(8px);
    animation:cfdBgIn .18s ease both;
}

.cfd-overlay.exit{animation:cfdBgOut .16s ease both}
.cfd-box{width:100%;max-width:390px;overflow:hidden;border:1px solid rgba(31,78,52,.14);border-radius:16px;background:#fff;box-shadow:0 28px 74px -38px rgba(4,31,17,.72);animation:cfdBoxIn .22s cubic-bezier(.22,1,.36,1) both}
.cfd-overlay.exit .cfd-box{animation:cfdBoxOut .16s ease both}
.cfd-top{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.35rem .8rem}
.cfd-ico{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:10px}
.cfd-ico.warn{background:rgba(160,106,40,.09)}
.cfd-ico.warn svg{color:#a06a28}
.cfd-ico.danger{background:rgba(199,69,69,.09)}
.cfd-ico.danger svg{color:#c74545}
.cfd-ico.info{background:rgba(35,122,75,.09)}
.cfd-ico.info svg{color:#237a4b}
.cfd-ico svg{width:21px;height:21px}
.cfd-title{color:#122219;font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:.95rem;font-weight:700;line-height:1.35}
.cfd-msg{padding:0 1.35rem 1rem;color:rgba(18,34,25,.62);font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:.84rem;line-height:1.6;white-space:pre-line}
.cfd-btns{display:flex;justify-content:flex-end;gap:.5rem;padding:.8rem 1.2rem 1.15rem;border-top:1px solid rgba(31,78,52,.1)}
.cfd-btn{min-height:40px;padding:0 1rem;border:1px solid transparent;border-radius:9px;font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
.cfd-btn.cancel{border-color:rgba(31,78,52,.14);background:transparent;color:rgba(18,34,25,.64)}
.cfd-btn.cancel:hover{border-color:#64a982;background:rgba(35,122,75,.06);color:#155c38}
.cfd-btn.ok{color:#fff}
.cfd-btn.ok.warn{background:#a06a28}
.cfd-btn.ok.danger{background:#b93f3f}
.cfd-btn.ok.info{background:#155c38}
.cfd-btn.ok:hover{transform:translateY(-1px)}

html.dark .notif,html.dark .cfd-box{border-color:rgba(140,195,159,.15);background:#111d16;box-shadow:0 24px 64px -34px rgba(0,0,0,.9)}
html.dark .notif-text,html.dark .cfd-title{color:#eef5f0}
html.dark .notif-close{color:rgba(225,239,230,.42)}
html.dark .notif-close:hover{background:rgba(91,166,119,.1);color:#91c8a7}
html.dark .cfd-overlay{background:rgba(0,0,0,.62)}
html.dark .cfd-msg{color:rgba(225,239,230,.62)}
html.dark .cfd-btns{border-color:rgba(140,195,159,.12)}
html.dark .cfd-btn.cancel{border-color:rgba(140,195,159,.15);color:rgba(225,239,230,.66)}
html.dark .cfd-btn.cancel:hover{background:rgba(91,166,119,.1);color:#91c8a7}

@keyframes notifIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes notifOut{to{opacity:0;transform:translateX(18px)}}
@keyframes notifDraw{to{stroke-dashoffset:0}}
@keyframes notifBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes cfdBgIn{from{opacity:0}to{opacity:1}}
@keyframes cfdBgOut{to{opacity:0}}
@keyframes cfdBoxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes cfdBoxOut{to{opacity:0;transform:translateY(8px)}}

@media(max-width:520px){
    .notif-stack{right:.75rem;bottom:.75rem;left:.75rem}
    .notif{min-width:0;max-width:none;width:100%}
}