.notification-v2 { gap: 16px; }
.notification-commandbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.notification-commandbar .notification-tabs { display: flex; gap: 6px; overflow-x: auto; }
.notification-commandbar .notification-tabs button { min-height: 36px; white-space: nowrap; }
.notification-commandbar .notification-tabs button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.notification-filterbar { display: flex; gap: 8px; }
.notification-filterbar select { min-height: 36px; }
.notification-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.notification-metric, .notification-surface { min-height: 106px; padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-card); background: linear-gradient(145deg, #fff, #f5f8fb); }
.notification-metric span, .notification-surface p, .notification-surface h3 { color: #667085; font-size: 13px; }
.notification-metric strong, .notification-rate { display: block; margin-top: 10px; color: #172b4d; font-size: 30px; line-height: 1; }
.notification-overview { display: grid; gap: 14px; }
.notification-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.notification-surface h3 { margin: 0; }.notification-surface p { margin: 8px 0 0; }
.notification-list-detail { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(380px, 1.2fr); min-height: 460px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: #fff; }
.notification-list { max-height: 640px; overflow: auto; border-right: 1px solid var(--line); }
.notification-row { display: grid; gap: 5px; width: 100%; padding: 14px 16px; text-align: left; border: 0; border-bottom: 1px solid #eef1f4; background: #fff; }
.notification-row:hover, .notification-row:focus-visible { background: #f3f8ff; outline: 2px solid rgba(26, 115, 232, .32); outline-offset: -2px; }
.notification-row > span, .notification-row time, .notification-row .notification-status { color: #667085; font-size: 12px; }
.notification-row.unread strong { color: #1d4ed8; }
.notification-detail { min-width: 0; padding: 20px; overflow: auto; }.notification-detail h3 { margin-top: 0; }
.notification-status { display: inline-flex; align-items: center; width: max-content; min-height: 22px; padding: 0 8px; border: 1px solid #d7dde5; border-radius: 999px; color: #55606c; font-size: 12px; background: #f8fafc; }.notification-status.success { border-color: #a9d9b8; color: #197247; background: #effaf2; }.notification-status.warning { border-color: #f0d48b; color: #8a5b00; background: #fff8df; }.notification-status.danger { border-color: #efb0ad; color: #b42318; background: #fff2f0; }
.notification-delivery-table td small { display: block; margin-top: 4px; color: #667085; }.notification-delivery-table td:last-child { white-space: nowrap; }
.notification-timeline header { display: grid; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }.notification-timeline header span, .notification-time-grid { color: #667085; font-size: 12px; }.notification-time-grid { display: grid; gap: 6px; padding: 12px 0; }.notification-delivery-timeline { display: grid; gap: 10px; padding-left: 22px; }.notification-delivery-timeline li { display: grid; gap: 3px; padding-left: 4px; }.notification-delivery-timeline time, .notification-delivery-timeline span { color: #667085; font-size: 12px; }
.notification-dialog-backdrop { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(20, 32, 43, .48); }.notification-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(920px, 100%); max-height: min(760px, calc(100vh - 36px)); border-radius: 12px; background: #fff; box-shadow: 0 24px 80px rgba(16, 24, 40, .28); }.notification-dialog > header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }.notification-dialog h2 { margin: 0; font-size: 18px; }.notification-dialog-body { overflow: auto; padding: 20px; }.notification-wizard-steps { display: flex; gap: 8px; padding-bottom: 16px; overflow-x: auto; }.notification-wizard-steps span { min-width: max-content; padding: 5px 8px; border-radius: 999px; color: #667085; background: #f1f5f9; font-size: 12px; }.notification-wizard-steps .active { color: #fff; background: var(--primary); }.notification-wizard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.notification-wizard-grid label, .notification-wizard-grid fieldset { display: grid; gap: 6px; min-width: 0; color: #475467; font-size: 13px; font-weight: 600; }.notification-wizard-grid input, .notification-wizard-grid select, .notification-wizard-grid textarea { min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 7px; font: inherit; font-weight: 400; }.notification-wizard-grid textarea { min-height: 110px; resize: vertical; }.notification-wizard-grid .wide { grid-column: 1 / -1; }.notification-wizard-grid fieldset { grid-column: 1 / -1; grid-template-columns: repeat(3, max-content); padding: 10px; border: 1px solid #d0d5dd; border-radius: 7px; }.notification-wizard-grid fieldset legend { padding: 0 4px; }.notification-wizard-grid fieldset label { display: flex; align-items: center; }.notification-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }.notification-form-error, .notification-inline-error { color: #b42318; font-size: 13px; }
@media (max-width: 760px) { .notification-commandbar { align-items: stretch; flex-direction: column; }.notification-filterbar { overflow-x: auto; }.notification-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.notification-overview-grid, .notification-list-detail, .notification-wizard-grid { grid-template-columns: 1fr; }.notification-list { max-height: 330px; border-right: 0; border-bottom: 1px solid var(--line); }.notification-wizard-grid fieldset { grid-template-columns: 1fr; }.notification-dialog-backdrop { align-items: end; padding: 0; }.notification-dialog { width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; } }