.settings-panel { margin-bottom:18px; }
.notification-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.notification-heading h2 { margin:0 0 3px; }
.notification-heading .subtle { margin:0; font-size:12px; }
.notification-symbol { display:grid; place-items:center; flex:0 0 40px; height:40px; border-radius:13px; background:var(--sage-soft); color:var(--sage-dark); font-size:22px; }
.status-chip { margin-left:auto; padding:5px 8px; border:1px solid var(--glass-edge); border-radius:99px; font-size:10px; font-weight:700; color:var(--sage-dark); background:var(--glass); }
.notification-enable { width:100%; margin-bottom:14px; }
.notification-options { margin:3px 0 18px; }
.notification-row { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:18px; width:100%; min-height:80px; padding:14px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.notification-copy { display:grid; gap:5px; flex:1; min-width:0; text-align:left; }
.notification-copy strong { font-size:14px; color:var(--ink); }
.notification-copy small { font-size:12px; line-height:1.45; color:var(--muted); }
input.toggle-switch { appearance:none; -webkit-appearance:none; position:relative; flex:0 0 46px; width:46px; height:28px; min-width:46px; margin:0; padding:0; border:1px solid var(--line); border-radius:99px; background:color-mix(in srgb,var(--muted) 20%,transparent); cursor:pointer; transition:background .2s; }
input.toggle-switch::before { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:var(--paper); box-shadow:0 1px 5px #0003; border-radius:50%; transition:transform .2s; }
input.toggle-switch:checked { background:var(--sage-dark); border-color:var(--sage-dark); }
input.toggle-switch:checked::before { transform:translateX(18px); }
input.toggle-switch:focus-visible { outline:2px solid var(--sage-dark); outline-offset:3px; }
.notification-footer { padding:14px; border-radius:14px; background:color-mix(in srgb,var(--sage-soft) 40%,transparent); }
.notification-status { margin:0 0 8px; font-size:12px; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }
.notification-hint { margin:9px 0 0; font-size:11px; line-height:1.5; color:var(--muted); }
.connection-pill { display:flex; align-items:center; gap:5px; margin-left:auto; margin-right:12px; font-size:10px; color:var(--muted); white-space:nowrap; }
.connection-pill:before { content:''; width:5px; height:5px; border-radius:50%; background:var(--muted); }
.connection-pill[data-status="connected"]:before { background:var(--sage-dark); }
.connection-pill[data-status="error"],.connection-pill[data-status="offline"] { color:#aa674b; }
.budget-overview { margin-top:18px; gap:12px; }
.budget-number { font-size:36px; letter-spacing:-1px; margin:0; }
.budget-summary { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:12px 0; }
.budget-summary div { display:grid; gap:5px; }
.budget-summary span { font-size:12px; color:var(--muted); }
.budget-summary strong { font-size:18px; }
.budget-limit-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.budget-limit-heading span { font-size:12px; color:var(--muted); }
.budget-progress { appearance:none; width:100%; height:7px; margin:12px 0 5px; border:0; border-radius:99px; overflow:hidden; accent-color:var(--sage-dark); }
.budget-progress::-webkit-progress-bar { background:var(--sage-soft); }
.budget-progress::-webkit-progress-value { background:var(--sage-dark); border-radius:99px; }
.budget-progress::-moz-progress-bar { background:var(--sage-dark); }
.budget-progress.over-budget::-webkit-progress-value { background:#ba674d; }
.budget-progress.over-budget::-moz-progress-bar { background:#ba674d; }
.account-settings input { background:var(--glass); color:var(--ink); }
@media(max-width:380px) {.notification-heading {gap:8px;}.notification-symbol {flex-basis:32px;height:32px;}.notification-heading h2 {font-size:18px;}.connection-pill {margin-right:8px;font-size:9px;}}
@media(prefers-reduced-motion:reduce) {.toggle-switch,.toggle-switch:before { transition:none; }}