.finance-panel,
.finance-section {
  margin: 24px 0;
  padding: 24px;
  background: var(--surface, #1b1d25);
  border-radius: 16px;
}
.finance-panel h2,
.finance-section h2 {
  margin: 0 0 12px;
}
.finance-panel p,
.finance-section p,
.finance-dialog p {
  color: #aeb0bf;
  line-height: 1.6;
}
.test-note {
  font-size: 13px;
  color: #cbc2ff !important;
  background: #292438;
  padding: 10px 14px;
  border-radius: 8px;
}
.finance-heading,
.finance-actions,
.finance-studio-link {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.finance-heading {
  justify-content: space-between;
}
.finance-heading span,
.finance-studio-link span {
  color: #aeb0bf;
  font-size: 13px;
}
.finance-studio-link {
  margin: 16px 0;
}
.finance-actions {
  margin: 16px 0;
}
.finance-actions button {
  white-space: normal;
}
.finance-error {
  color: #ffb7b7 !important;
}
.finance-dialog {
  padding: 32px;
}
.finance-dialog h2 {
  padding-right: 24px;
}
.finance-dialog form {
  display: grid;
  gap: 16px;
}
.finance-dialog label {
  display: grid;
  gap: 8px;
}
.finance-modal {
  max-width: 560px;
}
.checkout-price {
  font-size: 36px;
  font-weight: 700;
  margin: 20px 0;
}
.checkout-price span {
  font-size: 16px;
  color: #b5b2c2;
}
.subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.subscription-card {
  background: #22232d;
  border-radius: 12px;
  overflow: hidden;
}
.subscription-art {
  height: 160px;
  overflow: hidden;
}
.subscription-art img,
.subscription-art .game-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.subscription-content {
  padding: 20px;
}
.subscription-content h3 {
  margin: 0 0 8px;
}
.subscription-content details {
  margin-top: 16px;
}
.receipt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 0;
}
.receipt-row small,
table small {
  display: block;
  color: #aeb0bf;
  margin-top: 5px;
}
.earnings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.earnings-stat {
  padding: 22px;
  background: #20212b;
  border-radius: 12px;
  display: grid;
  gap: 10px;
}
.earnings-stat span {
  color: #aeb0bf;
  font-size: 14px;
}
.earnings-stat strong {
  font-size: 28px;
}
.finance-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}
.finance-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  text-align: left;
}
.finance-table-wrap th,
.finance-table-wrap td {
  padding: 14px 12px;
  vertical-align: top;
}
.finance-table-wrap th {
  color: #aeabba;
  font-weight: 500;
}
.finance-table-wrap tr:nth-child(even) {
  background: #ffffff04;
}
.finance-table-wrap caption {
  text-align: left;
  padding: 16px 12px;
  color: #aeb0bf;
}
.pricing-settings {
  padding: 18px;
  background: #252332;
  border-radius: 12px;
  margin: 18px 0;
}
.pricing-settings h3 {
  margin-top: 0;
}
.pricing-settings [hidden] {
  display: none;
}
.button:disabled {
  opacity: 0.45;
  cursor: default;
}
.finance-panel input,
.finance-dialog input {
  max-width: 100%;
  min-width: 0;
}
.finance-section {
  min-width: 0;
}
body[data-page="earnings"] #main {
  min-width: 0;
}
@media (max-width: 600px) {
  .finance-panel,
  .finance-section {
    padding: 16px;
    margin: 20px 0;
  }
  .finance-dialog {
    padding: 24px 18px;
  }
  .earnings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .earnings-stat {
    padding: 16px 12px;
  }
  .earnings-stat strong {
    font-size: 24px;
  }
  .finance-actions .button {
    flex: 1 1 140px;
  }
  .finance-table-wrap th,
  .finance-table-wrap td {
    padding: 10px 8px;
  }
  .finance-heading h1 {
    font-size: 26px;
  }
  .finance-heading span {
    overflow-wrap: anywhere;
  }
  .subscription-content {
    padding: 16px;
  }
  .finance-panel p {
    overflow-wrap: anywhere;
  }
}
.test-tools {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 50;
}
.test-tools > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 16px 20px;
  border-radius: 28px;
  background: var(--accent, #c4b4ff);
  color: #211a34;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  box-shadow: 0 8px 24px #0005;
}
.test-tools > summary::-webkit-details-marker { display: none; }
.test-tools > summary:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.test-tools-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(280px, calc(100vw - 48px));
  padding: 20px;
  display: grid;
  gap: 16px;
  border-radius: 16px;
  background: #24232d;
  color: #f2f0f8;
  box-shadow: 0 12px 40px #0006;
}
.test-tools-panel > div { display: flex; gap: 8px; }
.test-tools-panel .test-account-button { min-height: 44px; flex: 1; justify-content: center; font-size: 15px; }
.test-tools-panel > a { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.test-tools-panel small { color: #b9b5c8; font-size: 14px; }
.test-account-switcher {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 20px;
  border-radius: 10px;
  background: #252132;
  color: #d7cfff;
  font-size: 13px;
}
.test-account-switcher > div {
  display: flex;
  gap: 4px;
}
.test-account-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #bbb5cc;
  cursor: pointer;
  font: inherit;
}
.test-account-button:hover {
  background: #ffffff0a;
}
.test-account-button[aria-pressed="true"] {
  background: #c2afff;
  color: #201a30;
  opacity: 1;
  cursor: default;
}
.test-account-switcher > a {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #e6ddff;
}
.test-account-switcher small {
  color: #b8b0ca;
}
@media (max-width: 600px) {
  .test-account-switcher {
    gap: 8px;
    padding: 10px;
  }
  .test-account-switcher small {
    flex-basis: 100%;
    font-size: 12px;
  }
  .test-account-switcher > a {
    font-size: 12px;
  }
}
.test-mode-brief {
  display: none;
}