.change-alerts-page { --ca-navy: #173b52; --ca-blue: #2b759e; --ca-muted: #718391; padding: 22px; color: #263d4c; font-family: Tahoma, Arial, sans-serif; }
.change-alerts-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 28px 32px; color: #fff; background: linear-gradient(135deg, #173b52, #2b789f); border-radius: 18px; box-shadow: 0 12px 30px rgba(24, 68, 94, .18); }
.change-alerts-hero span { color: #9bd9f5; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.change-alerts-hero h2 { margin: 8px 0; font-weight: 800; }
.change-alerts-hero p { margin: 0; color: rgba(255,255,255,.78); }
.change-alerts-badge { display: grid; grid-template-columns: 35px 1fr; align-items: center; min-width: 145px; padding: 14px 18px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.17); border-radius: 14px; }
.change-alerts-badge i { grid-row: 1 / 3; font-size: 24px; }
.change-alerts-badge strong { font-size: 22px; }
.change-alerts-badge small { color: rgba(255,255,255,.7); }
.change-alerts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.change-alert-card { padding: 24px; background: #fff; border: 1px solid #e0e8ee; border-radius: 17px; box-shadow: 0 8px 28px rgba(28, 64, 87, .07); }
.change-alert-card.is-delete { border-top: 4px solid #d96868; }
.change-alert-card.is-edit { border-top: 4px solid #dd9c35; }
.change-alert-card > header { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; }
.change-alert-card header > div:nth-child(2) { flex: 1; }
.change-alert-card h3 { margin: 0 0 5px; color: var(--ca-navy); font-size: 18px; font-weight: 800; }
.change-alert-card p { margin: 0; color: var(--ca-muted); font-size: 12px; line-height: 1.6; }
.change-alert-icon { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; color: #b74f4f; background: #fff0f0; border-radius: 13px; font-size: 18px; }
.is-edit .change-alert-icon { color: #9b681c; background: #fff5e4; }
.change-alert-switch input { display: none; }
.change-alert-switch span { position: relative; display: block; width: 46px; height: 25px; background: #cbd4da; border-radius: 999px; cursor: pointer; transition: .2s; }
.change-alert-switch span:after { content: ''; position: absolute; top: 3px; right: 3px; width: 19px; height: 19px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: .2s; }
.change-alert-switch input:checked + span { background: #29966a; }
.change-alert-switch input:checked + span:after { transform: translateX(-21px); }
.change-alert-field { margin-top: 19px; }
.change-alert-field > label { display: block; margin-bottom: 8px; color: #315267; font-weight: 700; }
.change-alert-field small { display: block; margin-top: 7px; color: #81909a; }
.change-alert-destination { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.change-alert-destination input { display: none; }
.change-alert-destination span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 9px; text-align: center; color: #607786; background: #f7fafc; border: 1px solid #dde7ed; border-radius: 10px; cursor: pointer; font-size: 12px; }
.change-alert-destination input:checked + span { color: #21698f; background: #eaf5fb; border-color: #71add0; font-weight: 700; }
.change-alert-target { display: none; }
.change-alert-target.is-visible { display: block; }
.change-alerts-notice { display: flex; align-items: flex-start; gap: 13px; margin: 18px 0; padding: 17px 20px; color: #31576c; background: #edf7fc; border: 1px solid #cfe5f0; border-radius: 13px; }
.change-alerts-notice > i { margin-top: 2px; color: #2b7ba5; font-size: 21px; }
.change-alerts-notice strong { display: block; margin-bottom: 4px; }
.change-alerts-notice p { margin: 0; line-height: 1.7; }
.change-alerts-save { min-width: 270px; }
.change-alert-events { margin-top: 22px; padding: 23px; background: #fff; border: 1px solid #e0e8ee; border-radius: 17px; box-shadow: 0 8px 28px rgba(28, 64, 87, .06); }
.change-alert-events header { margin-bottom: 17px; }
.change-alert-events h3 { margin: 0 0 5px; color: var(--ca-navy); font-weight: 800; }
.change-alert-events header p { margin: 0; color: var(--ca-muted); }
.change-alert-events td { vertical-align: middle !important; }
.change-event-type, .change-event-status { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.change-event-type.is-deleted { color: #aa4444; background: #fdeaea; }
.change-event-type.is-edited { color: #94631e; background: #fff2dd; }
.change-event-status.is-sent { color: #18704e; background: #e5f7ee; }
.change-event-status.is-failed { color: #aa4444; background: #fdeaea; }
.change-event-status.is-processing { color: #586d7a; background: #eef2f4; }
.change-alert-events td small { display: block; max-width: 230px; margin-top: 5px; color: #b24d4d; }
.change-alert-empty { padding: 35px; text-align: center; color: #82929d; background: #f8fafb; border-radius: 12px; }
.change-alert-empty i { font-size: 25px; }
@media (max-width: 900px) { .change-alerts-grid { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .change-alerts-page { padding: 12px; } .change-alerts-hero { align-items: flex-start; flex-direction: column; padding: 23px; } .change-alerts-badge { width: 100%; } .change-alert-destination { grid-template-columns: 1fr; } .change-alerts-save { width: 100%; min-width: 0; } }