.notification-bell{position:relative;flex-shrink:0;color:#8197ab;transition:color .2s,box-shadow .2s;background:transparent;border:1px solid #223746;border-radius:10px;width:44px;height:44px;display:grid;place-items:center}
.notification-bell svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke, 2)}
.notification-bell.has-attention{color:#8ef1ff;border-color:#67d9ee;box-shadow:0 0 18px #47cfe350;animation:notification-glow 2.8s ease-in-out infinite}
.notification-count{position:absolute;top:-6px;right:-7px;min-width:20px;padding:1px 4px;border-radius:12px;background:#91edfa;color:#051220;font-size:.75rem;line-height:1.5;font-weight:700;border:2px solid #07111f}
.notification-count[hidden]{display:none}
@keyframes notification-glow{50%{box-shadow:0 0 25px #47cfe385}}
@media(prefers-reduced-motion:reduce){.notification-bell.has-attention{animation:none}}
.notification-dialog{box-sizing:border-box;max-width:none;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #36566b;border-radius:18px;background:#0b1829;color:#e4eff7;box-shadow:0 24px 90px #0008;overflow:hidden}
.notification-dialog[open]{display:flex;flex-direction:column}
.notification-dialog::backdrop{background:#020915b8;backdrop-filter:blur(4px)}
.notification-dialog .dialog-header{padding:24px;border-bottom:1px solid #243b4d;position:relative;flex:none;background:#0b1829;z-index:1}
.notification-dialog h2{font-size:1.45rem;line-height:1.3;margin:4px 0}.notification-dialog h3{font-size:1.05rem;line-height:1.45;margin:0 0 8px}
.notification-body{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#52748c transparent;margin:0 6px 8px;padding:24px 18px 16px;display:flex;flex-direction:column;gap:18px;font-size:1rem;line-height:1.6}
.notification-body p{margin:0}.notification-body .button{font-size:.875rem;min-height:44px;white-space:normal;line-height:1.4}
.notification-intro{padding:22px;background:linear-gradient(135deg,#153247,#0d2032);border:1px solid #315e70;border-radius:12px}
.notification-intro svg{width:32px;height:32px;stroke:#99eeff;fill:none;stroke-width:var(--icon-stroke, 2);margin-bottom:12px}.notification-intro h3{font-size:1.35rem}
.notification-project-name{font-weight:650;color:#99eeff}.notification-note{color:#adbed0;font-size:.875rem;line-height:1.6}
.notification-benefits{display:grid;gap:16px;margin:0}.notification-benefits dt{font-weight:650;color:#e7f7ff}.notification-benefits dd{margin:4px 0 0;color:#adbed0;font-size:.9375rem}
.notification-choice{display:flex;align-items:flex-start;gap:14px;padding:16px;background:#102236;border:1px solid #2b465c;border-radius:10px;cursor:pointer}.notification-choice input{margin-top:4px;width:20px;height:20px;accent-color:#79e5f5;flex-shrink:0}.notification-choice span span{display:block;color:#adbed0;font-size:.875rem;margin-top:4px}.notification-choice strong{font-size:1rem}
.notification-toolbar,.notification-item-actions{display:flex;flex-wrap:wrap;gap:8px}.notification-toolbar .button{flex:1}
.notification-list{display:grid;gap:12px}.notification-item{padding:18px;border:1px solid #396a80;border-left:3px solid #8de9f7;border-radius:10px;background:#112a3d;overflow-wrap:anywhere}.notification-item.is-read{border-color:#243a4d;background:#0c1d2f}.notification-item-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#a9c0d3;font-size:.8125rem;margin-bottom:10px}.notification-kind{color:#98eafa;font-weight:600}.notification-item-actions{margin-top:14px}.notification-status{color:#a8e9f4}.notification-status:empty{display:none}
.tdp-project-entry{display:flex;gap:8px;align-items:center}.tdp-project-entry>.tdp-project-row{flex:1;min-width:0}.tdp-bell{flex:none;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.tdp-bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke, 2)}
@media(max-width:480px){.notification-body{padding:18px 12px 10px}.notification-dialog .dialog-header{padding:18px}.notification-toolbar .button{flex-basis:100%}.notification-item-actions .button{flex:1}.notification-intro{padding:18px}}