/* 表格先突出名称和状态，数量对齐；窄屏按记录展示，不把整页撑宽。 */
.runtime-files .bar {
  margin-bottom: 18px;
}
.runtime-files input[type="file"] {
  flex: 1;
  min-width: 160px;
  max-width: 520px;
}
.runtime-file-list {
  border: 1px solid #e3eaf3;
  border-radius: 10px;
  overflow: hidden;
}
.runtime-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 200px;
  gap: 18px;
  align-items: center;
  padding: 20px;
}
.runtime-file-row + .runtime-file-row {
  border-top: 1px solid #e8edf5;
}
.runtime-file-row:nth-child(even) {
  background: #fafcfe;
}
.runtime-file-row .cell-stack strong {
  font-size: 15px;
}
.runtime-file-row .file-size {
  font-size: 12px;
  color: #798ba4;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.runtime-file-row .bar {
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin: 0;
}
.runtime-file-row button {
  min-width: 80px;
}
.file-updates-panel .table {
  max-height: none;
}
.permissions-summary {
  display: grid;
  gap: 10px;
}
.permission-group > small {
  display: block;
  font-size: 10px;
  color: #8291a6;
  margin-bottom: 5px;
}
.permission-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.permission-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid #e5eaf1;
  border-radius: 5px;
  background: #f3f5f8;
  color: #9aa6b6;
  font-size: 11px;
}
.permission-option.active,
.permission-option.limit {
  background: #edf3ff;
  color: #326ecb;
  border-color: #d7e5ff;
}
.permission-option.usage {
  background: #edf9f3;
  color: #258361;
  border-color: #d5eddf;
}
.permission-option.at-limit {
  background: #fff3e5;
  color: #b67d29;
  border-color: #f3dfbe;
}
.permission-option strong {
  font-weight: 650;
  color: inherit;
}
@media (max-width: 760px) {
  .runtime-file-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 15px;
  }
  .runtime-file-row .bar {
    grid-column: 1/-1;
  }
  .runtime-file-row button {
    flex: 1;
  }
  .runtime-files input[type="file"] {
    flex-basis: 100%;
    max-width: none;
  }
}
.table {
  max-height: 680px;
  scrollbar-width: thin;
  scrollbar-color: #c6d2e2 transparent;
  border-color: #e3eaf3;
  border-radius: 10px;
}
.table table {
  table-layout: fixed;
  font-size: 12px;
}
.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f5f8fc;
  color: #687b94;
  font-size: 11px;
  font-weight: 600;
  padding: 13px 14px;
}
.table td {
  padding: 15px 14px;
  vertical-align: middle;
  line-height: 1.6;
}
.table tbody tr:nth-child(even) {
  background: #fafcfe;
}
.table tbody tr:hover {
  background: #f2f7ff;
}
.table .col-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table .col-select,
.table .col-state {
  text-align: center;
}
.table .col-time {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.table .col-code .cell-value {
  font:
    11px/1.65 ui-monospace,
    Consolas,
    monospace;
}
.table .cell-value {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
  accent-color: #3979f6;
  cursor: pointer;
}
.cell-stack {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.cell-stack strong {
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.cell-stack small {
  color: #8290a5;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table .facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-width: 0;
}
.table .fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  background: none;
  border: 0;
  padding: 0;
  min-width: 0;
}
.table .fact small {
  font-size: 10px;
  margin: 0;
  color: #8795a8;
  flex-shrink: 0;
}
.table .fact strong {
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}
.table td > .bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}
.table td > .bar:has(> button:only-child) {
  grid-template-columns: 1fr;
}
.table td button {
  width: 100%;
  min-height: 32px;
  padding: 5px 7px;
  font-size: 11px;
  white-space: nowrap;
}
.table .empty-row td {
  padding: 40px 12px;
  text-align: center;
  color: #8b9aaf;
}
.table .empty-row td::before {
  display: none;
}

@media (max-width: 1180px) {
  .table {
    max-height: none;
  }
  .table colgroup {
    display: none;
  }
  .table table {
    table-layout: auto;
  }
  .table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 16px;
  }
  .table td {
    padding: 0;
    text-align: left;
  }
  .table td::before {
    font-size: 10px;
    margin-bottom: 7px;
  }
  .table .col-select {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .table .col-select::before {
    display: none;
  }
  .table td.col-state {
    text-align: left;
  }
  .table td.col-primary {
    grid-column: 1/-1;
    padding-right: 30px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1f6;
  }
  .table td.col-primary::before {
    display: none;
  }
  .table tr:has(.col-select) .col-primary {
    grid-row: 1;
  }
  .table .col-actions {
    grid-column: 1/-1;
    border-top: 1px solid #edf1f6;
    padding-top: 12px;
  }
  .table .col-actions::before {
    display: none;
  }
  .table .empty-row td {
    grid-column: 1/-1;
  }
  .table .col-time {
    font-size: 12px;
  }
  /* 参数只有几列，在手机上仍保持紧凑的表头和行，方便逐项对照。 */
  .parameter-table {
    border: 1px solid #e3eaf3;
    overflow: auto;
  }
  .parameter-table table {
    display: table;
    table-layout: fixed;
  }
  .parameter-table colgroup {
    display: table-column-group;
  }
  .parameter-table thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
  .parameter-table tbody {
    display: table-row-group;
  }
  .parameter-table tr {
    display: table-row;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .parameter-table td,
  .parameter-table th {
    display: table-cell;
    padding: 12px 9px;
    border-bottom: 1px solid #edf1f6;
  }
  .parameter-table td::before {
    display: none;
  }
  .parameter-table tbody tr:last-child td {
    border-bottom: 0;
  }
}
.console-metrics,
.demand-grid,
.project-metrics,
.call-chart-grid,
.parameter-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
  min-width: 0;
}
.console-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.demand-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.project-metrics,
.call-chart-grid,
.parameter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-metrics {
  margin: 14px 0;
}
.project-metrics .metric {
  box-shadow: none;
  border: 0;
  background: #f6f8fc;
  padding: 16px;
}
.section-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
}
.section-line h2 {
  margin: 0;
  font-size: 17px;
}
.project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.project-list > .panel {
  margin: 0;
}
.project-ident {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 14px;
}
.http-state {
  display: inline-flex;
  align-items: center;
  color: #8b9aaf;
  background: #eff3f9;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 12px;
}
.http-state.online {
  color: #188568;
  background: #eaf8f3;
}
.call-chart-grid > .panel,
.parameter-grid > .panel {
  min-width: 0;
  margin: 0;
}
.ring-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.ring-layout svg {
  width: 100%;
  max-width: 290px;
  justify-self: center;
}
.chart-total {
  font: 700 28px system-ui;
  fill: #1a304e;
}
.chart-caption,
.axis-label {
  font: 12px system-ui;
  fill: #75869e;
}
.legend-group {
  margin: 12px 0;
}
.legend-group > strong {
  font-size: 12px;
  color: var(--state);
}
.legend-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  line-height: 1.8;
}
.legend-row span {
  overflow-wrap: anywhere;
}
.legend-row small {
  color: #75869e;
  white-space: nowrap;
}
.legend-row i,
.hist-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.hist-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #75869e;
}
.hist-legend span {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-wrap: anywhere;
}
.plot-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.plot-scroll svg {
  display: block;
  width: 100%;
  min-width: 500px;
}
.record-details {
  max-height: 330px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#dialogBody textarea {
  width: 100%;
  min-height: 130px;
  box-sizing: border-box;
}
#dialogBody > .panel {
  margin-top: 16px;
}
#dialogBody .bar {
  flex-wrap: wrap;
}
@media (max-width: 1240px) {
  .demand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .call-chart-grid,
  .project-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .console-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .console-metrics > .metric:last-child {
    grid-column: 1/-1;
  }
  .ring-layout {
    grid-template-columns: 1fr;
  }
  .call-legend {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .legend-row {
    grid-template-columns: 8px minmax(0, 1fr);
  }
  .legend-row small {
    grid-column: 2;
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .parameter-grid {
    grid-template-columns: 1fr;
  }
  .section-line {
    align-items: flex-start;
    flex-direction: column;
  }
  .api-console table {
    min-width: 0;
    table-layout: auto;
  }
  .project-metrics {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 430px) {
  .demand-grid,
  .project-metrics {
    grid-template-columns: 1fr;
  }
  .call-legend {
    grid-template-columns: 1fr;
  }
  .legend-row {
    grid-template-columns: 8px minmax(0, 1fr) auto;
  }
  .legend-row small {
    grid-column: auto;
  }
  .project-ident {
    gap: 8px;
  }
}

/* 单屏布局：长列表翻页，空间不足时按内容分区切换，保持文字和操作按钮可读。 */
[hidden],
.table tbody tr[hidden] {
  display: none !important;
}
main {
  padding: 20px 26px;
}
header {
  margin-bottom: 16px;
}
header h1 {
  font-size: 25px;
}
.panel {
  padding: 16px;
  margin-bottom: 12px;
}
h2 {
  margin-bottom: 12px;
  font-size: 15px;
}
.bar {
  gap: 8px;
  margin-bottom: 10px;
}
.metric {
  padding: 12px 15px;
}
.metric strong {
  font-size: 25px;
  margin: 6px 0 4px;
}
.section-heading {
  margin: 12px 0;
}
.demand-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.dynamics-grid {
  gap: 12px;
  margin-bottom: 12px;
}
.dynamic-card {
  padding: 14px;
}
.donut {
  height: 108px;
}
.dynamic-card .legend {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 6px;
}
.legend-row {
  gap: 5px;
  font-size: 11px;
}
.monitor-grid {
  gap: 12px;
}
.resource {
  padding: 8px 0;
}
.resource-top strong {
  font-size: 17px;
}
.meter {
  margin-top: 6px;
  height: 5px;
}
.resource small {
  margin-top: 4px;
}
.channels-grid {
  grid-template-columns: 1fr;
}
.channel-group {
  padding: 10px;
}
.channel-group h3 {
  margin-bottom: 6px;
}
.channel-value strong {
  font-size: 21px;
  margin-top: 2px;
}
.timestamp {
  margin-top: 6px;
}
.task-relay {
  margin: 0;
  padding: 16px;
}
.task-relay h2 {
  font-size: 15px;
  margin: 0 0 16px;
}
.task-relay .transit-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.task-relay .fact {
  padding: 12px;
}
.task-relay .fact strong {
  font-size: 16px;
}
.table {
  margin-top: 10px;
  max-height: none;
}
.table th,
.table td {
  padding: 10px 9px;
}
.table .facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}
.table .fact {
  padding: 5px;
}
.table .fact small {
  margin-bottom: 2px;
}
.table .cell-value {
  -webkit-line-clamp: 2;
}
.page-controls,
.section-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 0;
  font-size: 12px;
  color: #7b8da4;
  flex-wrap: wrap;
}
.section-pages {
  justify-content: flex-start;
  margin: 0 0 12px;
}
.section-pages button {
  background: white;
  color: #647b98;
}
.section-pages button.active {
  background: #3d7cf1;
  border-color: #3d7cf1;
  color: white;
}
.policy-status {
  display: inline-block;
  background: #edf3ff;
  color: #436fa5;
  border-radius: 5px;
  font-size: 11px;
  padding: 5px 8px;
  margin: 5px 0 8px;
}
.project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.project-list > .panel {
  margin: 0;
}
.project-ident {
  margin-bottom: 8px;
}
.project-metrics {
  margin: 8px 0;
  gap: 8px;
}
.project-metrics .metric {
  padding: 10px;
}
.project-metrics .metric strong {
  font-size: 22px;
  margin: 5px 0;
}
.project-card progress {
  margin: 5px 0;
}
.project-card .bar {
  margin-bottom: 4px;
}
.console-metrics,
.call-chart-grid,
.parameter-grid {
  margin-bottom: 12px;
  gap: 12px;
}
.parameter-grid .panel {
  margin: 0;
}
.call-ring {
  min-height: 220px;
}
.runtime-file-row {
  padding: 14px;
}
.runtime-files .bar {
  margin-bottom: 12px;
}
@media (max-width: 1180px) {
  .table tbody tr {
    padding: 12px;
    gap: 10px;
  }
  .table td {
    padding: 0;
  }
  .table td::before {
    margin-bottom: 4px;
  }
  .table td.col-primary {
    padding-bottom: 6px;
  }
  .table .col-actions {
    padding-top: 8px;
  }
  .permissions-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .permission-pair {
    gap: 4px;
  }
  .permission-option {
    padding: 4px;
    font-size: 10px;
  }
  .table .fact {
    padding: 5px;
  }
}
@media (max-width: 760px) {
  main {
    padding: 12px 14px;
  }
  header {
    margin-bottom: 12px;
  }
  header h1 {
    font-size: 21px;
  }
  .panel {
    padding: 12px;
  }
  .dynamics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .dynamic-card {
    padding: 10px;
  }
  .dynamic-card h2 {
    font-size: 13px;
  }
  .dynamic-card .legend {
    grid-template-columns: 1fr;
  }
  .donut {
    height: 92px;
  }
  .demand-grid,
  .console-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .console-metrics > .metric:last-child {
    grid-column: auto;
  }
  .metric {
    padding: 10px;
  }
  .metric strong {
    font-size: 21px;
  }
  .metric small {
    font-size: 10px;
  }
  .monitor-grid {
    grid-template-columns: 1fr;
  }
  .project-list {
    grid-template-columns: 1fr;
  }
  .project-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-metrics .metric strong {
    font-size: 19px;
  }
  .project-card .bar button {
    padding: 8px 10px;
  }
  .table .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .table .col-actions .bar {
    display: flex;
    flex-wrap: wrap;
  }
  .table .col-actions button {
    width: auto;
    flex: 1;
    min-width: 65px;
  }
  .permissions-summary {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .permission-group > small {
    margin-bottom: 3px;
  }
  .page-controls {
    gap: 8px;
  }
  .server-records > .bar {
    margin-bottom: 8px;
  }
  .section-pages {
    gap: 6px;
  }
  .section-pages button {
    font-size: 11px;
    padding: 8px;
  }
}
@media (min-width: 761px) and (max-height: 900px) {
  .project-list {
    grid-template-columns: 1fr;
  }
  .project-card {
    padding: 12px;
  }
  .project-metrics .metric {
    padding: 8px;
  }
}
.record-pages,
.content-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.record-pages button,
.content-tabs button {
  font-size: 11px;
  padding: 6px 8px;
  background: #f4f7fc;
  color: #5c7593;
}
.record-pages button.active,
.content-tabs button.active {
  background: #3d7cf1;
  color: white;
  border-color: #3d7cf1;
}
.tabbed-content {
  display: block;
}
.project-pager {
  justify-content: center;
  flex-wrap: nowrap;
  font-size: 11px;
}
.project-pager button {
  padding: 6px 8px;
}
@media (max-width: 1180px) {
  .ring-layout {
    grid-template-columns: 1fr 1fr;
  }
  .call-chart-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .call-legend {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ring-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .ring-layout svg {
    width: 100%;
    min-width: 0;
  }
  .legend-row {
    font-size: 9px;
    gap: 3px;
  }
  .call-legend .legend-row small {
    font-size: 9px;
  }
  .legend-row .legend-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .project-management > .bar {
    flex-wrap: nowrap;
  }
  .project-management > .bar select {
    min-width: 0;
    flex: 1;
    width: 100px;
  }
  .project-card .bar button {
    font-size: 11px;
    padding: 6px;
  }
  .project-card .project-ident {
    font-size: 11px;
    gap: 6px;
  }
  .project-list {
    margin-top: 10px;
  }
  .section-line {
    margin: 10px 0;
  }
  .page-controls {
    flex-wrap: nowrap;
  }
  .page-controls button {
    padding: 6px;
  }
}
@media (max-width: 760px) and (max-height: 650px) {
  .dynamic-card {
    padding: 8px;
  }
  .dynamic-card .legend {
    gap: 3px;
  }
  .dynamics-grid {
    gap: 6px;
  }
  .donut {
    height: 75px;
  }
  .table tbody tr {
    gap: 6px;
    padding: 8px;
  }
  .table .fact {
    padding: 3px;
  }
  .table td::before {
    margin-bottom: 3px;
  }
  .bar button {
    font-size: 11px;
    padding: 7px;
  }
  .project-card .project-metrics {
    margin: 6px 0;
  }
  .project-metrics .metric {
    padding: 6px;
  }
}
.parameter-summary .facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.parameter-summary .fact {
  padding: 7px;
}
@media (max-width: 760px) {
  .parameter-summary .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .section-pages {
    gap: 4px;
    margin-bottom: 8px;
  }
  .section-pages button {
    padding: 6px;
    font-size: 10px;
  }
  .server-records select {
    min-width: 0;
    padding: 6px;
  }
  .server-records > .bar {
    gap: 4px;
    margin-bottom: 6px;
  }
  .server-records > .bar > button {
    font-size: 11px;
    padding: 6px;
  }
}
@media (max-width: 760px) and (max-height: 650px) {
  .server-records > .bar {
    margin-bottom: 4px;
  }
  .server-records h2 {
    margin-bottom: 8px;
  }
  .server-records > .bar > button {
    padding: 5px;
  }
  .server-records .table {
    margin-top: 6px;
  }
  .server-records .page-controls {
    margin-top: 6px;
  }
}
@media (max-width: 760px) and (max-height: 650px) {
  main {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  header {
    margin-bottom: 8px;
  }
  .panel {
    padding: 10px;
  }
}
.record-pages {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.record-pages button {
  flex: none;
  white-space: nowrap;
}
.table tr.record-fields td:not(.col-select):not(.col-primary) {
  grid-column: 1/-1;
}
.batch-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
}
@media (max-width: 760px) {
  .batch-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 每列信息保持“名称 + 数值”两列，避免窄单元格把函数名和百分比逐字拆开。 */
.queue-total {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted, #687d95);
  margin: 4px 0 10px;
}
.queue-total strong {
  color: var(--text, #213b59);
  font-size: 25px;
}
.stage-timings {
  display: grid;
  gap: 5px;
  min-width: 148px;
}
.stage-timings > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}
.stage-timings small {
  color: var(--muted, #687d95);
}
.stage-timings strong {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.result-output {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  max-width: 180px;
}
.result-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 540px;
}
.result-filters select {
  width: 100%;
  min-width: 0;
}
.transit-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .transit-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stage-timings {
    width: 100%;
  }
  .result-output {
    max-width: 100%;
  }
}
.table .facts {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}
.table .fact {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  padding: 0;
}
.table .fact small {
  white-space: nowrap;
  margin: 0;
}
.table .fact strong {
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) and (max-height: 650px) {
  .server-records > .bar > button {
    padding: 4px;
  }
  .server-records select {
    padding: 4px;
  }
  .server-records h2 {
    margin-bottom: 6px;
  }
  .server-records > .bar {
    margin-bottom: 3px;
  }
}