/* Appearance is opt-in; the default Seleção Rara identity is unchanged. */
.appearance-box { width:min(54rem,100%);gap:var(--sp-6);padding:var(--sp-6) var(--sp-8);max-height:calc(100dvh - max(2rem, env(safe-area-inset-top)) - max(2rem, env(safe-area-inset-bottom)));overflow-y:auto;overscroll-behavior:contain; }
.appearance-box > * { flex-shrink:0; }
.appearance-head { display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);position:sticky;top:calc(-1 * var(--sp-6));margin:calc(-1 * var(--sp-6)) calc(-1 * var(--sp-8)) 0;padding:var(--sp-4) var(--sp-6);background:var(--surface-1);border-bottom:1px solid var(--line);z-index:2; }
.appearance-head h3 { margin:0;font-size:var(--text-lg); }
.appearance-head .modal-close { position:static; }
.appearance-section h4 { margin:0 0 var(--sp-4); }
.appearance-section > .hint { margin:calc(-1 * var(--sp-2)) 0 var(--sp-5); }
.appearance-swatches { display:flex;flex-wrap:wrap;gap:.65rem; }
.appearance-swatch { position:relative;flex:0 0 3.25rem;width:3.25rem;height:3.25rem;padding:0;background:var(--swatch);border:1px solid var(--line-strong);border-radius:.55rem;cursor:pointer; }
.appearance-swatch:hover { outline:2px solid var(--fg-3);outline-offset:2px; }
.appearance-swatch[aria-pressed="true"] { outline:3px solid #7978ff;outline-offset:2px; }
.appearance-check { display:none;position:absolute;right:-.55rem;top:-.55rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#5f5cf5;color:white;font:bold 1rem/1.5rem Arial,sans-serif;text-align:center; }
.appearance-swatch[aria-pressed="true"] .appearance-check { display:block; }
.appearance-system { color:#b6b8c0;font:2rem/1 Arial,sans-serif; }
.appearance-callout { display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5);background:var(--surface-sunk);border-radius:.6rem; }
.appearance-callout h4 { margin:0 0 var(--sp-2);font-size:var(--text-lg); }
.appearance-callout p { margin:0;color:var(--fg-2);font-size:var(--text-sm); }
.appearance-callout > div:nth-child(2) { flex:1;min-width:0; }
.appearance-art { flex:0 0 6rem;position:relative;height:4.5rem; }
.appearance-art span { position:absolute;inset:.2rem 1rem .7rem 0;border:2px solid #8981dc;background:#38365b;border-radius:.25rem; }
.appearance-art span:nth-child(2) { inset:.7rem .5rem .2rem .5rem;background:#4a4167; }
.appearance-art span:nth-child(3) { inset:1.2rem 0 0 1.8rem;background:linear-gradient(135deg,#a1bfd1,#965f99,#527a9d); }
.appearance-new { display:inline-block;vertical-align:middle;margin-left:.3rem;padding:.1rem .4rem;border-radius:.5rem;color:white;background:#5f5cf5;font:bold .65rem/1.2 Arial,sans-serif; }
.appearance-options { display:grid;gap:var(--sp-5); }
.appearance-option { display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);cursor:pointer;position:relative;min-height:2.5rem; }
.appearance-option > span:first-child { flex:1; }
.appearance-option small { display:block;font-weight:normal;color:var(--fg-3);font-size:var(--text-xs);margin-top:var(--sp-1); }
.appearance-option input[role="switch"] { position:absolute;right:0;opacity:0;width:3.25rem;height:2.5rem;cursor:pointer; }
.appearance-switch { flex:0 0 3.25rem;height:1.65rem;border-radius:1rem;background:var(--surface-sunk);border:1px solid var(--line);padding:.2rem;pointer-events:none; }
.appearance-switch::after { content:"";display:block;height:1.1rem;width:1.1rem;border-radius:50%;background:var(--fg-2);transition:transform .12s; }
.appearance-option input:checked + .appearance-switch { background:#5f5cf5; }
.appearance-option input:checked + .appearance-switch::after { transform:translateX(1.5rem);background:white; }
.appearance-option input:disabled + .appearance-switch { opacity:.45; }
.appearance-option input:focus-visible + .appearance-switch { outline:2px solid var(--accent);outline-offset:3px; }
.appearance-option select { width:min(18rem,55%);min-height:2.75rem; }
.appearance-more { display:grid;gap:var(--sp-5);border-top:1px solid var(--line);padding-top:var(--sp-5); }
.appearance-more h4 { margin:0; }
.appearance-status { min-height:1.5em;margin:0; }
:root[data-theme-profiles="false"] #profilePop[data-profile-other="true"],
:root[data-theme-profiles="false"] #publicProfile[data-profile-other="true"] .public-profile-card,
:root[data-theme-profiles="false"] #friendModal > .modal-box { --surface-1:#191d24;--surface-2:#232830;--surface-3:#30363f;--surface-sunk:#0a0c0f;--fg:#f2f4f7;--fg-2:#c9d1d9;--fg-3:#9aa3ad;--line:#3f4650; }
.room-visibility { display:grid;gap:var(--sp-2);border:0;margin:0;padding:0; }
.room-visibility legend { font-weight:bold;margin-bottom:var(--sp-2); }
.room-visibility label { display:flex;align-items:start;gap:var(--sp-2);padding:var(--sp-3);border:1px solid var(--line);background:var(--surface-sunk);cursor:pointer; }
.room-visibility input { flex:0 0 auto;width:1rem;height:1rem;margin:.15rem 0 0;accent-color:var(--brand); }
.room-visibility small { display:block;color:var(--fg-3);font-weight:normal;margin-top:var(--sp-1); }
.chat-empty { color:var(--fg-3);font-size:var(--text-sm);padding:var(--sp-4);margin:0; }
@media(max-width:40rem) {
  .appearance-box { padding:var(--sp-5);gap:var(--sp-5); }
  .appearance-head { top:calc(-1 * var(--sp-5));margin:calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) 0;padding:var(--sp-3) var(--sp-5); }
  .appearance-callout { flex-wrap:wrap;gap:var(--sp-3); }
  .appearance-art { flex-basis:4rem;height:3.5rem; }
  .appearance-callout .btn { width:100%; }
  .appearance-swatch { flex-basis:2.75rem;width:2.75rem;height:2.75rem; }
  .appearance-option:has(select) { align-items:start;flex-direction:column; }
  .appearance-option select { width:100%; }
  .appearance-more .seg { flex-wrap:wrap; }
}
