.notif-stack{position:fixed;bottom:1.2rem;right:1.2rem;z-index:600;display:flex;flex-direction:column-reverse;gap:.55rem;pointer-events:none;max-height:calc(100vh - 3rem);overflow:visible}
.notif{
  pointer-events:auto;display:flex;align-items:stretch;min-width:280px;max-width:400px;
  border-radius:16px;background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(1.8);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 32px rgba(30,27,75,.08),0 1.5px 4px rgba(30,27,75,.04);
  overflow:hidden;position:relative;
  animation:notifIn .45s cubic-bezier(.175,.885,.32,1.275) forwards;
}
.notif.exit{animation:notifOut .35s cubic-bezier(.6,.04,.98,.335) forwards}
.notif-accent{width:4px;flex-shrink:0;border-radius:4px 0 0 4px}
.notif-accent.ok{background:linear-gradient(180deg,#34d399,#10b981)}
.notif-accent.err{background:linear-gradient(180deg,#f87171,#ef4444)}
.notif-accent.info{background:linear-gradient(180deg,#60a5fa,#3b82f6)}
.notif-accent.warn{background:linear-gradient(180deg,#fbbf24,#f59e0b)}
.notif-body{flex:1;display:flex;align-items:center;gap:.65rem;padding:.7rem .5rem .7rem .75rem;min-width:0}
.notif-icon{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.notif-icon.ok{background:rgba(16,185,129,.08)}
.notif-icon.err{background:rgba(239,68,68,.08)}
.notif-icon.info{background:rgba(59,130,246,.08)}
.notif-icon.warn{background:rgba(245,158,11,.08)}
.notif-icon svg{width:17px;height:17px}
.notif-icon.ok svg{color:#10b981}
.notif-icon.err svg{color:#ef4444}
.notif-icon.info svg{color:#3b82f6}
.notif-icon.warn svg{color:#f59e0b}
.notif-icon svg path.draw{stroke-dasharray:30;stroke-dashoffset:30;animation:notifDraw .5s .15s ease forwards}
.notif-text{flex:1;font-size:.84rem;font-weight:500;color:#1e1b4b;line-height:1.35;min-width:0;word-break:break-word}
.notif-close{width:28px;height:28px;border-radius:8px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#c4b5fd;transition:all .15s;margin-right:.15rem;opacity:0;transform:scale(.8)}
.notif:hover .notif-close{opacity:1;transform:scale(1)}
.notif-close:hover{background:rgba(139,92,246,.06);color:#7c3aed}
.notif-close svg{width:11px;height:11px}
.notif-bar{position:absolute;bottom:0;left:4px;right:0;height:2.5px;transform-origin:left}
.notif-bar.ok{background:linear-gradient(90deg,#10b981,#34d399)}
.notif-bar.err{background:linear-gradient(90deg,#ef4444,#f87171)}
.notif-bar.info{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.notif-bar.warn{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
@keyframes notifIn{0%{opacity:0;transform:translateX(40px) scale(.92)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes notifOut{0%{opacity:1;transform:translateX(0) scale(1);max-height:100px}100%{opacity:0;transform:translateX(60px) scale(.85);max-height:0;margin:0;padding:0;border:0}}
@keyframes notifDraw{to{stroke-dashoffset:0}}
@keyframes notifBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}


.cfd-overlay{position:fixed;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(30,27,75,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:cfdBgIn .25s ease forwards}
.cfd-overlay.exit{animation:cfdBgOut .2s ease forwards}
.cfd-box{width:100%;max-width:380px;border-radius:20px;background:#fff;box-shadow:0 20px 60px rgba(30,27,75,.12),0 2px 8px rgba(139,92,246,.06);overflow:hidden;animation:cfdBoxIn .3s cubic-bezier(.175,.885,.32,1.15) forwards}
.cfd-overlay.exit .cfd-box{animation:cfdBoxOut .2s ease forwards}
.cfd-top{display:flex;align-items:center;gap:.7rem;padding:1.2rem 1.4rem .8rem}
.cfd-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cfd-ico.warn{background:rgba(245,158,11,.08)}
.cfd-ico.warn svg{color:#f59e0b}
.cfd-ico.danger{background:rgba(239,68,68,.06)}
.cfd-ico.danger svg{color:#ef4444}
.cfd-ico.info{background:rgba(59,130,246,.06)}
.cfd-ico.info svg{color:#3b82f6}
.cfd-ico svg{width:22px;height:22px}
.cfd-title{font-size:.95rem;font-weight:700;color:#1e1b4b;line-height:1.3}
.cfd-msg{padding:0 1.4rem .9rem;font-size:.84rem;line-height:1.55;color:#6b7280;white-space:pre-line}
.cfd-btns{display:flex;gap:.5rem;padding:.7rem 1.2rem 1.1rem;justify-content:flex-end}
.cfd-btn{padding:.55rem 1.15rem;border-radius:11px;border:none;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.cfd-btn.cancel{background:rgba(139,92,246,.04);color:#6b7280;border:1px solid rgba(139,92,246,.1)}
.cfd-btn.cancel:hover{background:rgba(139,92,246,.08);color:#4b5563}
.cfd-btn.ok{color:#fff}
.cfd-btn.ok.warn{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 2px 8px rgba(245,158,11,.2)}
.cfd-btn.ok.warn:hover{box-shadow:0 4px 14px rgba(245,158,11,.3);transform:translateY(-1px)}
.cfd-btn.ok.danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 2px 8px rgba(239,68,68,.2)}
.cfd-btn.ok.danger:hover{box-shadow:0 4px 14px rgba(239,68,68,.3);transform:translateY(-1px)}
.cfd-btn.ok.info{background:linear-gradient(135deg,#8B5CF6,#7c3aed);box-shadow:0 2px 8px rgba(139,92,246,.2)}
.cfd-btn.ok.info:hover{box-shadow:0 4px 14px rgba(139,92,246,.3);transform:translateY(-1px)}
@keyframes cfdBgIn{from{opacity:0}to{opacity:1}}
@keyframes cfdBgOut{from{opacity:1}to{opacity:0}}
@keyframes cfdBoxIn{from{opacity:0;transform:scale(.9) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes cfdBoxOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92) translateY(8px)}}


html.dark .notif{background:rgba(26,23,48,.94);border-color:rgba(139,92,246,.18);box-shadow:0 8px 32px rgba(0,0,0,.35),0 1.5px 4px rgba(0,0,0,.15)}
html.dark .notif-text{color:#e8e4f0}
html.dark .notif-close{color:rgba(167,139,250,.4)}
html.dark .notif-close:hover{background:rgba(139,92,246,.1);color:#a78bfa}
html.dark .cfd-overlay{background:rgba(0,0,0,.45);backdrop-filter:blur(8px)}
html.dark .cfd-box{background:#1a1730;border:1px solid rgba(139,92,246,.12);box-shadow:0 20px 60px rgba(0,0,0,.4)}
html.dark .cfd-title{color:#e8e4f0}
html.dark .cfd-msg{color:rgba(232,228,240,.55)}
html.dark .cfd-btn.cancel{background:rgba(139,92,246,.08);color:rgba(232,228,240,.6);border-color:rgba(139,92,246,.15)}
html.dark .cfd-btn.cancel:hover{background:rgba(139,92,246,.14);color:rgba(232,228,240,.8)}