.u-appearance-open {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 44px; height: 44px; padding: .5rem; margin-left: .25rem; border: 1px solid currentColor;
  border-radius: 50%; background: transparent; color: inherit; font-size: 1.2rem; cursor: pointer;
}
.custom-navbar .u-appearance-open { color: #fff; }
@media (max-width: 1199.98px) { .custom-navbar #navbarContent .u-appearance-open { color: var(--u-text, #17233b); } }
#appearanceDialog {
  width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto;
  padding: 1.25rem; overflow: auto; border: 1px solid var(--u-border-strong, #c9d2e4); border-radius: 18px;
  background: var(--u-surface, #fff); color: var(--u-text, #17233b); box-shadow: 0 20px 70px #07152a55;
  font: 1rem/1.5 system-ui, sans-serif;
}
html[data-theme="dark"] #appearanceDialog { background: var(--u-surface, #17233b); color: var(--u-text, #eef3ff); }
#appearanceDialog::backdrop { background: #07152a99; }
#appearanceDialog .appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
#appearanceDialog h2 { margin: 0; font: 700 1.4rem/1.3 system-ui, sans-serif; color: inherit !important; }
#appearanceDialog label { display: block; margin: 1rem 0 .35rem; color: inherit; font-weight: 600; }
#appearanceDialog select {
  display: block; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--u-border-strong, #c9d2e4);
  border-radius: 9px; padding: .55rem; background: var(--u-surface-2, #f1f5fb); color: inherit; font: inherit;
}
#appearanceDialog select:disabled { opacity: .65; }
html[data-theme="dark"] #appearanceDialog select { background: var(--u-surface-2, #20304d); }
#appearanceDialog p { font-size: .875rem; color: inherit !important; margin: .75rem 0; }
#appearanceDialog #appearanceStatus { font-weight: 600; }
#appearanceDialog footer { display: flex; justify-content: flex-end; padding-top: .5rem; }
#appearanceDialog button { min-height: 44px; cursor: pointer; font: inherit; white-space: nowrap; }
#appearanceDialog .appearance-close { width: 44px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 1.8rem; }
#appearanceDialog .appearance-done { padding: .5rem 1.25rem; border: 0; border-radius: 9px; background: #0044ff; color: #fff; }
#appearanceDialog :is(button, select):focus-visible { outline: 2px solid var(--u-focus, #689dff); outline-offset: 2px; }