/* Notification Center (Green System Parity Rebuild 2025-09-27)
   Goal: Visual & structural alignment with Upload / Discovery / Profile centers.
   Key Traits: Centered modal shell, green accent border/shadows, gradient heading, pill filters, card list, unified focus ring.
   Accessibility: Role=dialog, aria-modal, focus trap (handled in JS), readable contrast, reduced-motion support.
*/

/* Root / Visibility */
#notification-center-root { position:fixed; inset:0; z-index:14800; font-family:var(--font-mono,'VT323',monospace); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 380ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 380ms; }
#notification-center-root.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 380ms cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s; }
#nc-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.70); backdrop-filter:blur(2px); opacity:0; transition:opacity 380ms cubic-bezier(0.16,1,0.3,1); }
#notification-center-root.is-open #nc-backdrop { opacity:1; }

/* Shell */
#nc-shell { position:absolute; left:50%; top:12vh; transform:translateX(-50%) translateY(-10px) scale(.985); width:min(1040px,92vw); max-height:calc(100vh - 24vh); display:flex; flex-direction:column; background:#101018; border:1px solid #00ff88; border-radius:20px; padding:22px 26px 18px; box-shadow:0 0 20px -6px rgba(0,255,136,0.42),0 0 2px 1px rgba(0,255,136,0.32) inset; box-sizing:border-box; opacity:0; overflow:hidden; transition: opacity 380ms cubic-bezier(0.16,1,0.3,1) 120ms, transform 380ms cubic-bezier(0.16,1,0.3,1) 120ms; position:relative; }
#nc-shell::before { content:""; position:absolute; inset:0; padding:1px; border-radius:20px; background:linear-gradient(90deg,#00ff88,#35ffc9); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
#notification-center-root.is-open #nc-shell { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
@media (max-width:880px){ #nc-shell { width:min(1000px,94vw); } }
@media (max-width:760px){ #nc-shell { top:8vh; max-height:calc(100vh - 16vh); padding:20px 20px 18px; } }
@media (max-width:560px){ #nc-shell { top:6vh; width:94vw; max-height:calc(100vh - 14vh); padding:18px 16px 18px; } }
@media (max-width:380px){ #nc-shell { padding:16px 12px 16px; } }

/* Header */
.nc-header { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:4px 0 8px; border-bottom:1px solid rgba(255,255,255,0.05); background:none; }
.nc-header h2 { margin:0; font-size:1.55rem; letter-spacing:1px; color:#00ff88; text-shadow:0 0 8px rgba(0,255,136,0.35); flex:1 1 auto; }
@media (max-width:560px){ .nc-header h2 { font-size:1.35rem; } }
.nc-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nc-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background: rgba(var(--dark-color-rgb), 0.6); border:1px solid var(--secondary-color); color: var(--primary-color); cursor:pointer; position:relative; font-size:16px; transition: background .15s ease, border-color .15s ease, transform .15s ease; opacity:.9; }
.nc-icon-btn .mdi { font-size:20px; line-height:1; }
.nc-icon-btn.nc-refresh { background:#FFD400; border:none; color:#000; font-weight:700; box-shadow:0 0 0 1px rgba(255,212,0,0.35),0 3px 10px -2px rgba(0,0,0,.7); }
.nc-icon-btn:hover:not(.nc-refresh), .nc-icon-btn:focus-visible:not(.nc-refresh){ background: rgba(var(--dark-color-rgb), 0.8); border-color: var(--primary-color); opacity:1; transform: translateY(-1px); color: var(--primary-color); }
.nc-icon-btn.nc-refresh:hover, .nc-icon-btn.nc-refresh:focus-visible { filter:brightness(1.08); }
.nc-icon-btn:active { transform:scale(.94); }

/* Toolbar */
.nc-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:14px 0 8px; }
.nc-toolbar input[type=search], .nc-toolbar select { background:#0b0b14; border:1px solid rgba(0,255,136,0.4); color:#d6d6d6; padding:7px 12px 6px; border-radius:12px; font-size:0.7rem; letter-spacing:.6px; }
.nc-toolbar input[type=search]:focus-visible, .nc-toolbar select:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(0,255,136,.45); }
@media (max-width:640px){ #nc-search { flex:1 1 160px; } }

/* Filters */
.nc-filters { display:flex; gap:8px; flex-wrap:wrap; padding:2px 0 10px; }
.nc-filter { background:#0b0b11; border:1px solid rgba(0,255,136,0.35); color:#cfd; padding:6px 12px; border-radius:999px; font-size:0.65rem; letter-spacing:.8px; cursor:pointer; position:relative; transition:background .25s, border-color .25s, color .25s; font-weight:600; }
.nc-filter.active, .nc-filter[aria-selected=true] { background:#112a21; border-color:#35ffc9; color:#fff; box-shadow:0 0 0 1px rgba(53,255,201,0.3) inset, 0 0 10px -3px rgba(0,255,136,0.35); }
.nc-filter:hover:not(.active) { background:#112a21; }

/* Scroll Area */
.nc-main { flex:1; min-height:0; overflow:auto; padding:4px 6px 84px; scrollbar-width:thin; scrollbar-color:#00ff88 #0b0b14; }
/* Scrollbar (green gradient) */
.nc-main::-webkit-scrollbar { width:10px; }
.nc-main::-webkit-scrollbar-track { background:#0b0b14; }
.nc-main::-webkit-scrollbar-thumb { background:linear-gradient(#00ff88,#35ffc9); border-radius:12px; box-shadow:0 0 0 2px #0b0b14 inset; }
.nc-main::-webkit-scrollbar-thumb:hover { filter:brightness(1.1); }
/* Footer (green parity) */
.nc-footer { position:absolute; left:0; right:0; bottom:0; padding:12px 20px 18px; display:flex; justify-content:flex-end; gap:12px; background:linear-gradient(180deg,rgba(16,16,24,0.35),#101018 65%); border-top:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(4px); }
@media (max-width:560px){ .nc-footer { padding:12px 14px 20px; } }

/* Footer buttons inherit .nc-actions .nc-btn styles; add spacing overrides if needed */
.nc-footer .nc-btn { margin-left:6px; }

/* Items (green system) */
.nc-list { display:flex; flex-direction:column; gap:8px; position:relative; }
.nc-item { display:flex; flex-direction:column; gap:3px; background:#14141d; border:1px solid rgba(0,255,136,0.20); border-radius:16px; padding:6px 12px 6px; position:relative; transition:background .18s ease, border-color .18s ease, transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s; min-height:46px; margin:0 2px; }
.nc-item::after { content:""; position:absolute; left:12px; right:12px; bottom:-5px; height:0; border-bottom:1px dotted rgba(0,255,136,0.28); pointer-events:none; }
.nc-list .nc-item:last-child::after { display:none; }
.nc-item:hover, .nc-item:focus-visible { background:#1c1c29; border-color:#00ff88; box-shadow:0 0 0 1px rgba(0,255,136,0.28), 0 0 14px -2px rgba(0,255,136,0.38); transform:translateY(-1px) scale(1.006); z-index:3; }
.nc-item.unread { background:#122e23; border-color:#35ffc9; box-shadow:0 0 0 1px rgba(53,255,201,0.28) inset, 0 0 8px -2px rgba(0,255,136,0.35); }
@media (prefers-reduced-motion: reduce){ .nc-item{ transition:none; } .nc-item:hover, .nc-item:focus-visible { transform:none; } }
.nc-item .nc-head { display:flex; align-items:flex-start; gap:9px; }
.nc-item .nc-title-wrap { flex:1; min-width:0; }
.nc-item .nc-title { font-size:.8rem; font-weight:600; letter-spacing:.5px; color:#dcdcdc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nc-item .nc-subtitle { font-size:.62rem; opacity:.75; margin-top:2px; color:#9fd; }
.nc-item .nc-body { font-size:.6rem; line-height:1.3; opacity:.82; }
.nc-item .nc-meta { font-size:.55rem; opacity:.7; letter-spacing:.6px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.nc-context { opacity:.58; }
/* Card action delete */
.nc-actions-bar { display:flex; align-items:center; gap:4px; position:absolute; top:5px; right:6px; }
.nc-card-delete { background:linear-gradient(145deg,rgba(0,255,136,0.15),rgba(0,255,136,0.05)); border:1px solid rgba(0,255,136,0.32); width:26px; height:26px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#bdf; font-size:13px; transition:background .18s, border-color .18s, transform .16s, color .18s; box-shadow:0 0 0 1px rgba(0,255,136,0.22),0 2px 4px rgba(0,0,0,.45); }
.nc-card-delete .mdi { font-size:17px; }
.nc-card-delete:hover, .nc-card-delete:focus-visible { background:linear-gradient(145deg,rgba(0,255,136,0.28),rgba(0,255,136,0.1)); border-color:#35ffc9; color:#fff; transform:scale(1.06); }
.nc-card-delete:active { transform:scale(.9); }
/* Avatar fallback & sizing */
.nc-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid rgba(0,255,136,0.38); background:#0f1614; }
.nc-avatar-wrap { display:inline-flex; }
.nc-avatar-fallback { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700; letter-spacing:.5px; background:#13261f; color:#00ff88; border:1px solid rgba(0,255,136,0.45); box-shadow:0 0 0 1px rgba(0,255,136,0.24) inset; }
.nc-head { gap:8px !important; }
@media (max-width:560px){
   .nc-header { padding-right:56px; }
   .nc-header .nc-actions { position:absolute; top:16px; right:16px; gap:8px; }
   .nc-header .nc-icon-btn.nc-close { width:40px; height:40px; }
}
/* Bulk action buttons subtle differentiation */
.nc-icon-btn.nc-bulk-read span, .nc-icon-btn.nc-bulk-clear span { font-size:19px; }
.nc-icon-btn.nc-bulk-clear { background: rgba(var(--dark-color-rgb), 0.6); border:1px solid var(--secondary-color); color: var(--primary-color); }
.nc-icon-btn.nc-bulk-clear:hover, .nc-icon-btn.nc-bulk-clear:focus-visible { background: rgba(var(--dark-color-rgb), 0.8); border-color: var(--primary-color); opacity: 1; transform: translateY(-1px); }