.profile-card{max-width:480px;margin-bottom:var(--spacing-lg)}.hint{color:var(--text-muted);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-lg)}.hint code{background:var(--surface-muted);padding:.1em .35em;border-radius:var(--radius-sm);font-family:monospace;color:var(--text-primary)}.avatar-preview-row{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.avatar-preview{width:60px;height:60px;border-radius:50%;border:2px solid var(--border-card);background:var(--surface-card);display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;color:var(--text-muted);flex-shrink:0;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 0 0 4px var(--accent-jade-soft)}.avatar-preview svg{width:28px;height:28px}.avatar-preview.selected{border-color:var(--accent-jade);box-shadow:0 0 0 4px var(--accent-jade-overlay)}.avatar-label{color:var(--text-muted);font-size:var(--font-size-sm);flex:1;min-width:0}.profile-card .btn{padding:.6rem 1.4rem;border-radius:var(--radius-pill);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1;letter-spacing:.01em}.profile-card .btn:active:not(:disabled){transform:translateY(1px)}.profile-card .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.profile-card .btn-primary{color:var(--text-on-accent);background:var(--accent-jade);border-color:var(--accent-jade);box-shadow:inset 0 1px #ffffff2e,0 1px 0 var(--accent-jade-deep),0 8px 20px #00000057}.profile-card .btn-primary:hover:not(:disabled){background:var(--accent-jade-hover);border-color:var(--accent-jade-hover);transform:translateY(-1px);box-shadow:inset 0 1px #fff3,0 1px 0 var(--accent-jade-deep),0 12px 26px #0000006b}.profile-card .btn-ghost{color:var(--accent-jade);background:transparent;border:1.5px solid var(--accent-jade);padding:calc(.6rem - 1.5px) calc(1.4rem - 1.5px)}.profile-card .btn-ghost:hover:not(:disabled){background:var(--accent-jade-soft);color:var(--accent-jade-hover);border-color:var(--accent-jade-hover);transform:translateY(-1px)}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:var(--spacing-md)}@media(max-width:400px){.emoji-grid{grid-template-columns:repeat(6,1fr)}}.emoji-btn{aspect-ratio:1;font-size:22px;background:var(--surface-card);color:var(--text-primary);border:1.5px solid var(--border-soft);border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);line-height:1;padding:0}.emoji-btn:hover{background:var(--accent-jade-soft);border-color:var(--accent-jade);transform:scale(1.1)}.emoji-btn.active{border-color:var(--accent-jade);background:var(--accent-jade-soft);box-shadow:0 0 0 3px var(--accent-jade-overlay)}.error-text{color:var(--color-danger);font-size:var(--font-size-sm);margin:0}.success-text{color:var(--color-success);font-size:var(--font-size-sm);margin:0}.username-form{display:flex;flex-direction:column;gap:var(--spacing-sm)}.username-input-row{display:flex;align-items:stretch;gap:var(--spacing-sm)}.username-input-row .field-input{flex:1;min-width:0}.username-input-row #save-username-btn{flex-shrink:0}@media(max-width:480px){.username-input-row{flex-direction:column}.username-input-row #save-username-btn{align-self:flex-start}}.field-input{padding:.65rem .875rem;border:1px solid var(--border-card);border-radius:var(--radius-lg);background:var(--surface-muted);color:var(--text-primary);font-size:var(--font-size-base);transition:border-color var(--transition-fast),background var(--transition-fast)}.field-input:focus{outline:none;border-color:var(--accent-jade);background:var(--surface-card);box-shadow:var(--ring-focus)}.field-input:disabled{opacity:.5;cursor:not-allowed}.friends-invite-form{margin-bottom:var(--spacing-lg)}.friends-subsection{margin-top:var(--spacing-lg)}.friends-subsection h3{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:0 0 var(--spacing-sm) 0}.friends-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-sm)}.friend-row{display:flex;align-items:center;gap:var(--spacing-md);padding:.55rem .75rem;background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-md)}.friend-avatar{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border-card);background:var(--surface-muted);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;flex-shrink:0}.friend-avatar svg{width:18px;height:18px}.friend-avatar.has-emoji{border-color:var(--accent-jade);background:var(--accent-jade-soft)}.friend-name{flex:1;min-width:0;font-weight:var(--font-weight-semibold);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-row-actions{display:flex;gap:.4rem;flex-shrink:0}.friends-card .btn-sm{padding:.35rem .85rem;font-size:var(--font-size-xs)}.friends-empty{margin-top:var(--spacing-sm);margin-bottom:0}.session-card .logout-btn{width:100%;min-width:0}.language-select-row{display:flex;align-items:center;gap:var(--spacing-sm)}.language-icon{width:22px;height:22px;color:var(--accent-jade);flex-shrink:0}.language-select{flex:1;min-width:0;cursor:pointer;appearance:auto}.appearance-options{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.appearance-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-sm);background:var(--surface-card);color:var(--text-primary);border:1.5px solid var(--border-soft);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.appearance-option:hover{background:var(--accent-jade-soft);border-color:var(--accent-jade);transform:translateY(-1px)}.appearance-option.active{border-color:var(--accent-jade);background:var(--accent-jade-soft);box-shadow:0 0 0 3px var(--accent-jade-overlay)}.appearance-icon{display:inline-flex;width:22px;height:22px;color:var(--accent-jade)}.appearance-icon svg{width:100%;height:100%}