.setting-box { --setting-gap: 18px; background: var(--well); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: var(--setting-gap); max-width: 460px; }
.setting-box .field label { margin-bottom: 6px; }
.setting-box .field .setting-note { margin-top: var(--setting-gap); }
.setting-value { color: var(--text); font-variant-numeric: tabular-nums; margin-left: 6px; }
.setting-box input[type="range"] { background: none; border: 0; border-radius: 0; padding: 0; height: 28px; accent-color: var(--accent); }
.setting-box input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#rate-field { display: contents; }
.setting-note { font-size: 0.78rem; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
.setting-box > .setting-note:first-child { margin-top: 0; }
.setting-note .warn { color: var(--warn); }
.setting-actions { display: flex; gap: 8px; }
.setting-actions button { font-size: 0.85rem; font-weight: 600; }
.setting-actions #sign-out { background: var(--raised); color: var(--text); }
.setting-actions #sign-out:hover:not(:disabled) { background: color-mix(in srgb, #fff 10%, var(--raised)); }
.deployment { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.deployment-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 6px; }
.deployment-label.dep-production { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.deployment-label.dep-local { color: var(--muted); background: var(--well-2); }
.deployment-label.dep-unknown { color: var(--err); background: color-mix(in srgb, var(--err) 16%, transparent); }
.deployment-host { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

.maintenance-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
button.danger { background: color-mix(in srgb, var(--err) 18%, var(--well-2)); color: var(--err); font-size: 0.85rem; min-height: 40px; padding: 8px 12px; }
button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 28%, var(--well-2)); }