.companion-card{display:flex;align-items:center;gap:20px;border:1px solid #9580a6;border-radius:22px;padding:22px;margin:24px 0;background:#241c31;color:#f8f3ff;text-align:left}.companion-card h2{font-size:24px;margin:8px 0}.companion-card p{margin:6px 0}.companion-card small{color:#c4b7cf;line-height:1.6}.shapecies-art{width:130px;flex-shrink:0}.account-picture{width:90px;height:90px;object-fit:cover;border-radius:50%;border:3px solid #bc97df}.member-photo{width:28px;height:28px;object-fit:cover;border-radius:50%;vertical-align:middle;margin-right:7px}#picture-form{margin:24px 0}#picture-form input[type=file]{max-width:100%}@media(max-width:500px){.companion-card{flex-direction:column;align-items:flex-start}.shapecies-art{width:100px}}

.account-tabs{display:flex;gap:9px;flex-wrap:wrap;margin:24px 0}.account-tabs button{padding:12px 20px;border:1px solid #a48acd;border-radius:13px;background:#241c31;color:#fff;cursor:pointer}.account-tabs [aria-selected=true]{background:#dfff72;color:#17121e;box-shadow:3px 3px 0 #ff4c9f}.account-shell [hidden]{display:none!important}#peeps-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#peeps-options label{min-width:0}#peeps-options input[type=color]{width:100%;height:42px;padding:4px}#peeps-customizer{border:1px solid #9580a6;border-radius:16px;padding:16px;margin:20px 0}.companion-card progress,.growth-toast progress{width:100%;height:14px;accent-color:#dfff72}.growth-toast{position:fixed;right:18px;bottom:95px;z-index:120;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 36px);width:345px;padding:14px;background:#241c31;color:#fff;border:2px solid #dfff72;border-radius:20px;box-shadow:5px 5px 0 #ff4c9f}.growth-toast .shapecies-art{width:70px;flex-shrink:0}.growth-toast div{flex:1;min-width:0}.growth-toast small{display:block}.growth-toast button{background:none;color:inherit;border:0;font-size:24px;cursor:pointer}.chaos .growth-toast .shapecies-art{animation:charge-bounce .5s ease-in-out 4}@keyframes charge-bounce{50%{transform:translateY(-9px) rotate(8deg)}}@media(prefers-reduced-motion:reduce){.growth-toast .shapecies-art{animation:none!important}}@media(max-width:400px){#peeps-options{grid-template-columns:1fr}}

/* Visual wardrobe: one preview, nearby actions, category tabs and image choices. */
#picture-form.avatar-editor{gap:14px}#picture-form h2{margin-bottom:0}.portrait-stage{display:grid;grid-template-columns:1fr minmax(130px,190px) 1fr;align-items:center;gap:12px;padding:20px 0}.portrait-frame{position:relative;text-align:center}.avatar-editor .account-picture{width:170px;height:170px;max-width:100%;border-radius:26px;border:3px solid #bc97df;background:#eee4ff;box-shadow:5px 5px 0 #ff4c9f}.portrait-label{display:block;font-size:10px;letter-spacing:2px;margin-top:14px;color:var(--muted)}.portrait-tool{display:flex!important;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:12px 6px;cursor:pointer}.portrait-tool span{font-size:27px}.portrait-save{text-align:center}.portrait-save .primary{min-width:220px;cursor:pointer}.portrait-save [role=status]{min-height:40px;font-size:13px;line-height:1.5;margin:12px 0}.avatar-editor button:disabled{opacity:.5;cursor:default}#picture-form #peeps-customizer{margin:0;padding:15px;border-radius:20px;background:var(--panel)}#peeps-categories{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}#peeps-categories button{border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);padding:9px 11px;font-weight:700;font-size:12px;cursor:pointer}#peeps-categories [aria-selected=true]{background:#dfff72;color:#17121e;box-shadow:2px 2px 0 #ff4c9f}#picture-form #peeps-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-height:390px;overflow-y:auto;padding:3px 5px 9px 3px}.peep-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:96px;padding:6px;border:2px solid transparent;border-radius:13px;background:#eee4ff;color:#21152e;cursor:pointer;transition:transform .16s,box-shadow .16s}.peep-tile img{width:100%;height:85px;object-fit:contain;pointer-events:none}.peep-tile span{font-size:10px;line-height:1.25;overflow-wrap:anywhere}.peep-tile[aria-pressed=true]{border-color:#dfff72;box-shadow:0 0 0 2px #ff4c9f}.peep-tile:hover{transform:translateY(-3px);box-shadow:3px 3px 0 #ff4c9f}.peep-tile:focus-visible,#peeps-categories button:focus-visible{outline:3px solid #ff4c9f;outline-offset:2px}.peep-swatch{min-height:75px}.swatch-color{display:block;width:48px;height:48px;border-radius:50%;border:2px solid #17121e55}.custom-color{grid-column:1/-1}.portrait-upload{border-top:1px solid var(--line);padding:16px 0}.portrait-upload summary{cursor:pointer;font-weight:700;margin-bottom:12px}.portrait-celebration{position:absolute;inset:45% 50%;pointer-events:none;z-index:3}.portrait-celebration i{position:absolute;width:9px;height:15px;border-radius:2px;animation:portrait-pop 1.2s ease-out forwards}.portrait-saved .account-picture{border-color:#dfff72;box-shadow:5px 5px 0 #dfff72}@keyframes portrait-pop{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--turn));opacity:0}}@media(max-width:450px){.portrait-stage{grid-template-columns:1fr 125px 1fr;gap:7px}.avatar-editor .account-picture{width:125px;height:125px}.portrait-tool{font-size:11px;padding:9px 4px}.portrait-tool span{font-size:23px}#picture-form #peeps-options{grid-template-columns:repeat(3,minmax(0,1fr))}#picture-form #peeps-customizer{padding:10px}#peeps-categories button{font-size:11px;padding:8px}.peep-tile img{height:65px}}@media(prefers-reduced-motion:reduce){.peep-tile{transition:none}.peep-tile:hover{transform:none}.portrait-celebration i{animation:none;display:none}}

.portrait-save #peeps-reset{display:block;margin:0 auto 12px;cursor:pointer}

.peep-color-help{grid-column:1/-1;padding:12px;border:1px solid #9b75c3;border-radius:12px;background:#30203d;font-size:14px}.peep-color-help button{padding:10px;border-radius:10px;background:#b9ff6b;color:#191320;border:0;font-weight:700;cursor:pointer}.peep-color-help p{margin:8px 0}
