:root {
  /* A near-black background with one bright accent is itself a generic
     AI-design default, independent of which hue fills it in (recoloring
     alone doesn't fix that - see /focused-product-design). This is a
     "Wrapped" - a thing to be proud of and share - so it reads better as a
     warm parchment/certificate you'd frame than another dark dashboard,
     and it now matches the downloadable card's own palette instead of a
     dark page around a light card.
     --accent is used as TEXT (links, borders) so it's kept dark enough for
     real WCAG contrast against --bg; --accent-fill/--accent-2 are fills
     only (button gradient, brand mark) and can stay vivid since dark text
     sits on top of them, not the other way around. All contrast pairs
     verified with real luminance math, not eyeballed. */
  --bg: #f7ecd3;
  --panel: #fffbf0;
  --border: #ddc48f;
  --text: #2a1f0f;
  --text-dim: #5f4e30;
  --accent: #96500e;
  --accent-fill: #d98a1f;
  --accent-2: #ffb454;
  --font-display: "Sora", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-bottom: 30px;
  animation: page-in 0.5s var(--ease);
}

@keyframes page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

header {
  padding: 26px 20px 10px;
  text-align: center;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.brand-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent-fill), var(--accent-2), var(--accent-fill));
  animation: mark-rotate 4s linear infinite;
  flex-shrink: 0;
}

@keyframes mark-rotate {
  to {
    transform: rotate(360deg);
  }
}

header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -0.02em; /* texto grande: tracking negativo, se lee mas junto de lo natural si no */
}

.brand-accent {
  color: var(--accent);
}

.subtitle {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}

#search-form {
  display: flex;
  gap: 8px;
  margin: 18px auto 8px;
  padding: 0 20px;
}

#username-input,
#year-select {
  font-family: var(--font-body);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

#username-input {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  width: 220px;
}

#username-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(150, 80, 14, 0.15);
}

#year-select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 11px 8px;
}

button {
  font-family: var(--font-body);
  transition: transform 0.15s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

button:active {
  transform: scale(0.96);
}

#search-form button {
  background: linear-gradient(135deg, var(--accent-fill), var(--accent-2));
  color: #050810;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-weight: 600;
  cursor: pointer;
}

#search-form button:hover {
  box-shadow: 0 6px 20px rgba(217, 138, 31, 0.35);
}

#examples {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.example-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 12px;
  padding: 3px 11px;
  font-size: 12px;
  cursor: pointer;
  margin: 0 2px;
}

.example-btn:hover {
  border-color: var(--accent);
  background: rgba(150, 80, 14, 0.08);
}

#token-details {
  max-width: 480px;
  margin: 0 20px 10px;
  font-size: 12px;
  color: var(--text-dim);
  border-radius: 12px;
  transition: background-color 0.2s var(--ease), padding 0.2s var(--ease);
}

#token-details[open] {
  /* Material translucido: separa el panel del fondo sin usar un borde duro. */
  background: rgba(255, 251, 240, 0.75);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(42, 31, 15, 0.08);
  padding: 10px 16px 14px;
}

#token-details summary {
  cursor: pointer;
  color: var(--accent);
  text-align: center;
}

#token-details p {
  margin: 8px 0;
}

#token-details a {
  color: var(--accent);
}

#token-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: var(--font-body);
}

#status-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  min-height: 18px;
  margin-bottom: 8px;
}

#card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* opacity/transform/filter aqui los controla js/app.js (revealCard) frame a
     frame, para poder leer el valor visible actual si una regeneracion
     interrumpe la animacion anterior a medio camino. */
}

#card {
  max-width: 90vw;
  width: 400px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(42, 31, 15, 0.22);
}

#download-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
}

#download-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#scope-note {
  max-width: 480px;
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  margin: 16px 20px 0;
}

footer {
  padding: 20px 20px 0;
  font-size: 11px;
  letter-spacing: 0.01em; /* texto chico: tracking positivo para legibilidad */
  color: var(--text-dim);
  text-align: center;
}

footer a {
  color: var(--accent);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

@media (max-width: 500px) {
  #search-form {
    flex-direction: column;
  }
  #username-input {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #token-details[open] {
    background: var(--panel);
    backdrop-filter: none;
  }
}