.stations-panel > .panel-heading,
.stations-panel > .station-legend,
.stations-panel > .stations-bottom {
  flex-shrink: 0;
}

.stations-panel .panel-heading h2 { font-size: 15px; }
.stations-panel .panel-heading p { font-size: 11px; line-height: 1.4; }
.stations-panel .small-live { font-size: 10px; }
.stations-panel .station-legend { flex-wrap: wrap; font-size: 10px; gap: 10px 18px; }

.stations-panel .table-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #49658a #121d2e;
  outline-offset: -2px;
}

.stations-panel .table-wrap::-webkit-scrollbar { width: 7px; }
.stations-panel .table-wrap::-webkit-scrollbar-track { background: #121d2e; }
.stations-panel .table-wrap::-webkit-scrollbar-thumb { background: #49658a; border: 1px solid #121d2e; border-radius: 5px; }
.stations-panel .table-wrap::-webkit-scrollbar-thumb:hover { background: #6488b6; }

.stations-panel .stations-table { border-collapse: separate; border-spacing: 0; }
.stations-panel .stations-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  box-shadow: 0 1px 0 var(--line);
  font-size: 10px;
  letter-spacing: .3px;
  padding: 14px 0;
}
.stations-panel .stations-table th:first-child { width: 43%; }
.stations-panel .stations-table th:nth-child(2) { width: 23%; }
.stations-panel .stations-table td { padding: 13px 0; }

.station-open {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d4dff0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
.station-open:hover { color: #fff; }
.station-open:focus-visible { outline-offset: 2px; border-radius: 3px; }
.station-open > span { display: block; min-width: 0; }
.station-open .server-icon { width: 16px; height: 19px; }
.station-open .station-model { display: block; margin: 4px 0 0; color: #8ba1bd; font-size: 11px; font-weight: 400; }

.stations-panel .status { display: flex; width: fit-content; min-width: 54px; padding: 5px 7px; font-size: 11px; line-height: 1.2; }
.stations-panel .progress-header { align-items: center; font-size: 11px; line-height: 1.4; gap: 4px; }
.stations-panel .remaining { color: #8198b7; font-size: 10px; }
.stations-panel .progress-track { height: 4px; margin-top: 7px; }
.stations-panel .stations-bottom > div { font-size: 11px; }
.stations-panel .stations-bottom > div > span { font-size: 10px; line-height: 1.4; }

@media (min-width: 1700px) {
  .station-open { font-size: 16px; }
  .station-open .station-model { font-size: 12px; }
  .stations-panel .stations-table td { padding: 15px 0; }
  .stations-panel .status { min-width: 60px; font-size: 12px; }
  .stations-panel .progress-header { font-size: 12px; }
  .stations-panel .remaining { font-size: 11px; }
}

@media (max-width: 960px) {
  .stations-panel { align-self: start; }
  .stations-panel .table-wrap { flex: 0 1 auto; max-height: min(62dvh, 600px); }
  .stations-panel .station-legend { gap: 8px 12px; }
}

@media (max-width: 700px) {
  .stations-panel .table-wrap { max-height: 55dvh; min-height: 240px; padding: 0 12px; }
  .stations-panel .stations-table td { padding: 12px 0; }
  .stations-panel .stations-bottom { padding: 15px 12px; gap: 8px; }
  .stations-panel .stations-bottom > div { font-size: 10px; }
  .stations-panel .stations-bottom > div > span { font-size: 9px; }
  .stations-panel .stations-bottom strong { font-size: 18px; }
}

@media (max-width: 380px) {
  .station-open { font-size: 13px; gap: 7px; }
  .station-open .station-model { font-size: 10px; }
  .station-open .server-icon { width: 13px; }
  .stations-panel .stations-table th { font-size: 8px; }
  .stations-panel .status { min-width: 46px; padding: 5px; font-size: 10px; }
  .stations-panel .progress-header { font-size: 10px; }
  .stations-panel .remaining { font-size: 9px; }
}