.card{position:relative;display:flex;flex-direction:column;gap:8px;width:140px}.card:hover .avatarWrap{outline:3px solid var(--accent);outline-offset:-3px}.cardHeader{position:absolute;display:flex;justify-content:center;width:100%;height:15%;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.5) 40%,transparent 100%)}.card.owned .cardHeader{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 50%,rgba(0,0,0,.5)) 40%,transparent 100%)}.cardFooter{position:absolute;display:flex;flex-direction:column;gap:2px;padding-top:5%;width:100%;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.7) 60%,transparent 100%)}.card.owned .cardFooter{background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 40%,rgba(0,0,0,.7)) 60%,transparent 100%)}.avatarWrap{width:100%;aspect-ratio:1;position:relative;background:#6464641a}.card.owned .avatarWrap{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 60%,rgba(0,0,0,.6)),color-mix(in srgb,var(--accent) 40%,rgba(0,0,0,.6)))}.avatarWrap img{width:100%;height:100%;object-fit:cover}.card:active :is(.avatarWrap img){filter:brightness(.8)}.tierBadge{position:absolute;right:-16px;bottom:-16px;background:#000c;color:var(--accent);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;font-weight:700;border:2px solid var(--accent);box-shadow:0 2px 6px #0006}.tierBadge.tier-def{color:#888;border-color:#888}.tierBadge.tier-c{color:#fff;border-color:#fff}.tierBadge.tier-b{color:#5b9cff;border-color:#5b9cff}.tierBadge.tier-a{color:#b88dff;border-color:#b88dff}.tierBadge.tier-s{color:gold;border-color:gold}.tierBadge.tier-ex{color:#f44;border-color:#f44}.title{font-weight:700;font-size:14px;text-align:center;color:#fff}.meta{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted);text-align:center}.stars{color:gold}.profession-btn{background:var(--black);border:none;color:var(--grey);cursor:pointer;transition:all .18s ease;display:flex;height:100%;aspect-ratio:1.3 / 1;min-height:40px;box-sizing:border-box;padding:0;margin:0;align-items:center;justify-content:center}.profession-btn .profession-icon{display:inline-flex;width:50%;height:50%;align-items:center;justify-content:center;flex:0 0 auto;color:inherit;fill:currentColor;stroke:currentColor}.profession-btn .profession-icon svg{width:100%;height:100%;display:block}.profession-btn:hover{color:var(--text)}.profession-btn.active{position:relative;overflow:hidden;color:var(--accent);font-weight:700}.profession-btn.active:after{content:"";position:absolute;top:0;right:0;left:0;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent) 0%,transparent) 50%);pointer-events:none;border-left:4px solid var(--accent)}.profession-text{font-size:20px;font-weight:700;text-transform:uppercase}.profession-sidebar{position:fixed;left:0;top:0;background:var(--black);z-index:10;display:grid;grid-template-columns:max-content;grid-auto-rows:1fr;height:100vh;row-gap:10px;padding-bottom:20px;box-sizing:border-box}:root{--black: rgb(0, 0, 0);--dark-grey: rgb(50, 50, 50);--grey: rgb(170, 170, 170);--light-grey: rgb(240, 240, 240);--white: rgb(255, 255, 255);--blue: rgb(80, 170, 240);--red: rgb(200, 40, 50);--dark-red: rgb(115, 20, 10);--dark-red-alt: rgb(90, 30, 30);--yellow: rgb(250, 210, 70);--peach: rgb(240, 130, 80);--orange: rgb(255, 100, 0);--dark-orange: rgb(180, 90, 70);--green: rgb(200, 230, 70);--green-alt: rgb(230, 230, 90);--dark-green: rgb(130, 130, 50);--purple: rgb(210, 150, 250);--bg: var(--light-grey);--card: var(--light-grey);--muted: var(--grey);--accent: var(--blue);--text: var(--dark-grey)}@media (prefers-color-scheme: light){:root:not([data-theme]){--bg: var(--light-grey);--card: #ffffff;--muted: var(--grey);--accent: var(--blue);--text: var(--dark-grey)}}@media (prefers-color-scheme: light){:root[data-theme=auto]{--bg: var(--light-grey);--card: #ffffff;--muted: var(--grey);--accent: var(--blue);--text: var(--dark-grey)}}[data-theme=dark]{--bg: var(--dark-grey);--card: var(--dark-grey);--muted: var(--grey);--accent: var(--blue);--text: var(--light-grey)}@media (prefers-color-scheme: dark){:root:not([data-theme]){--bg: var(--dark-grey);--card: var(--dark-grey);--muted: var(--grey);--accent: var(--blue);--text: var(--light-grey)}}@media (prefers-color-scheme: dark){:root[data-theme=auto]{--bg: var(--dark-grey);--card: var(--dark-grey);--muted: var(--grey);--accent: var(--blue);--text: var(--light-grey)}}body{font-family:Inter,system-ui,Arial;background:var(--bg);color:var(--text);margin:0}.app-layout{display:flex;min-height:100vh}.global-theme-toggle{position:fixed;top:12px;right:12px;z-index:9999}.main-content{flex:1;margin-left:150px;padding:24px 16px}header{display:flex;flex-direction:column;gap:12px}header h1{margin-top:6px}.filters{display:flex;gap:12px;align-items:center}select{background:var(--card);color:var(--text);border:1px solid var(--muted);padding:6px 8px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:32px 12px;margin-top:18px}.groups{display:flex;flex-direction:column;gap:18px}.subgroup{background:transparent}.subprofession-header{color:var(--muted);font-size:14px;margin:0 0 8px;padding-left:6px;text-transform:capitalize}.subprofession-header .ownedCount{color:var(--muted);margin-left:12px;font-size:13px}