/* Bloodline Auto Equip modal (js/bloodline/ui.js). Reuses .pst-pill from preset-cards.css. */
.bae { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.bae-summary { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--sect-surface-2, rgba(0, 0, 0, 0.25)); border: 1px solid var(--sect-border, #333); border-radius: var(--r-md, 8px); }
.bae-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bae-count { font-size: 1.1em; color: var(--sect-text-dim, #9ca3af); }
.bae-count b { font-size: 1.25em; color: var(--ui-teal, #4ecdc4); }
.bae-count small { font-size: 0.7em; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 4px; }
.bae-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bae-smart { border-color: var(--ui-gold, #ffd700); color: var(--ui-gold, #ffd700); background: rgba(255, 215, 0, 0.14); }
.bae-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bae-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ui-teal, #4ecdc4), #9be7df); transition: width 0.2s ease; }

.bae-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.bae-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bae-label { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--sect-text-dim, #9ca3af); margin-right: 2px; }
.bae-chip {
    padding: 3px 10px; font-family: inherit; font-size: 0.78em; font-weight: 600; cursor: pointer;
    color: var(--sect-text-dim, #9ca3af); background: var(--sect-surface-1, rgba(0, 0, 0, 0.3));
    border: 1px solid var(--sect-border, #333); border-radius: 999px;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.bae-chip:hover { color: var(--sect-text, #fff); border-color: var(--ui-teal, #4ecdc4); }
.bae-chip--on { color: #231a00; background: var(--ui-gold, #ffd700); border-color: var(--ui-gold, #ffd700); }
.bae-chip--sort.bae-chip--on { color: #08213d; background: #60a5fa; border-color: #60a5fa; }

.bae-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.bae-card {
    display: grid; grid-template-columns: 22px 64px minmax(0, 1fr); align-items: center; gap: 10px;
    padding: 8px 10px; cursor: pointer;
    background: var(--sect-surface-2, rgba(0, 0, 0, 0.25));
    border: 1px solid color-mix(in srgb, var(--rc, #888) 55%, transparent); border-radius: var(--r-md, 8px);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.bae-card:hover { border-color: var(--rc, #888); transform: translateY(-1px); }
.bae-card--on { background: rgba(78, 205, 196, 0.12); border-color: var(--ui-teal, #4ecdc4); box-shadow: 0 0 0 1px rgba(78, 205, 196, 0.35) inset; }
.bae-card--off { opacity: 0.4; cursor: not-allowed; }
.bae-card--off:hover { transform: none; border-color: color-mix(in srgb, var(--rc, #888) 55%, transparent); }
.bae-check { width: 20px; height: 20px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #04201d; border: 2px solid var(--sect-border-strong, #4b5563); border-radius: 5px; }
.bae-card--on .bae-check { background: var(--ui-teal, #4ecdc4); border-color: var(--ui-teal, #4ecdc4); }
.bae-art { width: 64px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.25); border-radius: 6px; padding: 2px; }
.bae-art svg { width: 100%; height: auto; max-height: 64px; }
.bae-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bae-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bae-name { font-size: 0.92em; font-weight: 700; }
.bae-rarity { padding: 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--rc, #9ca3af); border: 1px solid color-mix(in srgb, var(--rc, #888) 60%, transparent); border-radius: 999px; }
.bae-pl { margin-left: auto; font-size: 0.82em; font-weight: 700; color: var(--ui-gold, #ffd700); }
.bae-empty { padding: 30px 10px; text-align: center; font-size: 0.9em; color: var(--sect-text-dim, #9ca3af); }

@media (max-width: 520px) {
    .bae-card { grid-template-columns: 22px 52px minmax(0, 1fr); gap: 8px; }
    .bae-art { width: 52px; }
}