/* ========================================
   CHARACTERS GALLERY STYLES
   ======================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}
.config-tabs{display:inline-flex;gap:5px;margin-top:28px;padding:5px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px}.config-tabs button{appearance:none;display:flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:10px;background:transparent;color:var(--text-secondary);font:600 14px var(--font-body);cursor:pointer}.config-tabs button.active{background:var(--accent-violet);color:white;box-shadow:0 5px 18px rgba(167,139,250,.22)}.config-tabs svg{width:17px}
.config-toolbar{display:grid;grid-template-columns:minmax(230px,320px) minmax(220px,300px);align-items:center;justify-content:center;gap:12px;margin:22px auto 0;max-width:760px}.config-toolbar .filters{grid-column:1/-1;margin:12px 0 0}.config-toolbar select{width:100%;min-width:0}.config-search{display:flex;align-items:center;gap:8px;min-width:0;padding:0 12px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:12px}.config-search:focus-within{border-color:var(--accent-violet);box-shadow:0 0 0 3px rgba(167,139,250,.12)}.config-search input{width:100%;padding:11px 0;border:0;outline:0;background:transparent;color:white;font:14px var(--font-body)}.config-search svg{width:16px;color:var(--text-muted);flex:0 0 auto}
.config-panel{display:none}.config-panel.active{display:block}.build-membership{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-subtle);font-size:11px;color:var(--text-muted)}
.library-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:24px;padding:20px 22px;border:1px solid var(--border-subtle);border-radius:18px;background:linear-gradient(140deg,rgba(124,58,237,.1),rgba(20,17,36,.7))}.library-section-heading h2{margin:3px 0;font-size:30px}.library-section-heading p{color:var(--text-muted);font-size:12px}.custom-character-initial,.custom-modal-initial{display:grid;place-items:center;width:100%;height:100%;font-family:var(--font-heading);font-size:64px;color:var(--card-accent);background:radial-gradient(circle,rgba(167,139,250,.2),rgba(12,10,20,.96))}.character-create-modal{max-width:760px;max-height:88vh;overflow:auto}.character-create-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.character-create-heading h2{font-size:32px}.inline-close{position:static;flex:0 0 38px}.character-create-form{display:grid;grid-template-columns:1fr 1fr;gap:15px}.character-create-form label{display:grid;gap:7px;color:var(--text-secondary);font-size:12px}.character-create-form .full{grid-column:1/-1}.character-create-form textarea{resize:vertical}.character-color{height:44px;padding:5px}.character-create-actions{display:flex;justify-content:flex-end;gap:10px}
.builds-header{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:24px}.build-card{overflow:hidden;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:20px}.build-cover{height:150px;position:relative;display:grid;place-items:center;background:radial-gradient(circle,rgba(167,139,250,.24),rgba(12,10,20,.95))}.build-cover>svg{width:46px;color:var(--accent-lavender)}.build-cover .tag{position:absolute;top:14px;left:14px}.build-body{padding:20px}.build-body h3{margin-bottom:8px}.build-body p{font-size:13px;min-height:66px}.build-stats{display:flex;flex-wrap:wrap;gap:13px;margin:17px 0;color:var(--text-muted);font-size:11px}.build-stats span{display:flex;align-items:center;gap:5px}.build-stats svg{width:14px}.build-actions{display:flex;gap:9px}.build-actions .btn{flex:1}.empty-library{grid-column:1/-1;text-align:center;padding:70px;color:var(--text-muted)}.empty-library svg{width:40px;margin:auto}
@media(max-width:600px){.builds-header{align-items:flex-start;flex-direction:column}.config-toolbar{display:flex;align-items:stretch;flex-direction:column}.config-toolbar select,.config-search{width:100%}}

.filter-btn {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-btn:hover {
  border-color: var(--accent-violet);
  color: var(--text-primary);
}
.filter-btn.active {
  background: var(--accent-violet);
  border-color: var(--accent-violet);
  color: white;
}

.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}
@media(max-width:700px){.library-section-heading{align-items:stretch;flex-direction:column}.library-section-heading .btn{width:100%}.character-create-form{grid-template-columns:1fr}.character-create-form .full{grid-column:auto}}
@media(max-width:560px){.characters-grid{grid-template-columns:minmax(0,1fr)}}

/* Character Card */
.char-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  display: flex;
  flex-direction: column;
}
.char-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-accent, var(--accent-violet));
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.char-image {
  height: 350px;
  position: relative;
  overflow: hidden;
}
.char-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.char-card:hover .char-image img {
  transform: scale(1.05);
}
.char-image::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--bg-card) 0%, transparent 100%);
}

.char-info {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin-top: -40px;
}

.char-name {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--card-accent, var(--text-primary));
  margin-bottom: 4px;
}
.char-archetype {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-md);
}

.char-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  flex: 1;
}

.char-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.char-card-actions,.modal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.char-card-actions .btn,.modal-actions .btn{display:inline-flex;align-items:center;gap:6px}.char-card-actions svg,.modal-actions svg{width:14px;height:14px}.char-card-actions .btn{flex:1;justify-content:center}.modal-actions{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)}

/* Modal */
.char-modal {
  max-width: 800px;
  padding: 0;
  overflow: hidden;
}
.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--transition-fast);
}
.modal-close:hover {
  background: var(--accent-rose);
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .modal-grid { grid-template-columns: 1fr; }
}

.modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 300px;
}

.modal-details {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-details h2 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-xs);
}
.modal-details .archetype {
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.modal-section {
  margin-bottom: var(--space-xl);
}
.modal-section h4 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  letter-spacing: 1px;
}

.traits-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.trait {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
}

.character-ai-panel{grid-column:1/-1;padding:16px;border:1px solid rgba(167,139,250,.28);border-radius:18px;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(217,119,243,.055));display:grid;gap:12px}.character-ai-heading{display:flex;align-items:center;gap:12px}.character-ai-heading>div{display:grid;gap:3px}.character-ai-heading small{color:var(--text-muted);line-height:1.4}.character-ai-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#7c3aed,#d977f3)}.character-ai-icon svg{width:20px}.character-ai-controls{display:flex;align-items:center;justify-content:space-between;gap:14px}.character-ai-controls label{font-size:12px;color:var(--text-muted);display:flex;gap:7px}.character-ai-status{min-height:18px;font-size:12px;color:var(--accent-lavender)}@media(max-width:680px){.character-ai-controls{align-items:stretch;flex-direction:column}}
.config-panel{padding-top:48px}.char-image{height:clamp(250px,28vw,320px)}@media(max-width:700px){.char-image{height:250px}}