.security-rule-banner {
  display:flex; align-items:center; gap:13px; margin-bottom:16px; padding:15px 18px;
  border:1px solid rgba(80,164,130,.17); border-radius:16px;
  background:linear-gradient(110deg,rgba(242,251,247,.98),rgba(248,251,255,.96));
  box-shadow:0 8px 24px rgba(57,91,111,.04);
}
.security-rule-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:12px; color:#268561; background:#e4f6ed; font-size:16px; font-weight:800; }
.security-rule-banner > div { display:grid; gap:4px; min-width:0; flex:1; }
.security-rule-banner strong { color:#344b47; font-size:12px; }
.security-rule-banner span:not(.security-rule-icon) { color:#71847e; font-size:10px; line-height:1.5; }
.security-rule-banner .outline-btn { min-height:34px; padding:0 12px; white-space:nowrap; font-size:10px; }
.security-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.security-metric { display:grid; gap:7px; min-height:112px; padding:16px; border:1px solid rgba(72,88,130,.09); border-radius:15px; background:rgba(255,255,255,.93); box-shadow:0 10px 28px rgba(41,54,84,.045); }
.security-metric span { color:#77829a; font-size:10px; }
.security-metric strong { color:#26334e; font-size:25px; line-height:1; letter-spacing:-.04em; }
.security-metric small { color:#9aa3b5; font-size:9px; line-height:1.45; }
.security-content-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; gap:15px; }
.security-table-card { min-width:0; overflow:hidden; }
.security-table-card .card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:66px; padding:15px 17px; border-bottom:1px solid rgba(72,88,130,.08); }
.security-table-card .card-head > div { display:grid; gap:4px; }
.security-table-card .card-head strong { color:#35415d; font-size:12px; }
.security-table-card .card-head small { color:#929bb0; font-size:9px; }
.security-count { flex:0 0 auto; padding:5px 8px; border:1px solid #ececf5; border-radius:99px; color:#78839c; background:#fafaff; font-size:9px; }
.security-list,.security-events { display:grid; gap:0; }
.security-block-row,.security-event-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding:13px 16px; border-bottom:1px solid rgba(72,88,130,.07); }
.security-block-row:last-child,.security-event-row:last-child { border-bottom:0; }
.security-block-main,.security-event-main { min-width:0; }
.security-block-title,.security-event-title { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:#3d4963; font-size:10px; font-weight:700; }
.security-kind { padding:4px 7px; border-radius:7px; color:#6658bd; background:#f1efff; font-size:9px; font-weight:650; }
.security-kind.ip { color:#b06a37; background:#fff4e9; }
.security-fingerprint { color:#7d88a0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:500; }
.security-block-meta,.security-event-meta { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:6px; color:#98a1b3; font-size:9px; line-height:1.45; }
.security-release-btn { min-height:30px; padding:0 10px; border:1px solid #eee0e1; border-radius:9px; color:#ad5960; background:#fffafb; font-size:9px; font-weight:650; }
.security-release-btn:hover { border-color:#e5b8bc; background:#fff4f5; }
.security-event-outcome { display:inline-flex; align-items:center; gap:5px; color:#8a94a9; }
.security-event-outcome.blocked { color:#c05a68; }
.security-event-outcome.released { color:#348e6a; }
.security-event-time { color:#99a2b4; font-size:9px; white-space:nowrap; }
.security-empty { padding:28px 16px; color:#909ab0; text-align:center; font-size:10px; }
.security-load-error { color:#b84e60; }
@media (max-width:1000px) { .security-content-grid { grid-template-columns:1fr; } }
@media (max-width:1100px) { .security-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .security-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .security-metric { min-height:100px; padding:13px; } .security-rule-banner { align-items:flex-start; flex-wrap:wrap; } .security-rule-banner .outline-btn { margin-left:47px; } }
@media (max-width:430px) { .security-metrics { grid-template-columns:1fr 1fr; } .security-block-row,.security-event-row { padding:12px; } .security-release-btn { grid-column:1/-1; justify-self:start; margin-left:0; } }