.character-browser{max-width:1180px;margin:auto;padding:48px 24px 80px}.character-browser-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:28px}.character-browser-heading>div>span{color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase}.character-browser-heading h1{font-size:34px;margin:6px 0}.character-browser-heading p{margin:0;color:var(--muted)}.character-browser-tools{display:flex;gap:8px}.character-browser-tools label{display:flex;align-items:center;gap:8px;min-width:250px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:0 11px}.character-browser-tools input,.character-browser-tools select{border:0;background:transparent}.character-browser-tools select{min-width:130px;background:var(--surface)}.character-browser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}.character-browser-card{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface);transition:border-color .2s,transform .2s}.character-browser-card:hover{border-color:var(--accent);transform:translateY(-2px)}.character-browser-media{position:relative;aspect-ratio:3/4;background:#050505;overflow:hidden}.character-browser-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .25s}.character-browser-media .hover-banner{opacity:0}.character-browser-card:hover .hover-banner{opacity:1}.character-browser-card>div:last-child{padding:12px}.character-browser-card strong,.character-browser-card span{display:block}.character-browser-card>div:last-child span{color:var(--muted);font-size:12px;margin-top:4px}.private-badge{position:absolute;top:9px;right:9px;padding:5px 7px;border-radius:5px;background:rgba(0,0,0,.78);color:#f2c76d;font-size:10px}.character-browser-empty{text-align:center;color:var(--muted);padding:50px}@media(max-width:700px){.character-browser{padding:25px 15px 90px}.character-browser-heading{display:grid;align-items:start}.character-browser-heading h1{font-size:27px}.character-browser-tools{display:grid}.character-browser-tools label{min-width:0}.character-browser-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}