/* === TradingPanel === */

.tabBadge {
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(230, 57, 70, 0.2);
  color: var(--claw-red);
  border-radius: 8px;
  padding: 0.1rem 0.35rem;
  min-width: 1.1rem;
  text-align: center;
}

/* Market section */
.marketSection {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Forms */
.formGroup {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  background: rgba(61, 90, 108, 0.06);
  border: 1px solid rgba(61, 90, 108, 0.15);
  border-radius: 4px;
}

.formLabel {
  font-family: var(--font-jetbrains), 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--chrome-silver);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.formRow {
  display: flex;
  gap: 0.35rem;
  align-items: stretch;
}

.formInput {
  flex: 1;
  background: rgba(10, 14, 23, 0.8);
  border: 1px solid var(--hull-grey);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-family: var(--font-jetbrains), 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--star-white);
  outline: none;
  transition: border-color 0.2s ease;
  min-width: 0;
}

.formInput::placeholder {
  color: var(--hull-grey);
}

.formInput:focus {
  border-color: var(--plasma-cyan);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.12);
}

.formSelect {
  flex: 1;
  background: rgba(10, 14, 23, 0.8);
  border: 1px solid var(--hull-grey);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font-family: var(--font-jetbrains), 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--star-white);
  outline: none;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.2s ease;
  min-width: 0;
}

.formSelect:focus {
  border-color: var(--plasma-cyan);
}

/* Trades section */
.tradesList {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tradeCard {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  background: rgba(61, 90, 108, 0.08);
  border: 1px solid rgba(61, 90, 108, 0.2);
  border-radius: 4px;
}

.tradeHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tradeFrom {
  font-family: var(--font-space-grotesk), 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--star-white);
}

.tradeCredits {
  font-family: var(--font-jetbrains), 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--warning-yellow);
}

.tradeItems {
  font-family: var(--font-jetbrains), 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--chrome-silver);
  line-height: 1.4;
}

.tradeActions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

/* Storage */
.storageBtn {
  composes: formBtn;
  width: 100%;
  background: rgba(155, 89, 182, 0.08);
  border-color: var(--void-purple);
  color: var(--void-purple);
}

.storageBtn:hover:not(:disabled) {
  background: rgba(155, 89, 182, 0.18);
  box-shadow: 0 0 12px rgba(155, 89, 182, 0.25);
}

/* Mobile */
@media (max-width: 768px) {
  .formLabel { font-size: 0.72rem; }
  .formInput,
  .formSelect { font-size: 16px; padding: 0.5rem; min-height: 44px; }
  .formBtn { font-size: 0.75rem; padding: 0.5rem 0.75rem; min-height: 44px; }
  .formRow { flex-wrap: wrap; }
  .tradeFrom { font-size: 0.85rem; }
  .tradeItems { font-size: 0.72rem; }
  .tradeCredits { font-size: 0.78rem; }
}
