/* FitSuite / Componenti e specifiche: 48px surface, 24px glyph; compact controls 44px. */
html body .fs-icon-button {
    --fs-button-size: 48px;
    --fs-glyph-size: 24px;
    box-sizing: border-box !important;
    width: var(--fs-button-size) !important;
    height: var(--fs-button-size) !important;
    min-width: var(--fs-button-size) !important;
    min-height: var(--fs-button-size) !important;
    max-width: var(--fs-button-size) !important;
    max-height: var(--fs-button-size) !important;
    flex: 0 0 var(--fs-button-size) !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid rgb(61 61 61 / 90%) !important;
    border-radius: 50% !important;
    background: rgb(33 33 33 / 72%) !important;
    box-shadow: 0 6px 16px rgb(0 0 0 / 18%) !important;
    color: #f5f5f7 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 140ms ease, filter 90ms ease, box-shadow 140ms ease !important;
}
html body .fs-icon-button.fs-icon-compact { --fs-button-size: 44px; --fs-glyph-size: 20px; }
html body .fs-icon-button[hidden] { display: none !important; }
html body .fs-icon-button > :not(.fs-button-glyph) { display: none !important; }
html body .fs-icon-button::before, html body .fs-icon-button::after { content: none !important; }
html body .fs-icon-button > svg.fs-button-glyph {
    display: block !important;
    position: static !important;
    width: var(--fs-glyph-size) !important;
    height: var(--fs-glyph-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: 0 0 var(--fs-glyph-size) !important;
    opacity: 1 !important;
    color: inherit !important;
    fill: none;
    transform: none !important;
    pointer-events: none;
}
/* The back master uses a 48px canvas with its Apple-style chevron positioned inside it. */
html body .fs-icon-button[data-fs-icon="back"] { --fs-glyph-size: var(--fs-button-size); }
@media (hover: hover) {
    html body .fs-icon-button:not(:disabled):not([aria-disabled="true"]):hover {
        background: rgb(46 46 46 / 94%) !important;
        box-shadow: 0 6px 16px rgb(0 0 0 / 24%) !important;
    }
}
html body .fs-icon-button:not(:disabled):not([aria-disabled="true"]):is(:active, .fs-icon-pressed) {
    background: #151515 !important;
    filter: brightness(.65) !important;
    box-shadow: 0 2px 7px rgb(0 0 0 / 24%) !important;
}
html body .fs-icon-button:focus-visible { outline: 2px solid var(--primary-color, #ff6600) !important; outline-offset: 3px; }
html body .fs-icon-button:is(:disabled, [aria-disabled="true"]) { opacity: .4; cursor: not-allowed; filter: none !important; }
html body .collapse-seduta-btn.fs-icon-button,
html body .refresh-btn.fs-icon-button:hover { transform: none !important; }
/* Radios retain a small visible mark and a 44px target, without a second surrounding circle. */
html body .fs-icon-button.fs-icon-radio {
    --fs-glyph-size: 24px;
    margin: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #a3aba8 !important;
    transform: none !important;
}
html body .fs-icon-button.fs-icon-radio[aria-pressed="true"] { color: var(--primary-color, #ff6600) !important; }
html body #step-dots, html body #superset-nav { gap: 2px; flex-wrap: wrap; justify-content: center; }
/* Reserve the new size in layouts that previously hard-coded a 44px header action. */
html body .wizard-progress { grid-template-columns: 48px minmax(0, 1fr); }
html body .routine-editor-page .ex-popup-header { grid-template-columns: minmax(0, 1fr) 48px; }
html body .header.public-drawer-header .menu-toggle { top: calc((var(--header-height, 88px) - 48px) / 2); }
html body .custom-exercise-step { grid-template-columns: 24px minmax(0, 1fr) 44px; }
@media (prefers-reduced-motion: reduce) {
    html body .fs-icon-button { transition: none !important; }
}

/* Password visibility keeps its touch target with only the eye visible. */
html body .toggle-password.fs-icon-button,
html body .toggle-password.fs-icon-button:not(:disabled):not([aria-disabled="true"]):is(:hover, :active, .fs-icon-pressed) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}