:root{--settings-default-color:var(--ui-text)}
/* Canonical control; parent containers own only position, never presentation. */
#global-settings.settings-button{
 display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
 width:48px;height:48px;min-width:48px;min-height:48px;flex:0 0 48px;
 padding:0;line-height:1;transform:none;position:relative;
 border:3px var(--ui-line) var(--ui-border);border-radius:var(--ui-radius);
 border-image:none;background:var(--settings-background,var(--ui-paper));
 box-shadow:var(--settings-shadow,var(--ui-shadow));outline:none;
 color:var(--settings-icon-color,var(--settings-default-color));cursor:pointer;pointer-events:auto
}
#global-settings.settings-button::before,#global-settings.settings-button::after{content:none}
#global-settings.settings-button>svg.ui-icon{
 display:block;position:static;inset:auto;margin:0;padding:0;
 width:var(--settings-gear-size,20px)!important;height:var(--settings-gear-size,20px)!important;
 min-width:var(--settings-gear-size,20px);flex:0 0 var(--settings-gear-size,20px);
 line-height:1;vertical-align:initial;color:inherit;transform:none;
 transform-origin:center;transition:transform 180ms ease
}
@media(hover:hover) and (pointer:fine){#global-settings.settings-button:hover>svg.ui-icon{transform:rotate(12deg) scale(1.04)}}
#global-settings.settings-button[aria-expanded="true"]>svg.ui-icon{transform:rotate(20deg)}
#global-settings.settings-button:active>svg.ui-icon{transform:scale(.96)}
#global-settings.settings-button:focus-visible{outline:var(--settings-focus-width,3px) solid var(--settings-focus-color,var(--ui-accent));outline-offset:3px}
@media(prefers-reduced-motion:reduce){#global-settings.settings-button>svg.ui-icon{transition:none}}