/* ===== NOTIFICATION ===== */
#notif-box {
    position:fixed;
    top:16px;
    right:16px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.notif {
    padding:16px 24px;
    font-family:var(--font-body);
    font-size:var(--text-ui);
    line-height:var(--leading-normal);
    border:2px solid;
    animation:nf .3s ease;
    max-width:420px;
    pointer-events:none;
}
.notif.ok { background:var(--success); color:var(--text-on-accent); border-color:var(--success); }
.notif.err {
    background:var(--error);
    color:var(--text-white, #fff);
    border-color:var(--role-error-text, var(--error));
}
.notif.info { background:var(--surface); color:var(--text-white); border-color:var(--border); }
@keyframes nf { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }

#loader {
    display:none;
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(10,10,10,.85);
    z-index:9998;
    align-items:center;
    justify-content:center;
}
#loader.on { display:flex; }
.spin {
    width:44px; height:44px;
    border:4px solid var(--border);
    border-top-color:var(--role-brand-text, var(--accent-red));
    animation:sp 1s infinite linear;
}
@keyframes sp { to{transform:rotate(360deg)} }
.loader-msg { color:var(--text-muted); font-size:var(--text-title); margin-top:16px; text-align:center; }