@import url('/style-tokens.css?asset_v=1d9ea4bc60bfbeee');

/* Animate the card without changing its opaque surface or status border. */
.routine-list-row {
    transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.routine-list-row:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(var(--primary-color-rgb), 0.3);
    z-index: 100;
}
@media (hover: hover) and (pointer: fine) {
    .routine-list-row:hover { transform: translateY(-2px) scale(1.01); }
}
@media (prefers-reduced-motion: reduce) {
    .routine-list-row { transition: none; }
    .routine-list-row:hover { transform: none; }
}

/* Keep status colours inside the highlighted perimeter on both lists. */
.routine-list-row.status-expired { --routine-status-color: #ff4444; }
.routine-list-row.status-warning { --routine-status-color: #ffcc00; }
.routine-list-row.status-active { --routine-status-color: #4ade80; }
.routine-list-row:is(.status-expired, .status-warning, .status-active),
.routine-list-row:is(.status-expired, .status-warning, .status-active):hover {
    border-left: 5px solid var(--routine-status-color);
}

/* Native menu buttons retain the existing public navigation layout. */
button.hamburger {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    flex-shrink: 0;
}
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}


/* Keep the email action on the right; only the address wraps. */
.account-email-row { gap: 15px; }
.account-email-row .row-info { flex: 1 1 0; min-width: 0; }
.account-email-row .row-info > div { min-width: 0; }
.account-email-row .row-icon { flex: 0 0 25px; }
.account-email-row .row-value {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
}
.account-email-row .card-btn { flex-shrink: 0; }

/* Reserve the eye control's space and soften the text edge beside it. */
.input-wrapper:has(.toggle-password), .password-input-wrapper {
    --password-field-bg: #2a2a2a;
    position: relative;
}
.input-wrapper:has(.toggle-password) input,
.password-input-wrapper input { padding-right: 54px; }
.input-wrapper:has(.toggle-password)::after,
.password-input-wrapper::after {
    content: '';
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 49px;
    border-radius: 0 9px 9px 0;
    background: linear-gradient(to right, transparent, var(--password-field-bg) 35%);
    pointer-events: none;
    z-index: 1;
}
.input-wrapper .toggle-password, .password-input-wrapper .toggle-password { z-index: 2; }
.custom-checkbox input:checked ~ .checkmark::after { border-color: var(--on-primary); }

/* Filled primary actions use the requested white labels, including inline styles. */
.login-btn, .cta-btn, .continue-btn, .save-btn, .card-btn,
.pricing-btn, .submit-btn, .generate-btn, .generate-ai-btn,
.new-routine-btn, .modal-btn-primary, .premium-btn-primary,
.trial-badge, .popular-badge {
    color: var(--on-primary) !important;
}
.login-btn i, .cta-btn i, .save-btn i, .card-btn i,
.pricing-btn i, .submit-btn i, .new-routine-btn i {
    color: inherit;
}
.mobile-plan-btn.active,
.mobile-plan-btn.active .plan-name,
.mobile-plan-btn.active .plan-price,
.category-btn.active, .category-btn.active i {
    color: var(--on-primary) !important;
}
.category-btn.active, .premium-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color), white 20%));
}

.ai-disclaimer-compact { opacity: 1; }
.ai-disclaimer-compact p {
    font-size: 14px;
    line-height: 1.5;
    color: #ccc;
    opacity: 1;
}
.trial-disclaimer {
    font-size: 13px;
    color: #fff;
    line-height: 1.5;
    margin-top: 12px;
}

/* Reset is an outlined neutral action rather than a delete action. */
#reset-button.reset-btn {
    width: auto;
    min-width: 160px;
    padding: 0 18px;
    gap: 8px;
    font-size: 14px;
    color: var(--text-white, #fff);
    border-color: rgba(255,255,255,.35);
    border-radius: 30px;
    background: transparent;
}
#reset-button.reset-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), .08);
    box-shadow: none;
}
@media (max-width: 992px) {
    #reset-button.reset-btn {
        width: 45px !important;
        min-width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border-color: rgba(255,255,255,.35) !important;
        color: var(--text-white, #fff) !important;
        background: transparent !important;
        flex: 0 0 45px;
    }
    #reset-button .reset-label { display: none; }
}

/* Page actions share one row with the title and stay in the document flow. */
.content-header.action-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    position: relative;
    min-height: 45px;
}
.content-header.action-header > h1 {
    grid-area: 1 / 2;
    position: static;
    transform: none;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25 !important;
}
.content-header.action-header > .header-action {
    grid-area: 1 / 3;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    justify-self: end;
    align-self: center;
    width: auto;
    max-width: 100%;
    margin: 0 !important;
}
.action-header > :is(.header-actions, .header-right) {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.action-header > .header-right > button {
    min-width: 0;
    min-height: 44px;
    padding: 10px 18px;
}
.action-header > .search-wrapper {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: 100%;
    max-width: 600px;
    min-width: 0;
    margin: 0 !important;
}
.action-header > .routine-limit-info {
    grid-area: 1 / 1;
    justify-self: start;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
}
.action-header > .routine-limit-info:empty { display: none; }
@media (max-width: 992px) {
    .content-header.action-header {
        grid-template-columns: 45px minmax(0, 1fr) 45px;
        column-gap: 8px;
        padding: 0 5px !important;
        margin-top: 0 !important;
    }
    .content-header.action-header > h1 {
        font-size: clamp(20px, 3.5vw, 28px) !important;
        min-height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .content-header.action-header > :is(button.header-action, .mobile-actions-container) {
        width: 45px !important;
        min-width: 45px !important;
        height: 45px !important;
        min-height: 45px !important;
        padding: 0 !important;
    }
    .action-header .save-btn {
        min-width: 72px;
        min-height: 44px;
        height: 44px;
        padding: 0 12px;
        font-size: 13px;
        flex: 0 0 auto;
    }
    .action-header > .header-right { display: flex; }
    .action-header > .mobile-actions-container { display: none; }
    .action-header .mobile-menu-trigger {
        width: 45px;
        height: 45px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 50%;
    }
    .action-header:has(> .routine-limit-info:not(:empty)) > .routine-limit-info {
        grid-area: 2 / 1 / 3 / -1;
        justify-self: center;
        max-width: 100%;
        padding: 6px 12px;
        font-size: 13px;
    }
    .action-header:has(> .routine-limit-info:not(:empty)) > .search-wrapper {
        grid-row: 3;
    }

    /* The menu keeps the first row. Editor actions share a separate row,
       so reset and save cannot push the title or cover the menu. */
    .content-header.action-header > .reset-btn:not(.header-action) {
        grid-area: 2 / 1;
    }
    .content-header.action-header:has(> .reset-btn:not(.header-action)) > .header-actions {
        grid-area: 2 / 2 / 3 / -1;
    }
    .sidebar-toggle-btn {
        left: 5px;
        width: 45px;
        height: 45px;
    }
}

/* Routine actions remain directly available at every width. Inline visibility
   still controls ownership, public sharing and the existing plan restrictions. */
.routine-action-header > .header-right {
    width: max-content;
    flex-wrap: nowrap;
}
@media (max-width: 1100px) {
    .content-header.routine-action-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .content-header.routine-action-header > h1 { grid-area: 1 / 1; }
    .content-header.routine-action-header > .header-right { grid-area: 1 / 2; }
}
@media (max-width: 992px) {
    .content-header.routine-action-header {
        grid-template-columns: 45px minmax(0, 1fr) 45px;
        gap: 8px;
    }
    .content-header.routine-action-header > h1 {
        grid-area: 1 / 2;
        font-size: clamp(20px, 3.5vw, 28px) !important;
    }
    .content-header.routine-action-header > .header-right {
        grid-area: 2 / 1 / 3 / -1;
        justify-self: center;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .routine-action-header > .header-right > button {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 44px;
        padding: 8px 10px;
        font-size: 13px;
        gap: 5px;
        white-space: nowrap;
    }
    .routine-action-header > .header-right > #edit-btn {
        display: flex;
    }
}

/* Reserve equal space beside page titles at every screen width. */
.static-view-container > .header-actions {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 45px;
    align-items: center;
    gap: 12px;
}
.static-view-container > .header-actions > h1 {
    min-width: 0;
    text-align: center;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
.static-view-container > .header-actions > .back-circle {
    width: 45px;
    height: 45px;
}
.plan-selection-body .content-header {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 45px;
    gap: 8px;
    padding: 0 !important;
}
.plan-selection-body .content-header > h1 {
    grid-area: 1 / 2;
    min-width: 0;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
@media (max-width: 992px) {
    .plan-selection-body .content-header > h1 {
        font-size: clamp(20px, 3.5vw, 28px);
    }
    .legal-container > h1 { text-align: center; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
    .routine-action-header > .header-right > button {
        padding: 8px;
        font-size: 12px;
    }
    .routine-action-header > .header-right > button > i { display: none; }
}

/* Long user content must shrink within flex/grid cards instead of pushing
   neighbouring controls beyond the page. */
:is(.card-section, .exercise-card, .form-section, .settings-card,
    .routine-list-row, .form-row, .header-inputs, .header-details,
    .meta-info-wrapper, .seduta-header, .seduta-title-container,
    .header-left, .workout-info) { min-width: 0; }
:is(.card-section, .exercise-card, .form-section, .settings-card,
    .routine-list-row, .static-view-container) :is(h1, h2, h3) {
    overflow-wrap: anywhere;
}
.seduta-title-container { flex: 1 1 0; }
.seduta-header > .seduta-actions { flex: 0 0 auto; }
.seduta-title-container > .section-label { min-width: 0; }
.seduta-header > .seduta-menu-trigger {
    position: static;
    flex: 0 0 36px;
    min-height: 44px;
}
.main-content { min-width: 0; }
:is(#user-info-display, .user-username-main, .owner-info-container) {
    min-width: 0;
    overflow-wrap: anywhere;
}
.user-username-container {
    grid-template-columns: 36px minmax(0, auto) 36px;
    justify-content: center;
}
.user-username-main { white-space: normal; }
.card-row .row-info { min-width: 0; flex: 1 1 0; }
.card-row .card-btn { flex-shrink: 0; }
.workout-info h1 { white-space: normal; overflow-wrap: anywhere; }
.workout-navigation { box-sizing: border-box; }
.workout-navigation > .nav-exercise-btn { min-width: 0; flex: 1 1 0; }
:is(.modal, .popup-overlay, .custom-popup-overlay) {
    box-sizing: border-box;
}
:is(.modal-content, .custom-popup-content, .share-popup-content) {
    box-sizing: border-box;
    min-width: 0;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}
:is(.modal-content, .custom-popup-content, .share-popup-content) :is(h2, h3) {
    overflow-wrap: anywhere;
    min-width: 0;
}
:is(.modal-actions, .calendar-actions, .share-popup-actions, .custom-popup-actions) {
    min-width: 0;
    gap: 10px;
}
:is(.modal-actions, .calendar-actions, .share-popup-actions, .custom-popup-actions) > button {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    padding: 12px 10px;
    white-space: normal;
    overflow-wrap: anywhere;
}
#replace-confirm-modal .custom-popup-content {
    min-height: 0;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}
.share-popup-header { gap: 10px; }
.share-popup-header > .close-btn { flex: 0 0 36px; }
@media (max-width: 992px) {
    .content-header:has(> .header-left):not(.exercise-view-header) {
        padding-left: 55px !important;
        padding-right: 10px !important;
    }
    .header-left > .back-btn { flex: 0 0 40px; }
    .workout-info { flex: 1; }
}
@media (max-width: 768px) {
    /* Public routine templates set display:none inline on the menu trigger. */
    .navbar.static-nav button.hamburger {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
    :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]) {
        font-size: max(16px, 1em);
        box-sizing: border-box;
        max-width: 100%;
    }
    .visualizza-scheda-wrapper #scheda-name {
        font-size: clamp(22px, 5.5vw, 28px) !important;
    }
    .workout-navigation > .nav-exercise-btn {
        padding: 12px 8px;
        gap: 6px;
        font-size: 12px;
        min-height: 44px;
    }
    .maintenance-container { padding: 28px 20px; }
    .maintenance-container h1 { font-size: clamp(22px, 6vw, 28px); overflow-wrap: anywhere; }
}

.footer {
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
    font-family: var(--font-main, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    line-height: 1.5;
}
.footer p { opacity: 1; }
.footer h3 { text-transform: none; letter-spacing: normal; }
.footer .footer-logo { position: static; transform: none; width: auto; height: auto; }
.navbar .nav-container:has(> .logo) { gap: 16px; }
@media (min-width: 769px) {
    .navbar .nav-container:has(> .logo) > .logo {
        position: static;
        transform: none;
        flex-shrink: 0;
    }
    .navbar .nav-container:has(> .logo) .nav-links { gap: 16px; }
}
body.has-shared-footer:has(> .maintenance-container) {
    flex-direction: column;
    min-height: 100vh;
    height: auto;
    padding: 0;
}
body.has-shared-footer > .maintenance-container { margin: 60px 20px; width: calc(100% - 40px); }

/* Authenticated page bars. Equal side tracks keep the title at the true centre. */
.app-internal-page .app-container .main-content header.app-page-topbar {
    display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr); align-items:center; gap:16px;
    width:100%; max-width:none; position:relative; min-height:46px; margin:0 0 36px; padding:0 24px; flex:none; box-sizing:border-box;
}
.app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-title {
    grid-area:1 / 2; min-width:0; width:auto !important; margin:0 !important; padding:0; position:static; transform:none;
    text-align:center !important; justify-content:center !important; line-height:1.3 !important; overflow-wrap:anywhere;
}
.app-internal-page .app-page-topbar .app-topbar-title h1 { text-align:center; margin:0; }
.app-internal-page .app-container .main-content header.app-page-topbar > .app-topbar-actions {
    grid-area:1 / 3; justify-self:end; position:static !important; inset:auto !important; transform:none !important; width:fit-content; max-width:100%; margin:0 !important;
}
.app-internal-page .app-container .main-content header.app-page-topbar > .app-topbar-secondary {
    grid-column:1 / -1; grid-row:auto; justify-self:stretch; width:100%; max-width:none; margin:0 !important;
}
.app-internal-page .app-container .main-content header.app-page-topbar > .routine-limit-info { width:fit-content; justify-self:start; }
.app-internal-page .app-page-topbar .header-left { display:contents; }
.app-internal-page .app-page-topbar .header-left > .back-btn { grid-area:1 / 1; justify-self:start; }
.app-internal-page .app-page-topbar .workout-info { display:flex; flex-direction:column; align-items:center; }
.app-internal-page .routine-header-period { grid-area:1 / 1; justify-self:start; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.app-internal-page .routine-header-period #date-picker-trigger { display:inline-flex; flex:0 0 auto; align-items:center; gap:8px; width:fit-content; max-width:100%; min-height:44px; border:1px solid var(--primary-color); border-radius:12px; padding:10px 14px; font:inherit; font-size:13px; color:var(--primary-color); background:transparent; cursor:pointer; white-space:nowrap; }
.app-internal-page .routine-header-period #date-range-display { font-size:12px; line-height:1.4; color:var(--text-gray,#b8b8b8); overflow-wrap:anywhere; }
.app-internal-page .routine-header-period #date-range-display:not(.date-set) { display:none; }
.app-internal-page.routine-editor-page .app-container .main-content header.app-page-topbar { margin-bottom:36px; }
@media (max-width:992px) {
    .app-internal-page { --app-bar-inset:12px; }
    .app-internal-page .app-container > .main-content { padding-top:0 !important; }
    .app-internal-page .app-container .main-content header.app-page-topbar {
        grid-template-columns:var(--app-header-side,44px) minmax(0,1fr) var(--app-header-side,44px) !important;
        gap:12px 8px !important; min-height:68px; max-width:none !important; width:100%;
        padding:calc(12px + env(safe-area-inset-top)) var(--app-bar-inset) 12px !important;
        margin:0 0 28px !important; background:#151515; border:0; border-bottom:1px solid #ffffff1f; border-radius:0; z-index:100;
    }
    .app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-title,
    .app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-title h1 {
        color:var(--primary-color); font-size:clamp(17px,3.6vw,23px) !important; font-weight:650; letter-spacing:normal;
        min-height:44px; display:flex; align-items:center; justify-content:center !important; text-align:center !important; padding:0; line-height:1.3 !important;
    }
    .app-internal-page .app-container .main-content header.app-page-topbar .workout-info { gap:2px; }
    .app-internal-page .app-container .main-content header.app-page-topbar .workout-info h1 { min-height:0; }
    .app-internal-page .app-page-topbar .exercise-progress { font-size:11px; }
    .app-internal-page .app-container .main-content header.app-page-topbar > .app-topbar-actions { grid-area:1 / 3 !important; align-self:center; flex-wrap:nowrap; }
    .app-internal-page .app-container .main-content header.app-page-topbar > .header-right { display:flex; grid-area:2 / 1 / 3 / -1 !important; justify-self:center; justify-content:center; flex-wrap:wrap; gap:8px; }
    .app-internal-page .app-container .main-content header.app-page-topbar > .mobile-actions-container { display:none !important; width:44px !important; min-width:44px !important; height:44px !important; position:relative !important; }
    .app-internal-page .app-page-topbar :is(.save-btn, .logout-btn, .refresh-btn, .reset-btn, .mobile-menu-trigger, .back-btn) {
        position:static; min-width:44px !important; width:44px !important; height:44px !important; min-height:44px !important; padding:10px !important; margin:0; border-radius:12px !important; box-shadow:none; font-size:16px;
    }
    .app-internal-page .app-page-topbar .save-btn { width:72px !important; min-width:72px !important; font-size:12px; padding:6px 10px !important; white-space:normal; line-height:1.25; }
    .app-internal-page .app-page-topbar .logout-btn .btn-text { display:none; }
    .app-internal-page .app-container .main-content header.app-page-topbar > .routine-header-period {
        grid-area:2 / 1 / 3 / -1; width:100%; flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
        padding-top:12px; border-top:1px solid #ffffff1f;
    }
    .app-internal-page .routine-header-period #date-picker-trigger { flex-shrink:0; padding:8px 10px; font-size:12px; min-height:40px; }
    .app-internal-page .routine-header-period #date-range-display { text-align:right; font-size:11px; max-width:48%; }
    .app-internal-page .sidebar-toggle-btn {
        position:fixed; top:calc(12px + env(safe-area-inset-top)); left:var(--app-bar-inset); width:44px; height:44px;
        border:1px solid #ffffff24; border-radius:12px; background:#242424; color:#fff; box-shadow:none; backdrop-filter:none; font-size:18px;
    }
    .app-internal-page .sidebar-toggle-btn:hover { transform:none; }
    .app-internal-page .app-page-topbar #back-to-routine { font-size:12px; max-width:72px; line-height:1.25; text-align:right; }
    .app-internal-page.plan-selection-body .main-content { justify-content:flex-start; }
    .app-internal-page .close-selection-btn { top:calc(12px + env(safe-area-inset-top)); right:12px; width:44px; height:44px; border:1px solid #ffffff24; border-radius:12px; background:#242424; box-shadow:none; }
    .app-internal-page .selection-container { max-width:none; }
    .app-internal-page .plan-subtitle { margin:0 16px 24px; }
}
@media(min-width:993px) {
 .app-internal-page.routine-editor-page .app-container .main-content header.app-page-topbar { padding-inline:24px; }
 .app-internal-page .routine-header-period { position:relative; }
 .app-internal-page .routine-header-period #date-range-display { position:absolute; top:calc(100% + 5px); left:0; width:max-content; max-width:260px; }
}
@media(max-width:992px) {
 .app-internal-page .app-container .main-content header.app-page-topbar {
  position:sticky; top:0; width:calc(100% + 2 * var(--app-header-inset,0px));
  margin-left:calc(-1 * var(--app-header-inset,0px)) !important; margin-right:calc(-1 * var(--app-header-inset,0px)) !important;
 }
}
.app-internal-page .app-bar-icon { display:none; }
@media(max-width:992px) {
 .app-internal-page :is(.app-page-topbar,.sidebar-toggle-btn,.close-selection-btn) .app-bar-icon { display:inline-block; width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
 .app-internal-page :is(.app-page-topbar,.sidebar-toggle-btn,.close-selection-btn) :has(> .app-bar-icon) > i,
 .app-internal-page .sidebar-toggle-btn > i, .app-internal-page .close-selection-btn > i { display:none; }
 .app-internal-page .sidebar-toggle-btn::before, .app-internal-page .sidebar-toggle-btn::after { content:none; }
}
.app-internal-page .app-page-tools { width:100%; box-sizing:border-box; display:grid; gap:14px; min-width:0; margin:0 0 24px; }
.app-internal-page .app-page-tools > .routine-limit-info { width:fit-content; max-width:100%; margin:0; box-sizing:border-box; }
.app-internal-page .app-page-tools > .routine-search-controls { grid-column:1; grid-row:auto; }
@media(max-width:992px) {
 .app-internal-page .app-page-tools { gap:14px; }
 .app-internal-page .app-page-tools.routine-list-header > .routine-search-controls { grid-row:auto; }
}
@media(max-width:992px) {
 .app-internal-page .sidebar-toggle-btn:has(> .app-bar-icon) > :not(.app-bar-icon):not(.fs-button-glyph) { display:none !important; }
}
@media(max-width:992px) {
 .app-internal-page.routine-editor-page .app-container .main-content header.app-page-topbar { margin-bottom:28px !important; }
}

@media(max-width:992px) {
html body.app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-actions > button, html body.settings-body .logout-btn { border-radius:50% !important; }
html body.app-internal-page .sidebar-toggle-btn { top:calc(12px + env(safe-area-inset-top)); margin-top:0 !important; transform:none !important; border-radius:50% !important; }
}

@media (max-width: 992px) {
 html body.app-internal-page header.app-page-topbar > .sidebar-toggle-btn { position:static !important; inset:auto !important; grid-area:1 / 1; align-self:center; justify-self:start; margin:0 !important; transform:none !important; }
}

/* Crea Scheda is the reference for every authenticated page heading. */
@media (min-width: 993px) {
    .app-internal-page .app-container > .main-content { padding-top:60px; }
    .app-internal-page .app-container .main-content header.app-page-topbar { padding:0 24px !important; margin:0 0 36px !important; }
    .app-internal-page .app-page-topbar #routine-create { height:46px; }
    .app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-title,
    .app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-title h1 {
        color:var(--primary-color); font-size:var(--fs-h1,32px); font-weight:500;
        line-height:1.3 !important; white-space:normal;
    }
}
.app-internal-page .app-page-topbar .workout-info { position:relative; }
.app-internal-page .app-page-topbar .exercise-progress { position:absolute; top:100%; width:100%; text-align:center; }
.app-internal-page.custom-exercise-page .custom-exercise-form { margin-top:0; }
@media (min-width: 993px) and (max-width: 1100px) {
    .app-internal-page .app-container > .main-content { padding-top:24px; }
}
/* Keep the permission-controlled group intact while placing its actions on
   opposite sides of the centred title. Inline display:none still hides it. */
.app-internal-page .app-container .main-content header.routine-action-header > .header-right {
    display:contents;
}
.app-internal-page .routine-action-header > .header-right > button {
    grid-area:1 / 3; justify-self:end; align-self:center; margin:0;
}
.app-internal-page .routine-action-header > .header-right > .edit-btn {
    grid-area:1 / 1; justify-self:start;
}
@media (max-width: 992px) {
    .app-internal-page .app-container .main-content header.app-page-topbar {
        min-height:71px;
        grid-template-rows:46px;
    }
    .app-internal-page .app-container .main-content header.routine-action-header > .header-right > button {
        grid-row:2; max-width:100%; min-width:0; min-height:44px; padding:10px 14px; font-size:14px;
    }
    .app-internal-page .app-container .main-content header.routine-action-header {
        grid-template-columns:minmax(44px,1fr) minmax(0,auto) minmax(44px,1fr) !important;
    }
    .app-internal-page .routine-action-header > .header-right > .edit-btn { grid-column:1 / 3; }
    .app-internal-page .routine-action-header > .header-right > :not(.edit-btn) { grid-column:2 / 4; }
    .app-internal-page .app-page-topbar .workout-info h1 { min-height:44px !important; }
}
@media (max-width: 380px) {
    .app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-title,
    .app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-title h1 { font-size:15px !important; }
}
@media (max-width: 350px) {
    .app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-title,
    .app-internal-page .app-container .main-content header.app-page-topbar .app-topbar-title h1 { font-size:14px !important; }
}