.auth-link{display:block;text-decoration:none;text-align:center;padding:18px;border-radius:18px;margin:30px 0 15px;font-weight:650}.account-panel{margin:22px 0;padding:17px;background:#f3edf9;border-radius:18px;font-size:12px}.account-panel a{color:#7950bd;margin-left:14px}.account-panel button{padding:9px 12px;font-size:12px}#register-error{color:#ab3154}/* Reference-style expanding tab capsule. */
.bottom{box-sizing:border-box;display:flex;align-items:center;gap:2px;width:min(358px,calc(100% - 32px));height:64px;padding:6px;bottom:calc(12px + env(safe-area-inset-bottom,0px));background:#242424;border:0;border-radius:999px;box-shadow:0 8px 26px #00000016;isolation:isolate;overflow:visible}
.bottom button{box-sizing:border-box;flex:1 1 0;height:52px;min-width:0;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0;padding:0;border:0;border-radius:999px;background:transparent;color:#ababab;position:relative;z-index:1;font-size:14px;font-weight:550;line-height:1;transition:flex .48s cubic-bezier(.22,1,.36,1),color .24s ease}
.bottom button:hover{background:transparent;color:#dedede}.bottom button:active{transform:none}.bottom button.active{flex:2.1 1 0;color:#141414}
.bottom button span{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transform:translateX(-4px);margin-left:0;transition:max-width .48s cubic-bezier(.22,1,.36,1),opacity .16s ease,margin .48s cubic-bezier(.22,1,.36,1),transform .48s cubic-bezier(.22,1,.36,1)}
.bottom button.active span{max-width:82px;opacity:1;margin-left:8px;transform:translateX(0);transition-delay:0s,.09s,0s,0s}
.bottom svg{width:25px;height:25px;flex-shrink:0;stroke-width:1.8;transition:transform .48s cubic-bezier(.22,1,.36,1)}.bottom button.active svg{animation:none;transform:scale(1.02)}.bottom button.active[data-action="tab:play"] svg{fill:currentColor}.bottom button.active[data-action="tab:profile"] svg path{fill:currentColor;stroke-width:1.4}
.bottom .nav-line{box-sizing:border-box;position:absolute;left:0;top:6px;height:52px;width:120px;background:#f1f1f1;border-radius:999px;transform:none;animation:none;pointer-events:none;z-index:0;will-change:transform,width}
.bottom .nav-line::after,.bottom .nav-line::before,.bottom button::after,.bottom button::before{content:none;display:none}
.social.wrap{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}.screen{animation:none}
@media(max-width:360px){.bottom{width:calc(100% - 24px);height:60px}.bottom button{height:48px;font-size:12px}.bottom svg{width:23px;height:23px}.bottom button.active span{margin-left:6px}}
@media(prefers-reduced-motion:reduce){.bottom *,.screen{animation:none!important;transition:none!important}}

/* Match the optical weight of the narrower play triangle to adjacent icons. */
.bottom button[data-action="tab:play"] svg{transform:scale(1.12)}
.bottom button.active[data-action="tab:play"] svg{transform:scale(1.14)}

.avatar-preview{max-width:320px;margin:0 auto 18px;overflow:hidden;border-radius:24px;background:#eee8f6}.avatar-preview canvas{display:block;width:100%;height:auto;transform:none}.avatar-tools,.avatar-compare{display:flex;gap:8px;margin:12px 0}.avatar-tools button,.avatar-compare button{flex:1;padding:11px 8px;font-size:13px;border-radius:12px}.avatar-compare button[aria-pressed="true"]{background:#8d61e7;color:white;border-color:#8d61e7}#avatar-strength{width:100%;accent-color:#8d61e7}#avatar-amount{float:right}