/* One account badge for the homepage and all tool scenes. */
.profile-placeholder { --surface-bg:rgba(35,21,47,.66); --surface-line:rgba(245,232,255,.2); position:relative; display:inline-flex; flex-shrink:0; min-height:calc(46 * var(--ui-px, 1px)); gap:calc(9 * var(--ui-px, 1px)); align-items:center; padding:calc(4 * var(--ui-px, 1px)) calc(12 * var(--ui-px, 1px)) calc(4 * var(--ui-px, 1px)) calc(5 * var(--ui-px, 1px)); color:#d8cede; background:var(--surface-bg); border:calc(1 * var(--ui-px, 1px)) solid var(--surface-line); border-radius:calc(999 * var(--ui-px, 1px)); cursor:pointer; font:inherit; line-height:1.5; }
.profile-placeholder:disabled { cursor:wait; }
.profile-placeholder:focus-visible { outline:calc(2 * var(--ui-px, 1px)) solid #b87cff; outline-offset:calc(3 * var(--ui-px, 1px)); }
.profile-avatar { display:grid; flex-shrink:0; width:calc(36 * var(--ui-px, 1px)); height:calc(36 * var(--ui-px, 1px)); place-items:center; color:#d8b9ff; background:linear-gradient(145deg,rgba(184,124,255,.22),rgba(95,51,140,.36)),var(--surface-bg); border:calc(1 * var(--ui-px, 1px)) solid rgba(216,185,255,.28); border-radius:50%; }
.profile-avatar svg { width:calc(21 * var(--ui-px, 1px)); height:calc(21 * var(--ui-px, 1px)); fill:none; stroke:currentColor; stroke-linecap:round; stroke-width:1.5; }
.profile-name { display:inline-block; max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:calc(13 * var(--ui-px, 1px)); letter-spacing:.08em; }
.profile-placeholder .connection-dot { position:absolute; right:calc(2 * var(--ui-px, 1px)); bottom:calc(2 * var(--ui-px, 1px)); width:calc(8 * var(--ui-px, 1px)); height:calc(8 * var(--ui-px, 1px)); border:calc(2 * var(--ui-px, 1px)) solid #100b18; border-radius:50%; background:#6d3341; }
.profile-placeholder .connection-dot.online { background:#36d6a0; box-shadow:0 0 calc(10 * var(--ui-px, 1px)) rgba(54,214,160,.5); }
@media(max-width:860px) { .profile-placeholder { min-width:calc(44 * var(--ui-px, 1px)); min-height:calc(44 * var(--ui-px, 1px)); padding:calc(3 * var(--ui-px, 1px)); } .profile-name { font-size:calc(12 * var(--ui-px, 1px)); } }
@media(max-width:600px) { .profile-placeholder { min-height:calc(34 * var(--ui-px, 1px)); padding:calc(3 * var(--ui-px, 1px)) calc(7 * var(--ui-px, 1px)) calc(3 * var(--ui-px, 1px)) calc(3 * var(--ui-px, 1px)); gap:calc(5 * var(--ui-px, 1px)); } .profile-avatar { width:calc(28 * var(--ui-px, 1px)); height:calc(28 * var(--ui-px, 1px)); } .profile-name { max-width:6ch; font-size:calc(11 * var(--ui-px, 1px)); letter-spacing:0; } }
@media(max-width:380px) { .profile-avatar { width:calc(24 * var(--ui-px, 1px)); height:calc(24 * var(--ui-px, 1px)); } .profile-name { max-width:5ch; font-size:calc(10 * var(--ui-px, 1px)); } }

.profile-avatar { overflow:hidden; }
.profile-avatar img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.profile-avatar svg[hidden] { display:none; }