/* WartHive - pannello Kryptex Earnings sul Dashboard. CSS autonomo (non
 * dipende da classi Tailwind dell'app, che potrebbero non essere incluse
 * nel bundle compilato se non gia' usate altrove) - stesso approccio degli
 * altri overlay wh-*.css di questo progetto. */
#wh-kryptex-panel {
  margin: 0 0 24px 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

#wh-kryptex-panel .wh-kx-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #71717A;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#wh-kryptex-panel .wh-kx-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#wh-kryptex-panel .wh-kx-head-row .wh-kx-label {
  margin-bottom: 0;
}

#wh-kryptex-panel .wh-kx-coin-select {
  background: #0A0A0A;
  border: 1px solid #27272A;
  border-radius: 4px;
  color: #E4E4E7;
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
}

#wh-kryptex-panel .wh-kx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

#wh-kryptex-panel .wh-kx-card {
  background: #0A0A0A;
  border: 1px solid #27272A;
  border-radius: 6px;
  padding: 16px;
}

#wh-kryptex-panel .wh-kx-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

#wh-kryptex-panel .wh-kx-coin {
  font-size: 18px;
  font-weight: 700;
  color: #E4E4E7;
  text-transform: uppercase;
}

#wh-kryptex-panel .wh-kx-price {
  font-size: 13px;
  color: #10B981;
}

#wh-kryptex-panel .wh-kx-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

#wh-kryptex-panel .wh-kx-stat-label {
  font-size: 10px;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#wh-kryptex-panel .wh-kx-stat-value {
  font-size: 15px;
  color: #E4E4E7;
  margin-top: 2px;
}

#wh-kryptex-panel .wh-kx-stat-value.wh-kx-muted {
  color: #52525B;
  font-size: 12px;
}

#wh-kryptex-panel .wh-kx-sparkline {
  display: block;
  margin: 8px 0 12px 0;
}

#wh-kryptex-panel .wh-kx-payouts {
  border-top: 1px solid #27272A;
  padding-top: 10px;
}

#wh-kryptex-panel .wh-kx-payouts-title {
  font-size: 10px;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

#wh-kryptex-panel .wh-kx-payout-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #A1A1AA;
  padding: 3px 0;
}

#wh-kryptex-panel .wh-kx-payout-row .wh-kx-payout-amount {
  color: #10B981;
}

#wh-kryptex-panel .wh-kx-empty {
  font-size: 12px;
  color: #52525B;
  font-style: italic;
}

#wh-kryptex-panel .wh-kx-loading,
#wh-kryptex-panel .wh-kx-error {
  font-size: 12px;
  color: #71717A;
  padding: 16px;
}