.receiver-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px
}
.summary-card{
  background:#0c1c2d;border:1px solid #1d3c59;border-radius:12px;padding:13px
}
.summary-card span{display:block;color:#8199ad;font-size:9px;text-transform:uppercase}
.summary-card strong{display:block;font-size:21px;margin-top:7px}
.summary-card small{display:block;color:#7890a4;font-size:9px;margin-top:5px}

.receivers-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.7fr);gap:15px}
.receiver-list{display:grid;gap:14px;align-content:start}
.receiver-card{
  background:#0c1c2d;border:1px solid #244661;border-radius:14px;overflow:hidden
}
.receiver-card.primary{box-shadow:inset 3px 0 0 #31c98b}
.receiver-card.future{box-shadow:inset 3px 0 0 #556979}
.receiver-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 15px;border-bottom:1px solid #1d3b55;background:#102239
}
.receiver-identity{display:flex;align-items:center;gap:11px}
.receiver-icon{
  width:39px;height:39px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#0d3026;border:1px solid #27684e;font-size:20px
}
.receiver-icon.muted{background:#172330;border-color:#405263}
.receiver-name{font-size:14px;font-weight:900}.receiver-type{font-size:9px;color:#8299ac;margin-top:3px}
.receiver-badge{padding:6px 9px;border:1px solid;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.05em}
.receiver-badge.online{background:#0c291f;color:#a5eacb;border-color:#2c6b50}
.receiver-badge.offline{background:#301617;color:#ffb6b9;border-color:#703438}
.receiver-badge.waiting{background:#1a242f;color:#b9c8d3;border-color:#455767}
.receiver-badge.future{background:#171f28;color:#9cabb7;border-color:#455563}

.receiver-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:5px 14px 12px}
.receiver-metric{padding:11px 9px;border-bottom:1px solid #17324a}
.receiver-metric span{display:block;color:#7791a6;font-size:8px;text-transform:uppercase}
.receiver-metric strong{display:block;font-size:11px;margin-top:5px}
.receiver-location{
  display:flex;justify-content:space-between;align-items:center;gap:15px;
  background:#091827;border-top:1px solid #1b3953;padding:11px 14px
}
.receiver-location span{display:block;color:#7891a5;font-size:8px;text-transform:uppercase}
.receiver-location strong{display:block;font-size:11px;margin-top:3px}
.receiver-location small{display:block;color:#6f879b;font-size:9px;margin-top:2px}
.receiver-link{font-size:9px;font-weight:900;color:#74cff9;text-decoration:none}

.future-copy{padding:14px;color:#9db1c1;font-size:11px;line-height:1.55}
.future-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #1d3b55}
.future-grid div{padding:11px;border-right:1px solid #17324a}.future-grid div:last-child{border-right:0}
.future-grid span{display:block;font-size:8px;color:#758da1;text-transform:uppercase}
.future-grid strong{display:block;font-size:10px;margin-top:5px}

.receiver-side{display:grid;gap:14px;align-content:start}
.card-subtitle{font-size:9px;color:#8096a9;margin-top:3px}
#receiversMap{height:360px}
.map-foot{display:flex;gap:15px;padding:9px 12px;border-top:1px solid #1c3952;color:#869daf;font-size:9px}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}
.status-dot.online{background:#34d399}.status-dot.future{background:#718392}

.architecture{padding-top:8px}
.arch-row{display:flex;justify-content:space-between;gap:10px;padding:9px;border:1px solid #203e58;background:#091827;border-radius:8px;font-size:10px}
.arch-row span{color:#a0b5c5}.arch-row strong{color:#9ce7c7;font-size:8px}
.arch-arrow{text-align:center;color:#4d7895;padding:4px}
.arch-divider{height:1px;background:#23425b;margin:10px 0}
.future-row strong{color:#9facb7}

.receiver-note{margin-top:14px;padding:11px 13px;border:1px solid #29465f;border-radius:10px;background:#0c1c2d;color:#8ea7ba;font-size:10px;line-height:1.5}

@media(max-width:1250px){
  .receiver-summary{grid-template-columns:repeat(2,1fr)}
  .receivers-layout{grid-template-columns:1fr}
}
@media(max-width:800px){
  .receiver-grid{grid-template-columns:repeat(2,1fr)}
  .future-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:500px){
  .receiver-summary{grid-template-columns:1fr}
  .receiver-head,.receiver-location{align-items:flex-start;flex-direction:column}
}