/* ── Notification Settings Page ── */

.notif-page{max-width:480px;margin:0 auto;padding:0 16px 120px;}
.notif-page h1{font-size:22px;font-weight:700;margin-bottom:4px;}
.notif-page .subheader{color:var(--text-muted);font-size:13px;margin-bottom:28px;}

/* ── Card sections ── */
.notif-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;margin-bottom:16px;}
.notif-card-title{font-size:14px;font-weight:700;margin-bottom:4px;}
.notif-card-desc{font-size:12px;color:var(--text-muted);margin-bottom:16px;line-height:1.5;}

/* ── Toggle switch ── */
.notif-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.notif-toggle-label{font-size:14px;font-weight:600;}
.notif-toggle-sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
.toggle-switch{position:relative;width:48px;height:28px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--toggle-inactive);border:1px solid var(--card-border);border-radius:14px;cursor:pointer;transition:all 0.25s ease;}
.toggle-slider::before{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--text-muted);border-radius:50%;transition:all 0.25s ease;}
.toggle-switch input:checked + .toggle-slider{background:var(--toggle-active);border-color:var(--toggle-active);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(20px);background:#fff;}
.toggle-switch input:disabled + .toggle-slider{opacity:0.4;cursor:not-allowed;}

/* ── Status badge ── */
.notif-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;margin-top:12px;}
.notif-status.active{background:var(--accent-dim);color:var(--accent);}
.notif-status.inactive{background:rgba(139,139,155,0.12);color:var(--text-muted);}
.notif-status-dot{width:6px;height:6px;border-radius:50%;}
.notif-status.active .notif-status-dot{background:var(--accent);}
.notif-status.inactive .notif-status-dot{background:var(--text-muted);}

/* ── Test button ── */
.notif-test-btn{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--card-border);color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s ease;margin-top:12px;}
.notif-test-btn:hover{border-color:var(--accent);color:var(--accent);}
.notif-test-btn:disabled{opacity:0.4;cursor:not-allowed;}

/* ── Toast ── */
.notif-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-12px);background:#1e1e2a;border:1px solid var(--card-border);font-size:13px;font-weight:600;padding:10px 20px;border-radius:30px;box-shadow:0 4px 20px rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity 0.2s ease,transform 0.2s ease;z-index:9999;white-space:nowrap;}
.notif-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.notif-toast.success{color:var(--accent);}
.notif-toast.error{color:var(--loss);}

/* ── Divider ── */
.notif-divider{border:none;border-top:1px solid var(--card-border);margin:16px 0;}