/* ============================================================
   cms_avatar - Panel component CSS (auto-extracted)
   Generated from cms_avatar/templates/cms_avatar/*.html <style> blocks
   Do not edit directly; edit the source templates or re-run extract.
   ============================================================ */

.cmsa-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.cmsa-head {
  padding: 14px 20px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; color: #1e3a8a; font-size: 0.95rem;
}
.cmsa-empty-state {
  color: #6b7280; font-size: 0.82rem; line-height: 1.45;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.cmsa-empty-state-compact { margin-top: 10px; }
.cmsa-empty-state-grid {
  grid-column: 1 / -1; min-height: 110px; border: 1px dashed #d1d5db;
  border-radius: 6px; background: #f9fafb; padding: 16px; text-align: center;
}
.cmsa-rarity { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; }
.cmsa-rarity-common { background: #e5e7eb; color: #4b5563; }
.cmsa-rarity-rare { background: #dbeafe; color: #1e40af; }
.cmsa-rarity-epic { background: #ddd6fe; color: #6d28d9; }
.cmsa-rarity-legendary { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; }
.cmsa-itemtile {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 10px; text-align: center; position: relative;
  transition: transform 0.15s, border-color 0.15s;
}
.cmsa-itemtile:hover { border-color: #d97706; transform: translateY(-2px); }
.cmsa-itemtile-thumb {
  width: 100%; aspect-ratio: 1; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; margin-bottom: 6px;
}
.cmsa-itemtile-name { font-size: 0.78rem; font-weight: 700; color: #1f2937; margin-bottom: 2px; }
.cmsa-itemtile-price { font-size: 0.82rem; color: #d97706; font-weight: 800; font-family: monospace; }
.cmsa-itemtile-price small { font-size: 0.68rem; color: #6b7280; font-weight: normal; }

.cmsa-avatar-display { text-align: center; }
.cmsa-size-sm .cmsa-avatar-box { width: 80px; height: 80px; }
.cmsa-size-md .cmsa-avatar-box { width: 140px; height: 140px; }
.cmsa-size-lg .cmsa-avatar-box { width: 220px; height: 220px; }
.cmsa-avatar-box {
  position: relative; border-radius: 16px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 2px solid #e5e7eb;
}
.cmsa-avatar-body { position: relative; width: 70%; height: 70%; }
.cmsa-avatar-face {
  position: absolute; inset: 10% 15%;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #78350f;
}
.cmsa-size-lg .cmsa-avatar-face { font-size: 3.5rem; }
.cmsa-size-sm .cmsa-avatar-face { font-size: 1.2rem; }
.cmsa-avatar-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.cmsa-avatar-name { font-weight: 700; margin-top: 8px; color: #1f2937; }
.cmsa-size-sm .cmsa-avatar-name { font-size: 0.78rem; }
.cmsa-size-lg .cmsa-avatar-name { font-size: 1.05rem; }

.cmsa-dressup-save, .cmsa-dressup-reset {
  padding: 6px 14px; border: none; border-radius: 3px;
  background: #059669; color: #fff; font-weight: 700;
  font-size: 0.82rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.cmsa-dressup-reset { background: #6b7280; }
.cmsa-dressup-save:hover { background: #047857; }
.cmsa-dressup-save:disabled, .cmsa-dressup-reset:disabled {
  opacity: 0.55; cursor: not-allowed;
}
.cmsa-dressup-body {
  display: grid; grid-template-columns: 300px 1fr; gap: 24px;
  padding: 20px;
}
.cmsa-dressup-preview { text-align: center; }
.cmsa-avatar-box {
  position: relative; border-radius: 16px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 2px solid #e5e7eb;
}
.cmsa-dressup-picker { min-width: 0; }
.cmsa-dressup-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px; padding: 10px 0;
  max-height: 320px; overflow-y: auto;
}
.cmsa-dressup-selected { border: 2px solid #d97706; background: #fffbeb; position: relative; }
.cmsa-dressup-locked { opacity: 0.5; cursor: not-allowed; }
.cmsa-dressup-check { position: absolute; top: 6px; right: 6px; color: #d97706; font-size: 1.1rem; }
@media (max-width: 640px) {
  .cmsa-dressup-body { grid-template-columns: 1fr; }
}

.cmsa-cat-tabs { padding: 10px 14px; display: flex; gap: 4px; flex-wrap: wrap; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.cmsa-cat-tabs a, .cmsa-cat-tabs button {
  padding: 6px 12px; border-radius: 999px; font-size: 0.82rem;
  color: #4b5563; text-decoration: none; border: 0; background: transparent;
  cursor: pointer; font: inherit;
}
.cmsa-cat-tabs a.active, .cmsa-cat-tabs button.active { background: #1e3a8a; color: #fff; }
.cmsa-cat-tabs a:not(.active):hover, .cmsa-cat-tabs button:not(.active):hover { background: #eff4fd; color: #1e3a8a; }
.cmsa-itemgrid { padding: 14px; display: grid; gap: 10px; }
.cmsa-itemgrid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cmsa-itemgrid-cols-4 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.cmsa-itemgrid-cols-6 { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

.cmsa-owned-grid { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.cmsa-owned-source { font-size: 0.7rem; color: #6b7280; margin-top: 4px; }

.cmsa-shop-grid { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }