:root {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    sans-serif;

  color-scheme: dark;

  background: #101216;
  color: #e8e9eb;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #101216;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    14px
    max(16px, env(safe-area-inset-right))
    14px
    max(16px, env(safe-area-inset-left));

  background: rgba(16, 18, 22, 0.94);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid #2b2f37;
}

.title {
  font-size: 21px;
  font-weight: 700;
}

.sync-text {
  margin-top: 4px;

  color: #9399a5;

  font-size: 12px;
}

.badge {
  min-width: 60px;

  padding: 5px 10px;

  border-radius: 999px;

  text-align: center;

  font-size: 13px;
  font-weight: 600;
}

.badge.online {
  color: #81d99b;

  background: rgba(55, 180, 90, 0.12);

  border: 1px solid rgba(55, 180, 90, 0.25);
}

.badge.offline {
  color: #d58b8b;

  background: rgba(190, 70, 70, 0.12);

  border: 1px solid rgba(190, 70, 70, 0.25);
}

main {
  width: min(1100px, 100%);

  margin: auto;

  padding: 16px;
}

section {
  margin-bottom: 26px;
}

h2 {
  margin:
    0
    0
    12px;

  font-size: 17px;
}

.resource-grid {
  display: grid;

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

  gap: 10px;
}

.resource-card {
  display: flex;
  flex-direction: column;

  min-height: 82px;

  padding: 13px;

  border: 1px solid #292d34;

  border-radius: 10px;

  background: #171a20;
}

.resource-card span {
  color: #9299a5;

  font-size: 12px;
}

.resource-card strong {
  margin-top: 8px;

  font-size: 22px;

  font-variant-numeric: tabular-nums;
}

.fleet-card,
.repair-card {
  margin-bottom: 12px;

  border: 1px solid #292d34;

  border-radius: 10px;

  overflow: hidden;

  background: #171a20;
}

.fleet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 11px 13px;

  border-bottom: 1px solid #292d34;
}

.fleet-name {
  font-weight: 650;
}

.expedition {
  color: #a7b9d8;

  font-size: 12px;

  text-align: right;
}

.ship-row {
  display: grid;

  grid-template-columns:
    minmax(120px, 2fr)
    55px
    88px
    66px;

  align-items: center;

  gap: 8px;

  min-height: 42px;

  padding: 8px 13px;

  border-bottom: 1px solid #23272e;
}

.ship-row:last-child {
  border-bottom: none;
}

.ship-name {
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.ship-level,
.ship-hp,
.ship-cond {
  text-align: right;

  font-variant-numeric: tabular-nums;
}

.ship-level {
  color: #b6bbc4;
}

.ship-hp {
  font-weight: 600;
}

.cond-sparkle {
  color: #e7d480;
}

.damage-medium {
  color: #e7bb72;
}

.damage-heavy {
  color: #e87979;
}

.repair-card {
  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 8px;

  padding: 12px 13px;
}

.repair-time {
  color: #aab0bb;

  font-variant-numeric: tabular-nums;
}

.empty {
  padding: 20px;

  border: 1px dashed #343944;

  border-radius: 10px;

  color: #8d939e;

  text-align: center;
}

.error-box {
  padding: 14px;

  border: 1px solid #683636;

  border-radius: 10px;

  background: #271719;

  color: #e9a4a4;
}

@media (max-width: 700px) {

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

  .ship-row {
    grid-template-columns:
      minmax(100px, 2fr)
      46px
      72px
      54px;

    gap: 5px;

    padding-left: 10px;
    padding-right: 10px;

    font-size: 13px;
  }

  .fleet-header {
    padding-left: 10px;
    padding-right: 10px;
  }

}

@media (max-width: 400px) {

  main {
    padding: 10px;
  }

  .resource-grid {
    gap: 7px;
  }

  .ship-row {
    grid-template-columns:
      minmax(90px, 1fr)
      43px
      65px
      48px;
  }

}