.alert-bell { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); display: inline-flex; height: 38px; justify-content: center; position: relative; transition: border-color .18s ease, color .18s ease, transform .18s ease; width: 38px; }
.alert-bell:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); }
.alert-bell svg { height: 19px; width: 19px; }
.alert-badge { align-items: center; background: var(--red); border: 2px solid #fff; border-radius: 50%; color: #fff; display: inline-flex; font-size: 10px; font-weight: 700; height: 19px; justify-content: center; min-width: 19px; padding: 0 4px; position: absolute; right: -7px; top: -7px; }
.alert-overview { align-items: end; background: #e5f1ec; border-left: 5px solid var(--teal); display: flex; justify-content: space-between; margin-bottom: 20px; padding: 28px 30px; }
.alert-overview .eyebrow { color: var(--teal-dark); }
.alert-overview h2 { font: 600 26px 'Space Grotesk', sans-serif; margin: 7px 0; }
.alert-overview p { color: #53665e; margin: 0; max-width: 610px; }
.alert-total { border-left: 1px solid #bad5c9; display: grid; gap: 2px; margin-left: 28px; min-width: 104px; padding-left: 24px; }
.alert-total strong { color: var(--teal-dark); font: 600 30px 'Space Grotesk', sans-serif; }
.alert-total span { color: #53665e; font-size: 12px; }
.alert-workspace { background: #fff; border: 1px solid var(--line); padding: 24px; }
.alert-toolbar { border-bottom: 1px solid var(--line); display: flex; gap: 8px; margin-bottom: 18px; padding-bottom: 16px; }
.alert-filter { background: transparent; border: 1px solid var(--line); border-radius: 5px; color: #53665e; cursor: pointer; font: 600 12px 'DM Sans', sans-serif; min-height: 34px; padding: 7px 12px; }
.alert-filter:hover, .alert-filter.is-active { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.alert-list { display: grid; gap: 10px; }
.alert-card { align-items: center; border: 1px solid var(--line); border-left: 4px solid #d7901b; color: var(--ink); display: grid; gap: 16px; grid-template-columns: 36px minmax(0, 1fr) auto; padding: 16px 18px; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease; }
.alert-card:hover { box-shadow: 0 8px 20px rgba(31,54,44,.09); transform: translateY(-1px); }
.alert-card.alert-critical { border-left-color: var(--red); }
.alert-card-icon { align-items: center; background: #fff2d5; border-radius: 50%; color: #945e00; display: inline-flex; font: 700 16px 'Space Grotesk', sans-serif; height: 32px; justify-content: center; width: 32px; }
.alert-critical .alert-card-icon { background: #ffebe8; color: #a53831; }
.alert-card-copy { display: grid; gap: 3px; }
.alert-card-copy strong { font-size: 15px; }
.alert-card-copy > span { color: #62746c; font-size: 13px; line-height: 1.45; }
.alert-card-action { color: var(--teal-dark); font-size: 12px; font-weight: 700; white-space: nowrap; }
.alert-empty { align-items: center; background: #f6faf6; color: #245f39; display: grid; justify-items: center; min-height: 230px; padding: 30px; text-align: center; }
.alert-empty > span { align-items: center; background: #dff2dc; border-radius: 50%; display: grid; font-size: 11px; font-weight: 700; height: 40px; margin-bottom: 8px; place-items: center; width: 40px; }
.alert-empty p { color: #62746c; font-size: 13px; margin: 5px 0 0; }
@media (max-width: 700px) { .alert-overview { align-items: start; display: grid; gap: 20px; padding: 22px 18px; } .alert-overview h2 { font-size: 23px; } .alert-total { border-left: 0; border-top: 1px solid #bad5c9; margin: 0; padding: 14px 0 0; } .alert-workspace { padding: 14px; } .alert-toolbar { overflow-x: auto; } .alert-filter { flex: 0 0 auto; } .alert-card { align-items: start; grid-template-columns: 32px minmax(0, 1fr); padding: 14px; } .alert-card-action { grid-column: 2; } }