.topbar { display: flex; }
.notification-account-tools { display: inline-flex; align-items: center; gap: 8px; }.notification-bell-wrap { position: relative; }.notification-bell, .notification-avatar { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; color: #536170; background: transparent; }.notification-bell:hover, .notification-bell:focus-visible, .notification-avatar:hover, .notification-avatar:focus-visible { color: #1d4ed8; background: #eef5ff; outline: 2px solid rgba(29, 78, 216, .26); outline-offset: 2px; }.notification-bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.notification-avatar { color: #fff; background: #6b7785; font-weight: 700; }.notification-badge { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #d92d20; font-size: 10px; font-weight: 700; line-height: 13px; }.notification-bell-panel { position: absolute; z-index: 1001; top: calc(100% + 8px); right: 0; width: min(380px, calc(100vw - 24px)); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 16px 36px rgba(16, 24, 40, .18); }.notification-bell-panel[hidden] { display: none; }.notification-bell-panel header { display: flex; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--line); }.notification-bell-panel header button { min-height: 28px; border: 0; color: #175cd3; background: transparent; }.notification-panel-row { display: grid; gap: 4px; width: 100%; padding: 12px 14px; text-align: left; border: 0; border-bottom: 1px solid #eff2f5; background: #fff; }.notification-panel-row:hover { background: #f5f9ff; }.notification-panel-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.notification-panel-row span, .notification-panel-row time { overflow: hidden; color: #667085; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.notification-panel-row.unread strong { color: #1d4ed8; }.notification-inbox-page { display: grid; gap: 14px; }.notification-inbox-toolbar { display: flex; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }.notification-inbox-toolbar select, .notification-inbox-toolbar input { min-height: 36px; min-width: 0; padding: 0 9px; border: 1px solid #d0d5dd; border-radius: 7px; }.notification-inbox-toolbar input { flex: 1; }.notification-inbox-list-detail { min-height: 540px; }.notification-inbox-list-detail .notification-detail article { display: grid; gap: 14px; }.notification-inbox-list-detail .notification-detail header { display: flex; justify-content: space-between; color: #667085; font-size: 12px; }.notification-inbox-list-detail .notification-detail p { margin: 0; line-height: 1.7; white-space: pre-wrap; }.notification-inbox-list-detail dl { display: grid; grid-template-columns: 100px 1fr; gap: 8px; margin: 0; padding: 14px; border-radius: 8px; background: #f8fafc; }.notification-inbox-list-detail dt { color: #667085; }.notification-inbox-list-detail dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .notification-bell-panel { position: fixed; inset: auto 0 0; width: auto; max-height: 75vh; border-radius: 14px 14px 0 0; }.notification-inbox-toolbar { display: grid; grid-template-columns: 1fr 1fr; }.notification-inbox-toolbar input { grid-column: 1 / -1; }.notification-inbox-toolbar button { min-height: 38px; } }