/**
 * frontend-base.css — shared BA public chrome (tabs, toast, utilities).
 * Split from frontend.css — depends on Sport master.css.
 */

@layer retro-components, retro-overrides;
@layer retro-components {

    /* Compare modal — content tweaks (shell: retro-admin-modal in master.css) */     .ba-compare-member {         margin: 0 0 var(--retro-sys-spacing-lg);     }           .ba-tooltip {         position:      relative;         display:       inline-flex;     }      .ba-tooltip__bubble {         position:      absolute;         bottom:        calc(100% + var(--retro-sys-spacing-xs));         left:          50%;         transform:     translateX(-50%);         padding:       var(--retro-sys-spacing-xs) var(--retro-sys-spacing-sm);         background:    var(--retro-sys-color-inverse-surface);         color:         var(--retro-sys-color-on-inverse-surface);         font-size:     var(--retro-sys-typescale-label-small-size);         line-height:   var(--retro-sys-typescale-label-small-lh);         border-radius: var(--retro-sys-shape-corner-small);         white-space:   nowrap;         z-index:       var(--retro-sys-z-tooltip);         opacity:       0;         visibility:    hidden;         pointer-events: none;         transition:    opacity var(--retro-sys-motion-duration-short) var(--retro-sys-motion-easing);     }      .ba-tooltip:hover .ba-tooltip__bubble,     .ba-tooltip:focus-within .ba-tooltip__bubble {         opacity:    1;         visibility: visible;     }           .ba-tabs,     .panel-header--tabs {         display:        inline-flex;         flex-wrap:      wrap;         align-items:    center;         gap:             0;         width:          auto;         max-width:      100%;         margin-bottom:  var(--retro-sys-spacing-lg);         padding:        3px;         background:     var(--retro-sys-color-surface-variant);         border:         1px solid var(--retro-sys-color-outline-variant);         border-radius:  var(--retro-sys-shape-corner-pill);         box-sizing:     border-box;     }      .retro-tabs__btn {         flex:            0 0 auto;         display:         inline-flex;         align-items:     center;         justify-content: center;         gap:             var(--retro-sys-spacing-xs);         width:           auto;         min-width:       0;         height:          auto;         min-height:      2.25rem;         padding:         0.35rem 0.9rem;         font-family:     var(--retro-sys-typescale-label-font);         font-size:       var(--retro-sys-typescale-label-medium-size);         font-weight:     600;         line-height:     1.2;         white-space:     nowrap;         text-decoration: none;         color:           var(--retro-sys-color-on-surface-variant);         background:      transparent;         border:          1px solid transparent;         border-radius:   var(--retro-sys-shape-corner-pill);         box-shadow:      none;         cursor:          pointer;         touch-action:    manipulation;     }      .retro-tabs__btn:hover {         background: var(--retro-sys-color-surface);         color:      var(--retro-sys-color-on-surface);     }      .retro-tabs__btn.is-active {         background:   var(--retro-sys-color-brand-muted);         border-color: var(--retro-sys-color-brand);         color:        var(--retro-sys-color-brand-muted-text);         box-shadow:   var(--retro-sys-elevation-1);     }      .retro-tabs__count {         display:       inline-flex;         align-items:   center;         justify-content: center;         min-width:     1.4em;         border-radius: var(--retro-sys-shape-corner-pill);         padding:       0.1em 0.45em;         font-size:     var(--retro-sys-typescale-label-small-size);         font-weight:   700;         background:    var(--retro-sys-color-surface);         color:         var(--retro-sys-color-on-surface-variant);     }      .retro-tabs__btn.is-active .retro-tabs__count {         background: var(--retro-sys-color-brand);         color:      var(--retro-sys-color-brand-contrast);     }           .retro-chip {         display:         inline-flex;         align-items:     center;         justify-content: center;         gap:             var(--retro-sys-spacing-xs);         border-radius:   var(--retro-sys-shape-corner-pill);         padding:         var(--retro-sys-spacing-xs) var(--retro-sys-spacing-md);         min-height:      24px;         font-family:     var(--retro-sys-typescale-label-font);         font-size:       var(--retro-sys-typescale-label-small-size);         font-weight:     var(--retro-sys-typescale-label-small-weight);         letter-spacing:  0.04em;         text-transform:  uppercase;         background:      var(--retro-sys-color-surface-variant);         color:           var(--retro-sys-color-on-surface-variant);         border:          1px solid transparent;     }      .retro-chip--primary {         background: var(--retro-sys-color-brand-muted);         color:      var(--retro-sys-color-brand-muted-text);     }      .retro-chip--info {         background: var(--retro-sys-color-info-container);         color:      var(--retro-sys-color-on-info-container);     }      .retro-chip--warning {         background: var(--retro-sys-color-warning-container);         color:      var(--retro-sys-color-on-warning-container);     }      .retro-chip--error {         background: var(--retro-sys-color-error-container);         color:      var(--retro-sys-color-on-error-container);     }      .retro-chip--success {         background: var(--retro-sys-color-success-container);         color:      var(--retro-sys-color-on-success-container);     }      .ba-badge {         display:         inline-flex;         align-items:     center;         justify-content: center;         min-width:       20px;         min-height:      20px;         padding:         0 var(--retro-sys-spacing-xs);         border-radius:   var(--retro-sys-shape-corner-pill);         font-size:       var(--retro-sys-typescale-label-small-size);         font-weight:     700;         background:      var(--retro-sys-color-error);         color:           var(--retro-sys-color-on-error);     }      .ba-badge--dot {         min-width:  8px;         min-height: 8px;         width:      8px;         height:     8px;         padding:    0;     }           .ba-dropdown {         display:       none;         position:      fixed;         z-index:       var(--retro-sys-z-dropdown);         min-width:     220px;         max-height:    280px;         overflow-y:    auto;         overflow-x:    clip;         background:    var(--retro-sys-color-surface);         border:        1px solid var(--retro-sys-color-outline);         border-radius: var(--retro-sys-shape-corner-medium);         box-shadow:    var(--retro-sys-elevation-3);     }      .ba-dropdown.is-open { display: block; }      .retro-dropdown__item {         padding:       var(--retro-sys-spacing-md) var(--retro-sys-spacing-lg);         font-size:     var(--retro-sys-typescale-body-medium-size);         color:         var(--retro-sys-color-on-surface);         border-bottom: 1px solid var(--retro-sys-color-outline-variant);         cursor:        pointer;         touch-action:  manipulation;     }      .retro-dropdown__item:last-child { border-bottom: none; }      .retro-dropdown__item:hover,     .retro-dropdown__item.is-active {         background: var(--retro-sys-color-brand-muted);     }      .ba-dropdown__empty {         padding:   var(--retro-sys-spacing-md) var(--retro-sys-spacing-lg);         font-size: var(--retro-sys-typescale-body-medium-size);         color:     var(--retro-sys-color-on-surface-variant);     }           .ba-pagination {         display:         flex;         justify-content: space-between;         align-items:     center;         margin-top:      var(--retro-sys-spacing-lg);         padding-top:     var(--retro-sys-spacing-lg);         border-top:      1px solid var(--retro-sys-color-outline-variant);     }      .ba-pagination__info {         display:     flex;         align-items: center;         gap:         var(--retro-sys-spacing-md);         flex-wrap:   wrap;         font-size:   var(--retro-sys-typescale-body-medium-size);         font-weight: 600;         color:       var(--retro-sys-color-on-surface-variant);         white-space: nowrap;     }      .ba-pagination__controls {         display: flex;         gap:     var(--retro-sys-spacing-xs);     }      .retro-pagination__jump {         display:     inline-flex;         align-items: center;         gap:         var(--retro-sys-spacing-sm);     }      .retro-field--jump {         width:         72px;         text-align:    center;     }      .retro-pagination__btn {         display:         inline-flex;         align-items:     center;         justify-content: center;         min-height:      var(--retro-sys-comp-height-md);         padding:         0 var(--retro-sys-spacing-md);         border:          1px solid var(--retro-sys-color-outline);         border-radius:   var(--retro-comp-btn-radius);         background:      var(--retro-sys-color-surface);         color:           var(--retro-sys-color-on-surface-variant);         font-weight:     600;         cursor:          pointer;         text-decoration: none;     }      .retro-pagination__btn:hover:not(:disabled):not([aria-disabled="true"]) {         border-color: var(--retro-sys-color-brand);         color:        var(--retro-sys-color-brand);         background:   var(--retro-sys-color-surface-variant);     }      .retro-pagination__btn:disabled,     .retro-pagination__btn[aria-disabled="true"] {         opacity:        0.38;         pointer-events: none;     }      .retro-hidden {         display: none !important;     } 

         .ba-toast-container {         position:       fixed;         bottom:         var(--retro-sys-spacing-lg);         left:           50%;         transform:      translateX(-50%);         z-index:        var(--retro-sys-z-toast);         display:        flex;         flex-direction: column;         gap:            var(--retro-sys-spacing-sm);         max-width:      min(420px, calc(100vw - var(--retro-sys-spacing-2xl)));         pointer-events: none;     }      .ba-toast {         display:         flex;         align-items:     center;         gap:             var(--retro-sys-spacing-sm);         padding:         var(--retro-sys-spacing-md) var(--retro-sys-spacing-lg);         background:      var(--retro-sys-color-inverse-surface);         color:           var(--retro-sys-color-on-inverse-surface);         border-radius:   var(--retro-sys-shape-corner-small);         box-shadow:      var(--retro-sys-elevation-3);         font-size:       var(--retro-sys-typescale-body-medium-size);         pointer-events:  auto;         animation:       ba-toast-in var(--retro-sys-motion-duration-medium) var(--retro-sys-motion-easing);     }      .ba-toast--error {         background: var(--retro-sys-color-error);         color:      var(--retro-sys-color-on-error);     }      .ba-toast--success {         background: var(--retro-sys-color-success);         color:      var(--retro-sys-color-on-success);     }      .ba-toast--warning {         background: var(--retro-sys-color-warning);         color:      var(--retro-sys-color-on-warning);     }      .ba-toast--info {         background: var(--retro-sys-color-info);         color:      var(--retro-sys-color-on-info);     }      .ba-toast__action {         margin-left:   auto;         padding:       var(--retro-sys-spacing-xs) var(--retro-sys-spacing-sm);         background:    transparent;         border:        1px solid currentColor;         border-radius: var(--retro-sys-shape-corner-small);         color:         inherit;         font-weight:   700;         cursor:        pointer;         touch-action:  manipulation;     }      @keyframes retro-toast-in {         from { opacity: 0; transform: translateY(var(--retro-sys-spacing-sm)); }         to   { opacity: 1; transform: translateY(0); }     } 

         .ba-skeleton {         background: linear-gradient(             90deg,             var(--retro-sys-color-surface-variant) 25%,             var(--retro-sys-color-surface-dim) 50%,             var(--retro-sys-color-surface-variant) 75%         );         background-size: 200% 100%;         animation: ba-skeleton-pulse 1.4s ease-in-out infinite;         border-radius: var(--retro-sys-shape-corner-small);     }      .ba-skeleton--text {         height:        1em;         margin-bottom: var(--retro-sys-spacing-xs);     }      .ba-skeleton--rect { height: var(--retro-sys-comp-height-md); }      .ba-skeleton--circle {         width:         40px;         height:        40px;         border-radius: var(--retro-sys-shape-corner-pill);     }      @keyframes retro-skeleton-pulse {         0%   { background-position: 200% 0; }         100% { background-position: -200% 0; }     }      .ba-spinner {         display:       inline-block;         width:         24px;         height:        24px;         border:        3px solid var(--retro-sys-color-outline-variant);         border-top-color: var(--retro-sys-color-brand);         border-radius: var(--retro-sys-shape-corner-pill);         animation:     ba-spin 0.8s linear infinite;     }      .ba-spinner--lg {         width:  40px;         height: 40px;         border-width: 4px;     }      @keyframes retro-spin {         to { transform: rotate(360deg); }     }      .ba-progress {         width:            100%;         height:           8px;         appearance:       none;         border:           none;         border-radius:    var(--retro-sys-shape-corner-pill);         background:       var(--retro-sys-color-surface-container);         overflow:         hidden;     }      .ba-progress::-webkit-progress-bar {         background: var(--retro-sys-color-surface-container);     }      .ba-progress::-webkit-progress-value {         background: var(--retro-sys-color-brand);     }      .ba-progress::-moz-progress-bar {         background: var(--retro-sys-color-brand);     }           .ba-empty {         display:         flex;         flex-direction:  column;         align-items:     center;         justify-content: center;         gap:             var(--retro-sys-spacing-md);         padding:         var(--retro-sys-spacing-3xl) var(--retro-sys-spacing-lg);         text-align:      center;         color:           var(--retro-sys-color-on-surface-variant);     }      .ba-empty__icon {         font-size: var(--retro-sys-typescale-display-small-size);         opacity:   0.5;     }      .ba-empty__title {         margin:      0;         font-size:   var(--retro-sys-typescale-title-medium-size);         font-weight: var(--retro-sys-typescale-title-medium-weight);         color:       var(--retro-sys-color-on-surface);     }      .ba-empty__body,     .ba-empty__desc {         margin:    0;         max-width: 360px;         font-size: var(--retro-sys-typescale-body-medium-size);     }           .ba-breadcrumb {         display:     flex;         flex-wrap:   wrap;         align-items: center;         gap:         var(--retro-sys-spacing-xs);         margin:      0 0 var(--retro-sys-spacing-lg);         padding:     0;         list-style:  none;         font-size:   var(--retro-sys-typescale-body-small-size);     }      .ba-breadcrumb__item {         display:     flex;         align-items: center;         gap:         var(--retro-sys-spacing-xs);         color:       var(--retro-sys-color-on-surface-variant);     }      .ba-breadcrumb__item:not(:last-child)::after {         content: "/";         opacity: 0.5;     }      .retro-breadcrumb__link {         color:           var(--retro-sys-color-brand);         text-decoration: none;     }      .retro-breadcrumb__link:hover {         text-decoration: underline;     }      .ba-accordion {         border:        1px solid var(--retro-sys-color-outline-variant);         border-radius: var(--retro-sys-shape-corner-small);         overflow:      hidden;     }      .ba-accordion__item + .ba-accordion__item {         border-top: 1px solid var(--retro-sys-color-outline-variant);     }      .retro-accordion__trigger {         display:         flex;         align-items:     center;         justify-content: space-between;         width:           100%;         padding:         var(--retro-sys-spacing-md) var(--retro-sys-spacing-lg);         background:      var(--retro-sys-color-surface);         border:          none;         font-size:       var(--retro-sys-typescale-body-medium-size);         font-weight:     600;         color:           var(--retro-sys-color-on-surface);         cursor:          pointer;         text-align:      left;     }      .ba-accordion__panel {         padding:    0 var(--retro-sys-spacing-lg) var(--retro-sys-spacing-lg);         font-size:  var(--retro-sys-typescale-body-medium-size);         color:      var(--retro-sys-color-on-surface-variant);     }      .ba-accordion__item:not(.is-open) .ba-accordion__panel {         display: none;     }      .ba-divider {         border:     none;         border-top: 1px solid var(--retro-sys-color-outline-variant);         margin:     var(--retro-sys-spacing-lg) 0;     }      .ba-divider--vertical {         display:       inline-block;         width:         1px;         height:        1em;         border-top:    none;         border-left:   1px solid var(--retro-sys-color-outline-variant);         margin:        0 var(--retro-sys-spacing-sm);         vertical-align: middle;     }           .ba-avatar {         display:         inline-flex;         align-items:     center;         justify-content: center;         width:           40px;         height:          40px;         border-radius:   var(--retro-sys-shape-corner-pill);         background:      var(--retro-sys-color-brand-muted);         color:           var(--retro-sys-color-brand-muted-text);         font-size:       var(--retro-sys-typescale-body-medium-size);         font-weight:     700;         overflow:        hidden;         flex-shrink:     0;     }      .ba-avatar--sm { width: 32px; height: 32px; font-size: var(--retro-sys-typescale-body-small-size); }     .ba-avatar--lg { width: 56px; height: 56px; font-size: var(--retro-sys-typescale-title-small-size); }      .ba-avatar img {         width:  100%;         height: 100%;         object-fit: cover;     } 

    
         .retro-root :is(         a, button, input, select, textarea,         [tabindex]:not([tabindex="-1"])     ):focus-visible {         outline:        2px solid var(--retro-sys-color-brand);         outline-offset: 2px;     }      .retro-root .retro-btn:focus-visible,     .retro-root .retro-tabs__btn:focus-visible,     .retro-root .retro-sidenav__item:focus-visible {         box-shadow: var(--retro-sys-elevation-2);     }

}

@layer retro-overrides {

    .retro-btn,
    .retro-tabs__btn,
    .retro-sidenav__item,
    .retro-dropdown__item,
    .retro-field-clear,
    .ba-sort-btn,
    .ba-action-btn,
    .retro-pagination__btn {
        min-height: var(--retro-sys-comp-height-touch);
        touch-action: manipulation;
    }

    .ba-toast-container {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .retro-toolbar {
        padding-top:    max(var(--retro-sys-spacing-md), env(safe-area-inset-top, 0));
        padding-left:   max(var(--retro-sys-spacing-lg), env(safe-area-inset-left, 0));
        padding-right:  max(var(--retro-sys-spacing-lg), env(safe-area-inset-right, 0));
        z-index: 5000;
        pointer-events: auto;
        isolation: isolate;
        overflow: visible;
    }

    .retro-toolbar-title {
        pointer-events: none;
    }

    .retro-toolbar .retro-toolbar-btn,
    .retro-toolbar .retro-toolbar__actions .retro-toolbar-btn,
    .retro-toolbar .ba-share,
    .retro-toolbar .btn-compare-report,
    .retro-toolbar .btn-edit-entry {
        position: relative;
        z-index: 2;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .retro-toolbar .retro-toolbar-btn .retro-icon,
    .retro-toolbar .retro-toolbar-btn .icon-text,
    .retro-toolbar .retro-toolbar-btn svg {
        pointer-events: none;
    }

    .ba-compare-error {
        margin: 0 0 var(--retro-sys-spacing-md);
        color: var(--retro-sys-color-danger);
        font-size: var(--retro-sys-typescale-body-small-size);
        line-height: 1.45;
    }

    .ba-compare-error[hidden] {
        display: none !important;
    }

    @media (max-width: 767px) {
        .retro-grid--2,
        .retro-grid--3,
        .retro-grid--4 {
            grid-template-columns: 1fr;
        }

        .ba-list-panel {
            padding: 0 var(--retro-sys-spacing-sm);
            max-width: 100%;
        }

        .ba-list-panel__filter {
            flex-direction: column;
            align-items:    stretch;
        }

        .ba-list-panel__sort {
            justify-content: space-between;
            flex-wrap:       wrap;
            margin-left:     0;
            width:           100%;
        }

        .ba-list-panel__actions .retro-btn,
        .ba-list-panel__actions .ba-action-btn {
            min-width: 88px;
            max-width: 118px;
        }

        .ba-tabs,
        .panel-header--tabs {
            flex-direction: row;
            width: auto;
            max-width: 100%;
        }

        .retro-tabs__btn {
            flex: 0 0 auto;
            width: auto;
        }

        .retro-admin-modal {
            padding: 0;
            align-items: stretch;
        }

        .retro-admin-modal__panel {
            width:         100%;
            height:        100%;
            max-width:     none;
            max-height:    none;
            border-radius: 0;
            margin-top:    0;
        }

        /* Keep Cancel / primary actions side-by-side (shell also sets this in Sport master). */
        .retro-admin-modal__footer {
            flex-direction: row;
            flex-wrap: nowrap;
            gap: var(--retro-sys-spacing-sm);
        }

        .retro-admin-modal__footer .retro-btn,
        .retro-admin-modal__footer--split .retro-btn {
            flex: 1 1 0;
            min-width: 0;
            min-height: var(--retro-sys-comp-height-touch, 44px);
            justify-content: center;
        }

        .ba-toast-container {
            bottom:    var(--retro-sys-spacing-md);
            left:      var(--retro-sys-spacing-md);
            right:     var(--retro-sys-spacing-md);
            transform: none;
            max-width: none;
        }

        .ba-pagination {
            flex-wrap: wrap;
            gap:       var(--retro-sys-spacing-md);
        }

        .ba-pagination__info {
            font-size: var(--retro-ref-scale-11);
        }
    }

    @media (max-width: 479px) {
        .ba-list-panel__actions {
            flex-wrap: wrap;
            gap:       var(--retro-sys-spacing-xs);
        }

        .retro-btn--lg {
            padding: 0 var(--retro-sys-spacing-md);
        }
    }

    @media (max-width: 359px) {
        .retro-container {
            padding: 0 var(--retro-sys-spacing-sm);
        }
    }

    @media (min-width: 768px) {
        .retro-sidebar {
            width: 280px;
            flex-shrink: 0;
        }

        .ba-tabs,
        .panel-header--tabs {
            flex-direction: row;
        }

        .retro-btn--sm,
        .retro-tabs__btn,
        .ba-sort-btn {
            min-height: var(--retro-sys-comp-height-md);
        }
    }

    @media (min-width: 1024px) {
        .ba-list-panel {
            padding: 0 var(--retro-sys-spacing-lg);
        }
    }

    @media (max-width: 1100px) {
        .retro-ms-grid {
            --retro-ms-grid-gap: var(--retro-sys-spacing-lg);
        }
    }

    @media (max-width: 640px) {
        .retro-ms-grid {
            grid-template-columns: 1fr;
            --retro-ms-grid-gap: var(--retro-sys-spacing-md);
        }
    }

    @media (min-width: 1240px) {
        .retro-container {
            padding: 0 var(--retro-sys-spacing-xl);
        }
    }

    @media (max-width: 1024px) {
        .ba-list-panel {
            max-width: 100%;
        }

        .retro-sidebar {
            width: 100%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .retro-root *,
        .ba-report * {
            animation-duration:   0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration:  0.01ms !important;
            scroll-behavior:      auto !important;
        }

        .retro-card--clickable:hover,
        .ba-measure-card:hover {
            transform: none;
        }

        :is(.retro-root, .retro-context-wp-admin, .ba-report) :is(
            .retro-btn,
            .retro-btn-submit,
            .ba-action-btn,
            .ba-sort-btn,
            .retro-toolbar-btn,
            .button,
            .btn-wa
        ):is(:hover, :focus-visible, :active) {
            transform: none;
        }
    }

}

.ba-profile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 100001;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ba-profile-overlay.is-open {
    display: flex;
}

.ba-profile-overlay--crop {
    background: rgba(0, 0, 0, 0.65);
    z-index: 100002;
}

.ba-profile-dialog {
    background: var(--retro-sys-color-surface);
    border-radius: var(--retro-ref-shape-lg);
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
    padding: 16px;
    box-shadow: var(--retro-ref-elevation-modal);
}

.ba-profile-overlay--crop .ba-profile-dialog {
    max-width: 360px;
    max-height: none;
}

.ba-profile-dialog__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ba-profile-dialog__title {
    font-size: 14px;
    color: var(--retro-sys-color-text);
}

.ba-profile-dialog__close {
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    color: var(--retro-sys-color-text-muted);
}

.ba-profile-dialog__lead {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--retro-sys-color-text-muted);
}

.ba-profile-overlay--crop .ba-profile-dialog__lead {
    font-size: 11px;
    line-height: 1.4;
}

.ba-profile-picker-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ba-profile-picker-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: var(--retro-sys-color-text-muted);
}

.ba-profile-picker-msg--danger {
    color: var(--retro-sys-color-danger);
}

.ba-profile-card {
    border: 1px solid var(--retro-sys-color-outline);
    border-radius: var(--retro-ref-shape-md);
    padding: 4px;
    background: var(--retro-sys-color-bg-subtle);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ba-profile-card__preview {
    font-size: 10px;
    font-weight: 700;
    color: var(--retro-sys-color-brand);
    text-decoration: none;
    padding: 2px 4px;
    align-self: flex-start;
}

.ba-profile-card__select {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.ba-profile-card__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: var(--retro-sys-color-bg-sunken);
    border-radius: 6px;
    display: block;
}

.ba-profile-card__label {
    display: block;
    font-size: 9px;
    color: var(--retro-sys-color-text-muted);
    margin-top: 4px;
    line-height: 1.3;
}

.ba-crop-viewport {
    width: 280px;
    height: 280px;
    margin: 0 auto 12px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    background: var(--retro-ref-ink-deep);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
    cursor: grab;
    touch-action: none;
}

.ba-crop-viewport img {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

.ba-crop-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--retro-sys-color-text-muted);
    margin-bottom: 14px;
}

.ba-crop-zoom input[type='range'] {
    flex: 1;
}