/* Appearance controls and editor. Colors follow the selected app preset. */
.appearance-entry { position:relative; isolation:isolate; overflow:hidden; cursor:pointer; flex-shrink:0; height:max-content; min-height:104px; display:flex; align-items:center; gap:16px; width:100%; padding:16px; border:1px solid var(--theme-border-subtle,#34363e); border-radius:13px; background:var(--theme-surface-card,#101114); color:var(--theme-text-primary,#f2f2f3); text-align:left; font:inherit; transition:border-color .15s,background .15s; }
.appearance-entry:hover { background:var(--theme-surface-hover,#191b20); border-color:var(--theme-border-strong,#606571); }
.appearance-entry:focus-visible,.appearance-back:focus-visible { outline:2px solid var(--theme-focus,#9980ff); outline-offset:3px; }
.appearance-entry-icon { display:grid; place-items:center; flex:0 0 52px; height:52px; border-radius:12px; color:var(--theme-text-primary,#DDD8FF); background:linear-gradient(135deg,var(--theme-surface-interactive,#422b93),var(--theme-surface-elevated,#172b43)); border:1px solid var(--theme-accent,#514491); }
.appearance-entry-icon svg { width:28px; height:28px; transition:transform .24s cubic-bezier(.2,.8,.2,1); }
.appearance-entry-copy { display:grid; gap:6px; flex:1; min-width:0; }
.appearance-entry-copy strong { font-size:15px; }
.appearance-entry-copy > span { font-size:12px; line-height:1.5; color:var(--theme-text-secondary,#b7bbc6); }
.appearance-entry > svg { flex:none; width:20px; height:20px; color:var(--theme-text-secondary,#b7bbc6); transition:transform .22s ease,color .22s ease; }
.appearance-subpage { display:grid; gap:12px; min-width:0; }
.appearance-back { display:flex; align-items:center; gap:10px; padding:4px 0; border:0; background:none; color:var(--theme-text-primary,#f2f2f3); font:inherit; font-size:16px; font-weight:750; }
.appearance-back svg { width:20px; height:20px; }
.app-custom-editor { display:grid; gap:12px; padding-top:14px; border-top:1px solid var(--theme-border-subtle,#424550); }
.app-custom-editor[hidden] { display:none; }
.app-custom-editor h3 { margin:0; font-size:13px; }
.app-theme-colors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.app-theme-colors > label { display:grid; gap:6px; min-width:0; font-size:11px; }
.app-theme-color-field { display:flex; gap:6px; min-width:0; }
.app-theme-color-field input[type=color] { flex:0 0 30px; width:30px; height:32px; min-height:32px; padding:2px; cursor:pointer; }
.app-theme-color-field input[type=text] { min-width:0; height:32px; min-height:32px; padding:0 6px; font-size:11px; }
.app-theme-preview { display:grid; gap:12px; padding:12px; border:1px solid var(--theme-border-subtle); border-radius:10px; background:var(--theme-app); color:var(--theme-text-primary); }
.app-theme-preview > strong { font-size:12px; }
.app-theme-preview .settings-card { background:var(--theme-surface-card); }
.app-theme-preview-actions,.app-theme-editor-actions { display:flex; flex-wrap:wrap; gap:8px; }
.app-theme-preview .button,.app-theme-editor-actions .button { min-height:32px; padding:0 10px; font-size:11px; }
.app-theme-editor-actions { justify-content:flex-end; }
.app-theme-danger { color:#FFFFFF; background:#B51C3F; border:1px solid #B51C3F; }
.theme-preview[data-preview-theme=custom] .theme-preview-header b { color:var(--preview-text); }
.desktop-picker-remote .desktop-picker-more-icon svg { width:20px; height:20px; }
.desktop-picker-remote .desktop-picker-switch input { inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; }
.desktop-picker-remote .desktop-picker-switch span { pointer-events:none; }
.desktop-picker-remote .desktop-picker-switch:has(input:disabled) { opacity:.5; cursor:not-allowed; }
/* Local surface foregrounds. Custom colors never change profile, photos or
   media canvases. Opaque custom UI surfaces prevent contrast from depending on
   an arbitrary wallpaper or a differently colored parent panel. */
:root[data-theme=custom] :is(.context-panel,.call-rail,.settings-popover,.social-panel,.social-dialog,.share-dialog:not(.account-profile-view),.entry-card,.invite-panel,.toast,.latency-popover,.voice-settings,.video-settings),[data-app-theme-preview] .app-preview-panel {
  background:var(--theme-surface-elevated);
  --theme-text-primary:var(--custom-panel-text); --theme-text-primary-rgb:var(--custom-panel-text-rgb);
  --theme-text-secondary:var(--custom-panel-secondary); --theme-text-secondary-rgb:var(--custom-panel-secondary-rgb);
  --theme-text-muted:var(--custom-panel-secondary); --theme-text-muted-rgb:var(--custom-panel-secondary-rgb);
  --theme-text-disabled:var(--custom-panel-secondary);
  --theme-border-subtle:var(--custom-panel-border); --theme-border-subtle-rgb:var(--custom-panel-border-rgb);
  --theme-border-strong:var(--custom-panel-border); --theme-border-strong-rgb:var(--custom-panel-border-rgb);
  --theme-accent:var(--custom-panel-accent); --theme-accent-rgb:var(--custom-panel-accent-rgb); --theme-focus:var(--custom-panel-accent);
  --theme-danger-text:var(--custom-panel-danger); --theme-success-text:var(--custom-panel-success); --theme-warning-text:var(--custom-panel-warning);
  --theme-danger-text-rgb:var(--custom-panel-danger-rgb); --theme-success-text-rgb:var(--custom-panel-success-rgb); --theme-warning-text-rgb:var(--custom-panel-warning-rgb);
  color:var(--theme-text-primary);
}
:root[data-theme=custom] :is(.settings-card,.account-settings-section,.account-settings-overview,.appearance-entry,.reference-home-card,.reference-home-actions,.chat-attachment,.wallpaper-settings,.wallpaper-preview,.desktop-source-card,.desktop-picker-more,.social-friend-card,.social-profile-card),[data-app-theme-preview] .settings-card {
  background:var(--theme-surface-card);
  --theme-text-primary:var(--custom-card-text); --theme-text-primary-rgb:var(--custom-card-text-rgb);
  --theme-text-secondary:var(--custom-card-secondary); --theme-text-secondary-rgb:var(--custom-card-secondary-rgb);
  --theme-text-muted:var(--custom-card-secondary); --theme-text-muted-rgb:var(--custom-card-secondary-rgb);
  --theme-text-disabled:var(--custom-card-secondary);
  --theme-border-subtle:var(--custom-card-border); --theme-border-subtle-rgb:var(--custom-card-border-rgb);
  --theme-border-strong:var(--custom-card-border); --theme-border-strong-rgb:var(--custom-card-border-rgb);
  --theme-accent:var(--custom-card-accent); --theme-accent-rgb:var(--custom-card-accent-rgb); --theme-focus:var(--custom-card-accent);
  --theme-danger-text:var(--custom-card-danger); --theme-success-text:var(--custom-card-success); --theme-warning-text:var(--custom-card-warning);
  --theme-danger-text-rgb:var(--custom-card-danger-rgb); --theme-success-text-rgb:var(--custom-card-success-rgb); --theme-warning-text-rgb:var(--custom-card-warning-rgb);
  border-color:var(--theme-border-subtle); color:var(--theme-text-primary);
}
:root[data-theme=custom] :is(input:not([type=checkbox],[type=radio],[type=range],[type=color]),select,textarea,.button-secondary):not(:where(.account-profile-view *, .profile-theme-editor *, .profile-theme-preview-card *)),[data-app-theme-preview] .button-secondary {
  color:var(--custom-card-text); background:var(--theme-input); border-color:var(--custom-card-border);
}
:root[data-theme=custom] .button-primary:not(:where(.account-profile-view *, .profile-theme-editor *, .profile-theme-preview-card *)),[data-app-theme-preview] .button-primary { color:var(--theme-on-primary); background:var(--theme-primary); border-color:var(--theme-border-strong); }
:root[data-theme=custom] .desktop-picker-switch span::after { background:var(--theme-knob); }
:root[data-theme=custom] .desktop-picker-switch input:not(:checked) + span::after { background:var(--custom-card-text); }
:root[data-theme=custom]:not(.has-wallpaper) :is(.reference-home,.call-shell) { background:var(--theme-app); }
:root[data-theme=custom] :is(.home-welcome-card,.reference-entry-card,.profile-popover,.desktop-audio-config-dialog,.desktop-audio-config-list) {
  background:var(--theme-surface-elevated);
  --theme-text-primary:var(--custom-panel-text); --theme-text-secondary:var(--custom-panel-secondary); --theme-text-muted:var(--custom-panel-secondary);
  --theme-border-subtle:var(--custom-panel-border); --theme-border-subtle-rgb:var(--custom-panel-border-rgb);
  color:var(--theme-text-primary);
}
:root[data-theme=custom] :is(.home-action,.account-chip,.participant,.call-rail-item.is-active,.call-rail-item:hover,.connection-check,.media-health-button,.call-controls,.setting-check,.voice-toggle,.orbit-node,.orbit-core) {
  background:var(--theme-surface-card);
  --theme-text-primary:var(--custom-card-text); --theme-text-secondary:var(--custom-card-secondary); --theme-text-muted:var(--custom-card-secondary);
  --theme-border-subtle:var(--custom-card-border); --theme-border-subtle-rgb:var(--custom-card-border-rgb);
  --theme-danger-text:var(--custom-card-danger); --theme-success-text:var(--custom-card-success); --theme-warning-text:var(--custom-card-warning);
  color:var(--theme-text-primary);
}
:root[data-theme=custom] .home-action.home-action-primary { background:var(--theme-primary); color:var(--theme-on-primary); }
:root[data-theme=custom] .participant .avatar:not(:has(img)) { color:var(--custom-card-text); background:var(--theme-surface-card); }
:root[data-theme=custom] .call-controls .control-leave > svg { color:#FFFFFF; }
:root[data-theme=custom] :is(.room-panel-toggle,.appearance-entry-icon) { background:var(--theme-surface-card); color:var(--custom-card-text); }
/* A profile has its own paint/contrast engine, including disabled image actions. */
:root[data-theme=custom] :is(.account-profile-view,.profile-theme-preview-card) { color-scheme:dark; }
@media(max-width:480px) { .appearance-entry { gap:12px; padding:12px; } .app-theme-colors { grid-template-columns:1fr; } }
/* r12: roomy, isolated editor; the live call/profile geometry is untouched. */
.appearance-editor-backdrop{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
.appearance-editor{width:min(1440px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;padding:22px;border:1px solid var(--theme-border-subtle,#343740);border-radius:16px;background:var(--theme-surface-base,#0b0e14);color:var(--theme-text-primary,#f4f5f8);box-shadow:0 24px 80px #0007}
.appearance-editor>header{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--theme-border-subtle);padding-bottom:16px}
.appearance-editor h2{margin:0;font-size:25px}.appearance-editor h3{margin:0;font-size:16px}.appearance-editor p{font-size:13px;color:var(--theme-text-secondary);line-height:1.5;margin:7px 0 12px}
.appearance-editor-body{display:grid;grid-template-columns:minmax(310px,380px) minmax(0,1fr);gap:24px;min-height:0;overflow:auto;padding:18px 0}
.appearance-editor-controls{min-width:0}.appearance-editor-controls>nav{display:flex;gap:8px;margin-bottom:12px}.appearance-editor-controls>nav button{flex:1}.appearance-editor-controls>nav [aria-pressed=true]{border-color:var(--theme-focus)}
.appearance-editor .appearance-settings-card{padding:16px}.appearance-editor .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.appearance-editor .theme-preview{height:70px;width:100%;aspect-ratio:auto}.appearance-editor .app-custom-editor{padding-top:14px}.appearance-editor .app-theme-colors{gap:12px}
.appearance-editor-preview{min-width:0}.appearance-preview-stage{overflow:hidden;position:relative;border:1px solid var(--theme-border-subtle);border-radius:12px;background:var(--theme-app)}.appearance-preview-stage iframe{position:absolute;inset:0;width:1280px;height:800px;transform-origin:top left;border:0;pointer-events:none}
.appearance-state-examples{margin-top:12px;padding:16px;background:var(--theme-surface-base);color:var(--theme-text-primary)}.appearance-state-examples>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.appearance-state-examples>p{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:0}.appearance-state-examples .presence-available{color:var(--custom-panel-success,#008a55)}.appearance-state-examples .presence-dnd{color:var(--custom-panel-danger,#ee355c)}.appearance-state-examples .presence-offline{color:var(--theme-text-secondary)}.appearance-state-examples .button-danger{border-color:var(--custom-panel-danger,#ee355c);color:var(--custom-panel-danger,#ee355c)}
.appearance-editor>footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:14px;border-top:1px solid var(--theme-border-subtle)}.appearance-editor>footer>span{margin-right:auto;font-size:12px;color:var(--theme-text-secondary)}
.appearance-editor [hidden]{display:none!important}
.appearance-state-examples .presence-available{color:var(--custom-panel-success,var(--theme-success-text,#62e3ae))}.appearance-state-examples .presence-dnd{color:var(--custom-panel-danger,var(--theme-danger-text,#ffa3b1))}
:root[data-theme=custom] .appearance-editor{--theme-text-primary:var(--custom-panel-text);--theme-text-secondary:var(--custom-panel-secondary);--theme-border-subtle:var(--custom-panel-border);color:var(--custom-panel-text)}
.appearance-editor h2,.appearance-editor-preview>h3,.appearance-editor>header p,.appearance-editor-preview>p,.appearance-editor>footer>span{color:inherit}.appearance-editor>header p,.appearance-editor-preview>p,.appearance-editor>footer>span{color:var(--theme-text-secondary,#bac2d0)}
@media(max-width:900px){.appearance-editor-backdrop{padding:12px}.appearance-editor{max-height:calc(100dvh - 24px);padding:16px}.appearance-editor-body{grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:14px}.appearance-editor .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.appearance-editor>footer{flex-wrap:wrap}}
@media(max-width:680px){.appearance-editor-body{grid-template-columns:1fr}.appearance-editor-preview{grid-row:1}.appearance-editor .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.appearance-editor>footer>span{flex-basis:100%}}

/* A restrained violet highlight connects this entry to NEXO's call palette. */
:root[data-theme=nexo] .appearance-entry {
  border-color:rgba(137,110,255,.38);
  background:radial-gradient(ellipse at 0 0,rgba(119,82,235,.18),transparent 72%),linear-gradient(145deg,#141d32,#0d1424);
  box-shadow:inset 0 1px rgba(209,195,255,.06),0 4px 16px rgba(0,0,0,.1);
  color:#f4f3ff;
  transition:border-color .22s ease,box-shadow .22s ease;
}
:root[data-theme=nexo] .appearance-entry::before {
  content:'';position:absolute;top:0;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(190,167,255,.7),transparent);
  opacity:.45;pointer-events:none;transition:opacity .22s ease;
}
:root[data-theme=nexo] .appearance-entry:is(:hover,:focus-visible) {
  border-color:rgba(165,137,255,.78);
  box-shadow:inset 0 1px rgba(209,195,255,.12),0 0 22px rgba(116,79,240,.13);
}
:root[data-theme=nexo] .appearance-entry:is(:hover,:focus-visible)::before {opacity:1}
:root[data-theme=nexo] .appearance-entry-icon {
  background:linear-gradient(135deg,#5139ac,#25375b);
  border-color:rgba(162,133,255,.45);color:#eee8ff;
  box-shadow:inset 0 1px rgba(224,213,255,.14),0 5px 14px rgba(30,15,67,.23);
}
:root[data-theme=nexo] .appearance-entry-copy>span {color:#b9c7e3}
:root[data-theme=nexo] .appearance-entry>svg {color:#af9cec}
.appearance-entry:is(:hover,:focus-visible) .appearance-entry-icon svg {transform:rotate(-8deg) scale(1.07)}
.appearance-entry:is(:hover,:focus-visible)>svg {transform:translateX(3px)}
.appearance-entry:active .appearance-entry-icon svg {transform:scale(.96)}
@media(prefers-reduced-motion:reduce) {
  .appearance-entry,.appearance-entry::before,.appearance-entry-icon svg,.appearance-entry>svg {transition:none!important}
  .appearance-entry:is(:hover,:focus-visible,:active) .appearance-entry-icon svg,
  .appearance-entry:is(:hover,:focus-visible)>svg {transform:none}
}