/* === PotterX — motyw strony kont (jfa-go), wstrzykiwany przez nginx === */
:root {
  --px-gold: #c8a84b;
  --px-gold-hi: #e8c96b;
  --px-gold-lo: #a8782b;
  --px-bg: #0a0a0f;
  --px-card: #12121a;
  --px-input: #0d0d14;
}

html, body { background: var(--px-bg) !important; }
body, .page-container { color: #e8e6e3 !important; }

/* Karty i sekcje */
.card, .section, .modal-content {
  background: var(--px-card) !important;
  border: 1px solid rgba(200, 168, 75, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  color: #e8e6e3 !important;
}

/* Nagłówki — złoty gradient */
.heading {
  font-family: Georgia, "Times New Roman", serif !important;
  background: linear-gradient(135deg, var(--px-gold-hi), var(--px-gold), var(--px-gold-lo)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.5px !important;
}

.label, .supra { color: #b8b4ac !important; }

/* Przyciski główne (~urge) */
.button[class*="urge"] {
  background: linear-gradient(135deg, var(--px-gold-hi), var(--px-gold)) !important;
  color: var(--px-bg) !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(200, 168, 75, 0.35) !important;
}
.button[class*="urge"]:hover { filter: brightness(1.08) !important; }

/* Przyciski drugorzędne (~info, ~neutral) */
.button[class*="info"], .button[class*="neutral"] {
  background: transparent !important;
  border: 1px solid rgba(200, 168, 75, 0.45) !important;
  color: var(--px-gold) !important;
}
.button[class*="info"]:hover, .button[class*="neutral"]:hover {
  background: rgba(200, 168, 75, 0.12) !important;
}

/* Pola formularzy */
.input, input.input, select.select, textarea {
  background: var(--px-input) !important;
  border: 1px solid rgba(200, 168, 75, 0.25) !important;
  color: #eee !important;
  border-radius: 8px !important;
}
.input:focus, input.input:focus, textarea:focus {
  border-color: var(--px-gold) !important;
  box-shadow: 0 0 0 2px rgba(200, 168, 75, 0.25) !important;
  outline: none !important;
}

/* Linki */
a:not(.button) { color: var(--px-gold) !important; }
a:not(.button):hover { color: var(--px-gold-hi) !important; }

/* Przełączniki / drobiazgi */
.switch input:checked + span { background: var(--px-gold) !important; }
.modal { backdrop-filter: blur(4px); }