/* NOTIFICATION page: show / hide + mode cards + "ringing" pill */
body[data-view=notification] #v-notification{display:flex}
.ntg{display:flex;flex-direction:column;gap:10px;padding:16px}
.ntc{display:flex;align-items:center;gap:16px;padding:14px 18px;border:2px solid #d6e1f2;border-radius:14px;background:#f7faff;cursor:pointer;transition:background .12s,border-color .12s}
.ntc:hover{background:#eef4ff}
.ntc:focus-visible{outline:3px solid rgba(29,107,243,.35);outline-offset:2px}
.ntc.on{border-color:#1d6bf3;background:#e4efff;box-shadow:0 4px 12px rgba(29,107,243,.18)}
.ntb{flex:1;min-width:0}
.ntb b{display:block;font-size:18px;color:var(--navy)}
.ntb p{margin:3px 0 0;font-size:14px;color:var(--mut);line-height:1.4}
.ntc .btn{flex:none}
.ntn{margin:0;padding:0 18px 16px;font-size:14px;font-weight:600;color:#b45309}
.ntn.ok{color:#0b7a4f}
#ntPill{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;align-items:center;gap:12px;max-width:min(380px,92vw);padding:12px 16px;border-radius:14px;background:#fff;border:2px solid #1d6bf3;box-shadow:0 12px 30px rgba(8,22,48,.28);color:var(--navy)}
#ntPill .ic{width:26px;height:26px;color:#1d6bf3;flex:none}
#ntPill span{display:flex;flex-direction:column;min-width:0}
#ntPill b{font-size:16px}
#ntPill small{font-size:13px;color:var(--mut)}
@media(prefers-reduced-motion:no-preference){#ntPill .ic{animation:ntp 1.2s ease-in-out infinite}@keyframes ntp{50%{transform:scale(1.18)}}}