/* =========================================================
   GEXI — public/characters.css  (UC5c: the "My Characters" view)
   A self-contained card grid; tokens fall back so it renders standalone.
   ========================================================= */

.ch-page { padding-bottom: 96px; }

/* ---- states (off / auth / empty) ---- */
.ch-state {
  max-width: 460px; margin: 48px auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ch-state > span[aria-hidden] { font-size: 40px; line-height: 1; margin-bottom: 4px; }
.ch-state h2 { margin: 0; font-size: 19px; font-weight: 740; color: var(--ink, #e8eaed); }
.ch-state p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--muted, #9aa0aa); }

/* ---- grid ---- */
.ch-grid {
  display: grid; gap: 14px; margin: 8px auto 0; max-width: 1100px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 620px) { .ch-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }

.ch-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card, #15171c); border: 1px solid var(--line, #2a2d34); border-radius: 14px;
  transition: border-color .15s ease, transform .15s ease;
}
.ch-card:hover { border-color: var(--brand-500); transform: translateY(-2px); }

.ch-card-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  background: var(--card-alt, #1b1e24);
}
.ch-card-ph {
  display: flex; align-items: center; justify-content: center; font-size: 46px;
  color: var(--muted, #9aa0aa);
}
.ch-card-body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.ch-card-name {
  font-size: 14.5px; font-weight: 700; color: var(--ink, #e8eaed);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-badge {
  font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 999px;
  background: var(--card-alt, #1b1e24); border: 1px solid var(--line, #2a2d34); color: var(--muted, #9aa0aa);
}
.ch-badge-trained { color: #34d399; border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .12); }

/* ---- buttons ---- */
.ch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  appearance: none; cursor: pointer; text-decoration: none; font: inherit; font-weight: 700; font-size: 13.5px;
  padding: 9px 14px; border-radius: 11px;
  border: 1px solid var(--line, #2a2d34); background: var(--card-alt, #1b1e24); color: var(--ink, #e8eaed);
}
.ch-btn:hover { border-color: var(--brand-500); }
.ch-btn-primary { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.ch-card-open { width: 100%; padding: 8px 10px; }

.ch-new { display: flex; justify-content: center; margin: 22px auto 0; }