:root {
  --bg: #090B10;
  --graphite-main: #0E1117;
  --surface: #12161E;
  --surface-raised: #171C25;
  --gold: #A7AFBC;
  --text: #F5F7FA;
  --muted: #A7AFBC;
  --border: #2A313D;
  --border-gold: #4B5360;
}

html,
body {
  background: #090B10;
}

.platform-header {
  border-bottom-color: #2A313D;
}

.platform-main {
  background: var(--graphite-main);
}

.platform-nav a:hover,
.platform-nav a:focus-visible {
  color: #F5F7FA;
  background: #171C25;
}

.page-hero::after {
  background: radial-gradient(ellipse, rgba(75, 83, 96, 0.16), transparent 70%);
}

.category-card,
.search-wrap,
.platform-card {
  border-color: #2A313D;
}

.category-card {
  background: #12161E;
}

.category-card:hover,
.category-card:focus-visible,
.category-card.is-active {
  border-color: #4B5360;
  color: #F5F7FA;
  background: #1E2530;
  box-shadow: inset 0 1px 0 rgba(245, 247, 250, 0.05);
}

.category-icon,
.search-wrap,
.platform-logo,
.platform-tag,
.rebate {
  background: #10141B;
}

.category-card.is-active .category-icon {
  color: #F5F7FA;
  background: #4B5360;
}

.search-icon,
.notice svg {
  color: #A7AFBC;
}

.platform-search::placeholder,
.platform-group,
.notice {
  color: #747E8D;
}

.platform-card {
  background: #171C25;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.platform-logo {
  border-color: #2A313D;
}

.recommendation,
.rebate,
.platform-tag {
  border-color: #202630;
  color: #A7AFBC;
}

.recommendation {
  background: #1E2530;
}

.data-block,
.notice {
  border-color: #202630;
}

.data-label {
  color: #A7AFBC;
}

.card-action {
  border-color: #2A313D;
  color: #F5F7FA;
  background: #10141B;
}

.card-action:hover,
.card-action:focus-visible,
.card-action.primary {
  border-color: #4B5360;
  color: #F5F7FA;
  background: #1E2530;
  box-shadow: none;
}

.card-action[aria-disabled="true"],
.card-action.is-disabled {
  border-color: #202630;
  color: #4B5360;
  background: #10141B;
}

.platform-card {
  display: block;
  padding: 0;
  border-color: rgba(132, 160, 187, 0.5) !important;
  background: linear-gradient(150deg, #1d2733 0%, #111821 58%, #0c1118 100%) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(239, 248, 255, 0.1);
}

.platform-card-top {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid rgba(140, 171, 196, 0.18);
  background: linear-gradient(120deg, rgba(63, 86, 109, 0.54), rgba(25, 37, 50, 0.46));
}

.platform-logo {
  border-color: rgba(163, 195, 219, 0.38);
  background: #0b1017;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.platform-group {
  color: #bfd2e1;
}

.recommendation {
  border-color: rgba(255, 207, 115, 0.65);
  color: #fff3d4;
  background: linear-gradient(135deg, #8d5c22, #c38a3d);
}

.rebate {
  border-color: rgba(91, 202, 183, 0.46);
  color: #baf3e5;
  background: rgba(31, 132, 113, 0.18);
}

.data-block {
  margin: 9px 12px 0;
  padding: 9px;
  border: 1px solid rgba(136, 165, 189, 0.16);
  border-radius: 9px;
  background: rgba(6, 11, 17, 0.34);
}

.data-label {
  color: #b8d7eb;
}

.platform-tag {
  border-color: rgba(116, 156, 186, 0.28);
  color: #d3e7f5;
  background: rgba(67, 100, 128, 0.22);
}

.notice {
  margin: 9px 12px 0;
  padding: 9px;
  border: 1px solid rgba(136, 165, 189, 0.16);
  border-radius: 8px;
  color: #a7bbc9;
  background: rgba(6, 11, 17, 0.24);
}

.card-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 10px 12px 12px;
}

.card-action {
  border-color: rgba(143, 178, 203, 0.4);
  color: #f4fbff;
  background: #172432;
}

.card-action.official {
  border-color: #70e6ff;
  background: linear-gradient(135deg, #00b8ff, #1768ff);
  box-shadow: 0 5px 14px rgba(0, 151, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.card-action.backup {
  border-color: #ff9aee;
  background: linear-gradient(135deg, #ff3eae, #9d32ff);
  box-shadow: 0 5px 14px rgba(219, 50, 210, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.card-action.download {
  border-color: #84ffd0;
  background: linear-gradient(135deg, #00d987, #00a86a);
  box-shadow: 0 5px 14px rgba(0, 205, 128, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

@media (max-width: 767px) {
  .platform-card-top {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 11px;
    padding: 11px;
  }

  .data-block,
  .notice {
    margin: 8px 11px 0;
    padding: 8px;
  }

  .card-actions {
    gap: 6px;
    padding: 8px 11px 11px;
  }
}