.notification-demo{background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}.notification-demo-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid var(--line);background:var(--surface-2)}.notification-demo-bar>div:first-child{display:grid;gap:3px}.notification-demo-bar strong{font-size:1.08rem}.notification-bell{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:13px;background:var(--surface);font-weight:900}.notification-bell>span:first-child{color:var(--primary);font-size:.72rem}.notification-badge{display:inline-flex;min-width:24px;height:24px;padding:0 7px;align-items:center;justify-content:center;border-radius:999px;background:var(--primary);color:#fff;font-size:.76rem}.notification-filters{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px;border-bottom:1px solid var(--line)}.notification-filter{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:8px 12px;font:inherit;font-size:.84rem;font-weight:850;cursor:pointer}.notification-filter:hover{color:var(--text);border-color:#bfcbe0}.notification-filter.active{background:#eaf0ff;color:var(--primary);border-color:#d4e0ff}.notification-list{display:grid}.notification-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line);transition:.18s}.notification-item:last-child{border-bottom:0}.notification-item:hover{background:var(--surface-2)}.notification-item.is-read{opacity:.62}.notification-source{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}.notification-item h3{margin:4px 0 5px;font-size:1.05rem}.notification-item p{margin:0;color:var(--muted);font-size:.93rem}.notification-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.notification-meta span{display:inline-flex;align-items:center;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.74rem;font-weight:800}.notification-priority.priority-high{background:#fff0ee;color:#b83b2f;border-color:#f1c7c2}.notification-priority.priority-normal{background:#eef4ff;color:#315eb6;border-color:#cfdbf1}.notification-priority.priority-low{background:#f3f5f8;color:#67758c}.notification-action{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:11px;padding:9px 11px;font:inherit;font-size:.8rem;font-weight:850;cursor:pointer}.notification-action:hover{border-color:var(--primary);color:var(--primary)}.notification-demo-note{padding:14px 20px;background:var(--surface-2);border-top:1px solid var(--line);color:var(--muted);font-size:.83rem}.delivery-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}.delivery-step{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 8px 24px rgba(18,31,53,.04)}.delivery-step>span{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:12px;background:#eaf0ff;color:var(--primary);font-weight:900}.delivery-step strong{display:block;margin:15px 0 7px;font-size:1.02rem}.delivery-step p{margin:0;color:var(--muted);font-size:.9rem}.delivery-step code,.project-card code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.capability-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.capability-strip code{padding:7px 10px;border-radius:10px;background:#111827;color:#eef3fb;font-size:.78rem}.notification-item[hidden]{display:none!important}body.theme-dark .notification-demo,body.theme-dark .notification-item,body.theme-dark .notification-bell,body.theme-dark .notification-filter,body.theme-dark .notification-action,body.theme-dark .delivery-step{background:#151f31;border-color:var(--line)}body.theme-dark .notification-demo-bar,body.theme-dark .notification-demo-note{background:#111a2a;border-color:var(--line)}body.theme-dark .notification-item:hover{background:#18243a}body.theme-dark .notification-filter.active{background:#203154;color:#dce7ff;border-color:#5876b9}body.theme-dark .notification-priority.priority-high{background:#3b211f;color:#ffaca4;border-color:#69413d}body.theme-dark .notification-priority.priority-normal{background:#1a2a49;color:#9fbcff;border-color:#304a78}body.theme-dark .notification-priority.priority-low{background:#202b3d;color:#a9b5c8;border-color:#36445b}body.theme-dark .capability-strip code{background:#eef3fb;color:#111827}@media(max-width:900px){.delivery-flow{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.notification-demo-bar{padding:16px}.notification-filters{padding:13px}.notification-item{grid-template-columns:1fr;padding:17px}.notification-action{justify-self:start}.delivery-flow{grid-template-columns:1fr}.capability-strip{overflow-wrap:anywhere}}