/* components-account.css */

/* Panels already look good site-wide; this file just pretties the content */

/* --- Generic bits --- */
.badge {
  display:inline-block;
  padding:2px 8px;
  border:1px solid #4c4133;
  border-radius:999px;
  background:#1f1a14;
  color:#e8d9b3;
  font:600 12px/16px Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.badge.ok{ color:#a3e9a5; border-color:#325637; background:#162018; }
.badge.muted{ opacity:.7 }

/* --- Characters card grid --- */
.charcards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:12px;
  margin:8px 0 2px;
}

.charcard{
  position:relative;
  border:1px solid #4c4133;
  border-radius:10px;
  background:linear-gradient(180deg,#2b241b,#221c15);
  box-shadow: var(--panel-shadow), inset 0 1px 0 rgba(255,255,255,.04);
  padding:10px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.charcard:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.35); }

.charcard__top{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.charcard__avatar{
  width:44px; height:44px; border-radius:8px;
  border:1px solid #4c4133; background:#0a0a0a; display:grid; place-items:center;
  font:700 14px/44px Inter,system-ui,sans-serif; color:#cfc8b3; text-transform:uppercase;
}
.charcard__title{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
}
.charcard__name{
  font:700 14px/1.2 Inter,system-ui,sans-serif; color:#e8d9b3; margin:0;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.charcard__meta{
  margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;
  font-size:12px; color:#cfc8b3;
}
.charcard__link{
  display:block; margin-top:8px; font-weight:600; text-decoration:none; color:#d7c297;
}
.charcard__link:hover{ text-decoration:underline; }

/* Table polish (if you keep the table anywhere else) */
.table.account-list thead th{
  background:#2a2219; border-bottom:1px solid #4a3c2b; color:#e7d4a2; font-weight:700;
}
.table.account-list td, .table.account-list th{
  padding:8px 10px;
}
/* Inputs used on the page */
.input{
  width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid var(--border); background:#13110d; color:#e8d9b3;
  outline:none;
}
.input:focus{ border-color:#d6b77c; box-shadow:0 0 0 3px rgba(214,183,124,.15); }