#protection-cases {
  --protection-cyan: #35c6de;
  --protection-green: #39d39f;
  --protection-amber: #ffb84d;
  --protection-red: #ff6b78;
}
body.protection-view-active main > .filters { display: none !important; }
.protection-empty[hidden],
#protection-dashboard[hidden] { display: none !important; }

.protection-empty {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px;
  border: 1px dashed #365064;
  border-radius: 16px;
  background: #0b1c29;
}
.protection-empty > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--protection-green);
  background: rgba(57, 211, 159, .12);
  font-size: 24px;
}
.protection-empty div { flex: 1; }
.protection-empty strong,
.protection-empty small { display: block; }
.protection-empty strong { font-size: 17px; color: #eef9fb; }
.protection-empty small { margin-top: 5px; color: #8da6b7; font-size: 13px; }

.protection-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) minmax(220px, 1.5fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
}
.protection-controls label {
  display: grid;
  gap: 6px;
  color: #91a9b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.protection-controls select,
.protection-controls input,
.protection-controls button {
  min-height: 40px;
}

.protection-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 24px 26px;
  border: 1px solid #294153;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 20%, rgba(57, 211, 159, .16), transparent 30%),
    linear-gradient(135deg, #0d2230, #0a1824);
}
.protection-command h2 { margin: 4px 0 8px; font-size: 24px; color: #f1fbfc; }
.protection-command p:last-child { margin: 0; color: #9bb1bf; font-size: 14px; line-height: 1.55; }
.protection-commission {
  min-width: 230px;
  padding: 17px 20px;
  border: 1px solid rgba(57, 211, 159, .28);
  border-radius: 14px;
  background: rgba(6, 17, 26, .68);
}
.protection-commission span,
.protection-commission small { display: block; color: #91a9b8; }
.protection-commission span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.protection-commission strong { display: block; margin: 5px 0; color: var(--protection-green); font-size: 27px; }
.protection-commission small { font-size: 12px; }

.protection-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.protection-kpi {
  padding: 17px 18px;
  border: 1px solid #263e50;
  border-radius: 14px;
  background: #0d1e2b;
}
.protection-kpi span,
.protection-kpi small { display: block; color: #8fa8b8; }
.protection-kpi span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.protection-kpi strong { display: block; margin: 6px 0 4px; color: #f3fbfd; font-size: 24px; }
.protection-kpi small { font-size: 12px; line-height: 1.4; }
.protection-kpi.risk strong { color: var(--protection-red); }
.protection-kpi.warning strong { color: var(--protection-amber); }
.protection-kpi.good strong { color: var(--protection-green); }

.protection-insight-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  margin-bottom: 16px;
}
.protection-mix-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.protection-attention-list {
  display: grid;
  gap: 9px;
}
.protection-attention-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #294153;
  border-radius: 11px;
  background: #0b1a26;
}
.protection-attention-item i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--protection-amber);
  box-shadow: 0 0 0 4px rgba(255, 184, 77, .1);
}
.protection-attention-item.risk i {
  background: var(--protection-red);
  box-shadow: 0 0 0 4px rgba(255, 107, 120, .1);
}
.protection-attention-item strong,
.protection-attention-item small { display: block; }
.protection-attention-item strong { color: #eaf5f7; font-size: 14px; }
.protection-attention-item small { margin-top: 3px; color: #91a9b8; font-size: 12px; line-height: 1.4; }
.protection-attention-item b { color: #b8cbd5; font-size: 11px; text-transform: uppercase; }
.protection-empty-copy { color: #8fa8b8; font-size: 13px; }

.protection-bars { display: grid; gap: 11px; }
.protection-bar {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(90px, 1.5fr) auto;
  gap: 10px;
  align-items: center;
}
.protection-bar > span {
  overflow: hidden;
  color: #c8d9e0;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.protection-bar-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #142b3a;
}
.protection-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--protection-cyan), var(--protection-green));
}
.protection-bar strong {
  min-width: 36px;
  color: #edf7f9;
  font-size: 12px;
  text-align: right;
}

.protection-case-panel { padding-bottom: 6px; }
.protection-case-table { min-width: 1280px; }
.protection-case-table th { white-space: nowrap; }
.protection-case-table td { vertical-align: top; font-size: 13px; }
.protection-case-table td strong,
.protection-case-table td small { display: block; }
.protection-case-table td strong { color: #eaf5f7; font-size: 13px; }
.protection-case-table td small { margin-top: 4px; color: #8fa8b8; font-size: 11px; line-height: 1.4; }
.protection-notes {
  max-width: 280px;
  color: #a9bdc8;
  line-height: 1.45;
}
.protection-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.protection-check {
  padding: 4px 7px;
  border-radius: 999px;
  color: #9fb3bf;
  background: #172a37;
  font-size: 10px;
  font-weight: 700;
}
.protection-check.risk { color: #ffd6da; background: rgba(255, 107, 120, .16); }
.protection-check.warning { color: #ffe3b8; background: rgba(255, 184, 77, .16); }
.protection-check.good { color: #c9f7e7; background: rgba(57, 211, 159, .14); }

.protection-sync {
  margin-bottom: 16px;
  border-color: rgba(57, 211, 159, .25);
}
.protection-sync__head,
.protection-sync__actions,
.protection-sync__metrics,
.protection-sync__mapping-grid {
  display: flex;
  gap: 12px;
}
.protection-sync__head { align-items: flex-start; justify-content: space-between; }
.protection-sync__head h2 { margin: 4px 0 6px; }
.protection-sync__head p { margin: 0; color: #91a9b8; font-size: 13px; line-height: 1.5; }
.protection-sync__actions { flex-shrink: 0; }
.protection-sync__notice {
  margin: 14px 0;
  padding: 11px 13px;
  border-radius: 9px;
  color: #b7cbd5;
  background: #142735;
  font-size: 13px;
}
.protection-sync__notice.success { color: #c9f7e7; background: rgba(57, 211, 159, .12); }
.protection-sync__notice.warning { color: #ffe3b8; background: rgba(255, 184, 77, .12); }
.protection-sync__notice.error { color: #ffd6da; background: rgba(255, 107, 120, .13); }
.protection-sync__metrics { flex-wrap: wrap; margin: 15px 0; }
.protection-sync__metric {
  min-width: 150px;
  flex: 1;
  padding: 13px;
  border: 1px solid #294153;
  border-radius: 10px;
  background: #0b1a26;
}
.protection-sync__metric span,
.protection-sync__metric small { display: block; color: #8fa8b8; font-size: 11px; }
.protection-sync__metric strong { display: block; margin: 5px 0; color: #f1fbfc; font-size: 19px; }
.protection-sync details { margin-top: 12px; }
.protection-sync summary { cursor: pointer; color: #bdd0d9; font-size: 13px; font-weight: 700; }
.protection-sync__mapping-grid { flex-wrap: wrap; margin-top: 12px; }
.protection-sync__mapping-grid label { display: grid; gap: 5px; min-width: 210px; flex: 1; color: #91a9b8; font-size: 11px; }
.protection-sync__mapping-grid select { min-height: 38px; }

@media (max-width: 1180px) {
  .protection-controls { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .protection-kpis { grid-template-columns: repeat(3, 1fr); }
  .protection-mix-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .protection-controls,
  .protection-kpis,
  .protection-insight-grid,
  .protection-mix-grid { grid-template-columns: 1fr; }
  .protection-command { align-items: stretch; flex-direction: column; }
}