/* Compact appearance control; visual treatment comes from the shared buttons. */
.yd-appearance-switch {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    min-height: 0;
    margin: 0;
    padding: 5px;
}
/* Always pair foreground and background, including inside a colored header. */
.yd-appearance-switch.yd-button.yd-icon-button,
.yd-appearance-switch.yd-button.yd-icon-button:hover {
    color: var(--yd-action-neutral-text, var(--text));
    background: var(--yd-action-neutral-bg, var(--surface));
    border-color: var(--yd-action-neutral-border, var(--border));
}
.yd-appearance-switch[hidden] { display: none; }
.yd-appearance-switch > select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.yd-appearance-switch:focus-within { outline: none; }
.yd-appearance-switch svg { pointer-events: none; }
.yd-home-account:has(.yd-appearance-switch) { grid-template-columns: 30px minmax(0, auto) 30px 30px; }
.yd-appearance-login { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 10; }
.yd-appearance-status { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100000; max-width: calc(100vw - 32px); padding: 12px 16px; }
.yd-appearance-status[hidden] { display: none; }
@media (max-width: 699px) {
    .yd-project-start-page .yd-home-account:has(.yd-appearance-switch) { grid-template-columns: repeat(3, 28px); }
    .yd-home-account .yd-appearance-switch { width: 28px; height: 28px; }
}

.yd-sidebar-account:has(.yd-appearance-switch) { grid-template-columns: 30px minmax(0, 1fr) 30px 30px; }