.cs-picker{border:1px solid var(--lu4-border);border-radius:var(--lu4-radius-lg);background:var(--lu4-surface-raised);overflow:hidden}.character-lab>.cs-picker,.class-skill-overview>.cs-picker{margin:.75rem 0 1rem}.cs-summary{width:100%;display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border:0;background:transparent;color:var(--lu4-text);text-align:left;cursor:pointer;transition:background var(--lu4-motion-fast)}.cs-summary:hover{background:var(--lu4-surface)}.cs-summary__portrait{display:grid;place-items:center;width:2.6rem;height:2.6rem;flex:none;border-radius:var(--lu4-radius-sm);overflow:hidden;background:var(--lu4-surface-overlay);color:var(--lu4-text-muted);font-weight:800}.cs-summary__portrait img{width:100%;height:100%;object-fit:cover}.cs-summary__text{display:grid;grid-gap:.1rem;gap:.1rem;min-width:0;flex:1 1}.cs-summary__text small{color:var(--lu4-text-subtle);font-size:var(--lu4-text-xs);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-summary__text strong{font-family:var(--lu4-font-display);font-weight:700;font-size:var(--lu4-text-lg);letter-spacing:-.01em}.cs-summary__chevron{flex:none;color:var(--lu4-text-subtle);font-size:.9rem}.cs-body{display:grid;grid-gap:.75rem;gap:.75rem;padding:.25rem .75rem .85rem;border-top:1px solid var(--lu4-border)}.cs-races{display:flex;flex-wrap:wrap;gap:.4rem}.cs-races button{display:inline-flex;align-items:center;gap:.4rem;min-height:2rem;padding:.3rem .7rem;border:1px solid var(--lu4-border);border-radius:999px;color:var(--lu4-text-muted);background:var(--lu4-surface);font-size:var(--lu4-text-sm);font-weight:600;cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.cs-races button b{font-size:.95rem;line-height:1}.cs-races button:hover{border-color:var(--lu4-border-strong);color:var(--lu4-text)}.cs-races button.is-active{border-color:transparent;color:var(--lu4-teal-ink);background:linear-gradient(135deg,var(--lu4-teal-strong),var(--lu4-teal));box-shadow:0 3px 12px -3px color-mix(in srgb,var(--lu4-teal) 55%,transparent)}.cs-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));grid-gap:.4rem;gap:.4rem}.cs-roles button{display:flex;align-items:center;gap:.55rem;padding:.4rem .5rem;border:1px solid var(--lu4-border);border-radius:var(--lu4-radius-md);color:var(--lu4-text);background:var(--lu4-surface);text-align:left;cursor:pointer;transition:border-color .14s ease,background .14s ease,transform .12s ease}.cs-roles button:hover{border-color:var(--lu4-border-strong);transform:translateY(-1px)}.cs-roles button.is-active{border-color:var(--lu4-teal);background:var(--lu4-teal-soft)}.cs-roles button i,.cs-roles button img{width:2.2rem;height:2.2rem;flex:none;border-radius:var(--lu4-radius-xs);object-fit:cover;background:var(--lu4-surface-overlay)}.cs-roles button span{display:grid;grid-gap:.05rem;gap:.05rem;min-width:0}.cs-roles button strong{font-size:var(--lu4-text-sm);font-weight:650}.cs-roles button small,.cs-roles button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-roles button small{color:var(--lu4-text-subtle);font-size:var(--lu4-text-xs)}.cs-chain{display:flex;flex-wrap:wrap;gap:.35rem;padding-top:.15rem}.cs-chain button{position:relative;display:grid;grid-gap:.1rem;gap:.1rem;flex:1 1 8rem;min-width:7rem;padding:.4rem .6rem;border:1px solid var(--lu4-border);border-radius:var(--lu4-radius-sm);color:var(--lu4-text-muted);background:var(--lu4-surface);text-align:left;cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.cs-chain button:not(:last-child):after{content:"›";position:absolute;right:-.55rem;top:50%;transform:translateY(-50%);z-index:1;color:var(--lu4-text-subtle);font-size:.9rem}.cs-chain button:hover{border-color:var(--lu4-border-strong);color:var(--lu4-text)}.cs-chain button.is-active{border-color:var(--lu4-gold);color:var(--lu4-text);background:color-mix(in srgb,var(--lu4-gold) 12%,var(--lu4-surface))}.cs-chain button small{color:var(--lu4-text-subtle);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase}.cs-chain button strong{font-size:var(--lu4-text-sm);font-weight:650}@media (max-width:560px){.cs-roles{grid-template-columns:1fr 1fr}}