:root {
  --background: #090b0e;
  --background-top: #0d1115;

  --panel: #12161b;
  --panel-light: #181d23;

  --border: #292f36;

  --text: #f4f5f7;
  --muted: #8b949e;

  --yellow: #ffd400;

  --green: #3bd578;
  --red: #ff5964;
  --blue: #4ab5ff;

  --radius: 12px;
}


* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {
  margin: 0;

  min-height: 100vh;

  background:
    linear-gradient(
      180deg,
      var(--background-top),
      var(--background)
    );

  color:
    var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


a {
  color: inherit;

  text-decoration: none;
}


.topbar {
  min-height: 90px;

  padding:
    18px 32px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  border-bottom:
    1px solid var(--border);

  background:
    rgba(
      8,
      10,
      12,
      0.97
    );
}


.eyebrow {
  margin-bottom:
    4px;

  color:
    var(--yellow);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    2px;
}


.topbar h1 {
  margin: 0;

  font-size:
    28px;

  letter-spacing:
    1px;
}


.back-button {
  padding:
    10px 15px;

  border:
    1px solid var(--border);

  border-radius:
    6px;

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    900;
}


.back-button:hover {
  color:
    var(--text);

  border-color:
    #4c5662;
}


.page {
  width:
    min(
      1450px,
      calc(
        100% - 40px
      )
    );

  margin:
    30px auto 60px;
}


.page-heading,
.track-heading {
  margin-bottom:
    22px;
}


.page-heading h2,
.track-heading h2 {
  margin:
    7px 0 6px;

  font-size:
    25px;
}


.page-heading p,
.track-heading p {
  margin: 0;

  color:
    var(--muted);
}


.track-heading
.live-badge {
  margin-bottom:
    8px;
}


.track-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        320px,
        1fr
      )
    );

  gap:
    15px;
}


.track-card {
  overflow: hidden;

  padding:
    22px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      var(--panel-light),
      var(--panel)
    );

  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}


.track-card:hover {
  transform:
    translateY(-2px);

  border-color:
    #4c5662;
}


.track-card-top {
  display: flex;

  justify-content:
    space-between;

  gap:
    20px;
}


.track-name {
  font-size:
    19px;

  font-weight:
    900;
}


.track-resource {
  margin-top:
    5px;

  color:
    var(--muted);

  font-size:
    12px;
}


.live-badge {
  width:
    fit-content;

  padding:
    7px 10px;

  display: flex;

  align-items: center;

  gap:
    7px;

  border:
    1px solid var(--border);

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    1px;
}


.live-badge span {
  width:
    7px;

  height:
    7px;

  flex:
    0 0 7px;

  border-radius:
    50%;
}


.live-badge.online {
  color:
    var(--green);
}


.live-badge.online span {
  background:
    var(--green);

  box-shadow:
    0 0 8px
    rgba(
      59,
      213,
      120,
      0.8
    );
}


.live-badge.offline {
  color:
    var(--red);
}


.live-badge.offline span {
  background:
    var(--red);
}


.track-stats {
  margin:
    35px 0;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    20px;
}


.track-stats div {
  display: flex;

  flex-direction:
    column;

  gap:
    7px;
}


.track-stats span,
.summary-card span {
  color:
    var(--muted);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    1px;
}


.track-stats strong {
  font-size:
    21px;
}


.view-link {
  padding-top:
    14px;

  display: flex;

  justify-content:
    space-between;

  border-top:
    1px solid var(--border);

  color:
    var(--yellow);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    1px;
}


.range-bar {
  margin-bottom:
    15px;

  display: flex;

  flex-wrap: wrap;

  gap:
    8px;
}


.range-button {
  padding:
    10px 17px;

  border:
    1px solid var(--border);

  border-radius:
    6px;

  background:
    var(--panel);

  color:
    var(--muted);

  cursor:
    pointer;

  font-size:
    10px;

  font-weight:
    900;
}


.range-button:hover {
  color:
    var(--text);
}


.range-button.active {
  border-color:
    var(--yellow);

  background:
    var(--yellow);

  color:
    #000;
}


.summary-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    13px;
}


.summary-card {
  min-height:
    115px;

  padding:
    20px;

  display: flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      var(--panel-light),
      var(--panel)
    );
}


.summary-card strong {
  font-size:
    29px;

  font-variant-numeric:
    tabular-nums;
}


.parity-panel {
  margin-top:
    15px;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    var(--panel);
}


.panel-heading {
  padding:
    19px 20px;

  display: flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  border-bottom:
    1px solid var(--border);
}


.panel-heading h3 {
  margin:
    0 0 5px;

  font-size:
    15px;
}


.panel-heading p,
.updated-time {
  margin: 0;

  color:
    var(--muted);

  font-size:
    10px;
}


.table-scroll {
  overflow-x: auto;
}


table {
  width: 100%;

  min-width:
    780px;

  border-collapse:
    collapse;
}


th,
td {
  padding:
    14px 18px;

  text-align:
    left;

  border-bottom:
    1px solid #22272d;

  font-variant-numeric:
    tabular-nums;
}


th {
  background:
    #0e1216;

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    1px;
}


td {
  font-size:
    13px;
}


tbody tr:hover {
  background:
    #181d22;
}


.rank {
  color:
    var(--muted);
}


.kart {
  font-size:
    17px;

  font-weight:
    900;
}


.average,
.difference {
  font-weight:
    800;
}


.difference.fast {
  color:
    var(--blue);
}


.difference.good {
  color:
    var(--green);
}


.difference.slow {
  color:
    var(--red);
}


.parity-status {
  display:
    inline-block;

  min-width:
    75px;

  padding:
    6px 9px;

  border-radius:
    999px;

  text-align:
    center;

  font-size:
    9px;

  font-weight:
    900;
}


.parity-status.fast {
  background:
    rgba(
      74,
      181,
      255,
      0.13
    );

  color:
    var(--blue);
}


.parity-status.good {
  background:
    rgba(
      59,
      213,
      120,
      0.13
    );

  color:
    var(--green);
}


.parity-status.slow {
  background:
    rgba(
      255,
      89,
      100,
      0.13
    );

  color:
    var(--red);
}


.loading,
.loading-row {
  padding:
    40px;

  color:
    var(--muted);

  text-align:
    center;
}


.error {
  color:
    var(--red);
}


@media
(max-width: 850px) {

  .summary-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }
}


@media
(max-width: 550px) {

  .topbar {
    padding:
      16px;
  }


  .topbar h1 {
    font-size:
      23px;
  }


  .page {
    width:
      calc(
        100% - 20px
      );

    margin-top:
      18px;
  }


  .summary-grid {
    grid-template-columns:
      1fr;
  }


  .track-grid {
    grid-template-columns:
      1fr;
  }


  .panel-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}

/* ============================================================
   ADMIN
   ============================================================ */

.topbar-actions {
  display: flex;
  gap: 8px;
}


.filter-info {
  margin-top: 10px;

  color: var(--yellow);

  font-size: 11px;

  font-weight: 700;
}


.admin-page {
  max-width: 1200px;
}


.admin-panel {
  padding: 22px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    var(--panel);
}


.admin-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 18px;

  margin-top: 20px;
}


.admin-field {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.admin-field.full {
  max-width: 500px;
}


.admin-field label {
  color:
    var(--muted);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;
}


.admin-field small {
  color:
    var(--muted);

  line-height: 1.5;
}


.admin-field select,
.admin-field input {
  width: 100%;

  padding: 12px;

  border:
    1px solid var(--border);

  border-radius: 6px;

  outline: none;

  background:
    #0d1115;

  color:
    var(--text);

  font-size: 16px;

  font-weight: 700;
}


.admin-field select:focus,
.admin-field input:focus {
  border-color:
    var(--yellow);
}


.input-unit {
  display: flex;

  align-items: center;

  gap: 10px;
}


.input-unit span {
  min-width: 35px;

  color:
    var(--muted);

  font-size: 12px;

  font-weight: 700;
}


.admin-actions {
  margin-top: 24px;

  display: flex;

  align-items: center;

  gap: 16px;
}


.primary-button {
  padding:
    12px 20px;

  border: 0;

  border-radius: 6px;

  cursor: pointer;

  background:
    var(--yellow);

  color: #000;

  font-weight: 900;

  letter-spacing: 0.5px;
}


.primary-button:hover {
  filter:
    brightness(1.08);
}


.save-message {
  color:
    var(--muted);

  font-size: 12px;

  font-weight: 700;
}


.save-message.success {
  color:
    var(--green);
}


.save-message.error {
  color:
    var(--red);
}


.admin-preview {
  margin-top: 20px;
}


.admin-preview h3 {
  font-size: 13px;

  letter-spacing: 1px;
}


@media
(max-width: 700px) {

  .admin-grid {
    grid-template-columns:
      1fr;
  }
}

/* ============================================================
   KART DETAIL
   ============================================================ */

.kart-link {
  color:
    var(--text);

  text-decoration:
    none;
}


.kart-link:hover {
  color:
    var(--yellow);

  text-decoration:
    underline;
}


.kart-detail-heading {
  margin-bottom:
    22px;
}


.kart-track-name {
  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    1px;
}


.kart-detail-heading h2 {
  margin:
    5px 0 8px;

  font-size:
    34px;
}


.kart-detail-heading h2 span {
  color:
    var(--yellow);
}


.metric-fast {
  color:
    var(--blue);
}


.metric-good {
  color:
    var(--green);
}


.metric-slow {
  color:
    var(--red);
}


.chart-panel {
  margin-top:
    15px;

  overflow:
    hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    var(--panel);
}


.chart-wrap {
  width:
    100%;

  min-height:
    360px;

  padding:
    10px 15px 5px;
}


#lapChart {
  display:
    block;

  width:
    100%;

  height:
    360px;
}

/* ============================================================
   TRACK MANAGEMENT ADMIN
   ============================================================ */

.admin-management-page {
  max-width:
    1450px;
}


.admin-heading-row {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;
}


.track-manager-layout {
  display:
    grid;

  grid-template-columns:
    300px 1fr;

  gap:
    15px;

  align-items:
    start;
}


.admin-track-sidebar,
.track-editor-panel {
  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    var(--panel);
}


.admin-track-sidebar {
  overflow:
    hidden;

  position:
    sticky;

  top:
    15px;
}


.admin-section-title {
  color:
    var(--muted);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    1.5px;
}


.admin-track-sidebar
.admin-section-title {
  padding:
    16px 17px;

  border-bottom:
    1px solid
    var(--border);
}


.admin-track-list {
  display:
    flex;

  flex-direction:
    column;
}


.admin-track-item {
  width:
    100%;

  padding:
    16px;

  border:
    0;

  border-bottom:
    1px solid
    var(--border);

  background:
    transparent;

  color:
    var(--text);

  cursor:
    pointer;

  text-align:
    left;
}


.admin-track-item:hover {
  background:
    #181d22;
}


.admin-track-item.selected {
  background:
    #1a1f24;

  box-shadow:
    inset 3px 0 0
    var(--yellow);
}


.admin-track-item-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.admin-track-item-top
strong {
  font-size:
    13px;
}


.admin-track-item-meta {
  margin-top:
    5px;

  overflow:
    hidden;

  color:
    var(--muted);

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.admin-track-item-footer {
  margin-top:
    12px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  color:
    var(--muted);

  font-size:
    9px;

  text-transform:
    uppercase;
}


.mini-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  font-size:
    8px;

  font-weight:
    900;
}


.mini-status span {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;
}


.mini-status.online {
  color:
    var(--green);
}


.mini-status.online
span {
  background:
    var(--green);
}


.mini-status.offline {
  color:
    var(--red);
}


.mini-status.offline
span {
  background:
    var(--red);
}


.admin-empty-state {
  padding:
    30px 15px;

  color:
    var(--muted);

  font-size:
    12px;

  text-align:
    center;
}


.track-editor-panel {
  overflow:
    hidden;
}


.track-editor-header {
  padding:
    20px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  border-bottom:
    1px solid
    var(--border);
}


.track-editor-header
h2 {
  margin:
    5px 0;

  font-size:
    22px;
}


.track-editor-header
p {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    11px;
}


.admin-form-section {
  padding:
    22px;

  border-bottom:
    1px solid
    var(--border);
}


.admin-form-section
h3 {
  margin:
    0 0 18px;

  color:
    var(--yellow);

  font-size:
    11px;

  letter-spacing:
    1px;
}


.admin-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap:
    18px;
}


.admin-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.admin-field
label {
  color:
    var(--muted);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    1px;
}


.admin-field
small {
  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.4;
}


.admin-field
input,
.admin-field
select {
  width:
    100%;

  min-height:
    43px;

  padding:
    10px 12px;

  border:
    1px solid
    var(--border);

  border-radius:
    6px;

  outline:
    none;

  background:
    #0c1014;

  color:
    var(--text);

  font-family:
    inherit;

  font-size:
    14px;
}


.admin-field
input:focus,
.admin-field
select:focus {
  border-color:
    var(--yellow);
}


.admin-field
input[readonly] {
  color:
    var(--muted);

  cursor:
    not-allowed;
}


.input-unit {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.input-unit
span {
  min-width:
    35px;

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    800;
}


.switch-row {
  min-height:
    43px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  cursor:
    pointer;
}


.switch-row
input {
  width:
    18px;

  min-height:
    18px;

  height:
    18px;

  accent-color:
    var(--yellow);
}


.switch-label {
  color:
    var(--text);

  font-size:
    13px;
}


.connection-test-row {
  margin-top:
    18px;

  display:
    flex;

  align-items:
    center;

  gap:
    15px;
}


.primary-button,
.secondary-button,
.danger-button {
  min-height:
    40px;

  padding:
    10px 17px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    6px;

  cursor:
    pointer;

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.6px;
}


.primary-button {
  border:
    1px solid
    var(--yellow);

  background:
    var(--yellow);

  color:
    #000;
}


.secondary-button {
  border:
    1px solid
    var(--border);

  background:
    #181d22;

  color:
    var(--text);
}


.danger-button {
  border:
    1px solid
    rgba(
      255,
      89,
      100,
      0.55
    );

  background:
    rgba(
      255,
      89,
      100,
      0.08
    );

  color:
    var(--red);
}


.primary-button:hover,
.secondary-button:hover,
.danger-button:hover {
  filter:
    brightness(
      1.1
    );
}


.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled {
  opacity:
    0.5;

  cursor:
    wait;
}


.save-message {
  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;
}


.save-message.success {
  color:
    var(--green);
}


.save-message.error {
  color:
    var(--red);
}


.admin-preview-grid {
  grid-template-columns:
    repeat(
      4,
      1fr
    );
}


.track-editor-actions {
  padding:
    22px 22px 10px;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;
}


.delete-note {
  margin:
    0;

  padding:
    0 22px 22px;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.5;
}


@media
(max-width: 950px) {

  .track-manager-layout {
    grid-template-columns:
      1fr;
  }


  .admin-track-sidebar {
    position:
      static;
  }


  .admin-track-list {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .admin-preview-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }
}


@media
(max-width: 650px) {

  .admin-heading-row {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .admin-grid {
    grid-template-columns:
      1fr;
  }


  .admin-track-list {
    grid-template-columns:
      1fr;
  }


  .admin-preview-grid {
    grid-template-columns:
      1fr;
  }


  .track-editor-header {
    flex-direction:
      column;
  }


  .connection-test-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}

/* ============================================================
   SMS AUTO DETECT
   ============================================================ */

.sms-auto-detect-box {
  padding:
    18px;

  border:
    1px solid
    var(--border);

  border-radius:
    8px;

  background:
    #0c1014;
}


.auto-detect-actions {
  margin-top:
    15px;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    14px;
}


.detected-resource {
  margin-top:
    18px;

  max-width:
    600px;
}


.detected-summary {
  margin-top:
    18px;

  padding:
    15px 17px;

  display:
    grid;

  gap:
    7px;

  border:
    1px solid
    rgba(
      59,
      213,
      120,
      0.3
    );

  border-radius:
    7px;

  background:
    rgba(
      59,
      213,
      120,
      0.06
    );

  color:
    var(--muted);

  font-size:
    11px;
}


.detected-summary strong {
  color:
    var(--text);
}


.detected-check {
  margin-bottom:
    4px;

  color:
    var(--green);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.5px;
}


.advanced-settings {
  margin-top:
    20px;

  border-top:
    1px solid
    var(--border);
}


.advanced-settings summary {
  padding:
    16px 0;

  color:
    var(--muted);

  cursor:
    pointer;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.8px;
}


.advanced-settings summary:hover {
  color:
    var(--text);
}


.advanced-grid {
  padding-top:
    5px;
}

/* ============================================================
   ADMIN LOGIN
   ============================================================ */

.login-shell {
  width:
    100%;

  min-height:
    100vh;

  padding:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.login-card {
  width:
    min(
      430px,
      100%
    );

  padding:
    32px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      var(--panel-light),
      var(--panel)
    );

  box-shadow:
    0 25px 70px
    rgba(
      0,
      0,
      0,
      0.35
    );
}


.login-card h1 {
  margin:
    4px 0 30px;

  font-size:
    30px;
}


.login-card h2 {
  margin:
    0 0 8px;

  font-size:
    20px;
}


.login-description {
  margin:
    0 0 24px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.6;
}


.login-form {
  display:
    grid;

  gap:
    18px;
}


.login-form[hidden] {
  display:
    none;
}


.login-button {
  width:
    100%;

  margin-top:
    4px;
}


.login-back-link {
  margin-top:
    25px;

  display:
    inline-block;

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    800;
}


.login-back-link:hover {
  color:
    var(--text);
}


.logout-form {
  margin:
    0;
}


.logout-button {
  background:
    transparent;

  cursor:
    pointer;

  font-family:
    inherit;
}

/* ============================================================
   SYSTEM / COLLECTOR HEALTH
   ============================================================ */

.system-health-panel {
  margin-bottom:
    20px;

  overflow:
    hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    var(--panel);
}


.health-panel-heading {
  padding:
    20px 22px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  border-bottom:
    1px solid
    var(--border);
}


.health-panel-heading h2 {
  margin:
    5px 0;
}


.health-panel-heading p {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    11px;
}


.health-updated {
  color:
    var(--muted);

  font-size:
    10px;

  white-space:
    nowrap;
}


.health-summary-grid {
  padding:
    18px;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    12px;

  border-bottom:
    1px solid
    var(--border);
}


.collector-health-grid {
  padding:
    18px;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    14px;
}


.collector-health-card {
  overflow:
    hidden;

  border:
    1px solid
    var(--border);

  border-left:
    4px solid
    var(--border);

  border-radius:
    7px;

  background:
    #0c1014;
}


.collector-health-card.healthy {
  border-left-color:
    var(--green);
}


.collector-health-card.warning {
  border-left-color:
    var(--yellow);
}


.collector-health-card.offline {
  border-left-color:
    var(--red);
}


.collector-health-card.disabled {
  opacity:
    0.7;
}


.collector-health-top {
  padding:
    15px 16px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    15px;

  border-bottom:
    1px solid
    var(--border);
}


.collector-health-top h3 {
  margin:
    0;

  font-size:
    14px;
}


.collector-health-top p {
  margin:
    4px 0 0;

  color:
    var(--muted);

  font-size:
    10px;
}


.health-badges {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    6px;
}


.collector-state-badge,
.collector-activity-badge {
  padding:
    5px 7px;

  border:
    1px solid
    var(--border);

  border-radius:
    4px;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.5px;
}


.collector-state-badge.healthy {
  border-color:
    rgba(
      59,
      213,
      120,
      0.4
    );

  color:
    var(--green);
}


.collector-state-badge.warning {
  color:
    var(--yellow);
}


.collector-state-badge.offline {
  color:
    var(--red);
}


.collector-state-badge.disabled {
  color:
    var(--muted);
}


.collector-activity-badge.live {
  background:
    rgba(
      59,
      213,
      120,
      0.12
    );

  color:
    var(--green);
}


.collector-activity-badge.quiet {
  color:
    var(--yellow);
}


.collector-activity-badge.waiting,
.collector-activity-badge.disabled {
  color:
    var(--muted);
}


.collector-activity-badge.offline {
  color:
    var(--red);
}


.health-data-grid {
  padding:
    15px 16px;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    16px 12px;
}


.health-data-grid div {
  min-width:
    0;
}


.health-data-grid span {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--muted);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.6px;
}


.health-data-grid strong {
  color:
    var(--text);

  font-size:
    12px;
}


.health-times {
  padding:
    12px 16px;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap:
    12px;

  border-top:
    1px solid
    var(--border);
}


.health-times span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--muted);

  font-size:
    9px;
}


.health-times strong {
  font-size:
    10px;
}


.health-error {
  padding:
    10px 16px;

  border-top:
    1px solid
    rgba(
      255,
      89,
      100,
      0.25
    );

  background:
    rgba(
      255,
      89,
      100,
      0.06
    );

  color:
    var(--red);

  font-size:
    10px;

  line-height:
    1.5;
}


@media
(max-width: 1100px) {

  .collector-health-grid {
    grid-template-columns:
      1fr;
  }
}


@media
(max-width: 750px) {

  .health-summary-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .health-data-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .health-panel-heading {
    flex-direction:
      column;
  }
}


@media
(max-width: 450px) {

  .health-summary-grid,
  .health-data-grid,
  .health-times {
    grid-template-columns:
      1fr;
  }
}