#pageAlerts .page-head { background: color-mix(in srgb,var(--hz-surface,#fff) 92%,transparent); backdrop-filter: blur(18px); }
#pageAlerts .page-body { background: var(--hz-canvas,#f4f6f9); }
#pageAlerts #alertMapSide { padding: 0 !important; overflow: auto !important; background: #f5f8fc !important; }

.sc-inbox { min-width: 0; color: #172238; font-family: Inter,system-ui,sans-serif; }
.sc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 24px 18px; background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(245,249,255,.95)); border-bottom:1px solid #e6ebf2; }
.sc-head h2 { margin:5px 0 3px; font-size:22px; line-height:1.1; letter-spacing:-.55px; }
.sc-head p { margin:0; color:#78869a; font-size:12px; }
.sc-kicker { display:inline-flex; align-items:center; gap:6px; color:#0b8b66; font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.sc-kicker svg { width:13px; height:13px; }
.sc-score { min-width:94px; text-align:end; }
.sc-score span { display:block; color:#8290a3; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.sc-score strong { font-size:31px; line-height:1; color:#0b8b66; letter-spacing:-1px; }
.sc-score.watch strong { color:#d7880a; }
.sc-score.danger strong { color:#e14343; }
.sc-score small { color:#91a0b3; font-size:10px; font-weight:700; }

.sc-risk-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:14px 24px; }
.sc-risk-grid > div { position:relative; overflow:hidden; min-height:72px; padding:13px 14px; border:1px solid #e4eaf2; border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(23,38,64,.04); }
.sc-risk-grid span { display:block; color:#7c899c; font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.07em; }
.sc-risk-grid b { display:block; margin-top:7px; font-size:24px; letter-spacing:-.5px; }
.sc-risk-grid .critical b { color:#e14343; } .sc-risk-grid .attention b { color:#d7880a; } .sc-risk-grid .signal b { color:#1769ff; }
.sc-risk-grid > div::after { content:""; position:absolute; width:54px; height:54px; inset-inline-end:-18px; top:-20px; border-radius:50%; opacity:.11; }
.sc-risk-grid .critical::after { background:#e14343; } .sc-risk-grid .attention::after { background:#f3a719; } .sc-risk-grid .signal::after { background:#1769ff; }

.sc-vehicle-filter { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 24px 12px; padding:9px 11px; border:1px solid rgba(23,105,255,.18); border-radius:11px; background:rgba(23,105,255,.07); color:#31506f; font-size:11px; }
.sc-vehicle-filter span { display:flex; align-items:center; gap:6px; } .sc-vehicle-filter svg { width:13px; height:13px; color:#1769ff; }
.sc-vehicle-filter button { border:0; border-radius:7px; padding:5px 8px; color:#1769ff; background:#fff; font:700 10px Inter; cursor:pointer; }

.sc-filters { position:sticky; top:0; z-index:7; display:flex; gap:6px; overflow-x:auto; padding:10px 24px 12px; background:rgba(245,248,252,.94); backdrop-filter:blur(16px); scrollbar-width:none; }
.sc-filters::-webkit-scrollbar { display:none; }
.sc-filter { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; height:31px; padding:0 9px; border:1px solid #dfe6ef; border-radius:9px; color:#5f6f84; background:#fff; font:650 10px Inter; cursor:pointer; transition:.16s ease; }
.sc-filter svg { width:13px; height:13px; } .sc-filter b { min-width:17px; padding:2px 5px; border-radius:99px; color:#7f8da0; background:#eef2f7; font-size:9px; }
.sc-filter.active { color:#fff; border-color:#1769ff; background:#1769ff; box-shadow:0 6px 16px rgba(23,105,255,.2); }
.sc-filter.active b { color:#fff; background:rgba(255,255,255,.2); }

.sc-list { display:flex; flex-direction:column; gap:9px; padding:0 24px 28px; }
.sc-incident { display:flex; gap:12px; padding:14px; border:1px solid #e4e9f1; border-inline-start:3px solid #7f91a6; border-radius:14px; background:#fff; box-shadow:0 3px 15px rgba(23,38,64,.045); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.sc-incident:hover,.sc-incident.selected { transform:translateY(-1px); box-shadow:0 12px 28px rgba(23,38,64,.1); }
.sc-incident.critical { border-inline-start-color:#e14343; } .sc-incident.attention { border-inline-start-color:#e09a22; } .sc-incident.signal { border-inline-start-color:#1769ff; }
.sc-incident-icon { flex:0 0 auto; display:grid; place-items:center; width:35px; height:35px; border-radius:11px; color:#1769ff; background:rgba(23,105,255,.09); }
.sc-incident.critical .sc-incident-icon { color:#d83838; background:rgba(225,67,67,.09); } .sc-incident.attention .sc-incident-icon { color:#c47b06; background:rgba(224,154,34,.1); }
.sc-incident-icon svg { width:17px; height:17px; }
.sc-incident-main { min-width:0; flex:1; }
.sc-incident-top { display:flex; justify-content:space-between; gap:12px; }
.sc-incident-top strong { display:block; color:#172238; font-size:12px; }
.sc-incident-top span { display:block; margin-top:3px; color:#52647c; font-size:10px; font-weight:650; }
.sc-incident-top time { flex:0 0 auto; color:#8a98aa; font-size:9px; }
.sc-incident p { margin:8px 0 0; color:#6f7f93; font-size:10px; line-height:1.4; }
.sc-map-action { display:inline-flex; align-items:center; gap:5px; margin-top:9px; padding:6px 8px; border:0; border-radius:7px; color:#1769ff; background:rgba(23,105,255,.08); font:700 9px Inter; cursor:pointer; }
.sc-map-action svg { width:12px; height:12px; }
.sc-more { width:100%; padding:11px; border:1px solid #dfe6ef; border-radius:11px; color:#1769ff; background:#fff; font:700 11px Inter; cursor:pointer; }
.sc-empty { display:grid; place-items:center; gap:9px; padding:54px 20px; color:#8c9aab; font-size:11px; }
.sc-empty svg { width:30px; height:30px; color:#00a978; }

html[data-theme="dark"] #pageAlerts #alertMapSide { background:#0e1623 !important; }
html[data-theme="dark"] .sc-inbox { color:#edf4ff; }
html[data-theme="dark"] .sc-head { border-color:rgba(183,201,224,.12); background:linear-gradient(135deg,#142033,#101a29); }
html[data-theme="dark"] .sc-head h2,html[data-theme="dark"] .sc-incident-top strong { color:#edf4ff; }
html[data-theme="dark"] .sc-filters { background:rgba(14,22,35,.94); }
html[data-theme="dark"] .sc-risk-grid > div,html[data-theme="dark"] .sc-filter,html[data-theme="dark"] .sc-incident,html[data-theme="dark"] .sc-more { border-color:rgba(183,201,224,.12); background:#162235; }
html[data-theme="dark"] .sc-filter { color:#a9b7c9; } html[data-theme="dark"] .sc-filter.active { color:#fff; background:#1769ff; }
html[data-theme="dark"] .sc-incident-top span,html[data-theme="dark"] .sc-incident p { color:#9baac0; }

@media (max-width:1100px) { #pageAlerts #alertsList { display:none; } #pageAlerts #alertVehSide { width:230px !important; } }
@media (max-width:720px) { #pageAlerts #alertVehSide { display:none !important; } .sc-head { padding:18px 16px 14px; } .sc-risk-grid,.sc-filters,.sc-list { padding-inline:16px; } .sc-risk-grid { gap:7px; } .sc-risk-grid > div { padding:11px; } .sc-incident-top { flex-direction:column; gap:4px; } }