:root{--notif-primary: var(--accent, #7bdcff);--notif-secondary: var(--accent-2, #8de6d6);--notif-success: var(--status-success, #10b981);--notif-warning: var(--status-warning, #f59e0b);--notif-danger: var(--status-danger, #ef4444);--notif-info: #3b82f6;--notif-bg: var(--bg-0, #0f0f1a);--notif-glass: color-mix(in srgb, var(--glass-bg, rgba(30, 30, 50, .6)) 60%, transparent);--notif-border: var(--glass-border, rgba(255, 255, 255, .1));--notif-text: var(--text, #e2e8f0);--notif-muted: var(--text-muted, #94a3b8);--notif-transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease, border-color .3s ease}.notif-header{padding:24px 32px;border-bottom:1px solid var(--notif-border);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.notif-header h1{font-size:1.75rem;font-weight:700;margin:0;background:linear-gradient(135deg,var(--notif-text) 0%,var(--notif-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.notif-header-actions{display:flex;gap:12px}.tab-nav{display:flex;gap:0;border-bottom:1px solid var(--notif-border);margin-bottom:0;padding:0 32px;background:#0003}.tab-btn{background:none;border:none;padding:14px 20px;color:var(--notif-muted);cursor:pointer;border-bottom:2px solid transparent;font-size:.9rem;font-weight:500;transition:var(--notif-transition)}.tab-btn:hover{color:var(--notif-text)}.tab-btn.active{color:var(--notif-primary);border-bottom-color:var(--notif-primary)}.tab-content{display:none}.tab-content.active{display:block;padding-top:20px}.notif-filters{display:flex;gap:8px;padding:16px 32px;flex-wrap:wrap;border-bottom:1px solid var(--notif-border)}.notif-filter-btn{padding:6px 14px;border-radius:var(--radius-sm, 8px);border:1px solid var(--notif-border);background:var(--notif-glass);color:var(--notif-muted);cursor:pointer;font-size:.85rem;transition:var(--notif-transition)}.notif-filter-btn:hover{border-color:var(--notif-primary);color:var(--notif-text)}.notif-filter-btn.active{background:var(--notif-primary);border-color:var(--notif-primary);color:#fff}.notif-list{padding:0}.notif-item{display:flex;gap:16px;padding:20px 32px;border-bottom:1px solid var(--notif-border);transition:var(--notif-transition);cursor:pointer;position:relative}.notif-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--notif-primary),var(--notif-secondary));opacity:0;transition:opacity .3s ease}.notif-item:hover{background:#7bdcff0d}.notif-item:hover:before{opacity:1}.notif-item.unread{background:#7bdcff14}.notif-item.unread:before{opacity:1}.notif-item.unread .notif-title{color:var(--notif-text);font-weight:700}.notif-icon{width:44px;height:44px;border-radius:var(--radius-md, 12px);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;box-shadow:0 4px 12px #0003}.notif-icon.transactional{background:linear-gradient(135deg,#22c55e4d,#22c55e1a)}.notif-icon.support{background:linear-gradient(135deg,#3b82f64d,#3b82f61a)}.notif-icon.engagement{background:linear-gradient(135deg,#7bdcff4d,#8de6d61a)}.notif-icon.rewards{background:linear-gradient(135deg,#fbbf244d,#fbbf241a)}.notif-icon.system{background:linear-gradient(135deg,#ef44444d,#ef44441a)}.notif-icon.account{background:linear-gradient(135deg,#14b8a64d,#14b8a61a)}.notif-icon.social{background:linear-gradient(135deg,#8de6d64d,#8de6d61a)}.notif-icon.reminder{background:linear-gradient(135deg,#fb923c4d,#fb923c1a)}.notif-icon.marketplace{background:linear-gradient(135deg,#6366f14d,#6366f11a)}.notif-content{flex:1;min-width:0}.notif-title{font-weight:600;color:var(--notif-text);margin-bottom:8px}.notif-message{color:var(--notif-muted);font-size:.9rem;margin-bottom:8px;line-height:1.5}.notif-time{font-size:.75rem;color:var(--notif-muted);opacity:.7}.notif-actions{display:flex;gap:8px;align-items:flex-start;flex-shrink:0}.notif-btn{background:var(--notif-glass);border:1px solid var(--notif-border);color:var(--notif-muted);cursor:pointer;padding:6px 10px;border-radius:var(--radius-sm, 8px);font-size:.8rem;transition:var(--notif-transition)}.notif-btn:hover{background:#7bdcff1a;border-color:var(--notif-primary);color:var(--notif-text)}.pref-section{padding:24px 32px}.pref-group{margin-bottom:32px}.pref-group h3{color:var(--notif-text);margin-bottom:16px;font-size:1.1rem;font-weight:600}.pref-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--notif-border)}.pref-label{color:var(--notif-text);font-size:.95rem}.toggle-switch{position:relative;width:48px;height:26px;background:#ffffff1a;border-radius:13px;cursor:pointer;transition:var(--notif-transition)}.toggle-switch.active{background:linear-gradient(135deg,var(--notif-primary),var(--notif-secondary))}.toggle-switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 2px 4px #0003}.toggle-switch.active:after{transform:translate(22px)}.push-status{display:flex;align-items:center;gap:12px;padding:16px;background:var(--notif-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-md, 12px);border:1px solid var(--notif-border);margin-bottom:24px}.push-status .status-dot{width:10px;height:10px;border-radius:50%}.push-status .status-dot.enabled{background:var(--notif-success);box-shadow:0 0 8px #10b98180}.push-status .status-dot.disabled{background:var(--notif-danger)}.empty-notifs{text-align:center;padding:60px 20px;color:var(--notif-muted)}.empty-notifs p{font-size:.9rem;max-width:300px;margin:0 auto}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:768px){.notif-header{padding:16px}.tab-nav{padding:0 16px}.notif-filters{padding:12px 16px}.notif-item{padding:16px;gap:12px}.notif-icon{width:36px;height:36px;font-size:1rem}.notif-actions{flex-direction:column}.pref-section{padding:16px}}.notif-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.notif-search{position:relative;flex:1 1 240px;min-width:200px;display:flex;align-items:center}.notif-search svg{position:absolute;left:12px;width:16px;height:16px;color:var(--text-muted, #9fb1cc);pointer-events:none}.notif-search input{width:100%;padding:10px 12px 10px 36px;font-size:13.5px;color:var(--text, #eef3ff);background:color-mix(in srgb,var(--glass-bg, rgba(20,30,52,.6)) 88%,transparent);border:1px solid color-mix(in srgb,var(--glass-border) 55%,transparent);border-radius:11px;transition:border-color .2s ease,box-shadow .2s ease}.notif-search input::placeholder{color:var(--text-muted, #9fb1cc)}.notif-search input:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}.notif-toolbar .pref-select{min-width:150px}.notif-pref-heading{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--text, #eef3ff)}.mt-24{margin-top:24px}.notif-quiet-inputs{display:flex;align-items:center;gap:8px}.notif-quiet-sep{color:var(--text-muted, #9fb1cc)}.pref-time{padding:7px 10px;font-size:13px;color:var(--text, #eef3ff);background:color-mix(in srgb,var(--glass-bg, rgba(20,30,52,.6)) 88%,transparent);border:1px solid color-mix(in srgb,var(--glass-border) 55%,transparent);border-radius:9px}.pref-time::-webkit-calendar-picker-indicator{filter:invert(.8);cursor:pointer}.pref-time:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}@media(max-width:520px){.notif-toolbar{flex-direction:column;align-items:stretch}.notif-toolbar .pref-select{width:100%}}
