/* GENERATED from flare-components.imports.css - edit that, not this. */

/* ---- reset.css ---- */
:where(*, *::before, *::after) {
    box-sizing: border-box;
}

:where(html) {

    -webkit-text-size-adjust: 100%;

    scrollbar-width: var(--flare-scrollbar-width);
    scrollbar-color: var(--flare-scrollbar-thumb) var(--flare-scrollbar-track);
}

:where(*)::-webkit-scrollbar {
    width: var(--flare-scrollbar-size);
    height: var(--flare-scrollbar-size);
}

:where(*)::-webkit-scrollbar-track {
    background: var(--flare-scrollbar-track);
}

:where(*)::-webkit-scrollbar-thumb {
    background: var(--flare-scrollbar-thumb);
    border-radius: var(--flare-scrollbar-radius);
}

:where(*)::-webkit-scrollbar-thumb:hover {
    background: var(--flare-scrollbar-thumb-hover);
}

:where(*)::-webkit-scrollbar-corner {
    background: var(--flare-scrollbar-track);
}

:where(body) {
    margin: 0;

    background: var(--flare-color-background);
    color: var(--flare-color-on-background);
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
    font-weight: var(--flare-typescale-body-medium-weight);
    line-height: var(--flare-typescale-body-medium-height);
    letter-spacing: var(--flare-typescale-body-medium-spacing);
    -webkit-font-smoothing: antialiased;
}

:where(img, video, canvas, iframe, embed, object) {
    display: block;
}

:where(img, svg, video, canvas, iframe, embed, object) {
    max-width: 100%;
}

:where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
}

:where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
}

:where([popover]) {
    inset: auto;
    margin: 0;
    border: 0;
    padding: 0;
    width: auto;
    height: auto;
    overflow: visible;
    background: none;
    color: inherit;
}

/* ---- color-roles.css ---- */
.flare-mode-light { color-scheme: light; }
.flare-mode-dark  { color-scheme: dark;  }

.flare-color-primary {
    --fc-main: var(--flare-color-primary);
    --fc-on: var(--flare-color-on-primary);
    --fc-container: var(--flare-color-primary-container);
    --fc-on-container: var(--flare-color-on-primary-container);
}
.flare-color-secondary {
    --fc-main: var(--flare-color-secondary);
    --fc-on: var(--flare-color-on-secondary);
    --fc-container: var(--flare-color-secondary-container);
    --fc-on-container: var(--flare-color-on-secondary-container);
}
.flare-color-tertiary {
    --fc-main: var(--flare-color-tertiary);
    --fc-on: var(--flare-color-on-tertiary);
    --fc-container: var(--flare-color-tertiary-container);
    --fc-on-container: var(--flare-color-on-tertiary-container);
}
.flare-color-success {
    --fc-main: var(--flare-color-success);
    --fc-on: var(--flare-color-on-success);
    --fc-container: var(--flare-color-success-container);
    --fc-on-container: var(--flare-color-on-success-container);
}
.flare-color-warning {
    --fc-main: var(--flare-color-warning);
    --fc-on: var(--flare-color-on-warning);
    --fc-container: var(--flare-color-warning-container);
    --fc-on-container: var(--flare-color-on-warning-container);
}
.flare-color-error {
    --fc-main: var(--flare-color-error);
    --fc-on: var(--flare-color-on-error);
    --fc-container: var(--flare-color-error-container);
    --fc-on-container: var(--flare-color-on-error-container);
}
.flare-color-info {
    --fc-main: var(--flare-color-info);
    --fc-on: var(--flare-color-on-info);
    --fc-container: var(--flare-color-info-container);
    --fc-on-container: var(--flare-color-on-info-container);
}

.flare-color-on-surface {
    --fc-main: var(--flare-color-on-surface);
    --fc-on: var(--flare-color-surface);
    --fc-container: var(--flare-color-surface);
    --fc-on-container: var(--flare-color-on-surface);
}
.flare-color-on-surface-variant {
    --fc-main: var(--flare-color-on-surface-variant);
    --fc-on: var(--flare-color-surface);
    --fc-container: var(--flare-color-surface-variant);
    --fc-on-container: var(--flare-color-on-surface-variant);
}
.flare-color-on-surface-variant2 {
    --fc-main: var(--flare-color-on-surface-variant2);
    --fc-on: var(--flare-color-surface);
    --fc-container: var(--flare-color-surface-variant);
    --fc-on-container: var(--flare-color-on-surface-variant2);
}

/* ---- badge.css ---- */
.flare-badge {
    position: relative;
    display: inline-flex;
    --_height:    var(--flare-badge-height-md);
    --_min-width: var(--flare-badge-min-width-md);
    --_padding-x: var(--flare-badge-padding-x-md);
    --_dot-size:  var(--flare-badge-dot-size-md);
    --_label:     var(--flare-badge-label-size-md);
}
.flare-badge--xs { --_height: var(--flare-badge-height-xs); --_min-width: var(--flare-badge-min-width-xs); --_padding-x: var(--flare-badge-padding-x-xs); --_dot-size: var(--flare-badge-dot-size-xs); --_label: var(--flare-badge-label-size-xs); }
.flare-badge--sm { --_height: var(--flare-badge-height-sm); --_min-width: var(--flare-badge-min-width-sm); --_padding-x: var(--flare-badge-padding-x-sm); --_dot-size: var(--flare-badge-dot-size-sm); --_label: var(--flare-badge-label-size-sm); }
.flare-badge--lg { --_height: var(--flare-badge-height-lg); --_min-width: var(--flare-badge-min-width-lg); --_padding-x: var(--flare-badge-padding-x-lg); --_dot-size: var(--flare-badge-dot-size-lg); --_label: var(--flare-badge-label-size-lg); }
.flare-badge--xl { --_height: var(--flare-badge-height-xl); --_min-width: var(--flare-badge-min-width-xl); --_padding-x: var(--flare-badge-padding-x-xl); --_dot-size: var(--flare-badge-dot-size-xl); --_label: var(--flare-badge-label-size-xl); }

.flare-badge__indicator {
    position: absolute;
    top: calc(-1 * var(--flare-badge-offset));
    right: calc(-1 * var(--flare-badge-offset));
    min-width: var(--_min-width);
    height: var(--_height);
    padding: 0 var(--_padding-x);
    border-radius: var(--flare-badge-radius);

    background-color: var(--fc-main, var(--flare-color-error));
    color: var(--fc-on, var(--flare-color-on-error));

    font-family: var(--flare-typescale-label-small-font);
    font-size: var(--_label);
    font-weight: var(--flare-typescale-label-small-weight);
    line-height: var(--flare-typescale-label-small-height);
    letter-spacing: var(--flare-typescale-label-small-spacing);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flare-badge__indicator--dot {
    min-width: var(--_dot-size);
    width: var(--_dot-size);
    height: var(--_dot-size);
    padding: 0;
    top: var(--flare-badge-dot-offset);
    right: var(--flare-badge-dot-offset);
}

.flare-badge--top-right .flare-badge__indicator {
    top: -0.375rem;
    right: -0.375rem;
    left: auto;
    bottom: auto;
}

.flare-badge--top-right .flare-badge__indicator--dot {
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
}

.flare-badge--top-left .flare-badge__indicator {
    top: -0.375rem;
    left: -0.375rem;
    right: auto;
    bottom: auto;
}

.flare-badge--top-left .flare-badge__indicator--dot {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
}

.flare-badge--bottom-right .flare-badge__indicator {
    bottom: -0.375rem;
    right: -0.375rem;
    top: auto;
    left: auto;
}

.flare-badge--bottom-right .flare-badge__indicator--dot {
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
}

.flare-badge--bottom-left .flare-badge__indicator {
    bottom: -0.375rem;
    left: -0.375rem;
    top: auto;
    right: auto;
}

.flare-badge--bottom-left .flare-badge__indicator--dot {
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
}

.flare-badge--standalone {
    vertical-align: middle;
}

.flare-badge--standalone .flare-badge__indicator {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    height: auto;
    min-width: 0;
    padding: 0.1rem var(--flare-spacing-4);
}

/* ---- button.css ---- */
.flare-btn--full { display: flex; width: 100%; }

.flare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    outline: 3px solid transparent;
    outline-offset: var(--flare-btn-focus-outline-offset);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    vertical-align: middle;

    appearance: none;
    text-align: center;
    padding-block: 0;

    height: var(--_flare-btn-height, var(--flare-btn-height-md));
    padding-inline: var(--_flare-btn-padding-inline, var(--flare-btn-padding-inline-md));

    gap: var(--flare-btn-gap-md);

    border-top-left-radius: var(--flare-btn-radius-md-top-left);
    border-top-right-radius: var(--flare-btn-radius-md-top-right);
    border-bottom-right-radius: var(--flare-btn-radius-md-bottom-right);
    border-bottom-left-radius: var(--flare-btn-radius-md-bottom-left);

    font-family: var(--flare-btn-label-md-font);
    font-weight: var(--flare-btn-label-md-weight);
    font-size: var(--flare-btn-label-md-size);
    line-height: var(--flare-btn-label-md-height);
    letter-spacing: var(--flare-btn-label-md-spacing);

    --_morph-duration: var(--flare-shape-morph-duration);
    transition: box-shadow var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard), background-color var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard), border-color var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard), color var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard), border-radius var(--_morph-duration) var(--flare-shape-morph-easing);

    border: var(--_flare-btn-outline-width, var(--flare-btn-outline-width-md)) solid transparent;
}

    .flare-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;

        background: transparent;
        opacity: 0;
        transition: opacity var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard);
        pointer-events: none;
    }

    .flare-btn:hover::before {
        background: var(--flare-state-hover-layer);
        opacity: 1;
    }

    .flare-btn:focus-visible::before {
        background: var(--flare-state-focus-layer);
        opacity: 1;
    }

    .flare-btn:hover:focus-visible:not(:active)::before {
        background: var(--flare-state-focus-hover-layer);
        opacity: 1;
    }

    .flare-btn:active::before {
        background: var(--flare-state-pressed-layer);
        opacity: 1;
        transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
    }

    .flare-btn:active {
        --_morph-duration: var(--flare-motion-duration-short2);
    }

    .flare-btn:focus-visible {
        outline: var(--flare-btn-focus-outline);
        outline-offset: var(--flare-btn-focus-outline-offset);
        box-shadow: var(--flare-btn-focus-shadow);
    }

.flare-btn--filled {
    background-color: var(--fc-main, var(--flare-color-primary));
    color: var(--fc-on, var(--flare-color-on-primary));
    box-shadow: var(--flare-elevation-0);
}

    .flare-btn--filled:hover {
        box-shadow: var(--flare-btn-filled-hover-shadow);
    }

.flare-btn--outlined {
    background-color: transparent;

    color: var(--fc-main, var(--flare-color-on-surface-variant));
    border-color: var(--fc-main, var(--flare-color-outline-variant));
}

.flare-btn--text {
    background-color: transparent;
    color: var(--fc-main, var(--flare-color-primary));
}

.flare-btn.flare-btn--text {
    --_flare-btn-padding-inline: var(--_flare-btn-text-padding-inline);
}

.flare-btn--elevated {
    background-color: var(--flare-color-surface-container-low);
    color: var(--fc-main, var(--flare-color-primary));
    box-shadow: var(--flare-elevation-1);
}

    .flare-btn--elevated:hover {
        box-shadow: var(--flare-elevation-2);
    }

.flare-btn--tonal {
    background-color: var(--fc-container, var(--flare-color-secondary-container));
    color: var(--fc-on-container, var(--flare-color-on-secondary-container));
    box-shadow: var(--flare-elevation-0);
}

.flare-btn:disabled, .flare-btn[disabled] {
    pointer-events: none;
    opacity: var(--flare-btn-disabled-opacity);
    box-shadow: var(--flare-elevation-0) !important;
}
.flare-btn:disabled::before, .flare-btn[disabled]::before {
    background: var(--flare-btn-disabled-layer);
    opacity: 1;
}

.flare-edge-start { margin-inline-start: calc(var(--flare-spacing-12) * -1); }
.flare-edge-end   { margin-inline-end:   calc(var(--flare-spacing-12) * -1); }

.flare-btn--xs {
    --_flare-btn-outline-width: var(--flare-btn-outline-width-xs);
    gap: var(--flare-btn-gap-xs);
    --_flare-btn-height: var(--flare-btn-height-xs);
    --_flare-btn-padding-inline: var(--flare-btn-padding-inline-xs);
    --_flare-btn-text-padding-inline: var(--flare-btn-text-padding-inline-xs);
    --_flare-icon-size: var(--flare-btn-icon-size-xs);
    border-top-left-radius: var(--flare-btn-radius-xs-top-left);
    border-top-right-radius: var(--flare-btn-radius-xs-top-right);
    border-bottom-right-radius: var(--flare-btn-radius-xs-bottom-right);
    border-bottom-left-radius: var(--flare-btn-radius-xs-bottom-left);
    font-family: var(--flare-btn-label-xs-font);
    font-weight: var(--flare-btn-label-xs-weight);
    font-size: var(--flare-btn-label-xs-size);
    line-height: var(--flare-btn-label-xs-height);
    letter-spacing: var(--flare-btn-label-xs-spacing);
}

.flare-btn--sm {
    --_flare-btn-outline-width: var(--flare-btn-outline-width-sm);
    gap: var(--flare-btn-gap-sm);
    --_flare-btn-height: var(--flare-btn-height-sm);
    --_flare-btn-padding-inline: var(--flare-btn-padding-inline-sm);
    --_flare-btn-text-padding-inline: var(--flare-btn-text-padding-inline-sm);
    --_flare-icon-size: var(--flare-btn-icon-size-sm);
    border-top-left-radius: var(--flare-btn-radius-sm-top-left);
    border-top-right-radius: var(--flare-btn-radius-sm-top-right);
    border-bottom-right-radius: var(--flare-btn-radius-sm-bottom-right);
    border-bottom-left-radius: var(--flare-btn-radius-sm-bottom-left);
    font-family: var(--flare-btn-label-sm-font);
    font-weight: var(--flare-btn-label-sm-weight);
    font-size: var(--flare-btn-label-sm-size);
    line-height: var(--flare-btn-label-sm-height);
    letter-spacing: var(--flare-btn-label-sm-spacing);
}

.flare-btn--md {
    --_flare-btn-outline-width: var(--flare-btn-outline-width-md);
    gap: var(--flare-btn-gap-md);
    --_flare-btn-height: var(--flare-btn-height-md);
    --_flare-btn-padding-inline: var(--flare-btn-padding-inline-md);
    --_flare-btn-text-padding-inline: var(--flare-btn-text-padding-inline-md);
    --_flare-icon-size: var(--flare-btn-icon-size-md);
    border-top-left-radius: var(--flare-btn-radius-md-top-left);
    border-top-right-radius: var(--flare-btn-radius-md-top-right);
    border-bottom-right-radius: var(--flare-btn-radius-md-bottom-right);
    border-bottom-left-radius: var(--flare-btn-radius-md-bottom-left);
    font-family: var(--flare-btn-label-md-font);
    font-weight: var(--flare-btn-label-md-weight);
    font-size: var(--flare-btn-label-md-size);
    line-height: var(--flare-btn-label-md-height);
    letter-spacing: var(--flare-btn-label-md-spacing);
}

.flare-btn--lg {
    --_flare-btn-outline-width: var(--flare-btn-outline-width-lg);
    gap: var(--flare-btn-gap-lg);
    --_flare-btn-height: var(--flare-btn-height-lg);
    --_flare-btn-padding-inline: var(--flare-btn-padding-inline-lg);
    --_flare-btn-text-padding-inline: var(--flare-btn-text-padding-inline-lg);
    --_flare-icon-size: var(--flare-btn-icon-size-lg);
    border-top-left-radius: var(--flare-btn-radius-lg-top-left);
    border-top-right-radius: var(--flare-btn-radius-lg-top-right);
    border-bottom-right-radius: var(--flare-btn-radius-lg-bottom-right);
    border-bottom-left-radius: var(--flare-btn-radius-lg-bottom-left);
    font-family: var(--flare-btn-label-lg-font);
    font-weight: var(--flare-btn-label-lg-weight);
    font-size: var(--flare-btn-label-lg-size);
    line-height: var(--flare-btn-label-lg-height);
    letter-spacing: var(--flare-btn-label-lg-spacing);
}

.flare-btn--xl {
    --_flare-btn-outline-width: var(--flare-btn-outline-width-xl);
    gap: var(--flare-btn-gap-xl);
    --_flare-btn-height: var(--flare-btn-height-xl);
    --_flare-btn-padding-inline: var(--flare-btn-padding-inline-xl);
    --_flare-btn-text-padding-inline: var(--flare-btn-text-padding-inline-xl);
    --_flare-icon-size: var(--flare-btn-icon-size-xl);
    border-top-left-radius: var(--flare-btn-radius-xl-top-left);
    border-top-right-radius: var(--flare-btn-radius-xl-top-right);
    border-bottom-right-radius: var(--flare-btn-radius-xl-bottom-right);
    border-bottom-left-radius: var(--flare-btn-radius-xl-bottom-left);
    font-family: var(--flare-btn-label-xl-font);
    font-weight: var(--flare-btn-label-xl-weight);
    font-size: var(--flare-btn-label-xl-size);
    line-height: var(--flare-btn-label-xl-height);
    letter-spacing: var(--flare-btn-label-xl-spacing);
}

.flare-btn--rounded { border-radius: var(--flare-shape-large); }
.flare-btn--rounded.flare-btn--xs,
.flare-btn--rounded.flare-btn--sm { border-radius: var(--flare-shape-medium); }
.flare-btn--rounded.flare-btn--lg,
.flare-btn--rounded.flare-btn--xl { border-radius: var(--flare-shape-extra-large); }

.flare-btn--circular { border-radius: calc(var(--_flare-btn-height, var(--flare-btn-height-md)) / 2); }

.flare-btn--square { border-radius: var(--flare-shape-none); }

.flare-btn--selected {
    background-color: var(--fc-container, var(--flare-btn-selected-bg));
    color: var(--fc-on-container, var(--flare-btn-selected-color));
    border-color: transparent;
    border-radius: var(--flare-btn-selected-radius-md);
}

.flare-btn--elevated.flare-btn--selected {
    background-color: var(--fc-container, var(--flare-btn-elevated-selected-bg));
    color: var(--fc-on-container, var(--flare-btn-elevated-selected-color));
}
.flare-btn--filled.flare-btn--selected {
    background-color: var(--fc-container, var(--flare-btn-filled-selected-bg));
    color: var(--fc-on-container, var(--flare-btn-filled-selected-color));
}
.flare-btn--tonal.flare-btn--selected {
    background-color: var(--fc-container, var(--flare-btn-tonal-selected-bg));
    color: var(--fc-on-container, var(--flare-btn-tonal-selected-color));
}
.flare-btn--outlined.flare-btn--selected {
    background-color: var(--fc-container, var(--flare-btn-outlined-selected-bg));
    color: var(--fc-on-container, var(--flare-btn-outlined-selected-color));
}

.flare-btn--filled[aria-pressed="false"] {
    background-color: var(--fc-main, var(--flare-btn-filled-unselected-bg));
    color: var(--fc-on, var(--flare-btn-filled-unselected-color));
}

.flare-btn--selected.flare-btn--xs { border-radius: var(--flare-btn-selected-radius-xs); }
.flare-btn--selected.flare-btn--sm { border-radius: var(--flare-btn-selected-radius-sm); }
.flare-btn--selected.flare-btn--md { border-radius: var(--flare-btn-selected-radius-md); }
.flare-btn--selected.flare-btn--lg { border-radius: var(--flare-btn-selected-radius-lg); }
.flare-btn--selected.flare-btn--xl { border-radius: var(--flare-btn-selected-radius-xl); }

.flare-btn--square.flare-btn--selected {
    border-radius: var(--flare-btn-selected-radius-square);
}

@media (prefers-reduced-motion: reduce) {
    .flare-btn { --_morph-duration: 0s; }
}

.flare-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_flare-icon-size, 1.125rem);
    height: var(--_flare-icon-size, 1.125rem);
    flex-shrink: 0;
}

.flare-btn .flare-icon {
    color: inherit;
}

.flare-btn__label {
    white-space: nowrap;
}

.flare-btn__label,
.flare-btn__icon {
    position: relative;
}

.flare-btn__icon--leading {
    margin-inline-start: calc(-1 * var(--flare-spacing-2));
}
.flare-btn__icon--trailing {
    margin-inline-end: calc(-1 * var(--flare-spacing-2));
}

.flare-btn--icon-only {
    --_flare-btn-padding-inline: 0;
    padding-inline: 0;
    gap: 0;
    width: var(--_flare-btn-height, var(--flare-btn-height-md));
    aspect-ratio: 1 / 1;
}

.flare-btn--icon-only .flare-btn__icon--leading,
.flare-btn--icon-only .flare-btn__icon--trailing {
    margin-inline: 0;
}

.flare-btn--loading {
    cursor: not-allowed;
    opacity: var(--flare-btn-loading-opacity);
}

.flare-btn__spinner {
    width: var(--_flare-icon-size, 1.125rem);
    height: var(--_flare-icon-size, 1.125rem);
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: flare-spin 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes flare-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- buttongroup.css ---- */
.flare-btn-group {
    display: inline-flex;
    box-sizing: border-box;
    max-inline-size: 100%;
}

.flare-btn-group--standard {
    flex-wrap: wrap;
}

.flare-btn-group--connected {
    overflow-x: auto;
}

.flare-btn-group--standard { gap: var(--flare-btn-group-standard-gap-md); }
.flare-btn-group--standard:has(> .flare-btn--xs) { gap: var(--flare-btn-group-standard-gap-xs); }
.flare-btn-group--standard:has(> .flare-btn--sm) { gap: var(--flare-btn-group-standard-gap-sm); }
.flare-btn-group--standard:has(> .flare-btn--md) { gap: var(--flare-btn-group-standard-gap-md); }
.flare-btn-group--standard:has(> .flare-btn--lg) { gap: var(--flare-btn-group-standard-gap-lg); }
.flare-btn-group--standard:has(> .flare-btn--xl) { gap: var(--flare-btn-group-standard-gap-xl); }

.flare-btn-group--connected { gap: var(--flare-btn-group-connected-gap); }

.flare-btn-group--full {
    display: flex;
    width: 100%;
}

.flare-btn-group--standard > .flare-btn {
    flex: 0 0 auto;
}
.flare-btn-group--connected.flare-btn-group--full > .flare-btn {
    flex: 1 1 0;
    min-width: 0;
}

.flare-btn-group--connected:not(.flare-btn-group--vertical) > .flare-btn:not(:first-child) {
    margin-inline-start: var(--flare-btn-group-connected-overlap);
}
.flare-btn-group--connected.flare-btn-group--vertical > .flare-btn:not(:first-child) {
    margin-block-start: var(--flare-btn-group-connected-overlap);
}

.flare-btn-group--vertical {
    flex-direction: column;
}

.flare-btn-group--collapsible {
    max-width: 100%;
    flex-wrap: nowrap;
}

.flare-btn-group [data-flare-bg-hidden] {
    display: none;
}

.flare-btn-group__more {
    flex: 0 0 auto;
}

.flare-btn-group__overflow-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--flare-btn-group-standard-gap-md);
}

.flare-btn-group > .flare-btn:hover,
.flare-btn-group > .flare-btn:focus-visible {
    z-index: var(--flare-btn-group-z-active);
}

.flare-btn-group--connected > .flare-btn { border-radius: var(--flare-btn-group-connected-inner-radius-md); }
.flare-btn-group--connected > .flare-btn--xs { border-radius: var(--flare-btn-group-connected-inner-radius-xs); }
.flare-btn-group--connected > .flare-btn--sm { border-radius: var(--flare-btn-group-connected-inner-radius-sm); }
.flare-btn-group--connected > .flare-btn--md { border-radius: var(--flare-btn-group-connected-inner-radius-md); }
.flare-btn-group--connected > .flare-btn--lg { border-radius: var(--flare-btn-group-connected-inner-radius-lg); }
.flare-btn-group--connected > .flare-btn--xl { border-radius: var(--flare-btn-group-connected-inner-radius-xl); }

.flare-btn-group--connected > .flare-btn:active { border-radius: var(--flare-btn-group-connected-pressed-radius-md); }
.flare-btn-group--connected > .flare-btn--xs:active { border-radius: var(--flare-btn-group-connected-pressed-radius-xs); }
.flare-btn-group--connected > .flare-btn--sm:active { border-radius: var(--flare-btn-group-connected-pressed-radius-sm); }
.flare-btn-group--connected > .flare-btn--md:active { border-radius: var(--flare-btn-group-connected-pressed-radius-md); }
.flare-btn-group--connected > .flare-btn--lg:active { border-radius: var(--flare-btn-group-connected-pressed-radius-lg); }
.flare-btn-group--connected > .flare-btn--xl:active { border-radius: var(--flare-btn-group-connected-pressed-radius-xl); }

.flare-btn-group--connected > .flare-btn--selected,
.flare-btn-group--connected > .flare-btn--selected:active {
    border-radius: var(--flare-btn-group-connected-selected-radius);
}

.flare-btn-group--connected:not(.flare-btn-group--vertical) > .flare-btn:first-child {
    border-start-start-radius: var(--flare-btn-group-connected-outer-radius);
    border-end-start-radius: var(--flare-btn-group-connected-outer-radius);
}
.flare-btn-group--connected:not(.flare-btn-group--vertical) > .flare-btn:last-child {
    border-start-end-radius: var(--flare-btn-group-connected-outer-radius);
    border-end-end-radius: var(--flare-btn-group-connected-outer-radius);
}

.flare-btn-group--connected.flare-btn-group--vertical > .flare-btn:first-child {
    border-start-start-radius: var(--flare-btn-group-connected-outer-radius);
    border-start-end-radius: var(--flare-btn-group-connected-outer-radius);
}
.flare-btn-group--connected.flare-btn-group--vertical > .flare-btn:last-child {
    border-end-start-radius: var(--flare-btn-group-connected-outer-radius);
    border-end-end-radius: var(--flare-btn-group-connected-outer-radius);
}

/* ---- fab.css ---- */
.flare-fab {
    height: auto;
    gap: var(--flare-fab-gap);
    padding: var(--flare-fab-padding-md);

    --_flare-icon-size: var(--flare-fab-icon-size-md);
    border: none;
    border-radius: var(--flare-fab-radius-md);

    background-color: var(--fc-container, var(--flare-color-primary-container));
    color: var(--fc-on-container, var(--flare-color-on-primary-container));
    box-shadow: var(--flare-fab-shadow);
    font-family: var(--flare-typescale-label-large-font);
    font-size: var(--flare-typescale-label-large-size);
    font-weight: var(--flare-typescale-label-large-weight);
}

    .flare-fab:hover {
        box-shadow: var(--flare-fab-hover-shadow);
    }

.flare-fab--sm {
    padding: var(--flare-fab-padding-sm);
    --_flare-icon-size: var(--flare-fab-icon-size-sm);
    border-radius: var(--flare-fab-radius-sm);
}

.flare-fab--lg {
    padding: var(--flare-fab-padding-lg);
    --_flare-icon-size: var(--flare-fab-icon-size-lg);
    border-radius: var(--flare-fab-radius-lg);
}

.flare-fab--surface {
    background-color: var(--flare-color-surface-container-high);
    color: var(--flare-color-primary);
}

.flare-fab__icon {
    display: inline-flex;
    align-items: center;
}

.flare-fab__label {
    white-space: nowrap;
}

.flare-fab-anchor {
    position: fixed;
    z-index: 900;
}

.flare-fab-anchor--bottom-right {
    bottom: var(--flare-fab-anchor-offset);
    right: var(--flare-fab-anchor-offset);
}

.flare-fab-anchor--bottom-left {
    bottom: var(--flare-fab-anchor-offset);
    left: var(--flare-fab-anchor-offset);
}

/* ---- splitbutton.css ---- */
.flare-split-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--flare-split-btn-gap);
}

.flare-split-btn__menu {
    display: inline-flex;
}

.flare-split-btn--full { display: flex; width: 100%; }
.flare-split-btn--full .flare-split-btn__main.flare-btn { flex: 1 1 auto; }

.flare-split-btn .flare-menu__activator {
    display: inline-flex;
}

.flare-split-btn .flare-split-btn__main.flare-btn {
    border-top-left-radius: var(--flare-split-btn-main-radius-md-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-main-radius-md-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-main-radius-md-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-main-radius-md-bottom-left) !important;
}

.flare-split-btn .flare-split-btn__trigger.flare-btn {
    border-top-left-radius: var(--flare-split-btn-trigger-radius-md-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-trigger-radius-md-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-trigger-radius-md-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-trigger-radius-md-bottom-left) !important;

    width: var(--_trigger-width, var(--flare-split-btn-trigger-width-md));
    aspect-ratio: 1;
    padding-inline: 0 !important;
}

.flare-split-btn .flare-split-btn__main:hover,
.flare-split-btn .flare-split-btn__main:focus-visible,
.flare-split-btn .flare-split-btn__trigger:hover,
.flare-split-btn .flare-split-btn__trigger:focus-visible {
    z-index: 1;
}

.flare-icon.flare-split-btn__caret {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--_caret-size, var(--flare-split-btn-caret-size-md));
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: transform var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-split-btn--open .flare-split-btn__caret {
    transform: rotate(180deg);
}

.flare-split-btn--xs { --_caret-size: var(--flare-split-btn-caret-size-xs); --_trigger-width: var(--flare-split-btn-trigger-width-xs); }
.flare-split-btn--xs .flare-split-btn__main.flare-btn {
    border-top-left-radius: var(--flare-split-btn-main-radius-xs-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-main-radius-xs-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-main-radius-xs-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-main-radius-xs-bottom-left) !important;
}
.flare-split-btn--xs .flare-split-btn__trigger.flare-btn {
    border-top-left-radius: var(--flare-split-btn-trigger-radius-xs-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-trigger-radius-xs-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-trigger-radius-xs-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-trigger-radius-xs-bottom-left) !important;
}

.flare-split-btn--sm { --_caret-size: var(--flare-split-btn-caret-size-sm); --_trigger-width: var(--flare-split-btn-trigger-width-sm); }
.flare-split-btn--sm .flare-split-btn__main.flare-btn {
    border-top-left-radius: var(--flare-split-btn-main-radius-sm-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-main-radius-sm-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-main-radius-sm-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-main-radius-sm-bottom-left) !important;
}
.flare-split-btn--sm .flare-split-btn__trigger.flare-btn {
    border-top-left-radius: var(--flare-split-btn-trigger-radius-sm-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-trigger-radius-sm-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-trigger-radius-sm-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-trigger-radius-sm-bottom-left) !important;
}

.flare-split-btn--md { --_caret-size: var(--flare-split-btn-caret-size-md); --_trigger-width: var(--flare-split-btn-trigger-width-md); }

.flare-split-btn--lg { --_caret-size: var(--flare-split-btn-caret-size-lg); --_trigger-width: var(--flare-split-btn-trigger-width-lg); }
.flare-split-btn--lg .flare-split-btn__main.flare-btn {
    border-top-left-radius: var(--flare-split-btn-main-radius-lg-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-main-radius-lg-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-main-radius-lg-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-main-radius-lg-bottom-left) !important;
}
.flare-split-btn--lg .flare-split-btn__trigger.flare-btn {
    border-top-left-radius: var(--flare-split-btn-trigger-radius-lg-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-trigger-radius-lg-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-trigger-radius-lg-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-trigger-radius-lg-bottom-left) !important;
}

.flare-split-btn--xl { --_caret-size: var(--flare-split-btn-caret-size-xl); --_trigger-width: var(--flare-split-btn-trigger-width-xl); }
.flare-split-btn--xl .flare-split-btn__main.flare-btn {
    border-top-left-radius: var(--flare-split-btn-main-radius-xl-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-main-radius-xl-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-main-radius-xl-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-main-radius-xl-bottom-left) !important;
}
.flare-split-btn--xl .flare-split-btn__trigger.flare-btn {
    border-top-left-radius: var(--flare-split-btn-trigger-radius-xl-top-left) !important;
    border-top-right-radius: var(--flare-split-btn-trigger-radius-xl-top-right) !important;
    border-bottom-right-radius: var(--flare-split-btn-trigger-radius-xl-bottom-right) !important;
    border-bottom-left-radius: var(--flare-split-btn-trigger-radius-xl-bottom-left) !important;
}

/* ---- checkbox.css ---- */
.flare-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--flare-spacing-6);
    cursor: pointer;
    user-select: none;

    --_cb-size: var(--flare-checkbox-size);
}

.flare-checkbox--label-start { flex-direction: row-reverse; }

.flare-checkbox__container {
    position: relative;
    width: var(--_cb-size);
    height: var(--_cb-size);
    flex-shrink: 0;
}

.flare-checkbox__container::before {
    content: '';
    position: absolute;
    inset: -0.6875rem;
    border-radius: 50%;
    background: transparent;
    transition: background var(--flare-motion-duration-short1) ease;
    pointer-events: none;
}

.flare-checkbox:not(.flare-checkbox--disabled):hover .flare-checkbox__container::before {
    background: var(--flare-checkbox-state-layer-hover);
}

.flare-checkbox:not(.flare-checkbox--disabled):has(.flare-checkbox__input:checked):hover .flare-checkbox__container::before {
    background: var(--flare-checkbox-state-layer-hover-checked);
}

.flare-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.flare-checkbox__indicator {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: var(--_cb-size);
    height: var(--_cb-size);

    border-radius: var(--flare-checkbox-radius);

    border: var(--flare-checkbox-border-width) solid var(--flare-color-on-surface-variant);
    background-color: transparent;
    transition:
        background-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
        border-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-checkbox__input:checked + .flare-checkbox__indicator {
    background-color: var(--fc-main, var(--flare-color-primary));
    border-color: var(--fc-main, var(--flare-color-primary));
}

.flare-checkbox__input:checked + .flare-checkbox__indicator:not(.flare-checkbox__indicator--indeterminate)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--_cb-size) * 0.28);
    height: calc(var(--_cb-size) * 0.5);
    border-style: solid;
    border-color: var(--flare-color-on-primary);
    border-width: 0 2px 2px 0;

    transform: translate(-50%, -60%) rotate(45deg);
}

.flare-checkbox__indicator--indeterminate {
    background-color: var(--flare-color-primary);
    border-color: var(--flare-color-primary);
}

.flare-checkbox__indicator--indeterminate::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--_cb-size) * 0.5);
    height: 2px;
    background: var(--flare-color-on-primary);
    transform: translate(-50%, -50%);
}

.flare-checkbox__input:focus-visible + .flare-checkbox__indicator {
    outline: var(--flare-checkbox-focus-outline);
    outline-offset: var(--flare-checkbox-focus-outline-offset);
    box-shadow: var(--flare-checkbox-focus-shadow);
}

.flare-checkbox__label,
.flare-radio__label,
.flare-switch__label,
.flare-file-upload__primary {
    font-family: var(--flare-typescale-body-large-font);
    font-size: var(--flare-typescale-body-large-size);
    color: var(--flare-color-on-surface);
}

.flare-checkbox__error {
    font-size: var(--flare-typescale-body-small-size);
    color: var(--flare-color-error);
}

.flare-checkbox--disabled { opacity: var(--flare-checkbox-disabled-opacity); pointer-events: none; }

.flare-checkbox--xs { --_cb-size: 0.875rem; gap: var(--flare-spacing-4); }
.flare-checkbox--xs .flare-checkbox__label { font-size: var(--flare-typescale-body-small-size); }
.flare-checkbox--sm { --_cb-size: 1rem; gap: var(--flare-spacing-5); }
.flare-checkbox--sm .flare-checkbox__label { font-size: var(--flare-typescale-body-medium-size); }
.flare-checkbox--lg { --_cb-size: 1.375rem; }
.flare-checkbox--lg .flare-checkbox__label { font-size: var(--flare-typescale-title-medium-size); }
.flare-checkbox--xl { --_cb-size: 1.625rem; }
.flare-checkbox--xl .flare-checkbox__label { font-size: var(--flare-typescale-title-large-size); }

.flare-checkbox--error .flare-checkbox__indicator {
    border-color: var(--flare-color-error);
}
.flare-checkbox--error .flare-checkbox__input:checked + .flare-checkbox__indicator {
    background-color: var(--flare-color-error);
    border-color: var(--flare-color-error);
}

.flare-checkbox--custom-icon .flare-checkbox__indicator {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--flare-color-on-surface-variant);
    font-size: 1.125rem;
}
.flare-checkbox--custom-icon .flare-checkbox__input:checked + .flare-checkbox__indicator {
    background: transparent;
    color: var(--fc-main, var(--flare-color-primary));
}
.flare-checkbox--custom-icon .flare-checkbox__indicator::after {
    content: none !important;
}
.flare-checkbox--custom-icon .flare-checkbox__indicator .flare-icon,
.flare-checkbox--custom-icon .flare-checkbox__indicator .flare-icon {
    font-size: 1.125rem;
    width: 1em;
    height: 1em;
}

/* ---- chip.css ---- */
.flare-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--flare-spacing-4);

    padding: 0 var(--flare-chip-padding-inline-md);
    box-sizing: border-box;
    min-height: var(--flare-chip-height);
    border-radius: var(--flare-chip-radius);

    border: var(--flare-border-width) var(--flare-border-style) var(--fc-main, var(--flare-color-outline));
    background-color: transparent;
    color: var(--fc-main, var(--flare-color-on-surface-variant));
    font-family: var(--flare-typescale-label-large-font);
    font-size: var(--flare-typescale-label-large-size);
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
    transition:
        background-color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard),
        border-color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);

    --_flare-icon-size: var(--flare-chip-icon-size-md);
}

.flare-chip__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--flare-chip-avatar-size-md);
    height: var(--flare-chip-avatar-size-md);
    margin-left: -0.5rem;
    border-radius: var(--flare-shape-full);
    overflow: hidden;
    flex-shrink: 0;
}
.flare-chip__avatar img { width: 100%; height: 100%; object-fit: cover; }

.flare-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--_flare-icon-size);
    height: var(--_flare-icon-size);
    font-size: var(--_flare-icon-size);
}
.flare-chip__icon--leading { color: var(--flare-color-primary); }
.flare-chip--selected .flare-chip__icon--leading { color: inherit; }

.flare-chip--elevated {
    background-color: var(--flare-chip-elevated-bg);
    border-color: transparent;
    box-shadow: var(--flare-elevation-1);
}
.flare-chip--elevated:hover { box-shadow: var(--flare-elevation-2); }

.flare-chip--filled {
    background-color: var(--flare-chip-filled-bg);
    border-color: transparent;
}

.flare-chip--outlined {
    background-color: transparent;
    border: var(--flare-border-width) var(--flare-border-style) var(--fc-main, var(--flare-color-outline));
}

.flare-chip--xs { padding: var(--flare-spacing-1) var(--flare-chip-padding-inline-xs); font-size: var(--flare-typescale-label-small-size); gap: var(--flare-spacing-2); --_flare-icon-size: var(--flare-chip-icon-size-xs); }
.flare-chip--xs .flare-chip__avatar { width: var(--flare-chip-avatar-size-xs); height: var(--flare-chip-avatar-size-xs); }
.flare-chip--sm { padding: var(--flare-spacing-2) var(--flare-chip-padding-inline-sm); font-size: var(--flare-typescale-label-small-size); gap: var(--flare-spacing-3); --_flare-icon-size: var(--flare-chip-icon-size-sm); }
.flare-chip--sm .flare-chip__avatar { width: var(--flare-chip-avatar-size-sm); height: var(--flare-chip-avatar-size-sm); }
.flare-chip--lg { padding: var(--flare-spacing-4) var(--flare-chip-padding-inline-lg); font-size: var(--flare-typescale-title-small-size); gap: var(--flare-spacing-5); --_flare-icon-size: var(--flare-chip-icon-size-lg); }
.flare-chip--lg .flare-chip__avatar { width: var(--flare-chip-avatar-size-lg); height: var(--flare-chip-avatar-size-lg); }
.flare-chip--xl { padding: var(--flare-spacing-5) var(--flare-chip-padding-inline-xl); font-size: var(--flare-typescale-title-medium-size); gap: var(--flare-spacing-6); --_flare-icon-size: var(--flare-chip-icon-size-xl); }
.flare-chip--xl .flare-chip__avatar { width: var(--flare-chip-avatar-size-xl); height: var(--flare-chip-avatar-size-xl); }

.flare-chip--selected {
    background-color: var(--fc-main, var(--flare-color-secondary-container));
    border-color: transparent;
    color: var(--fc-on, var(--flare-color-on-secondary-container));
}

.flare-chip__label { flex: 1; }

.flare-chip__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    margin-left: var(--flare-spacing-2);
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    color: currentColor;
    opacity: 0.7;
    font-size: var(--_flare-icon-size);
    line-height: 1;
    transition: opacity var(--flare-motion-duration-short1), background var(--flare-motion-duration-short1);
}
.flare-chip__close:hover {
    opacity: 1;
    background: var(--flare-state-hover-layer);
}

.flare-chip--disabled {
    opacity: var(--flare-state-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- chipgroup.css ---- */
.flare-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flare-spacing-4);
}

/* ---- radio.css ---- */
.flare-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--flare-spacing-6);
  cursor: pointer;
  user-select: none;

  --_rb-size: var(--flare-radio-size);
}

.flare-radio-group--label-start .flare-radio { flex-direction: row-reverse; }

.flare-radio__container {
  position: relative;
  width: var(--_rb-size);
  height: var(--_rb-size);
  flex-shrink: 0;
}

.flare-radio__container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  transition: background var(--flare-motion-duration-short1) ease;
}

.flare-radio:not(.flare-radio--disabled):hover .flare-radio__container::before {
  background: var(--flare-radio-state-layer-hover);
}

.flare-radio:not(.flare-radio--disabled):has(.flare-radio__input:checked):hover .flare-radio__container::before {
  background: var(--flare-radio-state-layer-hover-checked);
}

.flare-radio__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.flare-radio__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_rb-size);
  height: var(--_rb-size);
  border-radius: 50%;
  border: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-color-on-surface-variant);
  background: transparent;
  transition:
    border-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-radio__indicator::after {
  content: '';
  width: calc(var(--_rb-size) * 0.5);
  height: calc(var(--_rb-size) * 0.5);
  border-radius: 50%;
  background: var(--fc-main, var(--flare-color-primary));
  transform: scale(0);
  transition: transform var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-radio__input:checked + .flare-radio__indicator {
  border-color: var(--fc-main, var(--flare-color-primary));
}

.flare-radio__input:checked + .flare-radio__indicator::after {
  transform: scale(1);
}

.flare-radio__input:focus-visible + .flare-radio__indicator {
  outline: var(--flare-radio-focus-outline);
  outline-offset: var(--flare-radio-focus-outline-offset);
  box-shadow: var(--flare-radio-focus-shadow);
}

.flare-radio--disabled {
  opacity: var(--flare-radio-disabled-opacity);
  pointer-events: none;
}

.flare-radio--xs { --_rb-size: 1rem; gap: var(--flare-spacing-4); }
.flare-radio--xs .flare-radio__label { font-size: var(--flare-typescale-body-small-size); }
.flare-radio--sm { --_rb-size: 1.125rem; gap: var(--flare-spacing-5); }
.flare-radio--sm .flare-radio__label { font-size: var(--flare-typescale-body-medium-size); }
.flare-radio--lg { --_rb-size: 1.5rem; }
.flare-radio--lg .flare-radio__label { font-size: var(--flare-typescale-title-medium-size); }
.flare-radio--xl { --_rb-size: 1.75rem; }
.flare-radio--xl .flare-radio__label { font-size: var(--flare-typescale-title-large-size); }

/* ---- radiogroup.css ---- */
.flare-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-4);
  border: none;
  margin: 0;
  padding: 0;
}

.flare-radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--flare-spacing-8);
  align-items: center;
}

.flare-radio-group__legend {
  font-family: var(--flare-typescale-label-medium-font);
  font-size: var(--flare-typescale-label-medium-size);
  color: var(--flare-color-on-surface-variant);
  margin-bottom: var(--flare-spacing-2);
  padding: 0;
  float: left;
  width: 100%;
}

.flare-radio-group__error {
  font-size: var(--flare-typescale-body-small-size);
  color: var(--flare-color-error);
}

/* ---- fill.css ---- */
.flare-fill {
  flex: 1 1 0;
  block-size: 100%;
  min-block-size: 0;
}

/* ---- stack.css ---- */
.flare-stack {
    display: flex;
    align-items: center;
}

.flare-stack--row {
    flex-direction: row;
}

.flare-stack--column {
    flex-direction: column;
    align-items: stretch;
}

.flare-stack--row-reverse {
    flex-direction: row-reverse;
}

.flare-stack--column-reverse {
    flex-direction: column-reverse;
    align-items: stretch;
}

.flare-stack--wrap { flex-wrap: wrap; }

.flare-stack--stretch > * { flex: 1 1 0; min-width: 0; min-height: 0; }

.flare-stack--stretch-first > :first-child { flex: 1 1 auto; min-width: 0; min-height: 0; }

.flare-stack--stretch-last > :last-child { flex: 1 1 auto; min-width: 0; min-height: 0; }

.flare-stack--gap-none     { gap: 0; }
.flare-stack--gap-xxsmall  { gap: var(--flare-spacing-2); }
.flare-stack--gap-xsmall   { gap: var(--flare-spacing-4); }
.flare-stack--gap-small    { gap: var(--flare-spacing-6); }
.flare-stack--gap-medium   { gap: var(--flare-spacing-8); }
.flare-stack--gap-large    { gap: var(--flare-spacing-12); }
.flare-stack--gap-xlarge   { gap: var(--flare-spacing-16); }

.flare-stack--align-stretch  { align-items: stretch; }
.flare-stack--align-center   { align-items: center; }
.flare-stack--align-start    { align-items: flex-start; }
.flare-stack--align-end      { align-items: flex-end; }
.flare-stack--align-baseline { align-items: baseline; }

.flare-stack--justify-start         { justify-content: flex-start; }
.flare-stack--justify-end           { justify-content: flex-end; }
.flare-stack--justify-center        { justify-content: center; }
.flare-stack--justify-space-between { justify-content: space-between; }
.flare-stack--justify-space-around  { justify-content: space-around; }
.flare-stack--justify-space-evenly  { justify-content: space-evenly; }

.flare-spacer { flex: 1 1 auto; }

/* ---- menu.css ---- */
.flare-menu {
    position: relative;
    display: inline-block;
}

.flare-menu__activator {
    display: inline-flex;
}

.flare-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
}

.flare-menu__panel {
    position: absolute;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--flare-menu-item-gap-between);
    min-width: var(--flare-menu-panel-min-width);
    background: var(--flare-menu-panel-bg);
    border-radius: var(--flare-menu-panel-radius);
    box-shadow: var(--flare-menu-panel-shadow);
    padding: var(--flare-menu-panel-padding-block) var(--flare-menu-panel-padding-inline);
    animation: var(--flare-menu-panel-enter-animation) var(--flare-motion-duration-short2) var(--flare-motion-easing-decelerate);
}

.flare-menu__panel[role="menu"]:focus-visible {
    outline: none;
}

.flare-menu__panel:has(.flare-menu-group) {
    background: var(--flare-menu-grouped-panel-bg);
    box-shadow: var(--flare-menu-grouped-panel-shadow);
}

.flare-menu-group { box-shadow: var(--flare-menu-group-shadow); }

@keyframes flare-menu-in {
    from { opacity: 0; transform: scale(0.95) translateY(-0.25rem); }
    to   { opacity: 1; transform: scale(1)    translateY(0);         }
}

@keyframes flare-menu-in-fade {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to   { opacity: 1; transform: translateY(0);         }
}

.flare-menu__panel--bottom-left,
.flare-menu__panel--bottom-right,
.flare-menu__panel--top-left,
.flare-menu__panel--top-right { top: calc(100% + 0.25rem); left: 0; }

.flare-menu__panel--bottom-left  { transform-origin: top left; }
.flare-menu__panel--bottom-right { transform-origin: top right; }
.flare-menu__panel--top-left     { transform-origin: bottom left; }
.flare-menu__panel--top-right    { transform-origin: bottom right; }

.flare-menu__panel--at-cursor { position: fixed; transform-origin: top left; }

.flare-menu__panel--scroll { overflow-y: auto; }

.flare-submenu {
    position: relative;
}

.flare-submenu__activator {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-4);
    width: 100%;
}

.flare-icon.flare-submenu__icon {
    margin-left: auto;
    font-size: var(--flare-menu-item-icon-size);
    color: var(--flare-color-on-surface-variant);
    transition: transform var(--flare-motion-duration-short2);
}

.flare-submenu:hover > .flare-submenu__activator .flare-submenu__icon,
.flare-submenu[aria-expanded="true"] > .flare-submenu__activator .flare-submenu__icon {
    transform: rotate(90deg);
}

.flare-submenu__panel {
    position: absolute;
    z-index: 201;
    min-width: var(--flare-menu-panel-min-width);
    background: var(--flare-menu-panel-bg);
    border-radius: var(--flare-menu-panel-radius);
    box-shadow: var(--flare-menu-panel-shadow);
    padding: var(--flare-menu-panel-padding-block) var(--flare-menu-panel-padding-inline);
}

.flare-submenu__panel--end {
    top: 0;
    left: calc(100% + 0.25rem);
}

.flare-submenu__panel--start {
    top: 0;
    left: 0;
}

.flare-submenu__panel--bottom {
    top: calc(100% + 0.25rem);
    left: 0;
}

.flare-submenu__panel--top {
    top: 0;
    left: 0;
}

/* ---- menugroup.css ---- */
.flare-menu-group {
    display: flex;
    flex-direction: column;
    gap: var(--flare-menu-item-gap-between);
    padding: var(--flare-menu-group-padding);
    border-radius: var(--flare-menu-group-radius);

    background: var(--flare-menu-group-bg);
}

.flare-menu-group__label {
    padding: var(--flare-menu-item-padding-block) var(--flare-menu-item-padding-inline);
    font-family: var(--flare-typescale-title-small-font);
    font-weight: var(--flare-typescale-title-small-weight);
    font-size: var(--flare-typescale-title-small-size);
    line-height: var(--flare-typescale-title-small-height);
    letter-spacing: var(--flare-typescale-title-small-spacing);
    color: var(--flare-color-on-surface-variant);
}

.flare-menu-group + .flare-menu-group {
    margin-top: var(--flare-menu-group-gap);
    border-top: var(--flare-menu-group-divider);
}

.flare-menu-group .flare-menu-item:first-child,
.flare-menu-group .flare-menu-item:last-child {
    border-radius: var(--flare-menu-item-radius);
}

/* ---- menuitem.css ---- */
.flare-menu--dense .flare-menu-item {
    --flare-menu-item-padding-block: var(--flare-menu-item-padding-block-dense);
    --flare-menu-item-gap: var(--flare-menu-item-gap-dense);
    font-size: var(--flare-typescale-body-medium-size);
}

.flare-menu-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--flare-menu-item-gap);
    width: 100%;
    box-sizing: border-box;
    min-height: var(--flare-menu-item-height);
    padding: var(--flare-menu-item-padding-block) var(--flare-menu-item-padding-inline);
    background: transparent;
    border: none;
    border-radius: var(--flare-menu-item-radius);
    text-align: left;
    text-decoration: none;
    font-family: var(--flare-menu-item-label-font);
    font-weight: var(--flare-menu-item-label-weight);
    font-size: var(--flare-menu-item-label-size);
    line-height: var(--flare-menu-item-label-height);
    letter-spacing: var(--flare-menu-item-label-spacing);
    color: var(--flare-color-on-surface);
    cursor: pointer;
}

.flare-menu-item:first-child {
    border-top-left-radius: var(--flare-menu-item-radius-end);
    border-top-right-radius: var(--flare-menu-item-radius-end);
}

.flare-menu-item:last-child {
    border-bottom-left-radius: var(--flare-menu-item-radius-end);
    border-bottom-right-radius: var(--flare-menu-item-radius-end);
}

.flare-menu-item::before {
    content: '';
    position: absolute;
    inset: 0;

    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-menu-item:hover:not(:disabled)::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-menu-item:focus-visible:not(:disabled)::before,
.flare-menu-item--focused:not(:disabled)::before {
    background: var(--flare-state-focus-layer);
    opacity: 1;
}

.flare-menu-item:hover:focus-visible:not(:disabled):not(:active)::before,
.flare-menu-item:hover.flare-menu-item--focused:not(:disabled):not(:active)::before {
    background: var(--flare-state-focus-hover-layer);
    opacity: 1;
}

.flare-menu-item:active:not(:disabled)::before {
    background: var(--flare-state-pressed-layer);
    opacity: 1;
}

.flare-menu-item:focus-visible,
.flare-menu-item--focused {
    outline: var(--flare-menu-item-focus-ring-thickness) solid var(--flare-menu-item-focus-ring-color);
    outline-offset: var(--flare-menu-item-focus-ring-offset);
}

.flare-icon.flare-menu-item__icon {
    font-size: var(--flare-menu-item-icon-size);

    color: var(--fc-main, var(--flare-color-on-surface-variant));
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
}

.flare-menu-item__label,
.flare-icon.flare-menu-item__icon {
    position: relative;
}

.flare-menu-item__label {
    flex: 1;
}

.flare-menu-item--disabled,
.flare-menu-item:disabled {
    opacity: var(--flare-menu-item-disabled-opacity);
    cursor: not-allowed;
}

/* ---- tab.css ---- */
.flare-tabs__panel {
  animation: flare-tab-fade var(--flare-motion-duration-short2) var(--flare-motion-easing-decelerate);
}

.flare-tab-panel--hidden {
  display: none;
}

@keyframes flare-tab-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- tabs.css ---- */
.flare-tabs {
  display: flex;
  flex-direction: column;

  max-inline-size: 100%;
}

.flare-tabs__bar-wrap {
  display: flex;
  align-items: stretch;
  border-bottom: var(--flare-border-width) var(--flare-border-style) var(--flare-tabs-divider-color);

  flex-wrap: wrap;
}

.flare-tabs__header-start,
.flare-tabs__header-end {

  flex: 0 1 auto;
  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--flare-spacing-2);
  padding: var(--flare-spacing-2);
}

.flare-tabs__bar {
  display: flex;

  flex: 1 1 12rem;

  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.flare-tabs__bar::-webkit-scrollbar { display: none; }

.flare-tabs__scroll {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  border: none;
  background: var(--flare-color-surface);
  color: var(--flare-color-on-surface-variant);
  cursor: pointer;
  transition: background var(--flare-motion-duration-short1),
              color var(--flare-motion-duration-short1);
}

.flare-tabs__scroll::before,
.flare-tabs__tab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-tabs__scroll:hover:not(:disabled)::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-tabs__scroll:hover:not(:disabled) { color: var(--flare-color-on-surface); }

.flare-tabs__scroll:disabled {
  opacity: var(--flare-tabs-scroll-disabled-opacity);
  cursor: default;
}

.flare-tabs__scroll > .flare-icon {
  font-size: 1.25rem;
}

.flare-tabs__scroll--prev:not(:disabled) {
  box-shadow: 4px 0 6px -4px color-mix(in srgb, var(--flare-color-shadow) var(--flare-tabs-scroll-shadow-opacity), transparent);
}
.flare-tabs__scroll--next:not(:disabled) {
  box-shadow: -4px 0 6px -4px color-mix(in srgb, var(--flare-color-shadow) var(--flare-tabs-scroll-shadow-opacity), transparent);
}

.flare-tabs--vertical .flare-tabs__bar-wrap { border-bottom: none; flex-direction: column; flex-wrap: nowrap; }

.flare-tabs__tab {

  --_flare-icon-size: var(--flare-tabs-icon-size);

  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--flare-spacing-4);

  min-block-size: var(--flare-tabs-tab-height);
  min-inline-size: var(--flare-tabs-tab-min-width);
  padding: var(--flare-spacing-6) var(--flare-tabs-tab-padding-inline);
  border: none;
  text-decoration: none;

  border-bottom: var(--flare-tabs-indicator-thickness) solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--flare-tabs-inactive-color);

  font-family: var(--flare-tabs-label-font);
  font-size: var(--flare-tabs-label-size);
  letter-spacing: var(--flare-tabs-label-spacing);
  font-weight: var(--flare-tabs-label-weight);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
              border-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-tabs__tab:hover:not(:disabled)::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-tabs__tab--active {
  color: var(--flare-tabs-active-color);
  border-bottom-color: var(--flare-tabs-active-color);
}

.flare-tabs--underline .flare-tabs__tab {
  border-bottom: var(--flare-tabs-indicator-thickness) solid transparent;
}
.flare-tabs--underline .flare-tabs__tab--active {
  border-bottom-color: var(--flare-tabs-active-color);
}

.flare-tabs--primary:not(.flare-tabs--vertical) .flare-tabs__tab { position: relative; }
.flare-tabs--primary:not(.flare-tabs--vertical) .flare-tabs__tab--active { border-bottom-color: transparent; }
.flare-tabs--primary:not(.flare-tabs--vertical) .flare-tabs__tab--active::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0;
  height: var(--flare-tabs-indicator-thickness);
  background: var(--flare-tabs-active-color);
  border-radius: var(--flare-shape-extra-small) var(--flare-shape-extra-small) 0 0;
}

.flare-tabs--secondary:not(.flare-tabs--vertical) .flare-tabs__tab {
  border-bottom: var(--flare-tabs-secondary-indicator-thickness) solid transparent;
}
.flare-tabs--secondary:not(.flare-tabs--vertical) .flare-tabs__tab--active {
  color: var(--flare-tabs-secondary-active-color);
  border-bottom-color: var(--flare-tabs-active-color);
}

.flare-tabs--text .flare-tabs__bar-wrap { border-bottom: none; }
.flare-tabs--text .flare-tabs__tab { border-bottom-color: transparent; }
.flare-tabs--text .flare-tabs__tab--active { border-bottom-color: transparent; font-weight: var(--flare-tabs-active-weight); }
.flare-tabs--text .flare-tabs__tab--active::after { display: none; }

.flare-tabs--tonal .flare-tabs__bar-wrap,
.flare-tabs--filled .flare-tabs__bar-wrap { border-bottom: none; }

.flare-tabs--tonal .flare-tabs__bar,
.flare-tabs--filled .flare-tabs__bar,
.flare-link-tabs--tonal,
.flare-link-tabs--filled {
  gap: var(--flare-spacing-2);
  padding: var(--flare-spacing-2);
  background: var(--flare-tabs-track-bg);
  border-radius: var(--flare-tabs-pill-radius);
}

.flare-tabs--tonal .flare-tabs__tab,
.flare-tabs--filled .flare-tabs__tab,
.flare-link-tabs--tonal .flare-tabs__tab,
.flare-link-tabs--filled .flare-tabs__tab {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: var(--flare-tabs-pill-radius);
}
.flare-tabs--tonal .flare-tabs__tab--active::after,
.flare-tabs--filled .flare-tabs__tab--active::after { display: none; }

.flare-tabs--tonal .flare-tabs__tab--active,
.flare-tabs--tonal .flare-tabs__tab--active:hover,
.flare-link-tabs--tonal .flare-tabs__tab--active,
.flare-link-tabs--tonal .flare-tabs__tab--active:hover {
  background: var(--flare-tabs-selected-bg);
  color: var(--flare-tabs-selected-fg);
  border-bottom-color: transparent;
}
.flare-tabs--filled .flare-tabs__tab--active,
.flare-tabs--filled .flare-tabs__tab--active:hover,
.flare-link-tabs--filled .flare-tabs__tab--active,
.flare-link-tabs--filled .flare-tabs__tab--active:hover {
  background: var(--flare-tabs-filled-bg);
  color: var(--flare-tabs-filled-fg);
  border-bottom-color: transparent;
}

.flare-tabs--outlined .flare-tabs__bar { gap: var(--flare-spacing-2); }
.flare-tabs--outlined .flare-tabs__tab {
  border: var(--flare-border-width) var(--flare-border-style) var(--flare-tabs-divider-color);
  border-radius: var(--flare-shape-small) var(--flare-shape-small) 0 0;
  margin-bottom: -1px;
}
.flare-tabs--outlined .flare-tabs__tab--active {
  border-color: var(--flare-tabs-divider-color);
  border-bottom-color: var(--flare-color-surface);
  background: var(--flare-color-surface);
}
.flare-tabs--outlined .flare-tabs__tab--active::after { display: none; }

.flare-tabs__tab:disabled,
.flare-tabs__tab--disabled {
  opacity: var(--flare-tabs-tab-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

.flare-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--flare-spacing-3);
  border-radius: var(--flare-shape-full);

  background: var(--fc-main, var(--flare-color-error));
  color: var(--fc-on, var(--flare-color-on-error));
  font-size: var(--flare-typescale-label-small-size);
  font-weight: 600;
  line-height: 1;
}

.flare-tabs__badge--dot {
  min-width: 0;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
}

.flare-tabs__tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--flare-spacing-2);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: var(--flare-tabs-close-opacity);
  transition: opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
              background var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-tabs__tab-close:hover {
  opacity: 1;
  background: var(--flare-state-hover-layer);
}

.flare-tabs__tab-close > .flare-icon {
  font-size: 1rem;
}

.flare-tabs__panels { padding-top: var(--flare-spacing-8); }

.flare-tabs--fill > .flare-tabs__panels {
  flex: 1 1 0;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
}
.flare-tabs--fill > .flare-tabs__panels > .flare-tabs__panel:not(.flare-tab-panel--hidden) {
  flex: 1 1 0;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
}

.flare-tabs--vertical { flex-direction: row; }

.flare-tabs--vertical .flare-tabs__bar {
  flex-basis: auto;
  flex-direction: column;
  border-bottom: none;
  border-right: var(--flare-border-width) var(--flare-border-style) var(--flare-tabs-divider-color);
  overflow-x: unset;
  overflow-y: auto;
  min-width: 10rem;
}

.flare-tabs--vertical .flare-tabs__tab {
  justify-content: flex-start;
  border-bottom: none;
  border-right: var(--flare-tabs-indicator-thickness) solid transparent;
  margin-bottom: 0;
  border-radius: var(--flare-shape-small) 0 0 var(--flare-shape-small);
  width: 100%;
}

.flare-tabs--vertical .flare-tabs__tab--active {
  border-right-color: var(--flare-tabs-active-color);
  background-color: var(--flare-state-selected-layer);
}

.flare-tabs--vertical .flare-tabs__panels {
  flex: 1;
  padding-top: 0;
  padding-left: var(--flare-spacing-12);
}

.flare-tabs--bottom { flex-direction: column-reverse; }
.flare-tabs--bottom .flare-tabs__bar-wrap {
  border-bottom: none;
  border-top: var(--flare-border-width) var(--flare-border-style) var(--flare-tabs-divider-color);
}
.flare-tabs--bottom .flare-tabs__tab {
  border-bottom: none;
  border-top: var(--flare-tabs-indicator-thickness) solid transparent;
}
.flare-tabs--bottom .flare-tabs__tab--active {
  border-top-color: var(--flare-tabs-active-color);
}
.flare-tabs--bottom .flare-tabs__panels { padding-top: 0; padding-bottom: var(--flare-spacing-8); }

.flare-tabs--vertical.flare-tabs--right { flex-direction: row-reverse; }
.flare-tabs--vertical.flare-tabs--right .flare-tabs__bar {
  border-right: none;
  border-left: var(--flare-border-width) var(--flare-border-style) var(--flare-tabs-divider-color);
}
.flare-tabs--vertical.flare-tabs--right .flare-tabs__tab {
  border-right: none;
  border-left: var(--flare-tabs-indicator-thickness) solid transparent;
  border-radius: 0 var(--flare-shape-small) var(--flare-shape-small) 0;
}
.flare-tabs--vertical.flare-tabs--right .flare-tabs__tab--active {
  border-left-color: var(--flare-tabs-active-color);
}
.flare-tabs--vertical.flare-tabs--right .flare-tabs__panels {
  padding-left: 0;
  padding-right: var(--flare-spacing-12);
}

.flare-tabs__label {
  display: inline-block;
  transform: rotate(var(--flare-tab-label-rotation, 0deg));
  transform-origin: center;
}

.flare-tabs--rotated .flare-tabs__tab {
  min-height: 5rem;
  align-items: center;
  justify-content: center;
}
.flare-tabs--rotated .flare-tabs__label { white-space: nowrap; }

/* ---- linktabs.css ---- */
.flare-link-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: var(--flare-border-width) var(--flare-border-style) var(--flare-tabs-divider-color);
}

.flare-link-tabs--tonal,
.flare-link-tabs--filled {
  border-bottom: none;
  width: fit-content;
}

/* ---- card.css ---- */
.flare-card {

    --_card-radius: var(--flare-card-radius);
    --_card-actions-gap: var(--flare-card-actions-gap);

    position: relative;
    border-radius: var(--_card-radius);
    overflow: hidden;
    color: var(--flare-color-on-surface);
    transition:
        box-shadow var(--flare-card-transition-duration)
                   var(--flare-card-transition-easing),
        border-color var(--flare-card-transition-duration)
                   var(--flare-card-transition-easing);
}

.flare-card:not(:has(> .flare-card__media, > .flare-card__header, > .flare-card__content, > .flare-card__footer, > .flare-card__actions)) {
    padding:
        var(--flare-card-padding-top)
        var(--flare-card-padding-right)
        var(--flare-card-padding-bottom)
        var(--flare-card-padding-left);
}

.flare-card--elevated {
    background-color: var(--flare-card-elevated-bg);
    box-shadow: var(--flare-card-elevation);
    border: none;
}

.flare-card--filled {
    background-color: var(--flare-card-filled-bg);
    box-shadow: var(--flare-card-filled-elevation);
    border: var(--flare-card-filled-border);
}

.flare-card--outlined {
    background-color: var(--flare-card-outlined-bg);
    border: var(--flare-card-outlined-border);
    box-shadow: var(--flare-card-outlined-elevation);
}

.flare-card--tonal {
    background-color: var(--flare-card-tonal-bg);
    color: var(--flare-card-tonal-color);
    box-shadow: var(--flare-card-tonal-elevation);
    border: none;
}

.flare-card--text {
    background-color: transparent;
    color: var(--flare-card-text-color);
    box-shadow: var(--flare-card-text-elevation);
    border: none;
}

.flare-card--sm {
    --_card-radius: var(--flare-shape-small);
    --_card-actions-gap: var(--flare-spacing-2);
}
.flare-card--md {
    --_card-radius: var(--flare-card-radius);
    --_card-actions-gap: var(--flare-card-actions-gap);
}
.flare-card--lg {
    --_card-radius: var(--flare-shape-large);
    --_card-actions-gap: var(--flare-spacing-6);
}

.flare-card--clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    -webkit-tap-highlight-color: transparent;
}
.flare-card--clickable:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: var(--flare-card-state-layer);
}
.flare-card--clickable:focus-visible {
    outline: 3px solid var(--flare-color-secondary);
    outline-offset: 2px;
}

.flare-card--elevated.flare-card--clickable:hover {
    box-shadow: var(--flare-card-elevation-hover);
}

.flare-card--selectable { cursor: pointer; }
.flare-card--selected {
    border: var(--flare-card-selected-border);
    background-color: var(--flare-card-selected-bg);
}

.flare-card--compact:has(> .flare-card__media) {
    display: grid;
    grid-template-columns: minmax(0, 12rem) 1fr;
    align-items: stretch;
}
.flare-card--compact:has(> .flare-card__media) > .flare-card__media {
    grid-column: 1;
    grid-row: 1 / 999;
    width: 100%;
    height: 100%;
}
.flare-card--compact:has(> .flare-card__media) > :not(.flare-card__media) {
    grid-column: 2;
}

.flare-card__media {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--flare-card-media-radius);
}
.flare-card__header {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-8);
    padding: var(--flare-card-header-padding);
}
.flare-card__header-avatar { display: inline-flex; flex-shrink: 0; }
.flare-card__header-text { flex: 1; min-width: 0; }
.flare-card__header-action { display: inline-flex; flex-shrink: 0; }
.flare-card__title {
    font-family: var(--flare-card-title-font-family);
    font-size: var(--flare-card-title-font-size);
    font-weight: var(--flare-typescale-title-medium-weight);
    color: var(--flare-card-title-color);
}
.flare-card__subtitle {
    font-family: var(--flare-card-subtitle-font-family);
    font-size: var(--flare-card-subtitle-font-size);
    color: var(--flare-card-subtitle-color);
}
.flare-card__content { padding: var(--flare-card-content-padding); }
.flare-card__header + .flare-card__content { padding-top: 0; }
.flare-card__footer {
    padding: var(--flare-card-footer-padding);
    color: var(--flare-color-on-surface-variant);
}
.flare-card__content + .flare-card__footer { padding-top: 0; }
.flare-card__actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;
    gap: var(--_card-actions-gap);
    padding: var(--flare-card-actions-padding);
}
.flare-card__actions--nowrap { flex-wrap: nowrap; }
.flare-card__actions--end { justify-content: flex-end; }
.flare-card__actions--center { justify-content: center; }
.flare-card__actions--between { justify-content: space-between; }
.flare-card__actions--reverse { flex-direction: row-reverse; }

.flare-card__actions--vertical {
    flex-direction: column;
    align-items: stretch;
}
.flare-card__actions--vertical.flare-card__actions--reverse { flex-direction: column-reverse; }

.flare-card__actions--stretch > *,
.flare-card__actions--full > * {
    flex: 1 1 0;
    min-width: 0;
}
.flare-card__actions--vertical > * { width: 100%; }

.flare-card:has(> .flare-card__actions--stack-narrow),
.flare-card:has(> .flare-card__actions--stack-compact),
.flare-card:has(> .flare-card__actions--stack-wide) {
    container-type: inline-size;
}

@container (max-width: 20rem) {
    .flare-card__actions--stack-narrow { flex-direction: column; align-items: stretch; }
    .flare-card__actions--stack-narrow > * { width: 100%; flex: 1 1 auto; }
}
@container (max-width: 30rem) {
    .flare-card__actions--stack-compact { flex-direction: column; align-items: stretch; }
    .flare-card__actions--stack-compact > * { width: 100%; flex: 1 1 auto; }
}
@container (max-width: 40rem) {
    .flare-card__actions--stack-wide { flex-direction: column; align-items: stretch; }
    .flare-card__actions--stack-wide > * { width: 100%; flex: 1 1 auto; }
}
.flare-card__content + .flare-card__actions,
.flare-card__footer + .flare-card__actions { padding-top: 0; }

.flare-card.flare-fill {
    display: flex;
    flex-direction: column;
}

.flare-card.flare-fill > .flare-card__content {
    flex: 1 1 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
}

/* ---- input.css ---- */
.flare-input,
.flare-select,
.flare-multiselect,
.flare-datepicker,
.flare-datetimepicker,
.flare-timepicker {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-2);
    position: relative;

    max-inline-size: 100%;
}

.flare-input--auto { display: inline-flex; width: auto; }

.flare-input--margin-dense  { margin-block: var(--flare-spacing-2); }
.flare-input--margin-normal { margin-block: var(--flare-spacing-4); }

.flare-input-variant--filled {
    --flare-input-bg: var(--flare-color-surface-container-highest);
    --flare-input-border-color: transparent;
    --flare-input-border-bottom-color: var(--flare-color-on-surface-variant);
    --flare-input-radius: var(--flare-shape-extra-small) var(--flare-shape-extra-small) 0 0;

    --flare-input-focus-ring: inset 0 -1px 0 0 var(--fc-main, var(--flare-color-primary));

    --flare-input-focus-outline: none;
}
.flare-input-variant--outlined {
    --flare-input-bg: transparent;
    --flare-input-border-color: var(--flare-color-outline);
    --flare-input-border-bottom-color: var(--flare-color-outline);
    --flare-input-radius: var(--flare-shape-extra-small);

    --flare-input-focus-ring: inset 0 0 0 1px var(--fc-main, var(--flare-color-primary));

    --flare-input-focus-outline: none;
}

.flare-input__label {
    font-family: var(--flare-typescale-label-medium-font);
    font-size: var(--flare-typescale-label-medium-size);
    font-weight: var(--flare-typescale-label-medium-weight);
    color: var(--flare-color-on-surface-variant);
    pointer-events: none;
}

.flare-input--required > .flare-input__label::after {
    content: ' *';
    color: var(--flare-color-error);
}

.flare-input__control-slot {}

.flare-input__field {
    --_flare-input-height: var(--flare-input-height-md);
    box-sizing: border-box;
    block-size: var(--_flare-input-height);
    display: flex;
    align-items: center;
    background-color: var(--flare-input-bg);
    background-image: none;
    border-radius: var(--flare-input-radius);

    border: 1px solid transparent;
    border-color: var(--flare-input-border-color);
    border-bottom-color: var(--flare-input-border-bottom-color);
    transition: border-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
                box-shadow var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
                background-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-input__field:hover {
    background-image: var(--flare-input-hover-state-layer);
    border-bottom-color: var(--flare-input-hover-border-bottom-color);
}

.flare-input__field:focus-within {
    box-shadow: var(--flare-input-focus-ring);
    outline: var(--flare-input-focus-outline);
    outline-offset: var(--flare-input-focus-outline-offset);
}

.flare-input--error .flare-input__field:focus-within {
    box-shadow: inset 0 0 0 1px var(--flare-color-error);
    outline: none;
}

.flare-input__control {
    flex: 1;

    min-width: 0;
    background: transparent;
    border: none;
    outline: none;

    padding: var(--flare-input-padding-md);
    font-family: var(--flare-typescale-body-large-font);
    font-size: var(--flare-typescale-body-large-size);
    color: var(--flare-color-on-surface);

    caret-color: var(--fc-main, var(--flare-color-primary));
}

.flare-input__control[type=number]::-webkit-inner-spin-button,
.flare-input__control[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.flare-input__control[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.flare-input--xs .flare-input__control,
.flare-input--xs .flare-select__control,
.flare-input--xs .flare-multiselect__control,
.flare-input--xs .flare-timespan__segments { padding: var(--flare-input-padding-xs);  font-size: var(--flare-typescale-label-medium-size); }
.flare-input--sm .flare-input__control,
.flare-input--sm .flare-select__control,
.flare-input--sm .flare-multiselect__control,
.flare-input--sm .flare-timespan__segments { padding: var(--flare-input-padding-sm); font-size: var(--flare-typescale-body-medium-size); }
.flare-input--lg .flare-input__control,
.flare-input--lg .flare-select__control,
.flare-input--lg .flare-multiselect__control,
.flare-input--lg .flare-timespan__segments { padding: var(--flare-input-padding-lg); font-size: var(--flare-typescale-title-medium-size); }
.flare-input--xl .flare-input__control,
.flare-input--xl .flare-select__control,
.flare-input--xl .flare-multiselect__control,
.flare-input--xl .flare-timespan__segments { padding: var(--flare-input-padding-xl);  font-size: var(--flare-typescale-title-large-size); }

.flare-input--xs .flare-input__field { --_flare-input-height: var(--flare-input-height-xs); }
.flare-input--sm .flare-input__field { --_flare-input-height: var(--flare-input-height-sm); }
.flare-input--lg .flare-input__field { --_flare-input-height: var(--flare-input-height-lg); }
.flare-input--xl .flare-input__field { --_flare-input-height: var(--flare-input-height-xl); }

.flare-input__field--grow,
.flare-tag-input__field {
    block-size: auto;
    min-block-size: var(--_flare-input-height);
}

.flare-input__control::placeholder {
    color: var(--flare-input-placeholder-color);
    opacity: 1;
}
.flare-input__placeholder { color: var(--flare-color-on-surface-variant); }

.flare-input__icon { display: inline-flex; align-items: center; padding: 0 var(--flare-spacing-4); color: var(--flare-color-on-surface-variant); --_flare-icon-size: var(--flare-input-icon-size); font-size: var(--_flare-icon-size); }
.flare-input__icon--leading  { order: -1; }
.flare-input__icon--trailing { order: 1; }

.flare-input__arrow {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font: inherit;

    --_flare-icon-size: var(--flare-input-icon-size);
    font-size: var(--_flare-icon-size);
    cursor: pointer;
    color: var(--flare-color-on-surface-variant);
    flex: none;
}

.flare-input__arrow:disabled { cursor: default; }

.flare-input__toggle {
    --_flare-icon-size: var(--flare-input-icon-size);
    font-size: var(--_flare-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--flare-color-on-surface-variant);
    border-radius: var(--flare-shape-full);
}
.flare-input__toggle:hover { color: var(--flare-color-on-surface); }
.flare-input__toggle:focus-visible { outline: 2px solid var(--flare-color-primary); outline-offset: 2px; }

.flare-input__adornment {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--flare-spacing-4);
    color: var(--flare-color-on-surface-variant);
    font-size: var(--flare-typescale-body-medium-size);
    white-space: nowrap;
}
.flare-input__adornment--start { order: -2; }
.flare-input__adornment--end   { order: 2; }

.flare-input--has-adornment-start .flare-input__control { padding-left: 0; }
.flare-input--has-adornment-end   .flare-input__control { padding-right: 0; }

.flare-input__clear {
    --_flare-icon-size: var(--flare-input-icon-size);
    font-size: var(--_flare-icon-size);
    position: relative;
    z-index: 0;
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--flare-spacing-2);
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--flare-color-on-surface-variant);
    border-radius: var(--flare-shape-full);
    transition: color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
                background-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-input__clear::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}
.flare-input__clear:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}
.flare-input__clear:hover { color: var(--flare-color-on-surface); }
.flare-input__clear:focus-visible {
    outline: 2px solid var(--flare-color-primary);
    outline-offset: 1px;
}

.flare-input__support {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--flare-spacing-8);
}

.flare-input__helper,
.flare-datagrid__batch-count,
.flare-file-upload__hint,
.flare-list-item__secondary,
.flare-slider__helper,
.flare-stepper__description {
    font-size: var(--flare-typescale-body-small-size);
    color: var(--flare-color-on-surface-variant);
}
.flare-input__helper--error { color: var(--flare-color-error); }

.flare-input__counter {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--flare-typescale-body-small-size);
    color: var(--flare-color-on-surface-variant);
    font-variant-numeric: tabular-nums;
}
.flare-input--error .flare-input__counter { color: var(--flare-color-error); }

.flare-input--error .flare-input__field {
  border-color: var(--flare-color-error);
  border-bottom-color: var(--flare-color-error);
}

.flare-input--error .flare-input__field:hover {
  border-bottom-color: var(--flare-input-error-hover-indicator);
}

.flare-input--disabled { pointer-events: none; }
.flare-input--disabled .flare-input__field {
    background: var(--flare-input-disabled-bg);
    border-bottom-color: var(--flare-input-disabled-indicator);
}
.flare-input--disabled .flare-input__control,
.flare-input--disabled .flare-input__label,
.flare-input--disabled .flare-input__label--floating,
.flare-input--disabled .flare-input__helper,
.flare-input--disabled .flare-input__adornment,
.flare-input--disabled .flare-input__icon,
.flare-input--disabled .flare-input__arrow,
.flare-input--disabled .flare-input__placeholder {
    opacity: var(--flare-input-disabled-opacity);
}

.flare-input--floating .flare-input__field { position: relative; }
.flare-input--floating .flare-input__label--floating {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--flare-typescale-body-large-size);
    color: var(--flare-color-on-surface-variant);
    pointer-events: none;
    transition: top var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
                font-size var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
                color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-input--floating .flare-input__field:focus-within .flare-input__label--floating,
.flare-input--floating .flare-input__control:not(:placeholder-shown) ~ .flare-input__label--floating {
    top: 0.25rem;

    font-size: var(--flare-typescale-body-small-size);
    line-height: var(--flare-typescale-body-small-height);
}

.flare-input--floating .flare-input__field:focus-within .flare-input__label--floating {
    color: var(--fc-main, var(--flare-color-primary));
}

.flare-input--error .flare-input__label,
.flare-input--error .flare-input__label--floating,
.flare-input--error.flare-input--floating .flare-input__field:focus-within .flare-input__label--floating {
    color: var(--flare-color-error);
}
.flare-input--error .flare-input__control { caret-color: var(--flare-color-error); }
.flare-input--error .flare-input__icon--trailing,
.flare-input--error .flare-input__arrow { color: var(--flare-color-error); }

.flare-input__strength {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-1);
  margin-top: var(--flare-spacing-2);
}

.flare-input__strength-label {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flare-spacing-2);
  font-family: var(--flare-typescale-label-small-font);
  font-size: var(--flare-typescale-label-small-size);
  color: var(--flare-color-on-surface);
}

.flare-input__strength-hint {
  color: var(--flare-color-on-surface-variant);
}

/* ---- numericfield.css ---- */
.flare-numericfield__prefix,
.flare-numericfield__suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--flare-spacing-4);
    color: var(--flare-color-on-surface-variant);
    font-size: var(--flare-typescale-body-large-size);
    white-space: nowrap;
    user-select: none;
}

.flare-numericfield__prefix { padding-left: var(--flare-spacing-8); padding-right: var(--flare-spacing-2); }
.flare-numericfield__suffix { padding-left: var(--flare-spacing-2); padding-right: var(--flare-spacing-8); }

.flare-numericfield__stepper {
    display: inline-flex;
    flex-direction: column;
    border-left: var(--flare-border-divider);
    align-self: stretch;
}
.flare-numericfield__step {
    position: relative;
    z-index: 0;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0 var(--flare-spacing-2);
    border: none;
    background: transparent;
    color: var(--flare-color-on-surface-variant);
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-numericfield__step::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}
.flare-numericfield__step:hover:not(:disabled)::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}
.flare-numericfield__step:hover:not(:disabled) { color: var(--flare-color-on-surface); }
.flare-numericfield__step:disabled { opacity: var(--flare-input-disabled-opacity); cursor: not-allowed; }
.flare-numericfield__step--up { border-bottom: var(--flare-border-divider); }

/* ---- select.css ---- */
.flare-select__control,
.flare-multiselect__control {
    justify-content: space-between;
    gap: var(--flare-spacing-4);

    padding: var(--flare-input-padding-md);
    font-family: var(--flare-typescale-body-large-font);
    font-size: var(--flare-typescale-body-large-size);
    color: var(--flare-color-on-surface);
    outline: none;
    cursor: pointer;
    user-select: none;
}

.flare-select--open .flare-select__control,
.flare-multiselect--open .flare-multiselect__control { border-bottom-color: var(--flare-color-primary); }

.flare-select__value { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flare-select__search {
    flex: 1 1 4rem;
    min-width: 3rem;
    border: none;
    background: transparent;
    outline: none;
    color: inherit;
    font: inherit;
    padding: 0;
}

.flare-select__empty {
    padding: var(--flare-spacing-4) var(--flare-spacing-6);
    color: var(--flare-color-on-surface-variant);
    font-size: var(--flare-typescale-body-small-size);
}

.flare-select__dropdown,
.flare-multiselect__dropdown {
    position: fixed;
    z-index: var(--flare-z-dropdown, 1000);
}

.flare-input--disabled .flare-select__value,
.flare-input--disabled .flare-multiselect__value {
    opacity: var(--flare-state-disabled-opacity);
}

/* ---- dialog.css ---- */
.flare-dialog-scrim {
    position: fixed;
    inset: 0;
    background-color: color-mix(in srgb, var(--flare-color-scrim) calc(var(--flare-scrim-opacity) * 100%), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.flare-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--flare-color-surface-container-high);
    color: var(--flare-color-on-surface);
    border-radius: var(--flare-dialog-radius);
    min-width: 17.5rem;
    max-width: 35rem;
    width: 100%;
    max-block-size: calc(100dvh - var(--flare-overlay-viewport-inset));
    box-shadow: var(--flare-elevation-3);
    overflow: hidden;
}

.flare-dialog__header,
.flare-dialog__divider,
.flare-dialog__actions,
.flare-dialog__grabber,
.flare-dialog__icon {
    flex: 0 0 auto;
}

.flare-dialog__content {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
}

.flare-dialog__close {
    position: absolute;
    top: var(--flare-spacing-6);
    inset-inline-end: var(--flare-spacing-6);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--flare-shape-full);
    background: transparent;
    color: var(--flare-color-on-surface-variant);
    cursor: pointer;
    transition: background-color var(--flare-motion-duration-short2);
}

.flare-dialog__close:hover {
    background: var(--flare-state-hover-layer);
}

.flare-dialog__close:focus-visible {
    outline: 2px solid var(--flare-color-primary);
    outline-offset: 2px;
}

.flare-dialog__close .flare-icon { font-size: 1.25rem; }

.flare-dialog--draggable .flare-dialog__drag-handle {
    cursor: move;
    user-select: none;
}

.flare-dialog__resizer {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 1rem;
    height: 1rem;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--flare-color-outline) 50%);
    opacity: 0.6;
    touch-action: none;
}

.flare-dialog__icon {
    display: flex;
    justify-content: center;
    color: var(--flare-color-secondary);
    --_flare-icon-size: var(--flare-dialog-icon-size);
    font-size: var(--_flare-icon-size);
    padding: var(--flare-spacing-12) var(--flare-spacing-12) 0;
}

.flare-dialog__header {
    padding: var(--flare-spacing-12) var(--flare-spacing-12) var(--flare-spacing-8);
}

.flare-dialog__header--centered { text-align: center; }

.flare-dialog__divider {
    height: 1px;
    background: var(--flare-color-outline);
    margin: 0 var(--flare-spacing-12) var(--flare-spacing-8);
}

.flare-dialog__title,
.flare-msgbox__title,
.flare-confirmdialog__title,
.flare-empty-state__title {
    font-family: var(--flare-typescale-headline-small-font);
    font-size: var(--flare-typescale-headline-small-size);
    font-weight: var(--flare-typescale-headline-small-weight);
    color: var(--flare-color-on-surface);
    margin: 0;
}

.flare-dialog__content {
    padding: 0 var(--flare-spacing-12) var(--flare-spacing-12);
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
    color: var(--flare-color-on-surface-variant);
}

.flare-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--flare-spacing-4);
    padding: 0 var(--flare-spacing-12) var(--flare-spacing-12);
}

.flare-dialog-provider__message {
    margin: 0;
    color: var(--flare-color-on-surface-variant);
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
}

.flare-dialog--xs   { max-width: 20rem; }
.flare-dialog--sm   { max-width: 28rem; }
.flare-dialog--md   { max-width: 35rem; }
.flare-dialog--lg   { max-width: 50rem; }
.flare-dialog--xl   { max-width: 70rem; }
.flare-dialog--full      { max-width: calc(100vw - var(--flare-overlay-viewport-inset)); max-block-size: calc(100dvh - var(--flare-overlay-viewport-inset)); }
.flare-dialog--fullwidth { width: calc(100vw - var(--flare-overlay-viewport-inset)); max-width: calc(100vw - var(--flare-overlay-viewport-inset)); }

@media (max-width: 599px) {
    .flare-dialog {
        max-width: calc(100vw - var(--flare-overlay-viewport-inset-compact)) !important;
        max-block-size: calc(100dvh - var(--flare-overlay-viewport-inset-compact)) !important;
        border-radius: var(--flare-dialog-radius);
    }
    .flare-dialog-scrim {
        align-items: flex-end;
    }
}

.flare-dialog-scrim--bottom {
    align-items: flex-end;
}

.flare-dialog--bottom {
    width: 100%;
    border-start-start-radius: var(--flare-dialog-radius);
    border-start-end-radius: var(--flare-dialog-radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: flare-dialog-sheet-in
        var(--flare-motion-duration-medium2)
        var(--flare-motion-easing-emphasized);
}

.flare-dialog__grabber {
    flex: none;
    width: 2rem;
    height: 0.25rem;
    margin: var(--flare-spacing-6) auto 0;
    border-radius: var(--flare-shape-full);
    background: var(--flare-color-on-surface-variant);
    opacity: 0.4;
}

@keyframes flare-dialog-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .flare-dialog--bottom { animation: none; }
}

.flare-dialog--fill {
    block-size: calc(100dvh - var(--flare-overlay-viewport-inset));
}

/* ---- appbar.css ---- */
.flare-appbar {
    display: flex;
    align-items: center;
    gap: var(--flare-appbar-gap);
    padding: 0 var(--flare-appbar-padding-x);
    min-height: var(--flare-appbar-height);
    background-color: var(--flare-color-surface);
    color: var(--flare-color-on-surface);
    box-shadow: var(--flare-elevation-0);
    border-bottom: var(--flare-appbar-border);
    transition: box-shadow var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard);
}

.flare-appbar--sticky {
    position: sticky;
    top: 0;
    z-index: var(--flare-z-appbar, 1100);
}

.flare-appbar--elevation-0 { box-shadow: var(--flare-elevation-0); }
.flare-appbar--elevation-1 { box-shadow: var(--flare-elevation-1); }
.flare-appbar--elevation-2 { box-shadow: var(--flare-elevation-2); }
.flare-appbar--elevation-3 { box-shadow: var(--flare-elevation-3); }
.flare-appbar--elevation-4 { box-shadow: var(--flare-elevation-4); }
.flare-appbar--elevation-5 { box-shadow: var(--flare-elevation-5); }

.flare-appbar--dense {
    min-height: var(--flare-appbar-height-dense);
}

.flare-appbar__leading,
.flare-appbar__trailing {
    display: flex;
    align-items: center;
    gap: var(--flare-appbar-gap);
    flex-shrink: 0;
}

.flare-appbar__title {
    flex: 1;
    padding: 0 var(--flare-appbar-title-padding-x);
    font-family: var(--flare-typescale-title-large-font);
    font-size: var(--flare-typescale-title-large-size);
    font-weight: var(--flare-typescale-title-large-weight);
    color: var(--flare-color-on-surface);
}

/* ---- typography.css ---- */
.flare-text { margin: 0; color: var(--fc-main, inherit); }

.flare-text--display-large {
    font-family: var(--flare-typescale-display-large-font);
    font-weight: var(--flare-typescale-display-large-weight);
    font-size: var(--flare-typescale-display-large-size);
    line-height: var(--flare-typescale-display-large-height);
    letter-spacing: var(--flare-typescale-display-large-spacing);
}
.flare-text--display-medium {
    font-family: var(--flare-typescale-display-medium-font);
    font-weight: var(--flare-typescale-display-medium-weight);
    font-size: var(--flare-typescale-display-medium-size);
    line-height: var(--flare-typescale-display-medium-height);
}
.flare-text--display-small {
    font-family: var(--flare-typescale-display-small-font);
    font-weight: var(--flare-typescale-display-small-weight);
    font-size: var(--flare-typescale-display-small-size);
    line-height: var(--flare-typescale-display-small-height);
    letter-spacing: var(--flare-typescale-display-small-spacing);
}
.flare-text--headline-large {
    font-family: var(--flare-typescale-headline-large-font);
    font-weight: var(--flare-typescale-headline-large-weight);
    font-size: var(--flare-typescale-headline-large-size);
    line-height: var(--flare-typescale-headline-large-height);
}
.flare-text--headline-medium {
    font-family: var(--flare-typescale-headline-medium-font);
    font-weight: var(--flare-typescale-headline-medium-weight);
    font-size: var(--flare-typescale-headline-medium-size);
    line-height: var(--flare-typescale-headline-medium-height);
    letter-spacing: var(--flare-typescale-headline-medium-spacing);
}
.flare-text--headline-small {
    font-family: var(--flare-typescale-headline-small-font);
    font-weight: var(--flare-typescale-headline-small-weight);
    font-size: var(--flare-typescale-headline-small-size);
    line-height: var(--flare-typescale-headline-small-height);
}
.flare-text--title-large {
    font-family: var(--flare-typescale-title-large-font);
    font-weight: var(--flare-typescale-title-large-weight);
    font-size: var(--flare-typescale-title-large-size);
    line-height: var(--flare-typescale-title-large-height);
}
.flare-text--title-medium {
    font-family: var(--flare-typescale-title-medium-font);
    font-weight: var(--flare-typescale-title-medium-weight);
    font-size: var(--flare-typescale-title-medium-size);
    line-height: var(--flare-typescale-title-medium-height);
    letter-spacing: var(--flare-typescale-title-medium-spacing);
}
.flare-text--title-small {
    font-family: var(--flare-typescale-title-small-font);
    font-weight: var(--flare-typescale-title-small-weight);
    font-size: var(--flare-typescale-title-small-size);
    line-height: var(--flare-typescale-title-small-height);
    letter-spacing: var(--flare-typescale-title-small-spacing);
}
.flare-text--body-large {
    font-family: var(--flare-typescale-body-large-font);
    font-weight: var(--flare-typescale-body-large-weight);
    font-size: var(--flare-typescale-body-large-size);
    line-height: var(--flare-typescale-body-large-height);
    letter-spacing: var(--flare-typescale-body-large-spacing);
}
.flare-text--body-medium {
    font-family: var(--flare-typescale-body-medium-font);
    font-weight: var(--flare-typescale-body-medium-weight);
    font-size: var(--flare-typescale-body-medium-size);
    line-height: var(--flare-typescale-body-medium-height);
}
.flare-text--body-small {
    font-family: var(--flare-typescale-body-small-font);
    font-weight: var(--flare-typescale-body-small-weight);
    font-size: var(--flare-typescale-body-small-size);
    line-height: var(--flare-typescale-body-small-height);
}
.flare-text--label-large {
    font-family: var(--flare-typescale-label-large-font);
    font-weight: var(--flare-typescale-label-large-weight);
    font-size: var(--flare-typescale-label-large-size);
    line-height: var(--flare-typescale-label-large-height);
}
.flare-text--label-medium {
    font-family: var(--flare-typescale-label-medium-font);
    font-weight: var(--flare-typescale-label-medium-weight);
    font-size: var(--flare-typescale-label-medium-size);
}
.flare-text--label-small {
    font-family: var(--flare-typescale-label-small-font);
    font-weight: var(--flare-typescale-label-small-weight);
    font-size: var(--flare-typescale-label-small-size);
}

.flare-text--weight-thin        { font-weight: 100; }
.flare-text--weight-extra-light { font-weight: 200; }
.flare-text--weight-light       { font-weight: 300; }
.flare-text--weight-regular     { font-weight: 400; }
.flare-text--weight-medium      { font-weight: 500; }
.flare-text--weight-semi-bold   { font-weight: 600; }
.flare-text--weight-bold        { font-weight: 700; }
.flare-text--weight-extra-bold  { font-weight: 800; }
.flare-text--weight-black       { font-weight: 900; }

.flare-text--align-start   { text-align: start; }
.flare-text--align-left    { text-align: left; }
.flare-text--align-center  { text-align: center; }
.flare-text--align-right   { text-align: right; }
.flare-text--align-end     { text-align: end; }
.flare-text--align-justify { text-align: justify; }

.flare-text--mono { font-family: monospace; }

/* ---- onthispage.css ---- */
.flare-toc {

  max-inline-size: 100%;
  min-inline-size: 0;
  font-family: var(--flare-typescale-body-medium-font);
  font-size: var(--flare-typescale-body-small-size);
  line-height: var(--flare-toc-line-height);
}

.flare-toc__title {
  margin-bottom: var(--flare-spacing-4);
  color: var(--flare-toc-title-color);
  font-size: var(--flare-typescale-label-large-size);
  font-weight: var(--flare-toc-title-weight);
  text-transform: uppercase;
  letter-spacing: var(--flare-toc-title-tracking);
}

.flare-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;

  border-inline-start: var(--flare-toc-rail-width) solid var(--flare-toc-rail-color);
}

.flare-toc__item {
  margin: 0;

  padding-inline-start: calc(var(--flare-toc-indent) * var(--flare-toc-depth, 0));
}

.flare-toc__link {
  display: block;
  position: relative;
  padding-block: var(--flare-spacing-2);
  padding-inline: var(--flare-toc-link-pad-x);

  margin-inline-start: calc(-1 * var(--flare-toc-marker-width));
  border-inline-start: var(--flare-toc-marker-width) solid transparent;
  border-radius: var(--flare-toc-active-radius);
  color: var(--flare-toc-inactive-color);
  text-decoration: none;
  transition: color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
              background var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
              border-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-toc__link:hover {
  color: var(--flare-toc-active-color);
  background: color-mix(in srgb, var(--flare-toc-active-bg) var(--flare-toc-hover-bg-opacity), transparent);
}

.flare-toc__link--active {
  color: var(--flare-toc-active-color);
  background: var(--flare-toc-active-bg);
  border-inline-start-color: var(--flare-toc-active-color);
  font-weight: var(--flare-toc-active-weight);
}

/* ---- icon.css ---- */
.flare-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fc-main, inherit);

    font-size: var(--_flare-icon-size, var(--flare-typescale-title-large-size));
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.flare-icon--path-morph path {
    transition: d var(--flare-icon-morph-duration) var(--flare-icon-morph-easing);
}

@media (prefers-reduced-motion: reduce) {
    .flare-icon--path-morph path { transition-duration: 0s; }
}

.flare-icon-morph {
    --_morph-duration: var(--flare-icon-morph-duration);
    display: inline-grid;
    grid-template-areas: "glyph";
    line-height: 1;
    vertical-align: middle;
}

.flare-icon-morph__slot {
    grid-area: glyph;
    display: inline-flex;
}

.flare-icon-morph__slot--exit {
    pointer-events: none;
}

.flare-icon-morph__slot--enter,
.flare-icon-morph__slot--exit {
    animation-duration: var(--_morph-duration);
    animation-timing-function: var(--flare-motion-easing-standard);
    animation-fill-mode: both;
}

.flare-icon-morph--fade > .flare-icon-morph__slot--enter { animation-name: flare-icon-morph-fade-in; }
.flare-icon-morph--fade > .flare-icon-morph__slot--exit { animation-name: flare-icon-morph-fade-out; }

.flare-icon-morph--scale > .flare-icon-morph__slot--enter {
    animation-name: flare-icon-morph-fade-in, flare-icon-morph-scale-in;
    animation-timing-function: var(--flare-motion-easing-standard), var(--flare-icon-morph-easing);
}

.flare-icon-morph--scale > .flare-icon-morph__slot--exit {
    animation-name: flare-icon-morph-fade-out, flare-icon-morph-scale-out;
    animation-timing-function: var(--flare-motion-easing-standard), var(--flare-icon-morph-easing);
}

.flare-icon-morph--rotate > .flare-icon-morph__slot--enter {
    animation-name: flare-icon-morph-fade-in, flare-icon-morph-rotate-in;
    animation-timing-function: var(--flare-motion-easing-standard), var(--flare-icon-morph-easing);
}

.flare-icon-morph--rotate > .flare-icon-morph__slot--exit {
    animation-name: flare-icon-morph-fade-out, flare-icon-morph-rotate-out;
    animation-timing-function: var(--flare-motion-easing-standard), var(--flare-icon-morph-easing);
}

@keyframes flare-icon-morph-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes flare-icon-morph-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes flare-icon-morph-scale-in {
    from { transform: scale(var(--flare-icon-morph-scale)); }
    to { transform: scale(1); }
}

@keyframes flare-icon-morph-scale-out {
    from { transform: scale(1); }
    to { transform: scale(var(--flare-icon-morph-scale)); }
}

@keyframes flare-icon-morph-rotate-in {
    from { transform: rotate(calc(-1 * var(--flare-icon-morph-rotate))); }
    to { transform: rotate(0deg); }
}

@keyframes flare-icon-morph-rotate-out {
    from { transform: rotate(0deg); }
    to { transform: rotate(var(--flare-icon-morph-rotate)); }
}

@media (prefers-reduced-motion: reduce) {
    .flare-icon-morph { --_morph-duration: 0s; }
}

/* ---- progress.css ---- */
.flare-progress {
  display: block;
  width: 100%;
}

.flare-progress--xs {
  --_lin-height: var(--flare-progress-linear-height-xs);
  --_circ-size: var(--flare-progress-circular-size-xs);
  --_circ-width: var(--flare-progress-circular-width-xs);
  --_content-size: var(--flare-progress-content-size-xs);
}
.flare-progress--sm {
  --_lin-height: var(--flare-progress-linear-height-sm);
  --_circ-size: var(--flare-progress-circular-size-sm);
  --_circ-width: var(--flare-progress-circular-width-sm);
  --_content-size: var(--flare-progress-content-size-sm);
}
.flare-progress--md {
  --_lin-height: var(--flare-progress-linear-height-md);
  --_circ-size: var(--flare-progress-circular-size-md);
  --_circ-width: var(--flare-progress-circular-width-md);
  --_content-size: var(--flare-progress-content-size-md);
}
.flare-progress--lg {
  --_lin-height: var(--flare-progress-linear-height-lg);
  --_circ-size: var(--flare-progress-circular-size-lg);
  --_circ-width: var(--flare-progress-circular-width-lg);
  --_content-size: var(--flare-progress-content-size-lg);
}
.flare-progress--xl {
  --_lin-height: var(--flare-progress-linear-height-xl);
  --_circ-size: var(--flare-progress-circular-size-xl);
  --_circ-width: var(--flare-progress-circular-width-xl);
  --_content-size: var(--flare-progress-content-size-xl);
}

.flare-progress--linear {
  height: var(--_lin-height);
  background: var(--flare-color-secondary-container);
  border-radius: var(--flare-progress-track-radius);
  overflow: hidden;
  position: relative;
}

.flare-progress--linear .flare-progress__bar {
  height: 100%;
  background: var(--fc-main, var(--flare-color-primary));
  border-radius: var(--flare-progress-track-radius);
  transition: width 0.3s var(--flare-motion-easing-standard);
}

.flare-progress--linear.flare-progress--indeterminate .flare-progress__remain,
.flare-progress__bar--indeterminate-second {
  display: none;
}

.flare-progress--linear.flare-progress--split {
  display: flex;
  align-items: center;
  gap: var(--flare-progress-gap);
  background: transparent;
}

.flare-progress--linear.flare-progress--split .flare-progress__bar {
  flex: 0 0 auto;
  min-width: 0;
}

.flare-progress__remain {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background: var(--flare-color-secondary-container);
  border-radius: var(--flare-progress-track-radius);

  margin-inline-end: calc(var(--flare-progress-gap) + var(--flare-progress-stop-size));
}

.flare-progress--with-zones {
  display: block;
  background: var(--flare-color-secondary-container);
}
.flare-progress__zone {
  position: absolute;
  top: 0;
  height: 100%;
  inset-inline-start: var(--_z0, 0%);
  inset-inline-end: calc(100% - var(--_z1, 0%));
  z-index: 1;
  background: var(--fc-main, var(--flare-color-primary));
  pointer-events: none;
}

.flare-progress--with-zones .flare-progress__bar {
  position: relative;
  z-index: 2;
}

.flare-progress--linear:not(.flare-progress--buffer):not(.flare-progress--query):not(.flare-progress--indeterminate):not(.flare-progress--with-zones)::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: var(--flare-progress-stop-inset);
  transform: translateY(-50%);
  width: var(--flare-progress-stop-size);
  height: var(--flare-progress-stop-size);
  border-radius: 50%;
  background: var(--flare-progress-stop-color);
}

.flare-progress--linear.flare-progress--indeterminate .flare-progress__bar {
  width: 40% !important;
  animation: flare-progress-linear var(--flare-progress-linear-indeterminate-duration)
             infinite var(--flare-progress-linear-indeterminate-easing);
}

@keyframes flare-progress-linear {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.flare-progress--circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--_circ-size);
  height: var(--_circ-size);
}

.flare-progress__svg { width: 100%; height: 100%; }

.flare-progress__measure { visibility: hidden; pointer-events: none; }
.flare-progress__measure rect { width: var(--_measure); height: 1px; }
.flare-progress__measure rect + rect { width: calc(var(--_measure) * 1px); }
.flare-progress__track {
  stroke: var(--flare-color-secondary-container);
  stroke-width: var(--_circ-width);
}
.flare-progress__indicator {
  stroke: var(--fc-main, var(--flare-color-primary));
  stroke-width: var(--_circ-width);
  stroke-linecap: var(--flare-progress-circular-cap);
  transition: stroke-dasharray 0.3s var(--flare-motion-easing-standard);
}

.flare-progress--circular.flare-progress--indeterminate .flare-progress__svg {
  animation: flare-progress-rotate var(--flare-progress-circular-indeterminate-rotation-duration)
             linear infinite;
}

.flare-progress--circular.flare-progress--indeterminate .flare-progress__indicator {
  stroke-dasharray: 70.74 100;
  animation: flare-progress-dash var(--flare-progress-circular-indeterminate-progress-duration)
             ease-in-out infinite;
}

@keyframes flare-progress-rotate { 100% { transform: rotate(360deg); } }

.flare-progress--buffer .flare-progress__track { background: transparent; }
.flare-progress__buffer-fill {
    position: absolute; inset-inline-start: 0; top: 0; height: 100%;
    background: color-mix(in srgb, var(--fc-main, var(--flare-color-primary)) var(--flare-progress-buffer-opacity), transparent);
    transition: width 0.3s ease;
}

.flare-progress--query .flare-progress__bar {
    width: 100% !important;
    animation: flare-query 1.4s ease infinite;
    background: linear-gradient(90deg, transparent, var(--fc-main, var(--flare-color-primary)), transparent);
}

@keyframes flare-query {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@keyframes flare-progress-dash {
  0%   { stroke-dasharray: 0.88 100; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 79.58 100; stroke-dashoffset: -30.95; }
  100% { stroke-dasharray: 79.58 100; stroke-dashoffset: -100; }
}

@media (prefers-reduced-motion: reduce) {
  .flare-progress--linear.flare-progress--indeterminate .flare-progress__bar,
  .flare-progress--circular.flare-progress--indeterminate .flare-progress__svg,
  .flare-progress--circular.flare-progress--indeterminate .flare-progress__indicator {
    animation: none;
  }
}

.flare-progress__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--flare-progress-content-color);
  font-size: var(--_content-size);
  line-height: 1;
}

.flare-progress--with-content {
  overflow-x: clip;
  overflow-y: visible;
}

.flare-progress--circular { position: relative; }

/* ---- meter.css ---- */
.flare-meter {
    display: block;
    width: 100%;
}

.flare-meter--xs { --_lin-height: var(--flare-progress-linear-height-xs); }
.flare-meter--sm { --_lin-height: var(--flare-progress-linear-height-sm); }
.flare-meter--md { --_lin-height: var(--flare-progress-linear-height-md); }
.flare-meter--lg { --_lin-height: var(--flare-progress-linear-height-lg); }
.flare-meter--xl { --_lin-height: var(--flare-progress-linear-height-xl); }

.flare-meter--empty {  }

.flare-meter__track {
    display: flex;
    width: 100%;
    height: var(--_lin-height);
    background: var(--flare-color-secondary-container);
    border-radius: var(--flare-progress-track-radius);
    overflow: hidden;

    gap: var(--flare-progress-gap);
}

.flare-meter__seg {
    flex-basis: 0;
    min-width: 0;
    height: 100%;
    background: var(--fc-main, var(--flare-color-primary));

    border-radius: min(calc(var(--_lin-height) / 2), calc(var(--flare-progress-gap) * 1000));
}

.flare-meter__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flare-spacing-4);
    margin-top: var(--flare-spacing-3);
}
.flare-meter__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--flare-spacing-2);
    font-family: var(--flare-typescale-label-medium-font);
    font-size: var(--flare-typescale-label-medium-size);
    color: var(--flare-color-on-surface-variant);
}
.flare-meter__legend-swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--flare-shape-extra-small);
    background: var(--fc-main, var(--flare-color-primary));
    flex-shrink: 0;
}
.flare-meter__legend-label { color: var(--flare-color-on-surface); }
.flare-meter__legend-value { color: var(--flare-color-on-surface-variant); font-weight: 500; }

/* ---- tooltip.css ---- */
.flare-tooltip {
  position: relative;
  display: inline-flex;
}

.flare-tooltip--click {
  cursor: pointer;
}

.flare-tooltip__backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: transparent;
}

.flare-tooltip__content {
  position: absolute;
  z-index: 1000;
  padding: var(--flare-spacing-3) var(--flare-spacing-6);
  background: var(--flare-color-inverse-surface);
  color: var(--flare-color-inverse-on-surface);
  font-family: var(--flare-typescale-body-small-font);
  font-size: var(--flare-typescale-body-small-size);
  line-height: var(--flare-typescale-body-small-height);
  letter-spacing: var(--flare-typescale-body-small-spacing);
  border-radius: var(--flare-shape-extra-small);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  content-visibility: hidden;
  transition: opacity var(--flare-motion-duration-short1),
              visibility var(--flare-motion-duration-short1),
              content-visibility var(--flare-motion-duration-short1);
  transition-behavior: allow-discrete;
}

.flare-tooltip__content--rich {
  background: var(--flare-color-surface-container);
  color: var(--flare-color-on-surface);
  box-shadow: var(--flare-elevation-3);
  border-radius: var(--flare-shape-medium);
  pointer-events: auto;
  white-space: normal;

  width: max-content;
  max-width: var(--flare-tooltip-max-width);
  padding: var(--flare-spacing-6) var(--flare-spacing-8);
}

.flare-tooltip--hover:hover .flare-tooltip__content,
.flare-tooltip--focus:focus-within .flare-tooltip__content,
.flare-tooltip--open .flare-tooltip__content,
.flare-tooltip__content--visible {
  opacity: 1;
  visibility: visible;

  content-visibility: visible;
  transition-delay: var(--fc-tt-delay, 0ms);
}

.flare-tooltip--disabled .flare-tooltip__content {
  opacity: 0;
  visibility: hidden;
  content-visibility: hidden;
}

.flare-tooltip--top .flare-tooltip__content:not([data-flare-placed]) {
  bottom: calc(100% + var(--flare-tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
}

.flare-tooltip--bottom .flare-tooltip__content:not([data-flare-placed]) {
  top: calc(100% + var(--flare-tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
}

.flare-tooltip--left .flare-tooltip__content:not([data-flare-placed]) {
  right: calc(100% + var(--flare-tooltip-offset));
  top: 50%;
  transform: translateY(-50%);
}

.flare-tooltip--right .flare-tooltip__content:not([data-flare-placed]) {
  left: calc(100% + var(--flare-tooltip-offset));
  top: 50%;
  transform: translateY(-50%);
}

.flare-tooltip--arrow .flare-tooltip__content::after {
  content: '';
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--flare-color-inverse-surface);
  transform: rotate(45deg);
}

.flare-tooltip--arrow .flare-tooltip__content--rich::after {
  background: var(--flare-color-surface-container);
}

.flare-tooltip--arrow .flare-tooltip__content[data-flare-side="top"]::after {
  bottom: -0.25rem;
  left: 50%;
  margin-left: -0.25rem;
}

.flare-tooltip--arrow .flare-tooltip__content[data-flare-side="bottom"]::after {
  top: -0.25rem;
  left: 50%;
  margin-left: -0.25rem;
}

.flare-tooltip--arrow .flare-tooltip__content[data-flare-side="left"]::after {
  right: -0.25rem;
  top: 50%;
  margin-top: -0.25rem;
}

.flare-tooltip--arrow .flare-tooltip__content[data-flare-side="right"]::after {
  left: -0.25rem;
  top: 50%;
  margin-top: -0.25rem;
}

/* ---- accordion.css ---- */
.flare-accordion {
  border: var(--flare-accordion-border);
  border-radius: var(--flare-accordion-radius);
  overflow: hidden;
}

.flare-accordion-panel + .flare-accordion-panel {
  border-top: var(--flare-accordion-panel-divider);
}

.flare-accordion-panel__heading {
  margin: 0;
  font: inherit;
  color: inherit;
}

.flare-accordion-panel__header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--flare-accordion-header-padding-block) var(--flare-accordion-header-padding-inline);
  background: var(--flare-accordion-header-bg);
  color: var(--flare-accordion-header-color);
  font-family: var(--flare-accordion-header-label-font);
  font-size: var(--flare-accordion-header-label-size);
  font-weight: var(--flare-accordion-header-label-weight);
  border: none;
  cursor: pointer;
  text-align: left;
}

.flare-accordion-panel__header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-accordion-panel__header:hover:not(:disabled)::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-accordion-panel__header:focus-visible:not(:disabled)::before {
  background: var(--flare-state-focus-layer);
  opacity: 1;
}

.flare-accordion-panel__header:hover:focus-visible:not(:disabled):not(:active)::before {
  background: var(--flare-state-focus-hover-layer);
  opacity: 1;
}

.flare-accordion-panel__header:active:not(:disabled)::before {
  background: var(--flare-state-pressed-layer);
  opacity: 1;
}

.flare-accordion-panel__header-text,
.flare-collapse__header-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.flare-accordion-panel__header-text { gap: var(--flare-accordion-header-gap); }
.flare-collapse__header-text { gap: var(--flare-collapse-header-gap); }

.flare-accordion-panel--disabled .flare-accordion-panel__header {
  cursor: not-allowed;
  opacity: var(--flare-accordion-header-disabled-opacity);
}

.flare-accordion-panel__icon {
  position: relative;
  font-style: normal;
  font-size: var(--flare-accordion-icon-size);
  display: inline-block;
  transition: transform var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-accordion-panel--expanded .flare-accordion-panel__icon {
  transform: rotate(180deg);
}

.flare-accordion-panel__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard);
}

.flare-accordion-panel--expanded .flare-accordion-panel__content {
  grid-template-rows: 1fr;
}

.flare-accordion-panel__body {
  min-height: 0;
  overflow: hidden;
  padding-block: 0;
  padding-inline: var(--flare-accordion-body-padding-inline);
  color: var(--flare-accordion-body-color);
  transition: padding-block var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard);
}

.flare-accordion-panel--expanded .flare-accordion-panel__body {
  padding-block: var(--flare-accordion-body-padding-block);
}

/* ---- collapse.css ---- */
.flare-collapse {
    display: block;
}

.flare-collapse__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--flare-collapse-header-gap);
    padding: var(--flare-collapse-header-padding-block) var(--flare-collapse-header-padding-inline);
    background: var(--flare-collapse-header-bg);
    color: var(--flare-collapse-header-color);
    font-family: var(--flare-collapse-header-label-font);
    font-size: var(--flare-collapse-header-label-size);
    font-weight: var(--flare-collapse-header-label-weight);
    border: none;
    border-radius: var(--flare-collapse-header-radius);
    cursor: pointer;
    text-align: left;
}

.flare-collapse__header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-collapse__header:hover:not(:disabled)::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-collapse__header:focus-visible:not(:disabled)::before {
    background: var(--flare-state-focus-layer);
    opacity: 1;
}

.flare-collapse__header:hover:focus-visible:not(:disabled):not(:active)::before {
    background: var(--flare-state-focus-hover-layer);
    opacity: 1;
}

.flare-collapse__header:active:not(:disabled)::before {
    background: var(--flare-state-pressed-layer);
    opacity: 1;
}

.flare-collapse--disabled .flare-collapse__header {
    cursor: not-allowed;
    opacity: var(--flare-collapse-header-disabled-opacity);
}

.flare-collapse__icon {
    position: relative;
    flex-shrink: 0;
    color: var(--flare-collapse-icon-color);
    transition: transform var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-collapse__region {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard);
}

.flare-collapse--expanded > .flare-collapse__region {
    grid-template-rows: 1fr;
}

.flare-collapse__inner {
    overflow: hidden;
    min-height: 0;
}

/* ---- snackbar.css ---- */
.flare-snackbar-provider {
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--flare-spacing-4);
  z-index: 9000;
  pointer-events: none;
  align-items: center;
}

.flare-snackbar-provider,
.flare-snackbar-provider--bottom-center {
  bottom: var(--flare-snackbar-provider-inset);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.flare-snackbar-provider--top-center {
  top: var(--flare-snackbar-provider-inset);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
}

.flare-snackbar-provider--bottom-left {
  bottom: var(--flare-snackbar-provider-inset);
  left: var(--flare-snackbar-provider-inset);
  right: auto;
  transform: none;
  align-items: flex-start;
}

.flare-snackbar-provider--bottom-right {
  bottom: var(--flare-snackbar-provider-inset);
  right: var(--flare-snackbar-provider-inset);
  left: auto;
  transform: none;
  align-items: flex-end;
}

.flare-snackbar-provider--top-left {
  top: var(--flare-snackbar-provider-inset);
  bottom: auto;
  left: var(--flare-snackbar-provider-inset);
  right: auto;
  transform: none;
  flex-direction: column;
  align-items: flex-start;
}

.flare-snackbar-provider--top-right {
  top: var(--flare-snackbar-provider-inset);
  bottom: auto;
  right: var(--flare-snackbar-provider-inset);
  left: auto;
  transform: none;
  flex-direction: column;
  align-items: flex-end;
}

.flare-snackbar {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-4);
  min-width: var(--flare-snackbar-min-width);
  max-width: var(--flare-snackbar-max-width);

  min-height: var(--flare-snackbar-min-height);
  padding: var(--flare-snackbar-padding-block) var(--flare-spacing-10);
  border-radius: var(--flare-snackbar-radius);
  background: var(--flare-color-inverse-surface);
  color: var(--flare-color-inverse-on-surface);
  font-family: var(--flare-typescale-body-medium-font);
  font-size: var(--flare-typescale-body-medium-size);
  box-shadow: var(--flare-elevation-3);
  pointer-events: auto;
  animation: flare-snackbar-in var(--flare-motion-duration-short2) var(--flare-motion-easing-decelerate);
}

@keyframes flare-snackbar-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.flare-snackbar__text {
  flex: 1;
}

.flare-snackbar--with-progress {
  flex-wrap: wrap;
}

.flare-snackbar__progress {
  flex-basis: 100%;
  width: 100%;

  --fc-main: currentColor;
}

.flare-snackbar__actions {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-2);
  flex-shrink: 0;
}

.flare-snackbar__action-btn {
  position: relative;
  z-index: 0;
  background: transparent;
  border: none;

  color: var(--_snackbar-action-color, var(--flare-color-inverse-primary));
  font-size: var(--flare-typescale-label-large-size);
  font-weight: var(--flare-typescale-label-large-weight);
  cursor: pointer;
  padding: var(--flare-spacing-2) var(--flare-spacing-4);
  border-radius: var(--flare-shape-extra-small);
}

.flare-snackbar__action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-snackbar__action-btn:hover::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-snackbar__close-btn {
  background: transparent;
  border: none;
  color: var(--_snackbar-btn-color, var(--flare-color-inverse-on-surface));
  cursor: pointer;
  padding: var(--flare-spacing-2);
  border-radius: var(--flare-shape-full);
  line-height: 1;
  opacity: var(--flare-snackbar-close-opacity);
}

.flare-snackbar__close-btn:hover {
  opacity: 1;
  background: var(--flare-state-hover-layer);
}

.flare-snackbar--error,
.flare-snackbar--success,
.flare-snackbar--warning,
.flare-snackbar--info {
  --_snackbar-action-color: currentColor;
  --_snackbar-btn-color: currentColor;
}

.flare-snackbar--error {
  background: var(--flare-color-error);
  color: var(--flare-color-on-error);
}

.flare-snackbar--success {
  background: var(--flare-color-secondary-container);
  color: var(--flare-color-on-secondary-container);
}

.flare-snackbar--warning {
  background: var(--flare-color-tertiary-container);
  color: var(--flare-color-on-tertiary-container);
}

.flare-snackbar--info {
  background: var(--flare-color-primary-container);
  color: var(--flare-color-on-primary-container);
}

/* ---- datagrid.css ---- */
.flare-datagrid {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-block-size: 0;
}

.flare-datagrid__wrapper {
  position: relative;
  overflow: auto;
  flex: 1 1 auto;
  min-block-size: 0;
  border: var(--flare-border-divider);
  border-radius: var(--flare-shape-medium);
}

.flare-datagrid__toolbar,
.flare-datagrid__footer,
.flare-datagrid__pagination {
  flex: 0 0 auto;
}

.flare-datagrid__table--fixed {
  table-layout: fixed;
}

.flare-datagrid__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--flare-typescale-body-medium-font);
  font-size: var(--flare-typescale-body-medium-size);
  color: var(--flare-color-on-surface);
  background: var(--flare-color-surface);
}

.flare-datagrid__th {
  padding: var(--flare-spacing-6) var(--flare-spacing-8);
  text-align: left;
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-label-large-size);
  font-weight: var(--flare-typescale-label-large-weight);
  color: var(--flare-color-on-surface-variant);
  background: var(--flare-color-surface-container-low);
  border-bottom: var(--flare-border-divider);
  white-space: nowrap;
}

.flare-datagrid__th--sortable {
  cursor: pointer;
  user-select: none;
}

.flare-datagrid__th--sortable:hover {
  background: var(--flare-color-surface-container);
  color: var(--flare-color-on-surface);
}

.flare-datagrid__sort-icon {
  margin-left: var(--flare-spacing-3);
  color: var(--flare-color-primary);

  --_flare-icon-size: var(--flare-datagrid-sort-icon-size);
  font-size: var(--_flare-icon-size);
  vertical-align: middle;
}

:where(.flare-datagrid--striped tbody tr.flare-datagrid__row:nth-of-type(even)) {
  background: var(--flare-stripe-bg);
}

.flare-datagrid--hoverable tbody tr.flare-datagrid__row:hover {
  background: var(--flare-state-hover-layer);
}

.flare-datagrid--dense .flare-datagrid__th,
.flare-datagrid--dense .flare-datagrid__td {
  padding-top: var(--flare-spacing-2);
  padding-bottom: var(--flare-spacing-2);
}

.flare-datagrid__td {
  padding: var(--flare-spacing-6) var(--flare-spacing-8);
  border-bottom: var(--flare-border-divider);
  vertical-align: middle;
}

.flare-datagrid__row:last-child .flare-datagrid__td {
  border-bottom: none;
}

.flare-datagrid__row--selected {
  background: var(--flare-state-selected-layer);
}
.flare-datagrid--hoverable tbody tr.flare-datagrid__row--selected:hover {
  background: var(--flare-state-selected-hover-layer);
}

.flare-datagrid__empty {
  padding: var(--flare-spacing-16);
  text-align: center;
  color: var(--flare-color-on-surface-variant);
}

.flare-datagrid__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--flare-spacing-2);
  padding: var(--flare-spacing-6) 0;
}

.flare-datagrid--bounded {
  max-block-size: var(--_flare-datagrid-height);
}

.flare-datagrid--sized {
  block-size: var(--_flare-datagrid-height);
}

.flare-datagrid--fill > .flare-datagrid__wrapper {
  flex: 1 1 0;
}

.flare-datagrid__wrapper--sticky-head thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

.flare-datagrid__wrapper--sticky-head thead th {
  border-bottom: none;
  box-shadow: inset 0 calc(-1 * var(--flare-border-width)) 0 var(--flare-color-outline-variant);
}

.flare-datagrid__wrapper tfoot .flare-datagrid__aggregate-row {
  border-top: none;
}

.flare-datagrid__wrapper tfoot .flare-datagrid__aggregate-row > .flare-datagrid__td {
  box-shadow: inset 0 var(--flare-datagrid-aggregate-divider-width) 0 var(--flare-color-outline-variant);
}

.flare-datagrid__loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--flare-spacing-4);
  font-size: var(--flare-typescale-body-small-size);
  color: var(--flare-color-on-surface-variant);
  background: color-mix(in srgb, var(--flare-color-surface) var(--flare-datagrid-loading-veil-pct), transparent);
  backdrop-filter: blur(0.5px);
  pointer-events: none;
}

.flare-datagrid__table--loading {
  opacity: var(--flare-datagrid-loading-dim);
}

.flare-datagrid__placeholder-row td {
  padding: var(--flare-spacing-4) var(--flare-spacing-8);
}

.flare-datagrid__infinite-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--flare-spacing-4);
  padding: var(--flare-spacing-6) var(--flare-spacing-8);
  color: var(--flare-color-on-surface-variant);
  font-size: var(--flare-typescale-body-small-size);
}

.flare-datagrid__progress-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
}

.flare-datagrid__progress-line .flare-progress--linear {
  height: 3px;
  border-radius: 0;
}

.flare-datagrid__toolbar,
.flare-datagrid__footer {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-4);
  padding: var(--flare-spacing-4) 0;
  justify-content: flex-end;
}

.flare-datagrid__sort-priority {
  font-size: var(--flare-datagrid-sort-priority-size);
  vertical-align: super;
  color: var(--flare-color-on-surface-variant);
  margin-left: var(--flare-spacing-1);
}

.flare-datagrid__th {
  position: relative;
}

.flare-datagrid__resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--flare-datagrid-resize-handle-width);
  cursor: col-resize;
  background: var(--flare-color-outline-variant);
  transition: opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

@media (hover: hover) {
  .flare-datagrid__resize-handle {
    opacity: 0;
  }

  .flare-datagrid__th:hover .flare-datagrid__resize-handle {
    opacity: 1;
  }
}

.flare-datagrid__group-header td {
  padding: 0;
  font-weight: 600;
  font-size: var(--flare-typescale-label-large-size);
  color: var(--flare-color-on-surface-variant);
  background: var(--flare-color-surface-container-low);
  border-bottom: var(--flare-border-divider);
}

.flare-datagrid__group-toggle {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-4);
  width: 100%;

  padding: 0.5rem 1rem 0.5rem calc(1rem + var(--_group-indent, 0) * 1.5rem);
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.flare-datagrid__group-toggle:hover {
  background: var(--flare-color-surface-container);
}

.flare-datagrid__group-toggle:focus-visible {
  outline: 2px solid var(--flare-color-primary);
  outline-offset: -2px;
}

.flare-datagrid__group-chevron {
  font-size: var(--flare-datagrid-chevron-size);
  line-height: 1;
  color: var(--flare-color-on-surface-variant);
}

.flare-datagrid__group-label {
  flex: 0 1 auto;
}

.flare-datagrid__group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 var(--flare-spacing-3);
  border-radius: 0.625rem;
  background: var(--flare-color-secondary-container);
  color: var(--flare-color-on-secondary-container);
  font-size: var(--flare-typescale-label-small-size);
  font-weight: 600;
}

.flare-datagrid__group-aggregate {
  font-weight: 500;
  color: var(--flare-color-on-surface-variant);
  font-size: var(--flare-typescale-label-medium-size);
}

.flare-datagrid__group-aggregate:first-of-type {
  margin-left: auto;
}

.flare-datagrid__group-aggregate + .flare-datagrid__group-aggregate {
  margin-left: var(--flare-spacing-8);
}

.flare-datagrid__table:focus-visible {
  outline: var(--flare-focus-ring);
  outline-offset: 2px;
}

.flare-datagrid__td:focus-visible {
  outline: var(--flare-focus-ring);
  outline-offset: -2px;
}

.flare-datagrid__filter-row th {
  padding: var(--flare-spacing-2) var(--flare-spacing-6);
  background: var(--flare-color-surface-container-low);
  border-bottom: var(--flare-border-divider);
}

.flare-datagrid__filter-builder {
  position: relative;
  display: inline-flex;
}

.flare-datagrid__filter-builder-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  margin-left: var(--flare-spacing-2);
  padding: 0 var(--flare-spacing-2);
  border-radius: 0.5625rem;
  background: var(--flare-color-primary);
  color: var(--flare-color-on-primary);
  font-size: var(--flare-typescale-label-small-size);
  font-weight: 600;
}

.flare-datagrid__filter-builder-panel:not([data-flare-placed]) {
  top: calc(100% + 0.25rem);
  right: 0;
}

.flare-datagrid__filter-builder-panel {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-4);
  min-width: 34rem;
  max-width: calc(100vw - var(--flare-overlay-viewport-inset));
  padding: var(--flare-spacing-6);
  background: var(--flare-color-surface-container-high);
  color: var(--flare-color-on-surface);
  border: var(--flare-border-divider);
  border-radius: var(--flare-shape-medium);
  box-shadow: var(--flare-elevation-3);
}

.flare-datagrid__filter-builder-tree {
  display: flex;
  flex-direction: column;

  max-block-size: var(--flare-overlay-panel-max-block-size);
  overflow: auto;
}

.flare-datagrid__filter-builder-group {
  border: var(--flare-border-divider);
  border-left: var(--flare-datagrid-filter-group-rail) solid var(--flare-color-primary);
  border-radius: var(--flare-shape-small);
  background: var(--flare-color-surface-container);
  padding: var(--flare-spacing-4);
}

.flare-datagrid__filter-builder-group-head {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-2);
  flex-wrap: wrap;
}

.flare-datagrid__filter-builder-group-body {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-3);
  padding-top: var(--flare-spacing-3);
}

.flare-datagrid__filter-builder-connector {
  min-width: 3rem;
  padding: var(--flare-spacing-1) var(--flare-spacing-5);
  border: var(--flare-border-width) var(--flare-border-style) var(--flare-color-primary);
  border-radius: var(--flare-shape-full);
  background: var(--flare-color-primary-container);
  color: var(--flare-color-on-primary-container);
  font-size: var(--flare-typescale-label-medium-size);
  font-weight: 600;
  cursor: pointer;
}

.flare-datagrid__filter-builder-connector:hover { filter: brightness(1.05); }

.flare-datagrid__filter-builder-row {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-3);
}

.flare-datagrid__filter-builder-range-sep {
  color: var(--flare-color-on-surface-variant);
  font-size: var(--flare-typescale-label-medium-size);
}

.flare-datagrid__filter-builder-field { flex: 1 1 30%; min-width: 0; }
.flare-datagrid__filter-builder-op    { flex: 1 1 28%; min-width: 0; }
.flare-datagrid__filter-builder-value { flex: 1 1 26%; min-width: 0; }

.flare-datagrid__filter-builder-actions {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-4);
  padding-top: var(--flare-spacing-2);
}

.flare-datagrid__composite {
    display: grid;
    gap: var(--flare-spacing-1) var(--flare-spacing-6);
    align-items: baseline;
    width: 100%;
}
.flare-datagrid__composite-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.flare-datagrid__composite-label {
    font-size: var(--flare-datagrid-composite-label-size);
    color: var(--flare-color-on-surface-variant);
    line-height: 1.2;
}
.flare-datagrid__composite-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flare-datagrid__cell--range {
  background: var(--flare-datagrid-range-layer);
}
.flare-datagrid__cell--active {
  outline: var(--flare-datagrid-active-cell-outline);
  outline-offset: -2px;
}

.flare-datagrid--cell-select { user-select: none; }

.flare-datagrid__row--pinned > .flare-datagrid__td {
  background: var(--flare-color-surface-container);
  font-weight: var(--flare-typescale-label-large-weight);
}
thead .flare-datagrid__row--pinned > .flare-datagrid__td {
  border-bottom: var(--flare-border-divider);
}
tfoot .flare-datagrid__row--pinned > .flare-datagrid__td {
  border-top: var(--flare-border-divider);
}

.flare-datagrid__wrapper tfoot {
  position: sticky;
  bottom: 0;
  z-index: 3;
}
.flare-datagrid__wrapper tfoot .flare-datagrid__td {
  background: var(--flare-color-surface-container-low);
}

.flare-datagrid__cell--center { text-align: center; }
.flare-datagrid__cell--end { text-align: end; }

.flare-datagrid__bool {
    --_flare-icon-size: var(--flare-datagrid-bool-icon-size);
    font-size: var(--_flare-icon-size);
    line-height: 1;
    vertical-align: middle;
}
.flare-datagrid__bool--on {
    color: var(--flare-color-primary);
}
.flare-datagrid__bool--off {
    color: var(--flare-color-outline);
}

.flare-datagrid__th--composite,
.flare-datagrid__td--composite {
    border-inline-end: var(--flare-border-divider);
}
.flare-datagrid__row--record > td {
    border-bottom: var(--flare-border-divider);
}

.flare-datagrid__row--record-first > td,
.flare-datagrid__row--record-first > th {
    border-top: var(--flare-datagrid-record-divider-width) solid var(--flare-color-outline-variant);
}
.flare-datagrid__table tbody > .flare-datagrid__row--record-first:first-child > td {
    border-top: 0;
}

.flare-datagrid__composite-filter {
    margin-top: var(--flare-spacing-2);
    font-weight: 400;
    cursor: auto;
}

.flare-datagrid__th--band {
    text-align: center;
    font-weight: 600;
    border-bottom: var(--flare-border-divider);
}

.flare-datagrid__table--scroll-x {
  width: max-content;
  min-width: 100%;
}

.flare-datagrid__th--frozen,
.flare-datagrid__td--frozen {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--flare-color-surface-container);
}

.flare-datagrid__th--frozen {
  z-index: 3;
  background-color: var(--flare-color-surface-container-high);
}

.flare-datagrid__th--frozen-right,
.flare-datagrid__td--frozen-right {
  position: sticky;
  right: 0;
  z-index: 2;
  background-color: var(--flare-color-surface-container);
}

.flare-datagrid__th--frozen-right {
  z-index: 3;
  background-color: var(--flare-color-surface-container-high);
}

.flare-datagrid__td--frozen::before,
.flare-datagrid__td--frozen-right::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-datagrid--hoverable .flare-datagrid__row:hover:not(.flare-datagrid__row--selected):not(.flare-datagrid__row--editing) > .flare-datagrid__td--frozen::before,
.flare-datagrid--hoverable .flare-datagrid__row:hover:not(.flare-datagrid__row--selected):not(.flare-datagrid__row--editing) > .flare-datagrid__td--frozen-right::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-datagrid__detail-toggle-th {
  width: 3rem;
}

.flare-datagrid__detail-toggle {
  width: 3rem;
  text-align: center;
  padding: var(--flare-spacing-2);
}

.flare-datagrid__detail-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--flare-color-on-surface-variant);
  padding: var(--flare-spacing-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--flare-shape-full);
  line-height: 1;
}

.flare-datagrid__detail-btn,
.flare-datagrid__column-picker-item,
.flare-datagrid__filter-trigger,
.flare-datagrid__filter-menu-list > .flare-checkbox {
  position: relative;
  z-index: 0;
}

.flare-datagrid__detail-btn::before,
.flare-datagrid__column-picker-item::before,
.flare-datagrid__filter-trigger::before,
.flare-datagrid__filter-menu-list > .flare-checkbox::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-datagrid__detail-btn:hover::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-datagrid__detail-btn > .flare-icon {
  font-size: var(--flare-datagrid-detail-icon-size);
}

.flare-datagrid__tree-toggle {
  font-size: var(--flare-datagrid-tree-toggle-size);
  cursor: pointer;
  margin-right: var(--flare-spacing-2);
  vertical-align: middle;
}

.flare-datagrid__tree-toggle .flare-icon {
  font-size: var(--flare-datagrid-tree-toggle-size);
}

.flare-datagrid__sentinel-cell {
  padding: 0;
  border: 0;
  height: 1px;
}

.flare-datagrid__sentinel {
  height: 1px;
}

.flare-datagrid__btn-icon {
  font-size: var(--flare-datagrid-btn-icon-size);
}

.flare-datagrid__close-icon {
  font-size: var(--flare-datagrid-close-icon-size);
}

.flare-datagrid__spacer {
  flex: 1 1 auto;
}

.flare-datagrid__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
}

.flare-datagrid__detail-row {
  background-color: var(--flare-color-surface-container-low);
}

.flare-datagrid__detail-cell {
  padding: var(--flare-spacing-8) var(--flare-spacing-12);
}

.flare-datagrid__th--edit-actions,
.flare-datagrid__td--edit-actions {
  width: 5.5rem;
  text-align: right;
  white-space: nowrap;
}

.flare-datagrid__row--editing .flare-datagrid__td {
  background: color-mix(in srgb, var(--flare-color-primary) var(--flare-datagrid-row-editing-pct), var(--flare-color-surface));
}

.flare-datagrid__cell--edit {
  padding: var(--flare-spacing-3) var(--flare-spacing-4);
}

.flare-datagrid__toolbar-end {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-4);
}

.flare-datagrid__column-picker-wrap {
  position: relative;
}

.flare-datagrid__column-picker:not([data-flare-placed]) {
  right: 0;
  top: calc(100% + 4px);
}

.flare-datagrid__column-picker {
  position: absolute;
  background: var(--flare-color-surface);
  border: var(--flare-border-outline);
  border-radius: var(--flare-shape-small);
  padding: var(--flare-spacing-4);
  min-width: var(--flare-datagrid-column-picker-min-width);
  z-index: 10;
  display: none;
  box-shadow: var(--flare-elevation-2);
}

.flare-datagrid__column-picker--open {
  display: block;
}

.flare-datagrid__column-picker-item {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-4);
  padding: var(--flare-spacing-2) var(--flare-spacing-4);
  cursor: pointer;
  border-radius: var(--flare-shape-extra-small);
  font-size: var(--flare-typescale-body-small-size);
  color: var(--flare-color-on-surface);
  user-select: none;
}

.flare-datagrid__column-picker-item:hover::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-datagrid__filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: var(--flare-spacing-2);
  padding: 0;
  border: none;
  border-radius: var(--flare-shape-full);
  background: transparent;
  color: var(--flare-color-on-surface-variant);
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--flare-motion-duration-short1) var(--flare-motion-easing-standard),
              color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-datagrid__filter-trigger > .flare-icon { font-size: var(--flare-datagrid-filter-icon-size); }

.flare-datagrid__filter-trigger:hover::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-datagrid__filter-trigger:hover { color: var(--flare-color-on-surface); }

.flare-datagrid__filter-trigger--active {
  color: var(--flare-color-primary);
}

.flare-datagrid__filter-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-4);
  min-width: 13rem;
  max-block-size: calc(100dvh - var(--flare-overlay-viewport-inset-compact));
  overflow-y: auto;
  padding: var(--flare-spacing-6);
  background: var(--flare-color-surface-container);
  border: var(--flare-border-divider);
  border-radius: var(--flare-shape-small);
  box-shadow: var(--flare-elevation-2);
  text-align: start;
  white-space: normal;
  cursor: default;
  font-weight: var(--flare-typescale-body-medium-weight);
  color: var(--flare-color-on-surface);
}

.flare-datagrid__filter-menu-label {
  font-family: var(--flare-typescale-label-small-font);
  font-size: var(--flare-typescale-label-small-size);
  font-weight: var(--flare-typescale-label-large-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--flare-color-on-surface-variant);
}

.flare-datagrid__filter-menu-field { display: block; }

.flare-datagrid__filter-menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-1);
  max-height: 11rem;
  overflow-y: auto;
  padding: var(--flare-spacing-1) var(--flare-spacing-1);
  border: var(--flare-border-divider);
  border-radius: var(--flare-shape-extra-small);
}

.flare-datagrid__filter-menu-list > .flare-checkbox {
  padding: var(--flare-spacing-1) var(--flare-spacing-2);
  border-radius: var(--flare-shape-extra-small);
}

.flare-datagrid__filter-menu-list > .flare-checkbox:hover::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-datagrid__filter-menu-divider {
  height: 1px;
  background: var(--flare-color-outline-variant);
  margin: var(--flare-spacing-1) 0;
}

.flare-datagrid__filter-menu-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--flare-spacing-4);
  margin-top: var(--flare-spacing-2);
}

.flare-datagrid__th--select,
.flare-datagrid__td--select {
  width: 2.75rem;
  text-align: center;
  padding-left: var(--flare-spacing-4);
  padding-right: var(--flare-spacing-4);
}

.flare-datagrid__aggregate-row {
  background: var(--flare-color-surface-container);
  border-top: var(--flare-datagrid-aggregate-divider-width) solid var(--flare-color-outline-variant);
}

.flare-datagrid__td--aggregate {
  font-weight: 600;
  color: var(--flare-color-on-surface);
}

.flare-datagrid--bordered .flare-datagrid__th,
.flare-datagrid--bordered .flare-datagrid__td {
  border-right: var(--flare-border-divider);
}

.flare-datagrid--bordered .flare-datagrid__th:last-child,
.flare-datagrid--bordered .flare-datagrid__td:last-child {
  border-right: none;
}

.flare-datagrid--bordered .flare-datagrid__wrapper--sticky-head thead th:not(:last-child) {
  border-right: none;
  box-shadow:
    inset 0 calc(-1 * var(--flare-border-width)) 0 var(--flare-color-outline-variant),
    inset calc(-1 * var(--flare-border-width)) 0 0 var(--flare-color-outline-variant);
}

.flare-datagrid--bordered .flare-datagrid__th {
  border-bottom: var(--flare-border-divider);
}

@media (max-width: 599px) {
  .flare-datagrid__wrapper {
    -webkit-overflow-scrolling: touch;
  }
  .flare-datagrid__table {
    min-width: max-content;
  }
}

/* ---- alert.css ---- */
.flare-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--flare-alert-gap);
  padding: var(--flare-alert-padding);
  border-radius: var(--flare-alert-radius);
  border-width: var(--flare-alert-border-width);
  border-style: solid;
  font-family: var(--flare-typescale-body-medium-font);
  font-size: var(--flare-typescale-body-medium-size);
  line-height: var(--flare-typescale-body-medium-height);
}

.flare-alert--info {
  background: var(--flare-color-primary-container);
  color: var(--flare-color-on-primary-container);
}

.flare-alert--success {
  background: var(--flare-color-secondary-container);
  color: var(--flare-color-on-secondary-container);
}

.flare-alert--warning {
  background: var(--flare-color-tertiary-container);
  color: var(--flare-color-on-tertiary-container);
}

.flare-alert--error {
  background: var(--flare-color-error-container);
  color: var(--flare-color-on-error-container);
}

.flare-alert--outlined {
  background: transparent;
  border-width: 1px;
}

.flare-alert--outlined.flare-alert--info {
  border-color: var(--flare-color-primary-container);
  color: var(--flare-color-on-primary-container);
  background: transparent;
}

.flare-alert--outlined.flare-alert--success {
  border-color: var(--flare-color-secondary-container);
  color: var(--flare-color-on-secondary-container);
  background: transparent;
}

.flare-alert--outlined.flare-alert--warning {
  border-color: var(--flare-color-tertiary-container);
  color: var(--flare-color-on-tertiary-container);
  background: transparent;
}

.flare-alert--outlined.flare-alert--error {
  border-color: var(--flare-color-error-container);
  color: var(--flare-color-on-error-container);
  background: transparent;
}

.flare-alert--text {
  background: transparent;
  border-width: 0;
}

.flare-alert--text.flare-alert--info {
  color: var(--flare-color-on-primary-container);
  background: transparent;
}

.flare-alert--text.flare-alert--success {
  color: var(--flare-color-on-secondary-container);
  background: transparent;
}

.flare-alert--text.flare-alert--warning {
  color: var(--flare-color-on-tertiary-container);
  background: transparent;
}

.flare-alert--text.flare-alert--error {
  color: var(--flare-color-on-error-container);
  background: transparent;
}

.flare-alert__icon {
  font-size: 1.125rem;
  line-height: 1.5rem;
  flex-shrink: 0;
}

.flare-alert__content { flex: 1; }

.flare-alert__title {
  font-weight: var(--flare-typescale-label-large-weight);
  font-size: var(--flare-typescale-label-large-size);
  margin-bottom: var(--flare-spacing-2);
}

.flare-alert__body { opacity: var(--flare-alert-body-opacity); }

.flare-alert__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--flare-spacing-1) var(--flare-spacing-2);
  border-radius: var(--flare-shape-extra-small);
  opacity: var(--flare-alert-close-opacity);
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
  transition: opacity var(--flare-motion-duration-short1);
}

.flare-alert__close:hover { opacity: 1; }

.flare-alert--dismissing {
  animation: flare-alert-dismiss 0.3s ease forwards;
}

@keyframes flare-alert-dismiss {
  to { opacity: 0; transform: translateY(-8px); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* ---- divider.css ---- */
.flare-divider {
  border: none;
  border-top: var(--flare-border-divider);
  margin: 0;
}

.flare-divider--vertical {
  width: 1px;
  height: 100%;
  background: var(--flare-color-outline-variant);
  border: none;
  align-self: stretch;
  flex-shrink: 0;
}

.flare-divider--text {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-6);
  border: none;
  color: var(--flare-color-on-surface-variant);
}

.flare-divider--text::before,
.flare-divider--text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--flare-color-outline-variant);
}

.flare-divider--text-left::before { flex: 0 0 1rem; }
.flare-divider--text-right::after { flex: 0 0 1rem; }

.flare-divider--inset {
  margin-inline-start: var(--flare-spacing-32);
}

.flare-divider--middle-inset {
  margin-inline-start: var(--flare-spacing-32);
  margin-inline-end: var(--flare-spacing-32);
}

.flare-divider__text {
  font-size: var(--flare-typescale-body-small-size);
  color: var(--flare-color-on-surface-variant);
  white-space: nowrap;
}

/* ---- validationsummary.css ---- */
.flare-validation-summary {
  padding: var(--flare-spacing-6) var(--flare-spacing-8);
  border-radius: var(--flare-shape-small);
  background: var(--flare-color-error-container);
  color: var(--flare-color-on-error-container);
  font-family: var(--flare-typescale-body-small-font);
  font-size: var(--flare-typescale-body-small-size);
}

.flare-validation-summary__list {
  margin: 0;
  padding: 0 0 0 var(--flare-spacing-10);
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-2);
}

.flare-validation-summary__item { line-height: 1.4; }

/* ---- switch.css ---- */
.flare-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--flare-spacing-6);
    cursor: pointer;
    user-select: none;

    --_track-width: var(--flare-switch-track-width-md);
    --_track-height: var(--flare-switch-track-height-md);
    --_thumb-off-size: var(--flare-switch-thumb-off-size-md);
    --_thumb-on-size: var(--flare-switch-thumb-on-size-md);
    --_thumb-pressed-off-size: var(--flare-switch-thumb-pressed-off-size-md);
    --_thumb-pressed-on-size: var(--flare-switch-thumb-pressed-on-size-md);
    --_thumb-off-left: var(--flare-switch-thumb-off-left-md);
    --_thumb-on-left: var(--flare-switch-thumb-on-left-md);
}

.flare-switch__track {
    position: relative;
    width: var(--_track-width);
    height: var(--_track-height);
    flex-shrink: 0;
}

.flare-switch__input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.flare-switch__thumb {
    display: block;
    width: var(--_track-width);
    height: var(--_track-height);
    border-radius: var(--flare-shape-full);
    border: var(--flare-switch-track-border);
    background: var(--flare-switch-track-off-bg);
    position: relative;
    transition:
        background var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
        border-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-switch__handle {
    position: absolute;
    top: 50%;
    left: var(--_thumb-off-left);
    transform: translateY(-50%);
    width: var(--_thumb-off-size);
    height: var(--_thumb-off-size);

    border-radius: 50%;
    background: var(--flare-switch-thumb-off-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--flare-switch-icon-off-color);

    transition:
        left var(--flare-motion-duration-spring-fast) var(--flare-motion-easing-spring-fast),
        width var(--flare-motion-duration-spring-fast) var(--flare-motion-easing-spring-fast),
        height var(--flare-motion-duration-spring-fast) var(--flare-motion-easing-spring-fast),
        background var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
        box-shadow var(--flare-motion-duration-short1) ease;
}

.flare-switch__handle .flare-icon,
.flare-switch__handle .flare-icon {
    font-size: var(--flare-switch-icon-size);
    width: 1em;
    height: 1em;
}

.flare-switch--with-icon .flare-switch__handle {
    width: var(--_thumb-on-size);
    height: var(--_thumb-on-size);
}

.flare-switch__input:checked + .flare-switch__thumb {
    background: var(--flare-switch-track-on-bg);
    border-color: var(--flare-switch-track-on-bg);
}

.flare-switch__input:checked + .flare-switch__thumb .flare-switch__handle {

    left: var(--_thumb-on-left);
    width: var(--_thumb-on-size);
    height: var(--_thumb-on-size);
    background: var(--flare-switch-thumb-on-color);

    color: var(--flare-switch-icon-on-color);
}

.flare-switch:not(.flare-switch--disabled):active .flare-switch__thumb .flare-switch__handle {
    width: var(--_thumb-pressed-off-size);
    height: var(--_thumb-pressed-off-size);
}
.flare-switch:not(.flare-switch--disabled):active .flare-switch__input:checked + .flare-switch__thumb .flare-switch__handle {
    width: var(--_thumb-pressed-on-size);
    height: var(--_thumb-pressed-on-size);
}

.flare-switch:not(.flare-switch--disabled):hover .flare-switch__thumb {
    background: var(--flare-switch-track-hover-off-bg);
    border-color: var(--flare-switch-track-hover-border-color);
}

.flare-switch:not(.flare-switch--disabled):hover .flare-switch__input:checked + .flare-switch__thumb {
    background: var(--flare-switch-track-hover-on-bg);
    border-color: var(--flare-switch-track-hover-on-bg);
}

.flare-switch:not(.flare-switch--disabled):hover .flare-switch__thumb .flare-switch__handle {
    box-shadow: var(--flare-switch-hover-shadow-off);
}

.flare-switch:not(.flare-switch--disabled):hover .flare-switch__input:checked + .flare-switch__thumb .flare-switch__handle {
    box-shadow: var(--flare-switch-hover-shadow-on);
}

.flare-switch__input:focus-visible + .flare-switch__thumb {
    outline: var(--flare-switch-focus-outline);
    outline-offset: var(--flare-switch-focus-outline-offset);
    box-shadow: var(--flare-switch-focus-shadow);
}

.flare-switch:not(.flare-switch--disabled):hover .flare-switch__handle,
.flare-switch:not(.flare-switch--disabled):active .flare-switch__handle,
.flare-switch__input:focus-visible + .flare-switch__thumb .flare-switch__handle {
    background: var(--flare-switch-thumb-state-off-color);
}
.flare-switch:not(.flare-switch--disabled):hover .flare-switch__input:checked + .flare-switch__thumb .flare-switch__handle,
.flare-switch:not(.flare-switch--disabled):active .flare-switch__input:checked + .flare-switch__thumb .flare-switch__handle,
.flare-switch__input:checked:focus-visible + .flare-switch__thumb .flare-switch__handle {
    background: var(--flare-switch-thumb-state-on-color);
}

.flare-switch__input:focus-visible + .flare-switch__thumb .flare-switch__handle {
    box-shadow: var(--flare-switch-focus-shadow-off);
}
.flare-switch__input:checked:focus-visible + .flare-switch__thumb .flare-switch__handle {
    box-shadow: var(--flare-switch-focus-shadow-on);
}

.flare-switch__error {
    font-size: var(--flare-typescale-body-small-size);
    color: var(--flare-color-error);
}

.flare-switch--label-start { flex-direction: row-reverse; }

.flare-switch--xs {
    --_track-width: var(--flare-switch-track-width-xs);
    --_track-height: var(--flare-switch-track-height-xs);
    --_thumb-off-size: var(--flare-switch-thumb-off-size-xs);
    --_thumb-on-size: var(--flare-switch-thumb-on-size-xs);
    --_thumb-pressed-off-size: var(--flare-switch-thumb-pressed-off-size-xs);
    --_thumb-pressed-on-size: var(--flare-switch-thumb-pressed-on-size-xs);
    --_thumb-off-left: var(--flare-switch-thumb-off-left-xs);
    --_thumb-on-left: var(--flare-switch-thumb-on-left-xs);
}

.flare-switch--sm {
    --_track-width: var(--flare-switch-track-width-sm);
    --_track-height: var(--flare-switch-track-height-sm);
    --_thumb-off-size: var(--flare-switch-thumb-off-size-sm);
    --_thumb-on-size: var(--flare-switch-thumb-on-size-sm);
    --_thumb-pressed-off-size: var(--flare-switch-thumb-pressed-off-size-sm);
    --_thumb-pressed-on-size: var(--flare-switch-thumb-pressed-on-size-sm);
    --_thumb-off-left: var(--flare-switch-thumb-off-left-sm);
    --_thumb-on-left: var(--flare-switch-thumb-on-left-sm);
}

.flare-switch--lg {
    --_track-width: var(--flare-switch-track-width-lg);
    --_track-height: var(--flare-switch-track-height-lg);
    --_thumb-off-size: var(--flare-switch-thumb-off-size-lg);
    --_thumb-on-size: var(--flare-switch-thumb-on-size-lg);
    --_thumb-pressed-off-size: var(--flare-switch-thumb-pressed-off-size-lg);
    --_thumb-pressed-on-size: var(--flare-switch-thumb-pressed-on-size-lg);
    --_thumb-off-left: var(--flare-switch-thumb-off-left-lg);
    --_thumb-on-left: var(--flare-switch-thumb-on-left-lg);
}

.flare-switch--xl {
    --_track-width: var(--flare-switch-track-width-xl);
    --_track-height: var(--flare-switch-track-height-xl);
    --_thumb-off-size: var(--flare-switch-thumb-off-size-xl);
    --_thumb-on-size: var(--flare-switch-thumb-on-size-xl);
    --_thumb-pressed-off-size: var(--flare-switch-thumb-pressed-off-size-xl);
    --_thumb-pressed-on-size: var(--flare-switch-thumb-pressed-on-size-xl);
    --_thumb-off-left: var(--flare-switch-thumb-off-left-xl);
    --_thumb-on-left: var(--flare-switch-thumb-on-left-xl);
}

.flare-switch--disabled { pointer-events: none; }
.flare-switch--disabled .flare-switch__thumb {
    background: var(--flare-switch-disabled-track-bg);
    border-color: var(--flare-switch-disabled-track-border);
}
.flare-switch--disabled .flare-switch__handle {
    background: var(--flare-switch-disabled-handle-bg);
}
.flare-switch--disabled .flare-switch__label {
    opacity: var(--flare-state-disabled-opacity);
}

@media (prefers-reduced-motion: reduce) {
    .flare-switch__handle { transition-duration: 0s; }
}

/* ---- textarea.css ---- */
.flare-textarea__control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;

}

.flare-textarea--autogrow .flare-textarea__control {
  field-sizing: content;
  resize: none;

  max-height: calc(var(--flare-textarea-max-lines, 1000) * 1.5em + 1.5rem);
  overflow-y: auto;
}

/* ---- picker.css ---- */
.flare-picker__field { cursor: pointer; }

.flare-picker__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--flare-z-dropdown, 1000);
}

.flare-picker__panel {
    position: fixed;
    z-index: var(--flare-z-dropdown, 1000);
    background: var(--flare-color-surface-container-high);
    border-radius: var(--flare-picker-panel-radius);
    box-shadow: var(--flare-elevation-3);
    padding: var(--flare-spacing-6);
}

.flare-picker__panel--inline {
    position: static;
    z-index: auto;
    box-shadow: none;
    padding: var(--flare-spacing-3) 0 0;
    background: transparent;
}

.flare-picker__day-headers {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    min-height: var(--flare-picker-weekday-height);
    text-align: center;
    font-size: var(--flare-picker-weekday-font-size);
    color: var(--flare-color-on-surface-variant);
    margin-bottom: var(--flare-spacing-2);
}

.flare-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: var(--flare-picker-day-size);
    align-items: center;
    justify-items: center;
}

.flare-picker__day-headers--weeks,
.flare-picker__grid--weeks {
    grid-template-columns: auto repeat(7, minmax(0, 1fr));
}
.flare-picker__weeknum {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    font-size: 0.7rem;
    color: var(--flare-color-on-surface-variant);
    opacity: var(--flare-picker-weeknum-opacity);
}

.flare-picker__day {
    width: min(100%, var(--flare-picker-day-layer-size));
    aspect-ratio: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--flare-picker-day-font-size);
    color: var(--flare-color-on-surface);
    font-family: inherit;
    transition: background-color var(--flare-motion-duration-short2);
}
.flare-picker__day:hover:not(:disabled) {
    background: var(--flare-state-hover-layer);
}
.flare-picker__day--outside {
    color: var(--flare-color-on-surface-variant);
    opacity: var(--flare-picker-outside-opacity);
}

.flare-picker__day--today {
    font-weight: 700;
    color: var(--flare-color-primary);
}
.flare-picker__day--selected {
    background: var(--flare-color-primary);
    color: var(--flare-color-on-primary);
}
.flare-picker__day--selected:hover {
    background: var(--flare-color-primary);
}
.flare-picker__day--disabled {
    opacity: var(--flare-picker-disabled-opacity);
    cursor: not-allowed;
}

/* ---- datepicker.css ---- */
.flare-datepicker__panel { min-width: min(var(--flare-picker-panel-min-width), 100%); }

.flare-datepicker__header,
.flare-datetimepicker__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--flare-picker-header-height);
  margin-bottom: var(--flare-spacing-4);
}

.flare-datepicker__header .flare-btn,
.flare-datetimepicker__nav .flare-btn {
  --_flare-icon-size: var(--flare-picker-nav-icon-size);
}

.flare-datepicker__month-label {
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: default;
  color: var(--flare-color-on-surface);
  flex: 1;
  text-align: center;
  padding: var(--flare-spacing-2) var(--flare-spacing-4);
  border-radius: var(--flare-shape-small);
  font-family: var(--flare-typescale-body-large-font);
  font-size: var(--flare-typescale-body-large-size);
}

.flare-datepicker__month-label--clickable {
  position: relative;
  z-index: 0;
  cursor: pointer;
  transition: background-color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-datepicker__month-label--clickable::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-datepicker__month-label--clickable:hover::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-datepicker__footer,
.flare-datetimepicker__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--flare-spacing-4);
  border-top: var(--flare-border-divider);
  padding-top: var(--flare-spacing-4);
}
.flare-datepicker__footer { margin-top: var(--flare-spacing-4); }

.flare-daterangepicker {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-2);
}

.flare-daterangepicker__fields {
  display: flex;
  align-items: flex-end;
  gap: var(--flare-spacing-4);

  flex-wrap: wrap;
}

.flare-daterangepicker__fields > .flare-datepicker { flex: 1 1 12rem; min-inline-size: 0; }

.flare-daterangepicker__sep {
  font-size: 1.25rem;
  color: var(--flare-color-on-surface-variant);
  padding-bottom: var(--flare-spacing-5);
  flex-shrink: 0;
}

.flare-daterangepicker__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flare-spacing-3);
  margin-bottom: var(--flare-spacing-2);
}

.flare-daterangepicker__preset {
  position: relative;
  z-index: 0;
  border: var(--flare-border-divider);
  background: transparent;
  color: var(--flare-color-on-surface-variant);
  border-radius: var(--flare-shape-full);
  padding: var(--flare-spacing-2) var(--flare-spacing-6);
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-label-large-size);
  cursor: pointer;
  transition: background var(--flare-motion-duration-short1),
              color var(--flare-motion-duration-short1),
              border-color var(--flare-motion-duration-short1);
}

.flare-daterangepicker__preset::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-daterangepicker__preset:hover:not(:disabled)::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-daterangepicker__preset--active {
  background: var(--flare-color-secondary-container);
  color: var(--flare-color-on-secondary-container);
  border-color: transparent;
}

.flare-daterangepicker__preset:disabled {
  opacity: var(--flare-state-disabled-opacity);
  cursor: default;
}

.flare-daterangepicker__calendar {
  max-width: 20rem;
  padding-top: var(--flare-spacing-4);
}

.flare-picker__day.flare-daterangepicker__day--in-range,
.flare-picker__day.flare-daterangepicker__day--start,
.flare-picker__day.flare-daterangepicker__day--end {
  width: 100%;
  height: var(--flare-picker-day-layer-size);
  aspect-ratio: auto;
  border-radius: 0;
}
.flare-picker__day.flare-daterangepicker__day--in-range {
  background: var(--flare-color-secondary-container);
  color: var(--flare-color-on-secondary-container);
}
.flare-picker__day.flare-daterangepicker__day--start,
.flare-picker__day.flare-daterangepicker__day--end {
  position: relative;
  z-index: 0;
  color: var(--flare-color-on-primary);
  background: linear-gradient(var(--flare-color-secondary-container), var(--flare-color-secondary-container))
              no-repeat right / 50% 100%;
}
.flare-picker__day.flare-daterangepicker__day--end { background-position: left; }
.flare-picker__day.flare-daterangepicker__day--start:dir(rtl) { background-position: left; }
.flare-picker__day.flare-daterangepicker__day--end:dir(rtl) { background-position: right; }
.flare-picker__day.flare-daterangepicker__day--start.flare-daterangepicker__day--end { background: none; }
.flare-picker__day.flare-daterangepicker__day--start::before,
.flare-picker__day.flare-daterangepicker__day--end::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: var(--flare-picker-day-layer-size);
  height: 100%;
  translate: -50% 0;
  border-radius: var(--flare-shape-full);
  background: var(--flare-color-primary);
}

.flare-datepicker__month-grid,
.flare-datepicker__year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--flare-spacing-2);
  padding: var(--flare-spacing-2) 0;
}

.flare-datepicker__month-btn,
.flare-datepicker__year-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--flare-spacing-5) var(--flare-spacing-2);
  border-radius: var(--flare-shape-small);
  font-size: 0.875rem;
  color: var(--flare-color-on-surface);
  text-align: center;
  font-family: inherit;
  transition: background-color var(--flare-motion-duration-short2);
}

.flare-datepicker__month-btn:hover:not(:disabled),
.flare-datepicker__year-btn:hover:not(:disabled) {
  background: var(--flare-state-hover-layer);
}

.flare-datepicker__month-btn--selected,
.flare-datepicker__year-btn--selected {
  background: var(--flare-color-primary);
  color: var(--flare-color-on-primary);
  font-weight: 600;
}

.flare-datepicker__month-btn--selected:hover,
.flare-datepicker__year-btn--selected:hover {
  background: var(--flare-color-primary);
}

/* ---- timepicker.css ---- */
.flare-timepicker__panel {
  min-width: 17rem;
  padding: var(--flare-spacing-8);
  color: var(--flare-color-on-surface);
  border-radius: var(--flare-timepicker-panel-radius);
}
.flare-timepicker__panel-headline {
  font-size: var(--flare-typescale-label-medium-size);
  color: var(--flare-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--flare-timepicker-headline-tracking);
}
.flare-timepicker__display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--flare-spacing-2);
  margin: var(--flare-spacing-4) 0 var(--flare-spacing-8);
  font-size: var(--flare-timepicker-display-size);
  line-height: 1;
  color: var(--flare-color-on-surface);
}
.flare-timepicker__display-sep { color: var(--flare-color-on-surface-variant); }
.flare-timepicker__display-part--active { color: var(--flare-color-primary); }

.flare-clock-dial:focus,
.flare-clock-dial:focus-visible,
.flare-timepicker__columns:focus,
.flare-timepicker__columns:focus-visible { outline: none; }
.flare-clock-dial { display: block; }
.flare-timepicker__columns { display: flex; align-items: stretch; justify-content: center; gap: var(--flare-spacing-4); }
.flare-timepicker__columns-sep { align-self: center; font-size: var(--flare-timepicker-columns-sep-size); color: var(--flare-color-on-surface-variant); }
.flare-timepicker__col {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-1);
  max-height: 12rem;
  overflow-y: auto;
  padding: var(--flare-spacing-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.flare-timepicker__col::-webkit-scrollbar { width: 0; height: 0; display: none; }
.flare-timepicker__cell {
  position: relative;
  z-index: 0;
  min-width: 3rem;
  padding: var(--flare-spacing-4) var(--flare-spacing-6);
  border: none;
  background: transparent;
  border-radius: var(--flare-shape-full);
  cursor: pointer;
  color: var(--flare-color-on-surface);
  font-size: var(--flare-typescale-body-large-size);
  text-align: center;
  transition: background var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-timepicker__cell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-timepicker__cell:hover::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}
.flare-timepicker__cell--selected {
  background: var(--flare-color-primary-container);
  color: var(--flare-color-on-primary-container);
}
.flare-timepicker__actions { display: flex; justify-content: flex-end; gap: var(--flare-spacing-4); margin-top: var(--flare-spacing-6); }

.flare-timepicker__panel--dial { min-width: 19rem; }
.flare-timepicker__dial-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--flare-spacing-8);
  margin: var(--flare-spacing-6) 0 var(--flare-spacing-4);
}
.flare-timepicker__time-fields { display: flex; align-items: center; gap: var(--flare-spacing-2); }
.flare-timepicker__time-fields-sep { font-size: var(--flare-timepicker-time-sep-size); color: var(--flare-color-on-surface-variant); }
.flare-timepicker__time-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--flare-timepicker-display-size);
  line-height: 1;
  min-width: var(--flare-timepicker-time-field-width);
  min-height: var(--flare-timepicker-time-field-height);
  padding: var(--flare-spacing-2) var(--flare-spacing-4);
  border: none;
  border-radius: var(--flare-shape-small);
  background: var(--flare-color-surface-container-highest);
  color: var(--flare-color-on-surface);
  cursor: pointer;
}
.flare-timepicker__time-field--active {
  background: var(--flare-color-primary-container);
  color: var(--flare-color-on-primary-container);
}
.flare-timepicker__period { display: inline-flex; flex-direction: column; min-width: var(--flare-timepicker-period-width); min-height: var(--flare-timepicker-period-height); border: var(--flare-border-outline); border-radius: var(--flare-shape-small); overflow: hidden; }
.flare-timepicker__period-btn {
  flex: 1;
  padding: var(--flare-spacing-3) var(--flare-spacing-6);
  border: none;
  background: transparent;
  color: var(--flare-color-on-surface-variant);
  cursor: pointer;
  font-size: var(--flare-typescale-label-large-size);
}
.flare-timepicker__period-btn--selected {
  background: var(--flare-color-tertiary-container);
  color: var(--flare-color-on-tertiary-container);
}

.flare-timepicker__dial {
  position: relative;
  width: var(--flare-timepicker-dial-size);
  height: var(--flare-timepicker-dial-size);
  margin: var(--flare-spacing-4) auto;
  border-radius: 50%;
  background: var(--flare-color-surface-container-highest);
  touch-action: none;
  cursor: pointer;
  user-select: none;
}

.flare-timepicker__dial-center,
.flare-timepicker__dial-hand,
.flare-timepicker__dial-num { pointer-events: none; }
.flare-timepicker__dial-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--flare-timepicker-dial-center-size);
  height: var(--flare-timepicker-dial-center-size);
  border-radius: 50%;
  background: var(--flare-color-primary);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.flare-timepicker__dial-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: var(--flare-timepicker-dial-track-width);
  height: calc(var(--flare-dial-len, 40) * 1%);
  background: var(--flare-color-primary);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--flare-dial-angle, 0deg));
  transition: transform var(--flare-motion-duration-short3) var(--flare-motion-easing-standard),
              height var(--flare-motion-duration-short3) var(--flare-motion-easing-standard);
  z-index: 1;
}
.flare-timepicker__dial-num {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--flare-timepicker-dial-handle-size);
  height: var(--flare-timepicker-dial-handle-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: var(--flare-color-on-surface);
  font-size: var(--flare-typescale-body-large-size);
  z-index: 3;
}
.flare-timepicker__dial-num--selected {
  background: var(--flare-color-primary);
  color: var(--flare-color-on-primary);
}

/* ---- autocomplete.css ---- */
.flare-autocomplete {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-2);
}

.flare-autocomplete__field {}

.flare-autocomplete__icon {
  display: inline-flex;
  align-items: center;
  margin: 0;
  background: none;
  border: none;
  padding: 0 var(--flare-spacing-6);
  color: var(--flare-color-on-surface-variant);

  --_flare-icon-size: var(--flare-input-icon-size);
  font-size: var(--_flare-icon-size);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.flare-autocomplete__icon:disabled { cursor: default; }

.flare-autocomplete__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 var(--flare-spacing-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--flare-color-on-surface-variant);
  border-radius: var(--flare-shape-full);
}
.flare-autocomplete__clear:hover { color: var(--flare-color-on-surface); }

.flare-input--disabled .flare-autocomplete__icon { opacity: var(--flare-input-disabled-opacity); }

.flare-autocomplete__spinner {
    font-size: 1rem;
    animation: flare-spin 1s linear infinite;
}

/* ---- breadcrumb.css ---- */
.flare-breadcrumb { }

.flare-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--flare-spacing-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-label-large-size);
}

.flare-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--flare-spacing-2);
}

.flare-breadcrumb__link {
  color: var(--flare-color-primary);
  text-decoration: none;
  transition: opacity var(--flare-motion-duration-short1);
}

.flare-breadcrumb__link:hover { opacity: var(--flare-breadcrumb-link-hover-opacity); text-decoration: underline; }

.flare-breadcrumb__text { color: var(--flare-color-on-surface-variant); }

.flare-breadcrumb__item--current .flare-breadcrumb__text {
  color: var(--flare-color-on-surface);
  font-weight: var(--flare-typescale-label-large-weight);
}

.flare-breadcrumb__separator {
  color: var(--flare-color-on-surface-variant);
  opacity: var(--flare-breadcrumb-separator-opacity);
  user-select: none;
}

.flare-breadcrumb__expander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.5rem;
  padding: 0 var(--flare-spacing-3);
  border: none;
  border-radius: var(--flare-shape-small);
  background: var(--flare-color-surface-container-high);
  color: var(--flare-color-on-surface-variant);
  font: inherit;
  line-height: 1;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--flare-motion-duration-short1);
}

.flare-breadcrumb__expander:hover {
  background: var(--flare-state-hover-layer);
}

/* ---- pagination.css ---- */
.flare-pagination {
  display: flex;
  align-items: center;
  gap: var(--flare-spacing-2);
  flex-wrap: wrap;

  --_pg-size: var(--flare-pagination-size-md);
}

.flare-pagination__info {
  color: var(--flare-color-on-surface-variant);
  font-size: var(--flare-typescale-body-medium-size);
  white-space: nowrap;
}

.flare-pagination__btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--_pg-size);
  height: var(--_pg-size);
  padding: 0 var(--flare-spacing-4);
  border: var(--flare-border-width) var(--flare-border-style) var(--flare-pagination-border-color);
  border-radius: var(--flare-pagination-radius);
  background: transparent;
  color: var(--flare-color-on-surface);
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-label-large-size);
  cursor: pointer;
  transition:
    background-color var(--flare-motion-duration-short1),
    border-color var(--flare-motion-duration-short1);
}

.flare-pagination__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-pagination__btn:hover:not(:disabled):not(.flare-pagination__btn--active)::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-pagination__btn:hover:not(:disabled) { border-color: var(--flare-color-outline); }

.flare-pagination__btn--active {
  background: var(--fc-main, var(--flare-pagination-active-color));
  border-color: var(--fc-main, var(--flare-pagination-active-color));
  color: var(--fc-on, var(--flare-color-on-primary));
}

.flare-pagination__btn--nav {
  font-size: var(--flare-typescale-title-medium-size);
  line-height: 1;
}

.flare-pagination__btn:disabled {
  opacity: var(--flare-pagination-btn-disabled-opacity);
  cursor: not-allowed;
}

.flare-pagination__ellipsis {
  min-width: var(--_pg-size);
  height: var(--_pg-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--flare-color-on-surface-variant);
  font-size: var(--flare-typescale-body-large-size);
}

.flare-pagination__rows {
  display: inline-flex;
  align-items: center;
  gap: var(--flare-spacing-4);
  margin-right: var(--flare-spacing-4);
  color: var(--flare-color-on-surface-variant);
  font-size: var(--flare-typescale-body-medium-size);
}
.flare-pagination__rows-label {
  white-space: nowrap;
}
.flare-pagination__rows-select {
  height: var(--_pg-size);
  padding: 0 var(--flare-spacing-4);
  border: var(--flare-border-width) var(--flare-border-style) var(--flare-pagination-border-color);
  border-radius: var(--flare-pagination-radius);
  background: var(--flare-color-surface);
  color: var(--flare-color-on-surface);
  font-family: var(--flare-typescale-body-medium-font);
  font-size: var(--flare-typescale-body-medium-size);
  cursor: pointer;
}

.flare-pagination--xs { --_pg-size: var(--flare-pagination-size-xs); }
.flare-pagination--sm { --_pg-size: var(--flare-pagination-size-sm); }
.flare-pagination--lg { --_pg-size: var(--flare-pagination-size-lg); }
.flare-pagination--xl { --_pg-size: var(--flare-pagination-size-xl); }

.flare-pagination--xs .flare-pagination__btn,
.flare-pagination--xs .flare-pagination__ellipsis,
.flare-pagination--xs .flare-pagination__rows-select { font-size: var(--flare-typescale-label-small-size); }
.flare-pagination--sm .flare-pagination__btn,
.flare-pagination--sm .flare-pagination__ellipsis,
.flare-pagination--sm .flare-pagination__rows-select { font-size: var(--flare-typescale-label-small-size); }
.flare-pagination--lg .flare-pagination__btn,
.flare-pagination--lg .flare-pagination__ellipsis,
.flare-pagination--lg .flare-pagination__rows-select { font-size: var(--flare-typescale-title-medium-size); }
.flare-pagination--xl .flare-pagination__btn,
.flare-pagination--xl .flare-pagination__ellipsis,
.flare-pagination--xl .flare-pagination__rows-select { font-size: var(--flare-typescale-title-large-size); }

/* ---- drawer.css ---- */
.flare-drawer-scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--flare-color-scrim) calc(var(--flare-scrim-opacity) * 100%), transparent);
  z-index: 400;
  animation: flare-scrim-in var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard);
}

.flare-drawer {
  position: fixed;

  background: var(--flare-color-surface-container-low);
  box-shadow: var(--flare-elevation-3);
  z-index: 401;
  display: flex;
  flex-direction: column;

  visibility: hidden;
  transition: transform var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard),
              visibility 0s var(--flare-motion-duration-medium1);
  overflow: hidden;
}

.flare-drawer--left  { top: 0; left: 0; bottom: 0; transform: translateX(-100%); width: var(--flare-drawer-width); }
.flare-drawer--right { top: 0; right: 0; bottom: 0; transform: translateX(100%); width: var(--flare-drawer-width); }
.flare-drawer--top   { top: 0; left: 0; right: 0; transform: translateY(-100%); }
.flare-drawer--bottom { bottom: 0; left: 0; right: 0; transform: translateY(100%); }

.flare-drawer--open  {
  transform: none !important;
  visibility: visible;
  transition-delay: 0s;
}

.flare-drawer__header {
  padding: var(--flare-spacing-8) var(--flare-spacing-12);
  border-bottom: var(--flare-drawer-section-border);
  font-family: var(--flare-typescale-title-medium-font);
  font-size: var(--flare-typescale-title-medium-size);
  font-weight: var(--flare-typescale-title-medium-weight);
  color: var(--flare-color-on-surface);
  flex-shrink: 0;
}

.flare-drawer__content {
  flex: 1;
  overflow-y: auto;

  padding: var(--flare-spacing-4) var(--_content-pad-x, 0);
}

.flare-drawer--content-pad-xxsmall { --_content-pad-x: var(--flare-spacing-2); }
.flare-drawer--content-pad-xsmall  { --_content-pad-x: var(--flare-spacing-4); }
.flare-drawer--content-pad-small   { --_content-pad-x: var(--flare-spacing-6); }
.flare-drawer--content-pad-medium  { --_content-pad-x: var(--flare-spacing-8); }
.flare-drawer--content-pad-large   { --_content-pad-x: var(--flare-spacing-12); }
.flare-drawer--content-pad-xlarge  { --_content-pad-x: var(--flare-spacing-16); }

@keyframes flare-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.flare-drawer--permanent {
  position: relative;
  transform: none !important;
  visibility: visible !important;
  box-shadow: none;
  border-inline-end: var(--flare-drawer-border);
  z-index: auto;
}

.flare-drawer--persistent {
  position: relative;
  transform: none !important;
  visibility: visible !important;
  box-shadow: none;
  border-inline-end: var(--flare-drawer-border);
  z-index: auto;
  width: var(--flare-drawer-width);
  transition: width var(--flare-motion-duration-medium2) var(--flare-motion-easing-standard);
}

.flare-drawer--persistent:not(.flare-drawer--expanded) {
  width: 0 !important;
  border-inline-end-width: 0;
}

@media (min-width: 960px) {
  .flare-drawer--responsive {
    position: relative;
    transform: none !important;
    visibility: visible !important;
    box-shadow: none;
    border-inline-end: var(--flare-drawer-border);
    z-index: auto;
    width: var(--flare-drawer-width);
    transition: width var(--flare-motion-duration-medium2) var(--flare-motion-easing-standard);
  }

  .flare-drawer--responsive:not(.flare-drawer--expanded) {
    width: 0 !important;
    border-inline-end-width: 0;
  }

  .flare-drawer-scrim--responsive { display: none; }
}

.flare-drawer--mini {
  position: relative;
  overflow: hidden;
  transform: none !important;
  visibility: visible !important;
  box-shadow: none;
  border-inline-end: var(--flare-drawer-border);
  width: var(--flare-drawer-mini-width);
  z-index: auto;
  transition: width var(--flare-motion-duration-medium2) var(--flare-motion-easing-standard);
}

.flare-drawer--mini:hover {
  width: var(--flare-drawer-width);
}

.flare-drawer--permanent.flare-drawer--right,
.flare-drawer--mini.flare-drawer--right,
.flare-drawer--persistent.flare-drawer--right,
.flare-drawer--responsive.flare-drawer--right {
  border-inline-end: none;
  border-inline-start: var(--flare-drawer-border);
}

.flare-drawer--persistent.flare-drawer--right:not(.flare-drawer--expanded) {
  border-inline-start-width: 0;
}

@media (max-width: 599.98px)  {
  .flare-drawer--ac-sm,   .flare-drawer-scrim--ac-sm   { display: none !important; }
}
@media (max-width: 959.98px)  {
  .flare-drawer--ac-md,   .flare-drawer-scrim--ac-md   { display: none !important; }
}
@media (max-width: 1279.98px) {
  .flare-drawer--ac-lg,   .flare-drawer-scrim--ac-lg   { display: none !important; }
}
@media (max-width: 1919.98px) {
  .flare-drawer--ac-xl,   .flare-drawer-scrim--ac-xl   { display: none !important; }
}

/* ---- nav.css ---- */
.flare-nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-1);
  padding: var(--flare-spacing-4) 0;
}

.flare-nav-menu--no-scrollbar {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.flare-nav-menu--no-scrollbar::-webkit-scrollbar { width: 0; height: 0; }

.flare-nav-menu--framed {
  height: 100%;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.flare-nav-menu__scroll {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-1);
  padding: var(--flare-spacing-4) 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.flare-nav-menu__header,
.flare-nav-menu__footer {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-1);
  flex: none;
  padding: var(--flare-spacing-3) 0;
}

.flare-nav-menu__header { border-bottom: var(--flare-drawer-section-border); }
.flare-nav-menu__footer { border-top: var(--flare-drawer-section-border); }

.flare-nav-menu--framed.flare-nav-menu--no-scrollbar { overflow: hidden; }
.flare-nav-menu--framed.flare-nav-menu--no-scrollbar .flare-nav-menu__scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.flare-nav-menu--framed.flare-nav-menu--no-scrollbar .flare-nav-menu__scroll::-webkit-scrollbar { width: 0; height: 0; }

.flare-nav-menu__meta {
  padding: var(--flare-spacing-3) var(--flare-spacing-8);
  color: var(--flare-color-on-surface-variant);
}
.flare-nav-menu--rail .flare-nav-menu__meta { display: none; }

.flare-nav-group { display: flex; flex-direction: column; }

.flare-nav-group__header {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  min-height: var(--flare-nav-item-height);
  --_flare-icon-size: var(--flare-nav-icon-size);
  gap: var(--flare-spacing-6);
  padding: var(--flare-spacing-5) var(--flare-spacing-8);
  border: none;
  background: transparent;
  color: var(--flare-color-on-surface-variant);
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-label-large-size);
  font-weight: var(--flare-typescale-label-large-weight);
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-radius: var(--flare-nav-item-radius);
  transition: background-color var(--flare-motion-duration-short1);
}

.flare-nav-group__header::before,
.flare-nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-nav-group__header:hover::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-nav-group__icon,
.flare-nav-link__icon { display: inline-flex; flex-shrink: 0; }
.flare-nav-group__title { flex: 1; }

.flare-nav-group__chevron {
  font-size: 1rem;
  transition: transform var(--flare-motion-duration-medium2) var(--flare-motion-easing-emphasized);
  display: inline-block;
  margin-left: auto;
  transform: rotate(0deg);
}

.flare-nav-group__chevron--open { transform: rotate(180deg); }

.flare-nav-group__items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--flare-motion-duration-medium2) var(--flare-motion-easing-emphasized);
}

.flare-nav-group__items--open { grid-template-rows: 1fr; }

.flare-nav-group__items-inner {
  display: flex;
  flex-direction: column;
  padding-left: var(--flare-spacing-8);
  gap: var(--flare-spacing-1);
  overflow: hidden;
  min-height: 0;
}

.flare-nav-link {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  min-height: var(--flare-nav-item-height);
  --_flare-icon-size: var(--flare-nav-icon-size);
  gap: var(--flare-spacing-6);
  padding: var(--flare-spacing-5) var(--flare-spacing-8);
  border-radius: var(--flare-nav-item-radius);
  text-decoration: none;
  color: var(--flare-color-on-surface-variant);
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-label-large-size);
  font-weight: var(--flare-typescale-label-large-weight);
  transition: background-color var(--flare-motion-duration-short1), color var(--flare-motion-duration-short1);
}

.flare-nav-link:hover:not(.flare-nav-link--active)::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-nav-link:hover { color: var(--flare-color-on-surface); }

.flare-nav-link--active {
  background: var(--flare-nav-active-indicator);
  border-radius: var(--flare-nav-indicator-radius);
  border-left: var(--flare-nav-active-left-bar);
  color: var(--flare-color-on-secondary-container);
  font-weight: var(--flare-nav-active-weight);
}

.flare-nav-link--disabled {
  opacity: var(--flare-nav-link-disabled-opacity);
  pointer-events: none;
}

.flare-nav-link__text { flex: 1; min-width: 0; }
.flare-nav-link__badge {
  background: var(--flare-color-error);
  color: var(--flare-color-on-error);
  border-radius: var(--flare-shape-full);
  font-size: 0.75rem;
  font-weight: var(--flare-nav-badge-weight);
  padding: var(--flare-spacing-1) var(--flare-spacing-4);
  min-width: 1.25rem;
  text-align: center;
}

.flare-nav-menu--rail .flare-nav-link__text,
.flare-nav-menu--rail .flare-nav-link__badge,
.flare-nav-menu--rail .flare-nav-group__title,
.flare-nav-menu--rail .flare-nav-group__chevron {
  display: none;
}

.flare-nav-menu--rail .flare-nav-link,
.flare-nav-menu--rail .flare-nav-group__header {
  justify-content: center;
  gap: 0;
  padding-inline: var(--flare-spacing-2);
}

.flare-nav-menu--rail .flare-nav-group__items {
  display: none;
}

.flare-nav-menu--rail-labeled .flare-nav-link,
.flare-nav-menu--rail-labeled .flare-nav-group__header {
  flex-direction: column;
  gap: var(--flare-spacing-1);
  text-align: center;
  padding: var(--flare-spacing-3) var(--flare-spacing-1);
}
.flare-nav-menu--rail-labeled .flare-nav-link__text,
.flare-nav-menu--rail-labeled .flare-nav-group__title {
  display: block;
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--flare-typescale-label-small-font);
  font-size: var(--flare-typescale-label-small-size);
  line-height: var(--flare-nav-rail-label-line-height);
}

/* ---- bottomnav.css ---- */
.flare-bottom-nav {

  --_bottom-nav-total-height: calc(
      var(--flare-bottom-nav-bar-height) + var(--flare-bottom-nav-safe-area-padding));
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--flare-bottom-nav-bar-height);
  padding-bottom: var(--flare-bottom-nav-safe-area-padding);
  background: var(--flare-bottom-nav-bar-bg);
  border-top: var(--flare-border-width) var(--flare-border-style) var(--flare-bottom-nav-border-color);
  box-sizing: border-box;
}

.flare-bottom-nav--fixed {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--flare-bottom-nav-z-index);
}

.flare-bottom-nav--sticky {
  position: sticky;
  bottom: 0;
  z-index: var(--flare-bottom-nav-z-index);
}

.flare-bottom-nav__spacer {
  flex: none;
  height: calc(var(--flare-bottom-nav-bar-height) + var(--flare-bottom-nav-safe-area-padding));
}

.flare-bottom-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--flare-bottom-nav-item-gap);
  padding: var(--flare-spacing-3) var(--flare-spacing-1);
  text-decoration: none;
  color: var(--flare-bottom-nav-inactive-color);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--flare-motion-duration-short1);
}

.flare-bottom-nav-item:hover {
  color: var(--flare-bottom-nav-active-color);
}

.flare-bottom-nav-item__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--flare-bottom-nav-indicator-radius);
  padding-inline: var(--flare-spacing-6);
  min-width: var(--flare-bottom-nav-indicator-width);
  height: var(--flare-bottom-nav-indicator-size);
  background: transparent;
  transition: background-color var(--flare-motion-duration-short1);
}

.flare-bottom-nav-item__icon {
  display: inline-flex;
  --_flare-icon-size: var(--flare-bottom-nav-icon-size);
  font-size: var(--_flare-icon-size);
  line-height: 1;
}

.flare-bottom-nav-item__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--flare-typescale-label-medium-font);
  font-size: var(--flare-bottom-nav-label-font-size);
  font-weight: var(--flare-bottom-nav-label-font-weight);
  line-height: 1.15;
}

.flare-bottom-nav-item--active {
  color: var(--flare-bottom-nav-active-color);
}

.flare-bottom-nav-item--active .flare-bottom-nav-item__indicator {
  background: var(--flare-bottom-nav-indicator-bg);
}

.flare-bottom-nav-item--active .flare-bottom-nav-item__label {
  font-weight: var(--flare-bottom-nav-label-font-weight-active);
}

.flare-bottom-nav-item--disabled {
  opacity: var(--flare-bottom-nav-item-disabled-opacity);
  pointer-events: none;
}

/* ---- stepper.css ---- */
.flare-stepper {
  display: flex;
  flex-direction: column;
  gap: var(--flare-spacing-12);
}

.flare-stepper__registry {
  display: none;
}

.flare-stepper__header {
  display: flex;
  align-items: center;
}

@media (max-width: 599px) {
  .flare-stepper:not(.flare-stepper--vertical) .flare-stepper__header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

.flare-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--flare-spacing-3);
  cursor: pointer;
  min-width: var(--flare-stepper-step-min-width);
  text-align: center;
}

.flare-stepper__step:focus-visible { outline: var(--flare-stepper-focus-ring-thickness) solid var(--flare-stepper-focus-ring-color); border-radius: var(--flare-shape-extra-small); }

.flare-stepper__circle {
  width: var(--flare-stepper-circle-size);
  height: var(--flare-stepper-circle-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-label-large-size);
  font-weight: var(--flare-typescale-label-large-weight);
  transition:
    background var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
    border-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-stepper__step--upcoming .flare-stepper__circle {
  border: var(--flare-stepper-circle-border-width) solid var(--flare-color-outline);
  color: var(--flare-color-on-surface-variant);
  background: transparent;
}

.flare-stepper__step--active .flare-stepper__circle {
  background: var(--flare-color-primary);
  color: var(--flare-color-on-primary);
}

.flare-stepper__step--completed .flare-stepper__circle {
  background: var(--flare-color-secondary-container);
  color: var(--flare-color-on-secondary-container);
}

.flare-stepper__circle--error {
  background: var(--flare-color-error-container);
  color: var(--flare-color-on-error-container);
  border: var(--flare-stepper-circle-border-width) solid var(--flare-color-error);
}

.flare-stepper__error-text {
  display: block;
  margin-top: var(--flare-spacing-2);
  font-family: var(--flare-typescale-body-small-font);
  font-size: var(--flare-typescale-body-small-size);
  color: var(--flare-color-error);
}

.flare-stepper__labels {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flare-stepper__label {
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-label-large-size);
  font-weight: var(--flare-typescale-label-large-weight);
  color: var(--flare-color-on-surface);
  white-space: nowrap;
}

.flare-stepper__step--upcoming .flare-stepper__label {
  color: var(--flare-color-on-surface-variant);
}

.flare-stepper__optional {
  font-size: var(--flare-typescale-label-small-size);
  font-style: italic;
  color: var(--flare-color-on-surface-variant);
}

.flare-stepper__circle .flare-icon,
.flare-stepper__circle .flare-icon {
  font-size: var(--flare-stepper-circle-icon-size);
  width: 1em;
  height: 1em;
}

.flare-stepper__connector {
  flex: 1;
  height: var(--flare-stepper-connector-thickness);
  background: var(--flare-stepper-connector-color);
  align-self: flex-start;
  margin-top: var(--flare-spacing-8);
  min-width: var(--flare-stepper-connector-min-length);
  transition: background var(--flare-motion-duration-short2);
}

.flare-stepper__connector--completed { background: var(--flare-stepper-connector-active-color); }

.flare-stepper__content {
  padding: var(--flare-spacing-8) 0;
}

.flare-stepper__nav {
  display: flex;
  gap: var(--flare-spacing-6);
  margin-top: var(--flare-spacing-12);
}

.flare-stepper__nav-btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--flare-spacing-2);
  padding: var(--flare-spacing-5) var(--flare-spacing-10);
  border: var(--flare-border-outline);
  border-radius: var(--flare-shape-extra-small);
  background: transparent;
  color: var(--flare-color-on-surface);
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-label-large-size);
  font-weight: var(--flare-typescale-label-large-weight);
  cursor: pointer;
  transition: background var(--flare-motion-duration-short1);
}

.flare-stepper__nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-stepper__nav-btn:hover::before {
  background: var(--flare-state-hover-layer);
  opacity: 1;
}

.flare-stepper__nav-btn--primary {
  background: var(--flare-color-primary);
  border-color: var(--flare-color-primary);
  color: var(--flare-color-on-primary);
}

.flare-stepper--vertical .flare-stepper__header {
  flex-direction: column;
  align-items: flex-start;
}

.flare-stepper--vertical .flare-stepper__step {
  flex-direction: row;
  text-align: left;
}

.flare-stepper--vertical .flare-stepper__connector {
  width: var(--flare-stepper-connector-thickness);
  height: var(--flare-stepper-connector-min-length);
  flex: none;
  margin: 0 0 0 calc(1rem - 1px);
  align-self: auto;
}

/* ---- skeleton.css ---- */
@keyframes flare-wave {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%);  }
    100% { transform: translateX(100%);  }
}

@keyframes flare-pulse {
    0%, 100% { opacity: 1;   }
    50%       { opacity: var(--flare-skeleton-pulse-min-opacity); }
}

.flare-skeleton {
    display: inline-block;
    background: var(--flare-color-surface-variant);
    border-radius: var(--flare-shape-extra-small);
    overflow: hidden;
    position: relative;
    line-height: 1;
}

.flare-skeleton--wave::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--flare-color-on-surface) var(--flare-skeleton-wave-opacity), transparent),
        transparent
    );
    animation: flare-wave var(--flare-motion-duration-long1) linear 0.5s infinite;
}

.flare-skeleton--pulse {
    animation: flare-pulse var(--flare-motion-duration-long1) ease-in-out 0.5s infinite;
}

.flare-skeleton--text {
    width: 100%;
    height: 1em;
    transform: scale(1, 0.6);
    transform-origin: 0 60%;
}

.flare-skeleton--rect {
    width: 100%;
}

.flare-skeleton--circle {
    border-radius: 50%;
}

/* ---- avatar.css ---- */
.flare-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-family: var(--flare-typescale-label-large-font);
    font-weight: 500;
    border-radius: 50%;
    user-select: none;

    background: var(--fc-container, var(--flare-color-secondary-container));
    color: var(--fc-on-container, var(--flare-color-on-secondary-container));
}

.flare-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.flare-avatar--sm { width: 2rem;   height: 2rem;   font-size: 0.75rem; }
.flare-avatar--md { width: 2.5rem; height: 2.5rem; font-size: 1rem;    }
.flare-avatar--lg { width: 3rem;   height: 3rem;   font-size: 1.125rem;}
.flare-avatar--xl { width: 4rem;   height: 4rem;   font-size: 1.5rem;  }

.flare-avatar--square  { border-radius: 0; }
.flare-avatar--rounded { border-radius: var(--flare-shape-small); }

.flare-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flare-avatar__initials { line-height: 1; }

.flare-avatar__icon {
    font-size: 1.25em;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- slider.css ---- */
.flare-slider {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-2);
}

.flare-slider {

    --_trk-height:  var(--flare-slider-track-height-md);
    --_trk-radius:  var(--flare-slider-track-radius-md);
    --_hnd-height:  var(--flare-slider-handle-height-md);
    --_gap-radius:  var(--flare-slider-gap-radius);
    --_gap:         var(--flare-slider-gap);
    --_hnd-width:   var(--flare-slider-handle-width);
    --_hnd-width-pressed: var(--flare-slider-handle-pressed-width);
    --_hnd-radius:  var(--flare-slider-handle-radius);
    --_hnd-clip:    var(--flare-slider-handle-clip);
    --_hnd-border-w: var(--flare-slider-handle-border-width);

    --_active:      var(--fc-main, var(--flare-slider-active-color));
    --_hnd-color:   var(--flare-slider-handle-fill);
    --_inactive:    var(--flare-slider-inactive-color);
    --_sl-size:     var(--flare-slider-state-layer-size);
    --_sl-hover:    var(--flare-slider-state-hover-opacity);
    --_sl-pressed:  var(--flare-slider-state-pressed-opacity);
    --_stop:        var(--flare-slider-stop-color);
    --_stop-sel:    var(--flare-slider-stop-color-selected);
    --_value-bg:    var(--flare-slider-value-bg);
    --_value-color: var(--flare-slider-value-color);

    --_dir: 1;
    --_bubble-origin-x: left;
}

.flare-slider:dir(rtl) {
    --_dir: -1;
    --_bubble-origin-x: right;
}

.flare-slider--xs {
    --_trk-height: var(--flare-slider-track-height-xs);
    --_trk-radius: var(--flare-slider-track-radius-xs);
    --_hnd-height: var(--flare-slider-handle-height-xs);
    --_icon: var(--flare-slider-icon-size-xs);
}
.flare-slider--sm {
    --_trk-height: var(--flare-slider-track-height-sm);
    --_trk-radius: var(--flare-slider-track-radius-sm);
    --_hnd-height: var(--flare-slider-handle-height-sm);
    --_icon: var(--flare-slider-icon-size-sm);
}
.flare-slider--md {
    --_trk-height: var(--flare-slider-track-height-md);
    --_trk-radius: var(--flare-slider-track-radius-md);
    --_hnd-height: var(--flare-slider-handle-height-md);
    --_icon: var(--flare-slider-icon-size-md);
}
.flare-slider--lg {
    --_trk-height: var(--flare-slider-track-height-lg);
    --_trk-radius: var(--flare-slider-track-radius-lg);
    --_hnd-height: var(--flare-slider-handle-height-lg);
    --_icon: var(--flare-slider-icon-size-lg);
}
.flare-slider--xl {
    --_trk-height: var(--flare-slider-track-height-xl);
    --_trk-radius: var(--flare-slider-track-radius-xl);
    --_hnd-height: var(--flare-slider-handle-height-xl);
    --_icon: var(--flare-slider-icon-size-xl);
}

.flare-slider__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flare-slider__label {
    font-family: var(--flare-typescale-label-medium-font);
    font-size: var(--flare-typescale-label-medium-size);
    color: var(--flare-color-on-surface-variant);
}

.flare-slider__value {
    font-family: var(--flare-typescale-label-medium-font);
    font-size: var(--flare-typescale-label-medium-size);
    font-weight: 500;
    color: var(--_active);
}

.flare-slider__row {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-4);
}

.flare-slider__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--flare-color-on-surface-variant);
    font-size: var(--_icon);
    flex-shrink: 0;
}
.flare-slider__icon .flare-icon { font-size: inherit; }

.flare-slider--stepped,
.flare-slider--with-indicator,
.flare-slider__icon--start,
.flare-slider__icon--end,
.flare-slider__input--low {  }

.flare-slider__track-area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.flare-slider__track-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.flare-slider__rail {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: var(--_trk-height);
    transform: translateY(-50%);
    pointer-events: none;

    isolation: isolate;
}
.flare-slider__seg {
    position: absolute;
    top: 0;
    height: 100%;
}

.flare-slider__seg--active   { background: var(--_active); z-index: 3; }
.flare-slider__seg--inactive { background: var(--_inactive); z-index: 1; }

.flare-slider__zone {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 2;
    background: var(--fc-main, var(--flare-color-primary));
    pointer-events: none;
}

.flare-slider--vertical .flare-slider__zone {
    top: auto;
    inset-inline-start: 0;
    width: 100%;
    height: auto;
}

.flare-slider__input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: block;
    width: 100%;

    height: var(--_hnd-height);
    margin: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
    border: none;
}
.flare-slider__input::-webkit-slider-runnable-track { background: transparent; border: none; height: 100%; }
.flare-slider__input::-moz-range-track { background: transparent; border: none; height: 100%; }

.flare-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    margin-top: 0;
    width: var(--_hnd-width);
    height: var(--_hnd-height);
    border-radius: var(--_hnd-radius);
    clip-path: var(--_hnd-clip);
    background: var(--_hnd-color);
    border: var(--_hnd-border-w) solid var(--_active);
    box-shadow: 0 0 0 0 transparent;
    transition: width var(--flare-motion-duration-short2),
                box-shadow var(--flare-motion-duration-short2);
}

.flare-slider__input::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--_hnd-width);
    height: var(--_hnd-height);
    border-radius: var(--_hnd-radius);
    clip-path: var(--_hnd-clip);
    background: var(--_hnd-color);
    border: var(--_hnd-border-w) solid var(--_active);
    transition: width var(--flare-motion-duration-short2),
                box-shadow var(--flare-motion-duration-short2);
}

.flare-slider__track-wrap:has(.flare-slider__input:focus-visible) {
    outline: var(--flare-slider-focus-outline);
    outline-offset: var(--flare-slider-focus-outline-offset);
    border-radius: var(--flare-shape-small);
}

.flare-slider__input:hover::-webkit-slider-thumb,
.flare-slider__input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 calc(var(--_sl-size) / 2)
        color-mix(in srgb, var(--_active) calc(var(--_sl-hover) * 100%), transparent);
}
.flare-slider__input:hover::-moz-range-thumb,
.flare-slider__input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 calc(var(--_sl-size) / 2)
        color-mix(in srgb, var(--_active) calc(var(--_sl-hover) * 100%), transparent);
}

.flare-slider__input:active::-webkit-slider-thumb {
    width: var(--_hnd-width-pressed);
    box-shadow: 0 0 0 calc(var(--_sl-size) / 2)
        color-mix(in srgb, var(--_active) calc(var(--_sl-pressed) * 100%), transparent);
}
.flare-slider__input:active::-moz-range-thumb {
    width: var(--_hnd-width-pressed);
    box-shadow: 0 0 0 calc(var(--_sl-size) / 2)
        color-mix(in srgb, var(--_active) calc(var(--_sl-pressed) * 100%), transparent);
}

.flare-slider__ticks {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 0;
    pointer-events: none;
    z-index: 2;
}
.flare-slider__tick {
    position: absolute;
    top: 0;
    transform: translate(calc(-50% * var(--_dir)), -50%);
    width: var(--flare-slider-stop-size);
    height: var(--flare-slider-stop-size);
    border-radius: 50%;
    background: var(--_stop);
}
.flare-slider__tick--active { background: var(--_stop-sel); }

.flare-slider--with-marks .flare-slider__track-area { margin-bottom: var(--flare-spacing-12); }
.flare-slider__marks {
    position: absolute;
    inset-inline: 0;
    top: calc(50% + var(--_trk-height) / 2 + 0.25rem);
    height: 0;
    pointer-events: none;
}
.flare-slider__mark {
    position: absolute;
    top: 0;
    transform: translateX(calc(-50% * var(--_dir)));
    white-space: nowrap;
    font-family: var(--flare-typescale-label-small-font);
    font-size: var(--flare-typescale-label-small-size);
    color: var(--flare-color-on-surface-variant);
}
.flare-slider__mark--active {
    color: var(--_active);
    font-weight: 500;
}

.flare-slider--vertical.flare-slider--with-marks .flare-slider__track-area {
    margin-bottom: 0;
    margin-inline-end: 2.5rem;
}
.flare-slider--vertical .flare-slider__marks {
    inset-inline-start: calc(50% + var(--_trk-height) / 2 + 0.5rem);
    inset-inline-end: auto;
    top: 0;
    bottom: 0;
    width: 0;
    height: auto;
}
.flare-slider--vertical .flare-slider__mark {
    top: auto;
    inset-inline-start: 0;
    transform: translateY(50%);
}

.flare-slider__bubble {
    position: absolute;
    bottom: calc(100% - 6px);
    inset-inline-start: var(--_pct, 0%);
    transform: translateX(calc(-50% * var(--_dir))) scale(0.8);
    transform-origin: bottom center;
    min-width: 3rem;
    box-sizing: border-box;
    padding: var(--flare-spacing-1) var(--flare-spacing-4);
    border-radius: var(--flare-shape-small);
    background: var(--_value-bg);
    color: var(--_value-color);
    font-family: var(--flare-typescale-label-large-font);
    font-size: var(--flare-typescale-label-large-size);
    line-height: 1.25rem;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short2),
                transform var(--flare-motion-duration-short2);
}
.flare-slider__track-wrap:hover .flare-slider__bubble,
.flare-slider__track-wrap:focus-within .flare-slider__bubble {
    opacity: 1;
    transform: translateX(calc(-50% * var(--_dir))) scale(1);
}

.flare-slider__helper--error { color: var(--flare-color-error); }

.flare-slider--range .flare-slider__input { pointer-events: none; }
.flare-slider--range .flare-slider__input::-webkit-slider-thumb { pointer-events: auto; }
.flare-slider--range .flare-slider__input::-moz-range-thumb { pointer-events: auto; }
.flare-slider--range .flare-slider__input--high {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.flare-slider__bubble--high { inset-inline-start: var(--_pct-end, 0%); }
.flare-slider--vertical .flare-slider__bubble--high {
    bottom: var(--_pct-end, 0%);
    inset-inline-start: calc(100% - 6px);
}

.flare-slider--vertical .flare-slider__row {
    flex-direction: column-reverse;
    align-items: center;
    width: max-content;
}
.flare-slider--vertical .flare-slider__track-area {
    flex: 0 0 auto;
    width: var(--_hnd-height);
    height: var(--flare-slider-length);
}
.flare-slider--vertical .flare-slider__track-wrap {
    width: 100%;
    height: 100%;
    justify-content: center;
}

.flare-slider--vertical .flare-slider__rail {
    inset-inline-start: 50%;
    inset-inline-end: auto;
    top: 0;
    bottom: 0;
    width: var(--_trk-height);
    height: auto;
    transform: translateX(calc(-50% * var(--_dir)));
}
.flare-slider--vertical .flare-slider__seg {
    top: auto;
    inset-inline-start: 0;
    width: 100%;
    height: auto;
}

.flare-slider--vertical .flare-slider__input {
    writing-mode: vertical-rl;
    direction: rtl;
    width: var(--_hnd-height);
    height: 100%;
}
.flare-slider--vertical .flare-slider__input::-webkit-slider-runnable-track { width: 100%; height: 100%; }

.flare-slider--vertical .flare-slider__input::-webkit-slider-thumb {
    width: var(--_hnd-height);
    height: var(--_hnd-width);
}
.flare-slider--vertical .flare-slider__input::-moz-range-thumb {
    width: var(--_hnd-height);
    height: var(--_hnd-width);
}
.flare-slider--vertical .flare-slider__input:active::-webkit-slider-thumb {
    width: var(--_hnd-height);
    height: var(--_hnd-width-pressed);
}
.flare-slider--vertical .flare-slider__input:active::-moz-range-thumb {
    width: var(--_hnd-height);
    height: var(--_hnd-width-pressed);
}

.flare-slider--vertical .flare-slider__ticks {
    inset-inline-start: 50%;
    inset-inline-end: auto;
    top: 0;
    bottom: 0;
    width: 0;
    height: auto;
}
.flare-slider--vertical .flare-slider__tick {
    top: auto;
    inset-inline-start: 0;
}

.flare-slider--vertical .flare-slider__bubble {
    bottom: var(--_pct, 0%);
    inset-inline-start: calc(100% - 6px);
    transform: translateY(50%) scale(0.8);
    transform-origin: var(--_bubble-origin-x) center;
}
.flare-slider--vertical .flare-slider__track-wrap:hover .flare-slider__bubble,
.flare-slider--vertical .flare-slider__track-wrap:focus-within .flare-slider__bubble {
    transform: translateY(50%) scale(1);
}

.flare-slider--disabled { pointer-events: none; }
.flare-slider--disabled {
    --_active: var(--flare-slider-disabled-active-color);
    --_inactive: var(--flare-slider-disabled-inactive-color);
}
.flare-slider--disabled .flare-slider__input::-webkit-slider-thumb {
    background: var(--flare-slider-disabled-active-color);
    border-width: 0;
}
.flare-slider--disabled .flare-slider__input::-moz-range-thumb {
    background: var(--flare-slider-disabled-active-color);
    border-width: 0;
}
.flare-slider--disabled .flare-slider__label,
.flare-slider--disabled .flare-slider__value,
.flare-slider--disabled .flare-slider__icon {
    opacity: var(--flare-slider-disabled-opacity);
}

@media (forced-colors: active) {
    .flare-slider__input:focus-visible::-webkit-slider-thumb { outline: 2px solid ButtonText; }
    .flare-slider__input:focus-visible::-moz-range-thumb { outline: 2px solid ButtonText; }
}

@media (hover: hover) {
    .flare-slider--handle-on-hover .flare-slider__input::-webkit-slider-thumb {
        opacity: 0;
        transition: width var(--flare-motion-duration-short2),
                    box-shadow var(--flare-motion-duration-short2),
                    opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
    }
    .flare-slider--handle-on-hover .flare-slider__input::-moz-range-thumb {
        opacity: 0;
        transition: width var(--flare-motion-duration-short2),
                    box-shadow var(--flare-motion-duration-short2),
                    opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
    }

    .flare-slider--handle-on-hover:hover .flare-slider__input::-webkit-slider-thumb,
    .flare-slider--handle-on-hover .flare-slider__input:focus::-webkit-slider-thumb,
    .flare-slider--handle-on-hover .flare-slider__input:active::-webkit-slider-thumb { opacity: 1; }
    .flare-slider--handle-on-hover:hover .flare-slider__input::-moz-range-thumb,
    .flare-slider--handle-on-hover .flare-slider__input:focus::-moz-range-thumb,
    .flare-slider--handle-on-hover .flare-slider__input:active::-moz-range-thumb { opacity: 1; }
}

/* ---- list.css ---- */
.flare-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--flare-list-bg);
    border-radius: var(--flare-list-radius);
    overflow: hidden;
}

.flare-list-item {
    position: relative;
    display: flex;
    align-items: center;

    min-height: var(--flare-list-item-height);
    padding: var(--flare-list-item-padding-block) var(--flare-list-item-padding-inline);
    gap: var(--flare-list-item-gap);
    color: var(--flare-list-item-color);
    font-family: var(--flare-list-item-label-font);
    font-size: var(--flare-list-item-label-size);
    border-radius: var(--flare-list-item-radius);
    border-bottom: var(--flare-list-divider);
}

.flare-list-item:last-child { border-bottom: none; }

.flare-list-item:has(.flare-list-item__secondary) { min-height: var(--flare-list-item-height-two-line); }

.flare-list-item__leading {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    --_flare-icon-size: var(--flare-list-item-icon-size);
}

.flare-list-item__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--flare-list-item-content-gap);
    min-width: 0;
}

.flare-list-item__primary { color: var(--flare-list-item-color); }

.flare-list-item__trailing {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    --_flare-icon-size: var(--flare-list-item-icon-size);
    color: var(--flare-list-item-trailing-color);
}

.flare-list-item--clickable {
    cursor: pointer;
    user-select: none;
}

.flare-list-item--clickable::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-list-item--clickable:hover::before { background: var(--flare-state-hover-layer); opacity: 1; }
.flare-list-item--clickable:focus-visible::before { background: var(--flare-state-focus-layer); opacity: 1; }
.flare-list-item--clickable:active::before { background: var(--flare-state-pressed-layer); opacity: 1; }

.flare-list-item--clickable:hover:focus-visible:not(:active)::before {
    background: var(--flare-state-focus-hover-layer);
    opacity: 1;
}

.flare-list-item__leading,
.flare-list-item__content,
.flare-list-item__trailing {
    position: relative;
}

.flare-list-item--selected {
    background: var(--flare-list-item-selected-bg);
    color: var(--flare-list-item-selected-color);
}

.flare-list-item--selected .flare-list-item__primary { color: var(--flare-list-item-selected-color); }

.flare-list-item--disabled {
    opacity: var(--flare-list-item-disabled-opacity);
    pointer-events: none;
}

.flare-list--dense .flare-list-item {
    min-height: var(--flare-list-item-height-dense);
    padding: var(--flare-list-item-padding-block-dense) var(--flare-list-item-padding-inline);
}
.flare-list--dense .flare-list-item:has(.flare-list-item__secondary) {
    min-height: var(--flare-list-item-height-two-line-dense);
}

/* ---- descriptionlist.css ---- */
.flare-description-list {
    display: grid;
    grid-template-columns: auto 1fr;
    font-size: var(--flare-typescale-body-medium-size);
    line-height: var(--flare-typescale-body-medium-height);
}

.flare-description-list__row { display: contents; }

.flare-description-list__label,
.flare-description-list__value {
    padding: var(--flare-spacing-3) var(--flare-spacing-8);
    min-width: 0;
}

.flare-description-list__label {
    color: var(--flare-color-on-surface-variant);
    font-weight: var(--flare-typescale-label-large-weight);
    text-align: start;
    white-space: nowrap;
}

.flare-description-list__value {
    margin: 0;
    color: var(--flare-color-on-surface);
    overflow-wrap: anywhere;
}

.flare-description-list--striped .flare-description-list__row:nth-child(even) > * {
    background: var(--flare-stripe-bg);
}

.flare-description-list--bordered .flare-description-list__row:not(:last-child) > * {
    border-bottom: var(--flare-border-divider);
}

/* ---- messagebox.css ---- */
.flare-msgbox-scrim { z-index: 1100; }

.flare-msgbox {
    background: var(--flare-color-surface-container-high);
    color: var(--flare-color-on-surface);
    border-radius: var(--flare-dialog-radius);
    min-width: 17.5rem;
    max-width: 30rem;
    width: 100%;
    box-shadow: var(--flare-elevation-3);
    overflow: hidden;
}

.flare-msgbox__header {
    padding: var(--flare-spacing-12) var(--flare-spacing-12) var(--flare-spacing-6);
}

.flare-msgbox__content {
    padding: 0 var(--flare-spacing-12) var(--flare-spacing-8);
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-3);
}

.flare-msgbox__message {
    margin: 0;
    color: var(--flare-color-on-surface-variant);
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
    line-height: 1.5;
}

.flare-msgbox__label {
    font-size: var(--flare-typescale-label-medium-size);
    color: var(--flare-color-on-surface-variant);
}

.flare-msgbox__input {
    width: 100%;
    padding: var(--flare-spacing-5) var(--flare-spacing-6);
    border: var(--flare-border-outline);
    border-radius: var(--flare-input-radius);
    background: var(--flare-color-surface);
    color: var(--flare-color-on-surface);
    font-size: var(--flare-typescale-body-medium-size);
    outline: none;
    box-sizing: border-box;
}

.flare-msgbox__input:focus {
    border-color: var(--flare-color-primary);
    outline: 2px solid var(--flare-color-primary);
    outline-offset: -2px;
}

.flare-msgbox__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--flare-spacing-4);
    padding: 0 var(--flare-spacing-12) var(--flare-spacing-12);
}

.flare-msgbox__btn {
    position: relative;
    z-index: 0;
    padding: var(--flare-spacing-4) var(--flare-spacing-10);
    border-radius: var(--flare-btn-radius);
    border: none;
    cursor: pointer;
    font-size: var(--flare-typescale-label-large-size);
    font-weight: var(--flare-typescale-label-large-weight);
    transition: background var(--flare-motion-duration-short2);
}

.flare-msgbox__btn--cancel {
    background: transparent;
    color: var(--flare-color-primary);
}

.flare-msgbox__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-msgbox__btn:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-msgbox__btn--confirm {
    background: var(--flare-color-primary);
    color: var(--flare-color-on-primary);
}

/* ---- rating.css ---- */
.flare-rating {
    display: inline-flex;
    flex-direction: column;
    gap: var(--flare-spacing-2);

    --_rt-size: var(--flare-rating-size-md);
}

.flare-rating--xs { --_rt-size: var(--flare-rating-size-xs); }
.flare-rating--sm { --_rt-size: var(--flare-rating-size-sm); }
.flare-rating--lg { --_rt-size: var(--flare-rating-size-lg); }
.flare-rating--xl { --_rt-size: var(--flare-rating-size-xl); }

.flare-rating__label {
    font-family: var(--flare-typescale-label-medium-font);
    font-size: var(--flare-typescale-label-medium-size);
    color: var(--flare-color-on-surface-variant);
}

.flare-rating__stars {
    display: flex;
    gap: var(--flare-spacing-1);
}

.flare-rating__star {
    background: transparent;
    border: none;
    padding: var(--flare-spacing-1);
    cursor: pointer;
    font-size: var(--_rt-size);
    line-height: 1;
    color: var(--flare-rating-empty-color);
    transition: color var(--flare-motion-duration-short1), transform var(--flare-motion-duration-short1);
}

.flare-rating__star:hover:not(:disabled) {
    transform: scale(var(--flare-rating-hover-scale));
}

.flare-rating__star--filled { color: var(--fc-main, var(--flare-rating-filled-color)); }

.flare-rating__star--half {
    background: linear-gradient(90deg, var(--fc-main, var(--flare-rating-filled-color)) 50%, var(--flare-rating-empty-color) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.flare-rating__star-wrap { position: relative; display: inline-flex; }
.flare-rating__half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    cursor: pointer;
    z-index: 1;
}
.flare-rating__half--left  { left: 0; }
.flare-rating__half--right { right: 0; }

.flare-rating--disabled { opacity: var(--flare-state-disabled-opacity); pointer-events: none; }
.flare-rating--readonly .flare-rating__star { cursor: default; }
.flare-rating--readonly .flare-rating__star:hover { transform: none; }

/* ---- colorpicker.css ---- */
.flare-colorpicker {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: var(--flare-spacing-2);
}

.flare-colorpicker__label {
    font-size: var(--flare-typescale-label-medium-size);
    color: var(--flare-color-on-surface-variant);
}

.flare-colorpicker__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--flare-spacing-4);
    padding: var(--flare-spacing-3) var(--flare-spacing-6) var(--flare-spacing-3) var(--flare-spacing-3);
    background: var(--flare-color-surface-container-highest);
    border: var(--flare-border-divider);
    border-radius: var(--flare-shape-extra-small);
    cursor: pointer;
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
    color: var(--flare-color-on-surface);
    transition: border-color var(--flare-motion-duration-short2);
}

.flare-colorpicker__trigger:hover {
    border-color: var(--flare-color-outline);
}

.flare-colorpicker__trigger:focus-visible {
    outline: 2px solid var(--flare-color-primary);
    outline-offset: 2px;
}

.flare-colorpicker__trigger-swatch {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-color-outline-variant);
    flex-shrink: 0;
    background-image:
        linear-gradient(45deg, var(--flare-colorpicker-checker-color) 25%, transparent 25%),
        linear-gradient(-45deg, var(--flare-colorpicker-checker-color) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--flare-colorpicker-checker-color) 75%),
        linear-gradient(-45deg, transparent 75%, var(--flare-colorpicker-checker-color) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    position: relative;
    overflow: hidden;
}

.flare-colorpicker__trigger-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: inherit;
}

.flare-colorpicker__trigger-label {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.flare-colorpicker__panel {

    position: fixed;
    z-index: 1000;
    background: var(--flare-color-surface-container);
    border: var(--flare-border-divider);
    border-radius: var(--flare-shape-medium);
    box-shadow: var(--flare-elevation-2);
    padding: var(--flare-spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-5);
    width: 260px;
}

.flare-colorpicker__canvas-wrap {
    position: relative;
    border-radius: var(--flare-shape-extra-small);
    overflow: hidden;
    cursor: crosshair;
    flex-shrink: 0;
    line-height: 0;
}

.flare-colorpicker__canvas {
    display: block;
    width: 100%;
    height: 160px;
    border-radius: var(--flare-shape-extra-small);
    touch-action: none;
}

.flare-colorpicker__sliders {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-3);
}

.flare-colorpicker__slider-row {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-4);
}

.flare-colorpicker__preview {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-color-outline-variant);
    flex-shrink: 0;
    background-image:
        linear-gradient(45deg, var(--flare-colorpicker-checker-color) 25%, transparent 25%),
        linear-gradient(-45deg, var(--flare-colorpicker-checker-color) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--flare-colorpicker-checker-color) 75%),
        linear-gradient(-45deg, transparent 75%, var(--flare-colorpicker-checker-color) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    position: relative;
    overflow: hidden;
}

.flare-colorpicker__preview::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
}

.flare-colorpicker__slider-hue,
.flare-colorpicker__slider-alpha {
    flex: 1;
    position: relative;
    border-radius: var(--flare-shape-full);
    height: 12px;
    display: flex;
    align-items: center;
}

.flare-colorpicker__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    background: transparent;
    cursor: pointer;
    border-radius: var(--flare-shape-full);
    outline: none;
    position: relative;
    z-index: 1;
}

.flare-colorpicker__slider--hue {
    background: linear-gradient(to right,
        hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%),
        hsl(90,100%,50%), hsl(120,100%,50%), hsl(150,100%,50%),
        hsl(180,100%,50%), hsl(210,100%,50%), hsl(240,100%,50%),
        hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%),
        hsl(360,100%,50%));
}
.flare-colorpicker__slider--alpha {
    background-image:
        linear-gradient(45deg, var(--flare-colorpicker-checker-color) 25%, transparent 25%),
        linear-gradient(-45deg, var(--flare-colorpicker-checker-color) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--flare-colorpicker-checker-color) 75%),
        linear-gradient(-45deg, transparent 75%, var(--flare-colorpicker-checker-color) 75%),
        linear-gradient(to right, transparent, var(--_alpha-color, #000));
    background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0, 0 0;
}

.flare-colorpicker__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--flare-colorpicker-thumb-bg);
    border: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-colorpicker-thumb-border-color);
    box-shadow: var(--flare-elevation-1);
    cursor: pointer;
    transition: box-shadow var(--flare-motion-duration-short1);
}

.flare-colorpicker__slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--flare-colorpicker-thumb-bg);
    border: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-colorpicker-thumb-border-color);
    box-shadow: var(--flare-elevation-1);
    cursor: pointer;
}

.flare-colorpicker__slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--flare-color-primary-container);
}

.flare-colorpicker__slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--flare-color-primary-container);
}

.flare-colorpicker__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-3);
}

.flare-colorpicker__tabs {
    display: flex;
    gap: var(--flare-spacing-1);
}

.flare-colorpicker__tab {
    flex: 1;
    padding: var(--flare-spacing-2) 0;
    background: transparent;
    border: none;
    border-bottom: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-color-outline-variant);
    color: var(--flare-color-on-surface-variant);
    font-family: var(--flare-typescale-label-medium-font);
    font-size: var(--flare-typescale-label-medium-size);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: border-color var(--flare-motion-duration-short2),
                color var(--flare-motion-duration-short2);
}

.flare-colorpicker__tab:hover {
    color: var(--flare-color-on-surface);
}

.flare-colorpicker__tab--active {
    border-bottom-color: var(--flare-color-primary);
    color: var(--flare-color-primary);
}

.flare-colorpicker__input-row {
    display: flex;
    gap: var(--flare-spacing-3);
}

.flare-colorpicker__input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: var(--flare-spacing-1);
}

.flare-colorpicker__input {
    width: 100%;
    padding: var(--flare-spacing-2) var(--flare-spacing-3);
    background: var(--flare-color-surface-container-highest);
    border: var(--flare-border-divider);
    border-radius: var(--flare-shape-extra-small);
    color: var(--flare-color-on-surface);
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-small-size);
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
    transition: border-color var(--flare-motion-duration-short2);
    box-sizing: border-box;
}

.flare-colorpicker__input:focus {
    border-color: var(--flare-color-primary);
}

.flare-colorpicker__input[type=number]::-webkit-inner-spin-button,
.flare-colorpicker__input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.flare-colorpicker__input[type=number] { -moz-appearance: textfield; }

.flare-colorpicker__input-label {
    font-family: var(--flare-typescale-label-small-font);
    font-size: 0.625rem;
    color: var(--flare-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.flare-colorpicker__input-row > .flare-colorpicker__input {
    text-align: left;
}

.flare-colorpicker__presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flare-spacing-3);
    padding-top: var(--flare-spacing-3);
    border-top: var(--flare-border-divider);
}

.flare-colorpicker__preset {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-color-outline-variant);
    cursor: pointer;
    padding: 0;
    transition: transform var(--flare-motion-duration-short1),
                border-color var(--flare-motion-duration-short1);
}

.flare-colorpicker__preset:hover {
    transform: scale(1.2);
    border-color: var(--flare-color-outline);
}

.flare-colorpicker__preset:focus-visible {
    outline: 2px solid var(--flare-color-primary);
    outline-offset: 2px;
}

.flare-colorpicker.flare-colorpicker--inline {
    display: flex;
}

.flare-colorpicker--inline .flare-colorpicker__panel {
    position: static;
    box-shadow: none;
    border: var(--flare-border-divider);
    width: auto;
}

.flare-colorpicker--disabled {
    opacity: var(--flare-state-disabled-opacity);
    pointer-events: none;
}

.flare-colorpicker__eyedropper-row {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--flare-spacing-4);
}

.flare-colorpicker__eyedropper-btn {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--flare-spacing-3);
    padding: var(--flare-spacing-3) var(--flare-spacing-5);
    font: inherit;
    color: var(--flare-color-on-surface);
    background: var(--flare-color-surface-container-highest);
    border: var(--flare-border-divider);
    border-radius: var(--flare-shape-small);
    cursor: pointer;
    transition: background var(--flare-motion-duration-short2);
}

.flare-colorpicker__eyedropper-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-colorpicker__eyedropper-btn:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

/* ---- timeline.css ---- */
.flare-timeline {
    display: flex;
    flex-direction: column;
}

.flare-timeline-item {
    display: flex;
    gap: var(--flare-spacing-8);
    position: relative;

    color: var(--fc-main, var(--flare-color-primary));
}

.flare-timeline-item__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: var(--flare-timeline-connector-width);
}

.flare-timeline-item__dot {
    width: var(--flare-timeline-dot-size);
    height: var(--flare-timeline-dot-size);
    border-radius: 50%;
    background: var(--flare-timeline-dot-bg);
    border: var(--flare-timeline-dot-border-width) solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.flare-timeline-item__dot .flare-icon {
    font-size: var(--flare-timeline-dot-icon-size);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    color: currentColor;
}

.flare-timeline-item__line {
    flex: 1;
    width: var(--flare-timeline-line-width);
    background: var(--flare-timeline-line-color);
    min-height: 1rem;
    margin-top: var(--flare-spacing-2);
}

.flare-timeline-item:last-child .flare-timeline-item__line { display: none; }

.flare-timeline-item__body {
    flex: 1;
    padding-bottom: var(--flare-spacing-12);
    min-width: 0;
}

.flare-timeline-item__time {
    font-size: var(--flare-typescale-body-small-size);
    color: var(--flare-color-on-surface-variant);
    display: block;
    margin-bottom: var(--flare-spacing-2);
}

.flare-timeline-item__title {
    margin: 0 0 var(--flare-spacing-3);
    font-family: var(--flare-typescale-title-small-font);
    font-size: var(--flare-typescale-title-small-size);
    font-weight: var(--flare-typescale-title-small-weight);
    color: var(--flare-color-on-surface);
}

.flare-timeline-item__content {
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
    color: var(--flare-color-on-surface-variant);
}

.flare-timeline--dashed .flare-timeline-item__line {
    background: none;
    border-left: var(--flare-timeline-line-width) dashed var(--flare-timeline-line-color);
    width: 0;
}

.flare-timeline--dotted .flare-timeline-item__line {
    background: none;
    border-left: var(--flare-timeline-line-width) dotted var(--flare-timeline-line-color);
    width: 0;
}

.flare-timeline--right .flare-timeline-item { flex-direction: row-reverse; }
.flare-timeline--right .flare-timeline-item__body { text-align: right; }

.flare-timeline--alternate .flare-timeline-item:nth-child(even) { flex-direction: row-reverse; }
.flare-timeline--alternate .flare-timeline-item:nth-child(even) .flare-timeline-item__body { text-align: right; }

.flare-timeline--alternating {
    position: relative;
}

.flare-timeline--alternating .flare-timeline-item {
    width: 100%;
}

.flare-timeline--alternating .flare-timeline__item--left {
    flex-direction: row;
}

.flare-timeline--alternating .flare-timeline__item--right {
    flex-direction: row-reverse;
}

.flare-timeline--alternating .flare-timeline__item--right .flare-timeline-item__body {
    text-align: right;
}

/* ---- grid.css ---- */
.flare-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--flare-spacing-8);
}

@media (min-width: 640px)  { .flare-container { padding-inline: var(--flare-spacing-12); } }
@media (min-width: 1024px) { .flare-container { padding-inline: var(--flare-spacing-16); } }

.flare-container--fluid { max-width: none; }
.flare-container--xs    { max-width: 480px; }
.flare-container--sm    { max-width: 600px; }
.flare-container--md    { max-width: 960px; }
.flare-container--lg    { max-width: 1280px; }
.flare-container--xl    { max-width: 1920px; }
.flare-container--full  { max-width: 100%; }

.flare-grid {
    display: grid;
}

.flare-grid--align-stretch  { align-items: stretch; }
.flare-grid--align-center   { align-items: center; }
.flare-grid--align-start    { align-items: start; }
.flare-grid--align-end      { align-items: end; }
.flare-grid--align-baseline { align-items: baseline; }

.flare-grid--justify-start         { justify-content: start; }
.flare-grid--justify-end           { justify-content: end; }
.flare-grid--justify-center        { justify-content: center; }
.flare-grid--justify-space-between { justify-content: space-between; }
.flare-grid--justify-space-around  { justify-content: space-around; }
.flare-grid--justify-space-evenly  { justify-content: space-evenly; }

.flare-grid--gap-none     { gap: 0; }
.flare-grid--gap-xxsmall  { gap: var(--flare-spacing-2); }
.flare-grid--gap-xsmall   { gap: var(--flare-spacing-4); }
.flare-grid--gap-small    { gap: var(--flare-spacing-6); }
.flare-grid--gap-medium   { gap: var(--flare-spacing-8); }
.flare-grid--gap-large    { gap: var(--flare-spacing-12); }
.flare-grid--gap-xlarge   { gap: var(--flare-spacing-16); }

.flare-col {
  min-width: 0;
  grid-column: var(--flare-col-start, auto) / span var(--flare-col-span, 1);
}

@media (max-width: 599.98px) {
  .flare-col { grid-column: var(--flare-col-start, auto) / span var(--flare-col-span-xs, var(--flare-col-span, 1)); }
}
@media (min-width: 600px) {
  .flare-col { grid-column: var(--flare-col-start, auto) / span var(--flare-col-span-sm, var(--flare-col-span, 1)); }
}
@media (min-width: 960px) {
  .flare-col { grid-column: var(--flare-col-start, auto) / span var(--flare-col-span-md, var(--flare-col-span-sm, var(--flare-col-span, 1))); }
}
@media (min-width: 1280px) {
  .flare-col { grid-column: var(--flare-col-start, auto) / span var(--flare-col-span-lg, var(--flare-col-span-md, var(--flare-col-span-sm, var(--flare-col-span, 1)))); }
}
@media (min-width: 1920px) {
  .flare-col { grid-column: var(--flare-col-start, auto) / span var(--flare-col-span-xl, var(--flare-col-span-lg, var(--flare-col-span-md, var(--flare-col-span-sm, var(--flare-col-span, 1))))); }
}
@media (min-width: 2560px) {
  .flare-col { grid-column: var(--flare-col-start, auto) / span var(--flare-col-span-xxl, var(--flare-col-span-xl, var(--flare-col-span-lg, var(--flare-col-span-md, var(--flare-col-span-sm, var(--flare-col-span, 1)))))); }
}

@media (max-width: 599.98px)                          { .flare-hidden--only-xs { display: none !important; } }
@media (min-width: 600px)  and (max-width: 959.98px)  { .flare-hidden--only-sm { display: none !important; } }
@media (min-width: 960px)  and (max-width: 1279.98px) { .flare-hidden--only-md { display: none !important; } }
@media (min-width: 1280px) and (max-width: 1919.98px) { .flare-hidden--only-lg { display: none !important; } }
@media (min-width: 1920px) and (max-width: 2559.98px) { .flare-hidden--only-xl { display: none !important; } }
@media (min-width: 2560px)                            { .flare-hidden--only-xxl { display: none !important; } }

@media (max-width: 599.98px)  { .flare-hidden--below-sm { display: none !important; } }
@media (max-width: 959.98px)  { .flare-hidden--below-md { display: none !important; } }
@media (max-width: 1279.98px) { .flare-hidden--below-lg { display: none !important; } }
@media (max-width: 1919.98px) { .flare-hidden--below-xl { display: none !important; } }
@media (max-width: 2559.98px) { .flare-hidden--below-xxl { display: none !important; } }

@media (min-width: 600px)  { .flare-hidden--above-xs { display: none !important; } }
@media (min-width: 960px)  { .flare-hidden--above-sm { display: none !important; } }
@media (min-width: 1280px) { .flare-hidden--above-md { display: none !important; } }
@media (min-width: 1920px) { .flare-hidden--above-lg { display: none !important; } }
@media (min-width: 2560px) { .flare-hidden--above-xl { display: none !important; } }

.flare-hidden--invert-only-xs, .flare-hidden--invert-only-sm, .flare-hidden--invert-only-md,
.flare-hidden--invert-only-lg, .flare-hidden--invert-only-xl, .flare-hidden--invert-only-xxl,
.flare-hidden--invert-below-sm, .flare-hidden--invert-below-md, .flare-hidden--invert-below-lg,
.flare-hidden--invert-below-xl, .flare-hidden--invert-below-xxl,
.flare-hidden--invert-above-xs, .flare-hidden--invert-above-sm, .flare-hidden--invert-above-md,
.flare-hidden--invert-above-lg, .flare-hidden--invert-above-xl { display: none !important; }

@media (max-width: 599.98px)                          { .flare-hidden--invert-only-xs { display: revert !important; } }
@media (min-width: 600px)  and (max-width: 959.98px)  { .flare-hidden--invert-only-sm { display: revert !important; } }
@media (min-width: 960px)  and (max-width: 1279.98px) { .flare-hidden--invert-only-md { display: revert !important; } }
@media (min-width: 1280px) and (max-width: 1919.98px) { .flare-hidden--invert-only-lg { display: revert !important; } }
@media (min-width: 1920px) and (max-width: 2559.98px) { .flare-hidden--invert-only-xl { display: revert !important; } }
@media (min-width: 2560px)                            { .flare-hidden--invert-only-xxl { display: revert !important; } }

@media (max-width: 599.98px)  { .flare-hidden--invert-below-sm { display: revert !important; } }
@media (max-width: 959.98px)  { .flare-hidden--invert-below-md { display: revert !important; } }
@media (max-width: 1279.98px) { .flare-hidden--invert-below-lg { display: revert !important; } }
@media (max-width: 1919.98px) { .flare-hidden--invert-below-xl { display: revert !important; } }
@media (max-width: 2559.98px) { .flare-hidden--invert-below-xxl { display: revert !important; } }

@media (min-width: 600px)  { .flare-hidden--invert-above-xs { display: revert !important; } }
@media (min-width: 960px)  { .flare-hidden--invert-above-sm { display: revert !important; } }
@media (min-width: 1280px) { .flare-hidden--invert-above-md { display: revert !important; } }
@media (min-width: 1920px) { .flare-hidden--invert-above-lg { display: revert !important; } }
@media (min-width: 2560px) { .flare-hidden--invert-above-xl { display: revert !important; } }

/* ---- splitter.css ---- */
.flare-splitter {
    flex: 0 0 auto;
    align-self: stretch;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--flare-splitter-color);
    touch-action: none;
    transition: background var(--flare-motion-duration-short1);

    width: var(--flare-splitter-gutter-size);
    cursor: col-resize;
}

.flare-splitter:hover,
.flare-splitter:focus-visible {
    background: var(--flare-splitter-hover-color);
    outline: none;
}

.flare-splitter__icon {
    pointer-events: none;
    line-height: 1;
    font-size: var(--flare-splitter-icon-size);
    color: var(--flare-splitter-icon-color);
}

.flare-splitter__icon--hover {
    display: none;
}

.flare-splitter:has(.flare-splitter__icon--hover):hover .flare-splitter__icon--base,
.flare-splitter:has(.flare-splitter__icon--hover):focus-visible .flare-splitter__icon--base {
    display: none;
}

.flare-splitter:hover .flare-splitter__icon--hover,
.flare-splitter:focus-visible .flare-splitter__icon--hover {
    display: inline-flex;
}

.flare-splitter--vertical {
    width: auto;
    height: var(--flare-splitter-gutter-size);
    cursor: row-resize;
}

.flare-splitter__gutter-bar {
    background: var(--flare-color-outline);
    border-radius: var(--flare-shape-full);
    pointer-events: none;
    width: var(--flare-splitter-grip-thickness);
    height: var(--flare-splitter-grip-length);
}

.flare-splitter--vertical .flare-splitter__gutter-bar {
    width: var(--flare-splitter-grip-length);
    height: var(--flare-splitter-grip-thickness);
}

@media (forced-colors: active) {
    .flare-splitter { background: ButtonFace; }
    .flare-splitter:focus-visible { outline: 2px solid ButtonText; }
}

/* ---- drag.css ---- */
.flare-drag-context {
    display: contents;
}

.flare-draggable {

    touch-action: none;
    cursor: grab;
}

.flare-draggable:active {
    cursor: grabbing;
}

.flare-draggable--disabled {
    cursor: inherit;
    touch-action: auto;
}

.flare-draggable--dragging {
    opacity: var(--flare-drag-source-opacity);
}

.flare-drop-zone {
    transition:
        background-color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard),
        outline-color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-draggable--picked {
    opacity: var(--flare-drag-preview-opacity);
    box-shadow: var(--flare-drag-preview-elevation);
    outline: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-drag-zone-active-outline);
}

.flare-draggable--drop-into {
    background: var(--flare-drag-zone-active-background);
    outline: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-drag-zone-active-outline);
    outline-offset: calc(-1 * var(--flare-border-width-emphasis));
}

.flare-drop-zone--candidate {
    outline: var(--flare-border-width) var(--flare-border-style) var(--flare-drag-zone-active-outline);
    outline-offset: calc(-1 * var(--flare-border-width));
}

.flare-drop-zone--over {
    background: var(--flare-drag-zone-active-background);
    outline: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-drag-zone-active-outline);
    outline-offset: calc(-1 * var(--flare-border-width-emphasis));
}

.flare-drag-preview {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1100;

    pointer-events: none;
    opacity: var(--flare-drag-preview-opacity);
    box-shadow: var(--flare-drag-preview-elevation);
}

.flare-drag-indicator {
    position: fixed;
    z-index: 1100;
    pointer-events: none;
    background: var(--flare-drag-indicator-color);
    inline-size: var(--flare-border-width-emphasis);
    transform: translateX(-50%);
}

.flare-drag-indicator--horizontal {
    inline-size: auto;
    block-size: var(--flare-border-width-emphasis);
    transform: translateY(-50%);
}

/* ---- taginput.css ---- */
.flare-tag-input {

    cursor: text;
}

.flare-tag-input__field {
    flex-wrap: wrap;
    gap: var(--flare-spacing-3);
    padding: var(--flare-spacing-4) var(--flare-spacing-6);

}

.flare-tag-input__input {
    min-width: 8rem;
    padding: var(--flare-spacing-1) 0;
}

/* ---- tree.css ---- */
.flare-tree-view {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--flare-typescale-body-large-font);
    font-size: var(--flare-typescale-body-large-size);
    color: var(--flare-color-on-surface);
}

.flare-tree-item {
    list-style: none;
}

.flare-tree-item__row {

    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-2);
    padding: var(--flare-spacing-2) var(--flare-spacing-4);
    border-radius: var(--flare-nav-item-radius);
    cursor: pointer;
    user-select: none;
    transition: background var(--flare-motion-duration-short1);
}

.flare-tree-item__row::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-tree-item__row:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-tree-item__row--selected {
    background: var(--flare-tree-selected-bg);
    color: var(--flare-tree-selected-color);
}

.flare-tree-item__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--flare-tree-toggle-size);
    height: var(--flare-tree-toggle-size);
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--flare-nav-item-radius);
    color: inherit;
    flex-shrink: 0;
    padding: 0;
    transition: background var(--flare-motion-duration-short1);
}

.flare-tree-item__toggle:hover {
    background: var(--flare-tree-toggle-hover-bg);
}

.flare-tree-item__toggle .flare-icon {
    font-size: var(--flare-tree-icon-size);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: transform var(--flare-motion-duration-short2) ease;
}

.flare-tree-item[aria-expanded="true"] > .flare-tree-item__row > .flare-tree-item__toggle .flare-icon {
    transform: rotate(90deg);
}

.flare-tree-item__toggle-placeholder {
    display: inline-flex;
    width: var(--flare-tree-toggle-size);
    height: var(--flare-tree-toggle-size);
    flex-shrink: 0;
}

.flare-tree-item__icon {
    font-size: var(--flare-tree-icon-size);
    flex-shrink: 0;
    color: var(--flare-color-on-surface-variant);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.flare-tree-item__row--selected .flare-tree-item__icon { color: var(--flare-tree-selected-color); }

.flare-tree-item__label { flex: 1; }

.flare-tree-item:focus-visible {
    outline: 2px solid var(--flare-color-primary);
    outline-offset: -2px;
}

.flare-tree-item__children {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: var(--flare-tree-indent);
}

.flare-tree-item__drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--flare-tree-toggle-size);
    height: var(--flare-tree-toggle-size);
    cursor: grab;
    color: var(--flare-color-on-surface-variant);
    opacity: 1;
    transition: opacity var(--flare-motion-duration-short1);
}

@media (hover: hover) {
    .flare-tree-item__drag-handle {
        opacity: 0;
    }

    .flare-tree-item__row:hover .flare-tree-item__drag-handle {
        opacity: 1;
    }
}

.flare-tree-item__drag-handle:active {
    cursor: grabbing;
}

/* ---- fabmenu.css ---- */
.flare-fab-menu {
    position: relative;
    display: inline-flex;
}

.flare-fab .flare-fab__icon {
    transition: transform var(--flare-motion-duration-short3) var(--flare-motion-easing-standard);
}
.flare-fab--menu-open .flare-fab__icon {
    transform: rotate(45deg);
}

.flare-fab-menu__list {
    position: absolute;
    display: flex;
    gap: var(--flare-spacing-6);
    margin: 0;

    content-visibility: hidden;
    transition: content-visibility var(--flare-motion-duration-short2);
    transition-behavior: allow-discrete;
}

.flare-fab-menu__list { --_fab-menu-offset: 0.75rem; }

.flare-fab-menu__list--up    { bottom: calc(100% + var(--_fab-menu-offset)); left: 50%; transform: translateX(-50%); flex-direction: column-reverse; align-items: center; }
.flare-fab-menu__list--down  { top:    calc(100% + var(--_fab-menu-offset)); left: 50%; transform: translateX(-50%); flex-direction: column;         align-items: center; }
.flare-fab-menu__list--left  { right:  calc(100% + var(--_fab-menu-offset)); top:  50%; transform: translateY(-50%); flex-direction: row-reverse;     align-items: center; }
.flare-fab-menu__list--right { left:   calc(100% + var(--_fab-menu-offset)); top:  50%; transform: translateY(-50%); flex-direction: row;             align-items: center; }

.flare-fab-menu__list--up.flare-fab-menu__list--align-start,
.flare-fab-menu__list--down.flare-fab-menu__list--align-start  { left: 0; right: auto; transform: none; align-items: flex-start; }
.flare-fab-menu__list--up.flare-fab-menu__list--align-end,
.flare-fab-menu__list--down.flare-fab-menu__list--align-end    { left: auto; right: 0; transform: none; align-items: flex-end; }
.flare-fab-menu__list--left.flare-fab-menu__list--align-start,
.flare-fab-menu__list--right.flare-fab-menu__list--align-start { top: 0; bottom: auto; transform: none; align-items: flex-start; }
.flare-fab-menu__list--left.flare-fab-menu__list--align-end,
.flare-fab-menu__list--right.flare-fab-menu__list--align-end   { top: auto; bottom: 0; transform: none; align-items: flex-end; }

.flare-fab-menu__item {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-4);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short2),
                transform var(--flare-motion-duration-short2) var(--flare-motion-easing-decelerate);
}
.flare-fab-menu__list--open { content-visibility: visible; }

.flare-fab-menu__list--open .flare-fab-menu__item {
    opacity: 1;

    transform: none;
    pointer-events: auto;
}

.flare-fab-menu__list--right .flare-fab-menu__item { flex-direction: row-reverse; }

.flare-fab-menu__label {
    font-family: var(--flare-typescale-label-large-font);
    font-size: var(--flare-typescale-label-large-size);
    background: var(--flare-color-inverse-surface);
    color: var(--flare-color-inverse-on-surface);
    padding: var(--flare-spacing-2) var(--flare-spacing-5);
    border-radius: var(--flare-shape-extra-small);
    white-space: nowrap;
    box-shadow: var(--flare-elevation-1);
}

.flare-fab-menu__btn .flare-fab__icon {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- table.css ---- */
.flare-table-container {
    overflow-x: auto;
    border-radius: var(--flare-shape-medium);
    border: var(--flare-border-divider);
}

.flare-table-container--sticky .flare-table__thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--flare-color-surface);
}

.flare-table-container--sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.flare-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
    color: var(--flare-color-on-surface);
    background: var(--flare-color-surface);
}

.flare-table thead th {
    padding: var(--flare-table-cell-padding-v) var(--flare-table-cell-padding-h);
    text-align: left;
    font-family: var(--flare-typescale-label-large-font);
    font-size: var(--flare-typescale-label-large-size);
    font-weight: var(--flare-typescale-label-large-weight);
    color: var(--flare-color-on-surface-variant);
    background: var(--flare-color-surface-container-low);
    border-bottom: var(--flare-border-divider);
    white-space: nowrap;
}

.flare-table tbody td {
    padding: var(--flare-table-cell-padding-v) var(--flare-table-cell-padding-h);
    border-bottom: var(--flare-border-divider);
    vertical-align: middle;
}

.flare-table tbody tr:last-child td { border-bottom: none; }

.flare-table--striped tbody tr:nth-child(even) {
    background: var(--flare-stripe-bg);
}

.flare-table--hover tbody tr:hover {
    background: var(--flare-state-hover-layer);
}

.flare-table--bordered thead th,
.flare-table--bordered tbody td {
    border: var(--flare-border-divider);
}

.flare-table--dense thead th,
.flare-table--dense tbody td { padding: var(--flare-spacing-3) var(--flare-spacing-6); }

.flare-table__group-row td {
    font-weight: 600;
    background: var(--flare-color-surface-container);
    color: var(--flare-color-on-surface-variant);
    padding: 0.4rem var(--flare-spacing-6);
    cursor: pointer;
    user-select: none;
    border-bottom: var(--flare-border-divider);
}

.flare-table__group-row:hover td {
    background: var(--flare-color-surface-container-high);
}

.flare-table__group-chevron {
    display: inline-block;
    width: 1rem;
    font-style: normal;
    margin-right: var(--flare-spacing-2);
    transition: transform 0.15s ease;
}

.flare-table__group-row--collapsed .flare-table__group-chevron {
    transform: rotate(-90deg);
}

.flare-table__tfoot {
    border-top: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-color-outline);
}

.flare-table__tfoot td {
    font-weight: 600;
    padding: var(--flare-spacing-4) var(--flare-spacing-6);
    background: var(--flare-color-surface-container-low);
}

/* ---- scrolltop.css ---- */
.flare-scroll-top {
    position: fixed;
    bottom: var(--flare-scroll-top-inset);
    right: var(--flare-scroll-top-inset);
    width: var(--flare-scroll-top-size);
    height: var(--flare-scroll-top-size);
    border-radius: 50%;
    background: var(--flare-color-primary);
    color: var(--flare-color-on-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--flare-elevation-3);
    z-index: 120;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.75rem);
    transition: opacity var(--flare-motion-duration-short3),
                transform var(--flare-motion-duration-short3) var(--flare-motion-easing-decelerate),
                background var(--flare-motion-duration-short1);
}

.flare-scroll-top--visible {
    opacity: 1;
    pointer-events: auto;

    transform: none;
}

.flare-scroll-top::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-scroll-top:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-scroll-top .flare-icon {
    font-size: 1.5rem;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- link.css ---- */
.flare-link {
    display: inline;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;

    color: var(--fc-main, inherit);
    transition: color var(--flare-motion-duration-short1),
                opacity var(--flare-motion-duration-short1);
}

.flare-link--underline-always { text-decoration: underline; }
.flare-link--underline-hover:hover { text-decoration: underline; }
.flare-link--underline-none { text-decoration: none; }

.flare-link:hover:not(.flare-link--disabled) { opacity: var(--flare-link-hover-opacity); }

.flare-link--disabled {
    opacity: var(--flare-link-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

.flare-link:focus-visible {
    outline: var(--flare-link-focus-ring-width) solid var(--flare-color-primary);
    outline-offset: 2px;
    border-radius: var(--flare-shape-extra-small);
}

/* ---- overlay.css ---- */
.flare-overlay {
    position: fixed;
    inset: 0;

    background: var(--flare-color-scrim);
    transition: opacity var(--flare-motion-duration-short3);
}

.flare-overlay--absolute {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* ---- popover.css ---- */
.flare-popover-anchor {
    position: relative;
    display: inline-flex;
}

.flare-popover__backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: transparent;
}

.flare-popover__paper {
    position: absolute;
    z-index: 300;
    min-width: 12rem;
    max-width: 24rem;
    background: var(--flare-color-surface-container);
    color: var(--flare-color-on-surface);
    border-radius: var(--flare-popover-radius);
    box-shadow: var(--flare-elevation-2);
    overflow: auto;
    animation: flare-popover-in var(--flare-motion-duration-short3) var(--flare-motion-easing-decelerate);
}

.flare-popover__paper--match-width:not([data-flare-placed]) {
    width: 100%;
    min-width: 0;
    max-width: none;
}

@keyframes flare-popover-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.flare-popover__paper--bottom-start:not([data-flare-placed]) { top: calc(100% + 0.5rem); left: 0; }
.flare-popover__paper--bottom:not([data-flare-placed])       { top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); }
.flare-popover__paper--bottom-end:not([data-flare-placed])   { top: calc(100% + 0.5rem); right: 0; }

.flare-popover__paper--top-start:not([data-flare-placed]) { bottom: calc(100% + 0.5rem); left: 0; }
.flare-popover__paper--top:not([data-flare-placed])       { bottom: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); }
.flare-popover__paper--top-end:not([data-flare-placed])   { bottom: calc(100% + 0.5rem); right: 0; }

.flare-popover__paper--right-start:not([data-flare-placed]) { left: calc(100% + 0.5rem); top: 0; }
.flare-popover__paper--right:not([data-flare-placed])       { left: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); }
.flare-popover__paper--right-end:not([data-flare-placed])   { left: calc(100% + 0.5rem); bottom: 0; }

.flare-popover__paper--left-start:not([data-flare-placed]) { right: calc(100% + 0.5rem); top: 0; }
.flare-popover__paper--left:not([data-flare-placed])       { right: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); }
.flare-popover__paper--left-end:not([data-flare-placed])   { right: calc(100% + 0.5rem); bottom: 0; }

.flare-popover__paper.flare-popover--arrow::before {
    content: '';
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--flare-color-surface-container);
    transform: rotate(45deg);
}

.flare-popover__paper.flare-popover--arrow[data-flare-side="bottom"]::before {
    top: -0.3125rem;
    left: 1rem;
}

.flare-popover__paper.flare-popover--arrow[data-flare-side="top"]::before {
    bottom: -0.3125rem;
    left: 1rem;
}

.flare-popover__paper.flare-popover--arrow[data-flare-side="right"]::before {
    left: -0.3125rem;
    top: 1rem;
}

.flare-popover__paper.flare-popover--arrow[data-flare-side="left"]::before {
    right: -0.3125rem;
    top: 1rem;
}

/* ---- image.css ---- */
.flare-image {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.flare-image--fluid { width: 100%; }

.flare-image__img {
  display: block;
  width: 100%;
  height: 100%;
}

.flare-image--cover    .flare-image__img { object-fit: cover; }
.flare-image--contain  .flare-image__img { object-fit: contain; }
.flare-image--fill     .flare-image__img { object-fit: fill; }
.flare-image--none     .flare-image__img { object-fit: none; }
.flare-image--scale-down .flare-image__img { object-fit: scale-down; }

/* ---- fileupload.css ---- */
.flare-file-upload {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-6);
}

.flare-file-upload__drop-wrap {
    position: relative;
}

.flare-file-upload__zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--flare-spacing-4);
    min-height: var(--flare-file-upload-zone-min-height);
    padding: var(--flare-spacing-16) var(--flare-spacing-12);
    border: var(--flare-file-upload-border-width) dashed var(--flare-color-outline);
    border-radius: var(--flare-file-upload-zone-radius);
    background: var(--flare-color-surface-container-low);
    cursor: pointer;
    text-align: center;
    color: var(--flare-color-on-surface-variant);
    user-select: none;
    transition: border-color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard),
                background var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-file-upload__drop-wrap:hover .flare-file-upload__zone {
    border-color: var(--flare-color-primary);
    background: var(--flare-file-upload-hover-bg);
}

.flare-file-upload--dragging .flare-file-upload__zone {
    border-color: var(--flare-color-primary);
    background: var(--flare-file-upload-dragging-bg);
    box-shadow: inset 0 0 0 var(--flare-file-upload-dragging-ring-width) var(--flare-color-primary);
}

.flare-file-upload__icon {
    font-size: var(--flare-file-upload-icon-size);
    color: var(--flare-color-primary);
    transition: transform var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-file-upload--dragging .flare-file-upload__icon { transform: scale(1.15); }

.flare-file-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.flare-file-upload__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--flare-file-upload-row-gap);
}

.flare-file-upload__file {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-4);
    padding: var(--flare-spacing-3) var(--flare-spacing-6);
    background: var(--flare-color-surface-container);
    border-radius: var(--flare-file-upload-row-radius);
    font-size: var(--flare-typescale-body-small-size);
    color: var(--flare-color-on-surface);
}

.flare-file-upload__file-icon {
    font-size: var(--flare-file-upload-file-icon-size);
    color: var(--flare-color-on-surface-variant);
}

.flare-file-upload__file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flare-file-upload__file-size {
    color: var(--flare-color-on-surface-variant);
    flex-shrink: 0;
}

.flare-file-upload--button .flare-file-upload__drop-wrap { display: flex; }

.flare-file-upload--button .flare-file-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    inset: auto;
    opacity: 0;
    pointer-events: none;
}

.flare-file-upload__drop-wrap:has(.flare-file-upload__input:focus-visible) .flare-file-upload__button {
    outline: var(--flare-btn-focus-outline);
    outline-offset: var(--flare-btn-focus-outline-offset);
    box-shadow: var(--flare-btn-focus-shadow);
}

.flare-file-upload--disabled { opacity: var(--flare-state-disabled-opacity); pointer-events: none; }

.flare-file-upload__file--uploading { background: var(--flare-file-upload-row-active-bg); }
.flare-file-upload__file--completed { background: var(--flare-file-upload-row-success-bg); }
.flare-file-upload__file--failed,
.flare-file-upload__file--cancelled { background: var(--flare-file-upload-row-error-bg); }

.flare-file-upload__file-error {
    color: var(--flare-file-upload-row-error-color);
    font-size: var(--flare-typescale-label-small-size);
}

.flare-file-upload__progress {
    flex: 0 1 8rem;
}

.flare-file-upload__file-actions {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-1);
    flex: none;
}

/* ---- layout-shell.css ---- */
.flare-layout {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: var(--flare-layout-cols, minmax(0, 1fr));

    height: 100dvh;
    overflow: hidden;
    background: var(--flare-color-background);
    color: var(--flare-color-on-background);

    transition: grid-template-columns var(--flare-motion-duration-medium2)
                var(--flare-motion-easing-emphasized);
}

.flare-layout-appbar {
    grid-row: 1;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-6);
    padding: 0 var(--flare-spacing-8);
    height: var(--flare-layout-appbar-height);
    background: var(--flare-layout-appbar-bg);
    border-bottom: var(--flare-layout-appbar-border);
    box-shadow: var(--flare-layout-appbar-shadow);
    z-index: 100;
    color: var(--flare-color-on-surface);
}

.flare-layout-appbar--dense {
    --flare-layout-appbar-height: var(--flare-layout-appbar-height-dense);
}

.flare-layout-drawer,
.flare-layout-content {
    grid-row: 2;
    min-height: 0;
}

.flare-layout-drawer {
    background: var(--flare-color-surface-container-low);
    overflow: hidden;
    min-width: 0;
}
.flare-layout-drawer__inner {
    width: var(--fld-w, var(--flare-layout-drawer-width));
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    border-right: var(--flare-layout-drawer-border);
}

.flare-layout-drawer--end .flare-layout-drawer__inner {
    border-right: none;
    border-left: var(--flare-layout-drawer-border);
}

.flare-layout-drawer--persistent .flare-layout-drawer__inner,
.flare-layout-drawer--responsive .flare-layout-drawer__inner,
.flare-layout-drawer--permanent .flare-layout-drawer__inner {
    width: var(--fld-w, var(--flare-layout-drawer-width));
}

.flare-layout-drawer--mini .flare-layout-drawer__inner {
    width: 100%;
    transition: width var(--flare-motion-duration-medium2)
                var(--flare-motion-easing-emphasized);
}

.flare-layout-drawer--floating,
.flare-layout-drawer--temporary {
    position: fixed;
    top: var(--flare-layout-appbar-height);
    bottom: 0;
    left: 0;
    width: var(--fld-w, var(--flare-layout-drawer-width));
    z-index: 200;
    transform: translateX(-100%);
    transition: transform var(--flare-motion-duration-medium1) ease;
    box-shadow: var(--flare-elevation-3);
}
.flare-layout-drawer--floating.flare-layout-drawer--end,
.flare-layout-drawer--temporary.flare-layout-drawer--end {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

.flare-layout-drawer--floating.flare-layout-drawer--open,
.flare-layout-drawer--temporary.flare-layout-drawer--open {
    transform: none;
}
.flare-layout-drawer--floating .flare-layout-drawer__inner,
.flare-layout-drawer--temporary .flare-layout-drawer__inner {
    width: 100%;
}

.flare-layout-drawer--hover-expand {
    overflow: visible;
    position: relative;
    z-index: 150;
}
.flare-layout-drawer--hover-expand .flare-layout-drawer__inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--fld-w, var(--flare-layout-drawer-width));
    background: var(--flare-color-surface-container-low);
    box-shadow: var(--flare-elevation-3);
}
.flare-layout-drawer--hover-expand.flare-layout-drawer--end .flare-layout-drawer__inner {
    left: auto;
    right: 0;
}

.flare-layout-content {
    overflow: auto;
    min-width: 0;
    padding: var(--flare-layout-content-padding);
}

.flare-layout--mobile .flare-layout-content {
    padding: var(--flare-layout-content-padding-mobile);
}

.flare-layout__content-frame { width: 100%; }

.flare-layout-content--fill > .flare-layout__content-frame { height: 100%; }
.flare-layout-content--xs { max-width: 480px; }
.flare-layout-content--sm { max-width: 600px; }
.flare-layout-content--md { max-width: 960px; }
.flare-layout-content--lg { max-width: 1280px; }
.flare-layout-content--xl { max-width: 1920px; }
.flare-layout-content--align-start  { margin-inline: 0 auto; }
.flare-layout-content--align-center { margin-inline: auto; }
.flare-layout-content--align-end    { margin-inline: auto 0; }

.flare-layout-appbar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: var(--flare-shape-full);
    color: inherit;
    cursor: pointer;
    transition: background var(--flare-motion-duration-short2);
}
.flare-layout-appbar__toggle:hover {
    background: var(--flare-color-surface-container-highest);
}

.flare-burger {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 14px;
}
.flare-burger__bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: top var(--flare-motion-duration-short4) ease,
                transform var(--flare-motion-duration-short4) ease,
                opacity var(--flare-motion-duration-short2) ease;
}
.flare-burger__bar:nth-child(1) { top: 0; }
.flare-burger__bar:nth-child(2) { top: 6px; }
.flare-burger__bar:nth-child(3) { top: 12px; }
.flare-layout-appbar__toggle--open .flare-burger__bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
.flare-layout-appbar__toggle--open .flare-burger__bar:nth-child(2) { opacity: 0; }
.flare-layout-appbar__toggle--open .flare-burger__bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.flare-layout__scrim { display: none; }
.flare-layout--scrim-open .flare-layout__scrim {
    display: block;
    position: fixed;
    inset: var(--flare-layout-appbar-height) 0 0 0;
    z-index: 180;
    background: var(--flare-color-scrim);
    opacity: 0.45;
}

/* ---- infinitescroll.css ---- */
.flare-infinite-scroll {
    display: flex;
    flex-direction: column;
}

.flare-infinite-scroll__sentinel {
    height: 1px;
    flex-shrink: 0;
}

.flare-infinite-scroll__loading {
    display: flex;
    justify-content: center;
    padding: var(--flare-spacing-12);
}

.flare-infinite-scroll__end {
    display: flex;
    justify-content: center;
    padding: var(--flare-spacing-8);
    color: var(--flare-color-on-surface-variant);
    font-size: var(--flare-typescale-body-small-size);
}

.flare-virtual-list {
    background: var(--flare-color-surface);
    border-radius: var(--flare-shape-medium);
    overflow: hidden;
}

.flare-virtual-list__item {
    border-bottom: var(--flare-border-divider);
}

.flare-virtual-list__item:last-child {
    border-bottom: none;
}

/* ---- lazy.css ---- */
.flare-lazy {
    display: block;
}

/* ---- calendar.css ---- */
.flare-calendar {
    background: var(--flare-color-surface);
    border-radius: var(--flare-shape-medium);
    border: var(--flare-border-divider);
    overflow: hidden;
    width: 100%;
    max-width: var(--flare-calendar-max-width);
}

.flare-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--flare-spacing-4) var(--flare-spacing-6);
    border-bottom: var(--flare-border-divider);
    background: var(--flare-color-surface-container-low);
}

.flare-calendar__months {
    display: flex;
    flex-wrap: wrap;
}

.flare-calendar__month { flex: 1 1 0; min-width: var(--flare-calendar-month-min-width); }

.flare-calendar--multi { max-width: none; }
.flare-calendar--multi .flare-calendar__month + .flare-calendar__month {
    border-left: var(--flare-border-divider);
}

.flare-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--flare-spacing-6) var(--flare-spacing-8);
    border-bottom: var(--flare-border-divider);
    background: var(--flare-color-surface-container-low);
}

.flare-calendar__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--flare-calendar-nav-btn-size);
    height: var(--flare-calendar-nav-btn-size);
    border: none;
    background: transparent;
    border-radius: var(--flare-shape-full);
    cursor: pointer;
    color: var(--flare-color-on-surface);
    transition: background var(--flare-motion-duration-short2);
}

.flare-calendar__nav-btn:hover {
    background: var(--flare-state-hover-layer);
}

.flare-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: var(--flare-spacing-4);
    gap: var(--flare-spacing-1);
}

.flare-calendar__day-label {
    text-align: center;
    font-size: var(--flare-typescale-label-small-size);
    color: var(--flare-color-on-surface-variant);
    padding: var(--flare-spacing-3) 0;
    font-weight: 600;
}

.flare-calendar__cell {
    position: relative;
    z-index: 0;
    min-height: var(--flare-calendar-cell-min-height);
    padding: var(--flare-spacing-2);
    border-radius: var(--flare-shape-extra-small);
    cursor: pointer;
    transition: background var(--flare-motion-duration-short2);
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-1);
}

.flare-calendar__cell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-calendar__cell:hover:not(.flare-calendar__cell--other)::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-calendar__cell--other {
    opacity: var(--flare-calendar-other-month-opacity);
    cursor: default;
    pointer-events: none;
}

.flare-calendar__cell--today .flare-calendar__day-num {
    background: var(--flare-calendar-today-bg);
    color: var(--flare-calendar-today-color);
    border-radius: var(--flare-shape-full);
    width: var(--flare-calendar-day-num-size);
    height: var(--flare-calendar-day-num-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.flare-calendar__cell--selected {
    background: var(--flare-calendar-selected-bg);
}

.flare-calendar__day-num {
    font-size: var(--flare-typescale-body-small-size);
    color: var(--flare-color-on-surface);
    width: var(--flare-calendar-day-num-size);
    height: var(--flare-calendar-day-num-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flare-calendar__event {

    background: var(--fc-container, var(--flare-color-primary-container));
    color: var(--fc-on-container, var(--flare-color-on-primary-container));
    border-radius: var(--flare-shape-extra-small);
    font-size: var(--flare-typescale-label-small-size);
    padding: var(--flare-calendar-event-pad-y) var(--flare-spacing-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- chart.css ---- */
.flare-chart__plot {
    position: relative;
    width: 100%;
}

.flare-chart__plot--zoomable {
    cursor: crosshair;
    touch-action: pan-y;
    user-select: none;
}

.flare-chart__plot--zoomed {
    cursor: grab;
}

.flare-chart__plot--zoomed:active {
    cursor: grabbing;
}

.flare-chart__zoom-selection {
    fill: var(--flare-chart-zoom-selection-fill);
    stroke: var(--flare-chart-zoom-selection-stroke);
    stroke-width: var(--flare-chart-annotation-width);
    pointer-events: none;
}

.flare-chart__toolbar {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-1);
    margin-inline-start: auto;
}

.flare-chart--animate .flare-chart__bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: flare-chart-grow var(--flare-motion-duration-medium2) var(--flare-motion-easing-decelerate) both;
}

.flare-chart--animate .flare-chart__line[pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: flare-chart-draw var(--flare-motion-duration-long2) var(--flare-motion-easing-standard) forwards;
}
@keyframes flare-chart-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes flare-chart-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .flare-chart--animate .flare-chart__bar,
    .flare-chart--animate .flare-chart__line[pathLength] { animation: none; stroke-dashoffset: 0; }
}

.flare-chart__cell { transition: opacity var(--flare-motion-duration-short2); }
.flare-chart__cell:hover { opacity: var(--flare-chart-cell-hover-opacity); }

.flare-chart__table {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;

    table-layout: fixed;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.flare-chart__table > caption {
    inline-size: 1px;
    overflow: hidden;
}

.flare-chart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--flare-chart-gap);
    background: var(--flare-chart-surface);
    border-radius: var(--flare-chart-radius);
    border: var(--flare-chart-border-width) solid var(--flare-chart-border-color);
    padding: var(--flare-chart-padding);
}

.flare-chart__title {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-2);
    margin-bottom: var(--flare-spacing-2);
}

.flare-chart__line {
    stroke-width: var(--flare-chart-line-width);
    stroke-linecap: var(--flare-chart-line-cap);
    stroke-linejoin: round;
}

.flare-chart--sparkline {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    gap: 0;
}
.flare-chart--sparkline .flare-chart__svg {
    display: block;
}

.flare-chart__svg {
    width: 100%;
    height: auto;
}

.flare-chart__body {
    display: flex;
    flex-direction: column;
    gap: var(--flare-chart-gap);
}
.flare-chart__body--row {
    flex-direction: row;
    align-items: center;
}
.flare-chart__body--row > .flare-chart__plot {
    flex: 1;
    min-width: 0;
}
.flare-chart__body--row > .flare-chart__legend {
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 0;
}

.flare-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flare-chart-legend-gap);
    margin-top: var(--flare-spacing-2);
}

.flare-chart__legend-item {
    cursor: pointer;
    user-select: none;
}
.flare-chart__legend-item--off {
    opacity: var(--flare-chart-legend-off-opacity);
}

.flare-chart__legend-item {
    display: flex;
    align-items: center;
    gap: var(--flare-chart-legend-item-gap);
    font-size: var(--flare-chart-legend-size);
    color: var(--flare-chart-legend-color);
}

.flare-chart__legend-dot {
    width: var(--flare-chart-legend-dot-size);
    height: var(--flare-chart-legend-dot-size);
    border-radius: var(--flare-chart-legend-dot-radius);
    flex-shrink: 0;
    background: var(--flare-chart-dot);
}

.flare-chart__hit {
    cursor: pointer;
}

.flare-chart__tooltip {
    position: absolute;

    pointer-events: none;
    background: var(--flare-color-surface-container-highest);
    color: var(--flare-color-on-surface);
    border: var(--flare-border-divider);
    border-radius: var(--flare-shape-extra-small);
    padding: var(--flare-spacing-3) var(--flare-spacing-5);
    font-size: var(--flare-typescale-body-small-size);
    line-height: 1.5;
    white-space: pre;
    box-shadow: var(--flare-elevation-2);
    z-index: 10;
    max-width: var(--flare-tooltip-max-width);
}

/* ---- gauge.css ---- */
.flare-gauge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.flare-gauge__svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.flare-gauge__track,
.flare-gauge__band,
.flare-gauge__fill {
  fill: none;
  stroke-linecap: var(--flare-gauge-track-cap);
}

.flare-gauge__track {
  stroke: var(--flare-gauge-track-color);
  stroke-width: var(--flare-gauge-track-width);
}

.flare-gauge__band {
  stroke: var(--fc-main, var(--flare-color-primary));
  stroke-width: var(--flare-gauge-track-width);
  opacity: var(--flare-gauge-band-opacity);
}

.flare-gauge__fill {
  stroke: var(--fc-main, var(--flare-gauge-fill-color));
  stroke-width: var(--flare-gauge-fill-width);

  stroke-dasharray: 100;
}

.flare-gauge__tick {
  stroke: var(--flare-gauge-tick-color);
  stroke-width: var(--flare-gauge-tick-width);
}

.flare-gauge__tick--minor {
  stroke: var(--flare-gauge-tick-minor-color);
  stroke-width: var(--flare-gauge-tick-minor-width);
}

.flare-gauge__scale-label {
  fill: var(--flare-gauge-label-color);
  font-family: var(--flare-typescale-label-small-font);
  font-size: calc(var(--flare-gauge-label-size) * 1px);
  text-anchor: middle;
  dominant-baseline: middle;
}

.flare-gauge__needle {
  stroke: var(--fc-main, var(--flare-gauge-needle-color));
  stroke-width: var(--flare-gauge-needle-width);
  stroke-linecap: round;
}

.flare-gauge__pivot {
  fill: var(--flare-gauge-pivot-color);
}

.flare-gauge__target {
  stroke: var(--flare-gauge-target-color);
  stroke-width: var(--flare-gauge-target-width);
  stroke-linecap: butt;
}

.flare-gauge__readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--flare-spacing-1);
}

.flare-gauge__value {
  color: var(--flare-gauge-value-color);
  font-family: var(--flare-typescale-headline-small-font);
  font-size: var(--flare-gauge-value-size);
  font-weight: var(--flare-gauge-value-weight);
  line-height: 1.1;
}

.flare-gauge__label {
  color: var(--flare-gauge-label-color);
  font-family: var(--flare-typescale-label-medium-font);
  font-size: var(--flare-typescale-label-medium-size);
}

.flare-gauge--radial .flare-gauge__readout,
.flare-gauge--arc .flare-gauge__readout {
  margin-top: calc(var(--flare-spacing-8) * -1);
}

.flare-gauge--linear,
.flare-gauge--linear-vertical {
  align-items: stretch;
}

.flare-gauge--linear-vertical {
  flex-direction: row;
  align-items: center;
}

.flare-gauge--animate .flare-gauge__fill {
  transition: stroke-dashoffset var(--flare-motion-duration-long2) var(--flare-motion-easing-decelerate);
}

.flare-gauge--animate .flare-gauge__needle-group {
  transition: transform var(--flare-motion-duration-long2) var(--flare-motion-easing-decelerate);
}

@media (prefers-reduced-motion: reduce) {
  .flare-gauge--animate .flare-gauge__fill,
  .flare-gauge--animate .flare-gauge__needle-group {
    transition: none;
  }
}

/* ---- busy.css ---- */
.flare-busy {
  position: relative;
}

.flare-busy__content {
  transition: filter var(--flare-motion-duration-short4) var(--flare-motion-easing-standard);
}

.flare-busy--active .flare-busy__content {
  filter: blur(1px);
}

.flare-busy__veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--flare-spacing-4);

  z-index: var(--flare-z-overlay, 2);
  background: color-mix(in srgb, var(--flare-color-scrim) calc(var(--flare-scrim-opacity) * 100%), transparent);
  animation: flare-busy-in var(--flare-motion-duration-short4) var(--flare-motion-easing-standard);
}

.flare-busy__label {
  font-family: var(--flare-typescale-body-medium-font);
  font-size: var(--flare-typescale-body-medium-size);
  color: var(--flare-color-on-surface);
  text-align: center;
}

@keyframes flare-busy-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .flare-busy__veil { animation: none; }
  .flare-busy--active .flare-busy__content { filter: none; }
}

/* ---- pulltorefresh.css ---- */
.flare-ptr {
  position: relative;
  overflow: hidden;

  touch-action: pan-x pan-down;
}

.flare-ptr--refreshing {
  touch-action: auto;
}

.flare-ptr__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--flare-color-on-surface-variant);
}

.flare-ptr__arrow {
  transition: transform var(--flare-motion-duration-short3) var(--flare-motion-easing-standard);
}

.flare-ptr__content {
  will-change: transform;
}

.flare-ptr:not(:active) .flare-ptr__content,
.flare-ptr:not(:active) .flare-ptr__indicator {
  transition: transform var(--flare-motion-duration-medium1) var(--flare-motion-easing-decelerate),
              height var(--flare-motion-duration-medium1) var(--flare-motion-easing-decelerate);
}

@media (prefers-reduced-motion: reduce) {
  .flare-ptr__arrow,
  .flare-ptr:not(:active) .flare-ptr__content,
  .flare-ptr:not(:active) .flare-ptr__indicator {
    transition: none;
  }
}

/* ---- timespanfield.css ---- */
.flare-timespan {
  min-width: 0;
}

.flare-timespan__segments {
  display: flex;
  align-items: baseline;
  gap: var(--flare-spacing-1);
  width: 100%;
  padding: var(--flare-input-padding-md);
}

.flare-timespan__segment {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

.flare-timespan__input {
  width: 3ch;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--flare-color-on-surface);
  font-family: var(--flare-typescale-body-large-font);
  font-size: var(--flare-typescale-body-large-size);
  font-variant-numeric: tabular-nums;
  text-align: end;
  padding: 0;
}

.flare-timespan__input:focus {
  outline: none;
}

.flare-timespan__input::-webkit-outer-spin-button,
.flare-timespan__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.flare-timespan__input {
  appearance: textfield;
}

.flare-timespan__unit {
  color: var(--flare-color-on-surface-variant);
  font-family: var(--flare-typescale-label-small-font);
  font-size: var(--flare-typescale-label-small-size);
}

.flare-timespan__sign {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--flare-color-on-surface-variant);
  font-family: var(--flare-typescale-body-large-font);
  font-size: var(--flare-typescale-body-large-size);
  padding: 0 var(--flare-spacing-1);
  border-radius: var(--flare-shape-extra-small);
}

.flare-timespan__sign:disabled {
  cursor: default;
  opacity: var(--flare-state-disabled-opacity);
}

/* ---- virtualtree.css ---- */
.flare-vtree {
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
    color: var(--flare-color-on-surface);
    overflow-y: auto;
}

.flare-vtree__node {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-2);
    padding-top: var(--flare-spacing-2);
    padding-bottom: var(--flare-spacing-2);
    padding-right: var(--flare-spacing-4);

    padding-left: var(--flare-vtree-indent, 0);
    cursor: pointer;
    border-radius: var(--flare-nav-item-radius);
    transition: background var(--flare-motion-duration-short2);
}

.flare-vtree__node::before,
.flare-vtree__expand-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-vtree__node:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-vtree__expand-btn {
    position: relative;
    z-index: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--flare-color-on-surface-variant);
    border-radius: var(--flare-nav-item-radius);
}

.flare-vtree__expand-btn:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-vtree__expand-btn .flare-icon {
    font-size: 1rem;
    transition: transform var(--flare-motion-duration-short2) ease;
}

.flare-vtree__node[aria-expanded="true"] .flare-vtree__expand-btn .flare-icon {
    transform: rotate(90deg);
}

.flare-vtree__node:focus-visible {
    outline: 2px solid var(--flare-color-primary);
    outline-offset: -2px;
}

.flare-vtree__node[aria-selected="true"] {
    background: var(--flare-tree-selected-bg);
    color: var(--flare-tree-selected-color);
}

.flare-vtree__leaf-spacer {
    display: inline-block;
    width: 1.25rem;
    flex-shrink: 0;
}

.flare-vtree__node-loading {
    opacity: 0.6;
    font-style: italic;
}

@keyframes flare-vtree-spin {
    to { transform: rotate(360deg); }
}

.flare-vtree__expand-btn[disabled] .flare-icon {
    display: inline-block;
    animation: flare-vtree-spin 0.8s linear infinite;
}

/* ---- formbuilder.css ---- */
.flare-formbuilder {
    display: flex;
    flex-direction: column;
}

.flare-form {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-8);
}

.flare-formbuilder__field {
    margin-bottom: var(--flare-spacing-8);
}

.flare-formbuilder__actions {
    display: flex;
    gap: var(--flare-spacing-4);
    margin-top: var(--flare-spacing-12);
}

.flare-form--horizontal { display: grid; grid-template-columns: var(--flare-form-horizontal-columns); align-items: start; }
.flare-form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.flare-form--dense { gap: var(--flare-spacing-4); }

/* ---- a11y.css ---- */
.flare-visually-hidden {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: var(--flare-focus-ring);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus,
h4[tabindex="-1"]:focus,
h5[tabindex="-1"]:focus,
h6[tabindex="-1"]:focus {
    outline: none;
}

.flare-btn:focus-visible,
.flare-chip:focus-visible,
.flare-tab:focus-visible,
.flare-accordion-panel__header:focus-visible,
.flare-nav-link:focus-visible,
.flare-pagination__btn:focus-visible,
.flare-calendar__nav-btn:focus-visible,
.flare-calendar__cell:focus-visible,
.flare-rating__star:focus-visible,
.flare-stepper__step:focus-visible,
.flare-tree-item__toggle:focus-visible,
.flare-tree-item__row:focus-visible {
    outline: var(--flare-focus-ring);
    outline-offset: 2px;
}

.flare-input__control:focus-visible,
.flare-select__control:focus-visible,
.flare-multiselect__control:focus-visible,
.flare-select__search:focus-visible {
    outline: none;
}

[disabled]:focus-visible,
[aria-disabled="true"]:focus-visible {
    outline: none;
}

@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid ButtonText;
        outline-offset: 2px;
    }
}

[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="treeitem"]:focus-visible {
    outline: var(--flare-focus-ring);
    outline-offset: 2px;
}

[role="tablist"] [role="tab"][tabindex="0"]:focus-visible,
[role="menu"] [role="menuitem"][tabindex="0"]:focus-visible {
    outline: var(--flare-focus-ring);
    outline-offset: 2px;
}

@media (pointer: coarse) {

    .flare-pagination__btn,
    .flare-btn--icon-only,
    .flare-input__clear,
    .flare-autocomplete__clear,
    .flare-layout-appbar__toggle,
    .flare-tabs__scroll,
    .flare-btn {
        min-inline-size: var(--flare-touch-target-min);
        min-block-size: var(--flare-touch-target-min);
    }

    .flare-numericfield__step {
        min-inline-size: var(--flare-touch-target-min);
    }

    .flare-chip__close,
    .flare-tabs__tab-close,
    .flare-input__arrow {
        position: relative;
    }

    .flare-chip__close::after,
    .flare-tabs__tab-close::after,
    .flare-input__arrow::after {
        content: '';
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        translate: -50% -50%;
        inline-size: var(--flare-touch-target-min);
        block-size: var(--flare-touch-target-min);
    }

    .flare-listbox__option,
    .flare-menu-item,
    .flare-nav-link,
    .flare-tree-item__row {
        min-block-size: var(--flare-touch-target-min);
    }
}

/* ---- multiselect.css ---- */
.flare-multiselect__value { flex: 0 1 auto; min-width: 0; }

.flare-multiselect__chips { display: flex; flex-wrap: wrap; gap: var(--flare-spacing-2); }
.flare-multiselect__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--flare-spacing-2);
    padding: var(--flare-spacing-1) var(--flare-spacing-4);
    border-radius: var(--flare-shape-full);
    background: var(--flare-color-secondary-container);
    color: var(--flare-color-on-secondary-container);
    font-size: var(--flare-typescale-label-medium-size);
    line-height: 1.4;
}
.flare-multiselect__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 1rem;
    height: 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.7rem;
    border-radius: var(--flare-shape-full);
}
.flare-multiselect__chip-remove:hover { background: var(--flare-state-hover-layer); }

.flare-input--disabled .flare-multiselect__chip { opacity: var(--flare-state-disabled-opacity); }

.flare-multiselect__option {}

.flare-multiselect__option--select-all {
    border-bottom: var(--flare-border-divider);
    font-weight: 500;
}

/* ---- listbox.css ---- */
.flare-listbox {
    z-index: var(--flare-z-dropdown, 1000);
    background-color: var(--flare-color-surface-container-high);
    color: var(--flare-color-on-surface);
    border: var(--flare-border-divider);
    border-radius: var(--flare-shape-medium);
    box-shadow: var(--flare-elevation-2);
    max-height: 16rem;
    overflow-y: auto;

    overscroll-behavior: contain;
    padding: var(--flare-spacing-2);
    animation: flare-listbox-in var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-listbox__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--flare-spacing-2);
}

@keyframes flare-listbox-in {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.flare-listbox__option {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-4);
    padding: var(--flare-spacing-4) var(--flare-spacing-6);
    border-radius: var(--flare-shape-small);
    color: var(--flare-color-on-surface);
    font-size: var(--flare-typescale-body-medium-size);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-listbox__option::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-listbox__option:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-listbox__option--active::before {
    background: var(--flare-state-focus-layer);
    opacity: 1;
}
.flare-listbox__option--selected { color: var(--flare-color-primary); font-weight: 600; }

.flare-listbox__check { margin-left: auto; color: var(--flare-color-primary); font-size: 1.15em; }

.flare-listbox__empty {
    padding: var(--flare-spacing-4) var(--flare-spacing-6);
    color: var(--flare-color-on-surface-variant);
    font-size: var(--flare-typescale-body-small-size);
}

.flare-listbox__checkbox {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 1.125rem;
    height: 1.125rem;
    border: var(--flare-border-width-emphasis) var(--flare-border-style) var(--flare-color-outline);
    border-radius: var(--flare-shape-extra-small);
    position: relative;
    transition: background-color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard),
                border-color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-listbox__checkbox[data-checked],
.flare-listbox__checkbox[data-indeterminate] {
    background-color: var(--flare-color-primary);
    border-color: var(--flare-color-primary);
}

.flare-listbox__checkbox[data-checked]::after {
    content: "";
    position: absolute;
    left: 0.3125rem;
    top: 0.0625rem;
    width: 0.3125rem;
    height: 0.625rem;
    border: solid var(--flare-color-on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.flare-listbox__checkbox[data-indeterminate]::after {
    content: "";
    position: absolute;
    left: 0.1875rem;
    top: 0.4375rem;
    width: 0.625rem;
    height: 0.125rem;
    border-radius: 1px;
    background-color: var(--flare-color-on-primary);
}

.flare-listbox__group-header {
    padding: var(--flare-spacing-4) var(--flare-spacing-6) var(--flare-spacing-2);
    font-size: var(--flare-typescale-label-small-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--flare-color-on-surface-variant);
}

/* ---- emptystate.css ---- */
.flare-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--flare-spacing-8);
    padding: var(--flare-spacing-24) var(--flare-spacing-16);
    text-align: center;
    color: var(--flare-color-on-surface-variant);
}
.flare-empty-state__icon {
    font-size: 3rem;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flare-empty-state__description {
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
    max-width: 32rem;
    margin: 0;
}
.flare-empty-state__action { margin-top: var(--flare-spacing-4); }

.flare-empty-state--compact { padding: var(--flare-spacing-12) var(--flare-spacing-8); gap: var(--flare-spacing-4); }
.flare-empty-state--compact .flare-empty-state__icon { font-size: 2rem; }
.flare-empty-state--compact .flare-empty-state__title { font-size: var(--flare-typescale-title-medium-size); }
.flare-empty-state--compact .flare-empty-state__description { font-size: var(--flare-typescale-body-small-size); }

/* ---- colormodetoggle.css ---- */
.flare-color-mode-toggle {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--flare-spacing-4);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--flare-color-on-surface);
    padding: var(--flare-spacing-4);
    border-radius: var(--flare-shape-full);
    font-family: var(--flare-typescale-label-large-font);
    font-size: var(--flare-typescale-label-large-size);
    transition: background-color var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-color-mode-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-color-mode-toggle:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}
.flare-color-mode-toggle__label { pointer-events: none; }

/* ---- colorcustomizer.css ---- */
.flare-color-customizer {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-6);
}

.flare-color-customizer__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flare-spacing-4);
}

.flare-color-customizer__swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 150ms, transform 150ms;

    background-color: var(--flare-swatch);
}
.flare-color-customizer__swatch:hover {
    transform: scale(1.1);
}
.flare-color-customizer__swatch--active {
    border-color: var(--flare-color-on-surface);
    transform: scale(1.15);
}

.flare-color-customizer__custom {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-4);
}

.flare-color-customizer__picker {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    background: none;
}

.flare-color-customizer__contrast {
    display: flex;
    align-items: center;
    gap: var(--flare-spacing-4);
    font-size: var(--flare-typescale-label-medium-size);
    color: var(--flare-color-on-surface-variant);
}
.flare-color-customizer__contrast-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--flare-shape-small);
    font-weight: 600;
}
.flare-color-customizer__contrast-badge {
    padding: 0.1rem 0.45rem;
    border-radius: var(--flare-shape-full);
    font-weight: 600;
    font-size: var(--flare-typescale-label-small-size);
    white-space: nowrap;
}

/* ---- avatargroup.css ---- */
.flare-avatar-group {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.flare-avatar-group .flare-avatar,
.flare-avatar-group__overflow {
    margin-inline-start: var(--flare-avatar-group-spacing);
    border: var(--flare-avatar-group-border-width) solid var(--flare-avatar-group-border-color);
    box-sizing: content-box;
    position: relative;
}

.flare-avatar-group .flare-avatar:first-child,
.flare-avatar-group__overflow:first-child {
    margin-inline-start: 0;
}

.flare-avatar-group__overflow {
    background: var(--flare-avatar-overflow-bg);
    color: var(--flare-avatar-overflow-color);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: default;
}

/* ---- togglebutton.css ---- */
.flare-togglegroup {
    display: inline-flex;
    border: var(--flare-togglegroup-border);
    border-radius: var(--flare-togglegroup-radius);

    overflow: auto hidden;
    max-inline-size: 100%;
}

.flare-togglegroup--vertical {
    flex-direction: column;
    border-radius: var(--flare-togglegroup-radius-vertical);
}

.flare-togglegroup > .flare-btn {
    border-radius: 0;
    background: transparent;
    border-right: var(--flare-border-width) var(--flare-border-style) var(--flare-togglegroup-divider);
    flex: 0 0 auto;
}

.flare-togglegroup > .flare-btn:last-child {
    border-right: none;
}

.flare-togglegroup--vertical > .flare-btn {
    border-right: none;
    border-bottom: var(--flare-border-width) var(--flare-border-style) var(--flare-togglegroup-divider);
}

.flare-togglegroup--vertical > .flare-btn:last-child {
    border-bottom: none;
}

.flare-togglegroup > .flare-btn:first-child {
    border-radius: var(--flare-togglegroup-radius) 0 0 var(--flare-togglegroup-radius);
}
.flare-togglegroup > .flare-btn:last-child {
    border-radius: 0 var(--flare-togglegroup-radius) var(--flare-togglegroup-radius) 0;
}
.flare-togglegroup > .flare-btn:only-child {
    border-radius: var(--flare-togglegroup-radius);
}

.flare-togglegroup--vertical > .flare-btn:first-child {
    border-radius: var(--flare-togglegroup-radius-vertical) var(--flare-togglegroup-radius-vertical) 0 0;
}
.flare-togglegroup--vertical > .flare-btn:last-child {
    border-radius: 0 0 var(--flare-togglegroup-radius-vertical) var(--flare-togglegroup-radius-vertical);
}

.flare-togglegroup > .flare-btn.flare-btn--selected {
    border-radius: 0;
    background: var(--fc-container, var(--flare-btn-selected-bg));
    color: var(--fc-on-container, var(--flare-btn-selected-color));
}
.flare-togglegroup > .flare-btn.flare-btn--selected:first-child {
    border-radius: var(--flare-togglegroup-radius) 0 0 var(--flare-togglegroup-radius);
}
.flare-togglegroup > .flare-btn.flare-btn--selected:last-child {
    border-radius: 0 var(--flare-togglegroup-radius) var(--flare-togglegroup-radius) 0;
}
.flare-togglegroup--vertical > .flare-btn.flare-btn--selected:first-child {
    border-radius: var(--flare-togglegroup-radius-vertical) var(--flare-togglegroup-radius-vertical) 0 0;
}
.flare-togglegroup--vertical > .flare-btn.flare-btn--selected:last-child {
    border-radius: 0 0 var(--flare-togglegroup-radius-vertical) var(--flare-togglegroup-radius-vertical);
}

/* ---- paper.css ---- */
.flare-paper {
    background: var(--flare-color-surface);
    color: var(--flare-color-on-surface);
    border-radius: var(--flare-shape-medium);
    position: relative;
    transition: box-shadow var(--flare-motion-duration-medium1) var(--flare-motion-easing-standard);
}

.flare-paper--square { border-radius: 0; }
.flare-paper--outlined { box-shadow: none; border: var(--flare-border-divider); background: var(--flare-color-surface); }

.flare-paper--padding-none    { padding: 0; }
.flare-paper--padding-xxsmall { padding: var(--flare-spacing-2); }
.flare-paper--padding-xsmall  { padding: var(--flare-spacing-4); }
.flare-paper--padding-small   { padding: var(--flare-spacing-6); }
.flare-paper--padding-medium  { padding: var(--flare-spacing-8); }
.flare-paper--padding-large   { padding: var(--flare-spacing-12); }
.flare-paper--padding-xlarge  { padding: var(--flare-spacing-16); }

.flare-paper--elevation-0 { box-shadow: none; background: var(--flare-color-surface); }
.flare-paper--elevation-1 { box-shadow: var(--flare-elevation-1); }
.flare-paper--elevation-2 { box-shadow: var(--flare-elevation-2); }
.flare-paper--elevation-3 { box-shadow: var(--flare-elevation-3); }
.flare-paper--elevation-4 { box-shadow: var(--flare-elevation-4); }
.flare-paper--elevation-5 { box-shadow: var(--flare-elevation-5); }

.flare-paper.flare-fill {
    display: flex;
    flex-direction: column;
}

/* ---- highlighter.css ---- */
.flare-highlighter {
    display: inline;
}

.flare-highlighter__mark {
    background: var(--flare-color-tertiary-container);
    color: var(--flare-color-on-tertiary-container);
    border-radius: 2px;
    padding: 0 var(--flare-spacing-1);
}

/* ---- codeblock.css ---- */
.flare-codeblock {
    position: relative;
    border: var(--flare-border-outline);
    border-radius: var(--flare-shape-small);

    overflow: visible;

    font-family: monospace, monospace;
    font-size: 0.875rem;

    line-height: 1.5;
    background: var(--flare-color-surface-container-high);
}

.flare-codeblock__textarea {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    caret-color: var(--flare-color-on-surface);
    resize: none;
    border: none;
    padding: var(--flare-spacing-8);
    box-sizing: border-box;
    font: inherit;
    line-height: inherit;
    outline: none;
    z-index: 1;
    tab-size: 4;

    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;

    overflow: auto;
}

.flare-codeblock__highlight {
    padding: var(--flare-spacing-8);
    min-height: 100%;
    white-space: pre;
    overflow: auto;
    margin: 0;
    font: inherit;
    line-height: inherit;
    tab-size: 4;

    box-sizing: border-box;
    color: var(--flare-color-on-surface);
    background: var(--flare-color-surface-container-high);

    border-radius: inherit;
}

.flare-codeblock__highlight code {
    font: inherit;
    line-height: inherit;
    background: none;
    padding: 0;
}

.flare-codeblock--editable .flare-codeblock__highlight {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.flare-codeblock--editable {
    height: calc(var(--_codeblock-rows, 10) * 1.5em + 2 * var(--flare-spacing-8));
}

.flare-codeblock--wrap .flare-codeblock__highlight,
.flare-codeblock--wrap .flare-codeblock__markers,
.flare-codeblock--wrap .flare-codeblock__textarea {
    white-space: pre-wrap;

    overflow-wrap: anywhere;
    word-break: normal;
}

.flare-codeblock--readonly .flare-codeblock__highlight {
    min-height: 0;
}

.flare-codeblock__highlight .flare-hl-keyword  { color: var(--flare-color-primary); }
.flare-codeblock__highlight .flare-hl-type     { color: var(--flare-color-tertiary); }
.flare-codeblock__highlight .flare-hl-string   { color: var(--flare-color-success); }
.flare-codeblock__highlight .flare-hl-number   { color: var(--flare-color-warning); }
.flare-codeblock__highlight .flare-hl-literal  { color: var(--flare-color-info); }
.flare-codeblock__highlight .flare-hl-property { color: var(--flare-color-secondary); }
.flare-codeblock__highlight .flare-hl-tag      { color: var(--flare-color-primary); }
.flare-codeblock__highlight .flare-hl-attr     { color: var(--flare-color-tertiary); }
.flare-codeblock__highlight .flare-hl-meta     { color: var(--flare-color-info); }
.flare-codeblock__highlight .flare-hl-comment  { color: var(--flare-color-on-surface-variant); font-style: italic; }

.flare-codeblock__linenumbers {
    position: absolute;
    left: 0;
    top: 0;

    bottom: 0;
    overflow: hidden;
    padding: var(--flare-spacing-8) var(--flare-spacing-4);
    text-align: right;
    color: var(--flare-color-on-surface-variant);
    user-select: none;
    min-width: 2.5rem;
    box-sizing: border-box;
    border-right: var(--flare-border-divider);
    background: var(--flare-color-surface-container);
    white-space: pre;
    font: inherit;
    line-height: inherit;
    tab-size: 4;
    pointer-events: none;
    z-index: 2;
}

.flare-codeblock--line-numbers .flare-codeblock__textarea,
.flare-codeblock--line-numbers .flare-codeblock__highlight,
.flare-codeblock--line-numbers .flare-codeblock__markers {
    padding-left: calc(2.5rem + 1.5rem);
}

.flare-codeblock__markers {
    position: absolute;
    inset: 0;
    padding: var(--flare-spacing-8);
    margin: 0;
    white-space: pre;
    overflow: hidden;
    font: inherit;
    line-height: inherit;
    tab-size: 4;
    box-sizing: border-box;
    color: transparent;
    pointer-events: none;

    user-select: none;
    z-index: 2;
}

.flare-codeblock__markers code {
    font: inherit;
    line-height: inherit;
    user-select: none;
}

.flare-codeblock__marker {
    text-decoration: underline wavy var(--flare-color-error);
    text-underline-offset: var(--flare-spacing-2);

    pointer-events: auto;
    user-select: none;
}

.flare-codeblock__marker--warning {
    text-decoration-color: var(--flare-color-tertiary);
}

.flare-codeblock__suggestions {
    position: absolute;
    z-index: 3;
    min-width: 12rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: var(--flare-spacing-4) 0;
    border: var(--flare-border-divider);
    border-radius: var(--flare-shape-small);
    background: var(--flare-color-surface-container-high);
    box-shadow: var(--flare-elevation-2);
}

.flare-codeblock__suggestion {
    display: flex;
    align-items: baseline;
    gap: var(--flare-spacing-8);
    padding: var(--flare-spacing-4) var(--flare-spacing-12);
    cursor: pointer;
    color: var(--flare-color-on-surface);
}

.flare-codeblock__suggestion:hover {
    background: var(--flare-color-surface-container-highest);
}

.flare-codeblock__suggestion--selected {
    background: var(--flare-color-secondary-container);
    color: var(--flare-color-on-secondary-container);
}

.flare-codeblock__suggestion-label {
    flex: 0 0 auto;
}

.flare-codeblock__suggestion-kind {
    flex: 0 0 auto;
    font-size: var(--flare-typescale-label-small-size);
    color: var(--flare-color-on-surface-variant);
}

.flare-codeblock__suggestion-detail {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: var(--flare-typescale-label-small-size);
    color: var(--flare-color-on-surface-variant);
}

/* ---- code.css ---- */
.flare-code {
  font-family: monospace;
  font-size: 0.875em;
  background: var(--flare-color-surface-container);
  padding: 0.1em 0.3em;
  border-radius: var(--flare-shape-extra-small);
}

/* ---- shortcuts.css ---- */
.flare-shortcuts-help__scrim { z-index: 1000; }

.flare-shortcuts-help {
    background: var(--flare-color-surface-container-high);
    border-radius: var(--flare-dialog-radius);
    box-shadow: var(--flare-elevation-3);
    padding: var(--flare-spacing-12);
    min-width: 320px;
    max-width: 480px;
    width: 90%;

    max-block-size: var(--flare-overlay-panel-max-block-size);
    overflow-y: auto;
    outline: none;
}

.flare-shortcuts-help__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--flare-spacing-8);
}

.flare-shortcuts-help__title {
    font-family: var(--flare-typescale-headline-small-font);
    font-size: var(--flare-typescale-headline-small-size);
    font-weight: var(--flare-typescale-headline-small-weight);
    color: var(--flare-color-on-surface);
}

.flare-shortcuts-help__list {
    display: flex;
    flex-direction: column;
    gap: var(--flare-spacing-4);
}

.flare-shortcuts-help__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--flare-spacing-8);
    padding: var(--flare-spacing-3) 0;
    border-bottom: var(--flare-border-divider);
}

.flare-shortcuts-help__row:last-child { border-bottom: none; }

.flare-shortcuts-help__kbd {
    font-family: var(--flare-typescale-label-large-font);
    font-size: var(--flare-typescale-label-small-size);
    color: var(--flare-color-on-surface);
    background: var(--flare-color-surface-container-highest);
    border: var(--flare-border-divider);
    border-radius: var(--flare-shape-extra-small);
    padding: var(--flare-spacing-1) var(--flare-spacing-4);
    white-space: nowrap;
}

.flare-shortcuts-help__desc {
    flex: 1;
    color: var(--flare-color-on-surface-variant);
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
}

/* ---- markdown.css ---- */
.flare-markdown { line-height: 1.6; color: var(--flare-color-on-surface); }
.flare-markdown h1,.flare-markdown h2,.flare-markdown h3,.flare-markdown h4 { margin: var(--flare-spacing-8) 0 var(--flare-spacing-4); font-weight: 600; }
.flare-markdown h1 { font-size: 2em; }
.flare-markdown h2 { font-size: 1.5em; border-bottom: var(--flare-border-divider); padding-bottom: var(--flare-spacing-2); }
.flare-markdown h3 { font-size: 1.25em; }
.flare-markdown p { margin: var(--flare-spacing-6) 0; }
.flare-markdown code { background: var(--flare-color-surface-container); padding: 0.1em 0.3em; border-radius: var(--flare-shape-extra-small); font-family: monospace; font-size: 0.875em; }
.flare-markdown pre { background: var(--flare-color-surface-container-high); padding: var(--flare-spacing-8); border-radius: var(--flare-shape-small); overflow-x: auto; margin: var(--flare-spacing-6) 0; }
.flare-markdown pre code { background: none; padding: 0; }
.flare-markdown ul,.flare-markdown ol { padding-left: var(--flare-spacing-12); margin: var(--flare-spacing-4) 0; }
.flare-markdown li { margin: var(--flare-spacing-2) 0; }
.flare-markdown blockquote { border-left: 4px solid var(--flare-color-primary); margin: var(--flare-spacing-6) 0; padding: var(--flare-spacing-4) var(--flare-spacing-8); background: var(--flare-color-surface-container); }
.flare-markdown hr { border: none; border-top: var(--flare-border-divider); margin: var(--flare-spacing-8) 0; }
.flare-markdown a { color: var(--flare-color-primary); text-decoration: none; }
.flare-markdown a:hover { text-decoration: underline; }

.flare-markdown__table-scroll { overflow-x: auto; max-width: 100%; margin: var(--flare-spacing-6) 0; }
.flare-markdown table { border-collapse: collapse; width: 100%; }
.flare-markdown th,.flare-markdown td { border: var(--flare-border-divider); padding: 0.4rem var(--flare-spacing-6); }
.flare-markdown th { background: var(--flare-color-surface-container); font-weight: 600; }
.flare-markdown img { max-width: 100%; }

/* ---- responsive.css ---- */
:root {
    --flare-breakpoint-xs: 0;
    --flare-breakpoint-sm: 600px;
    --flare-breakpoint-md: 960px;
    --flare-breakpoint-lg: 1280px;
    --flare-breakpoint-xl: 1920px;
    --flare-breakpoint-xxl: 2560px;
}

.flare-hidden         { display: none !important; }
.flare-visible        { display: block !important; }

@media (max-width: 599px)  { .flare-hide-xs { display: none !important; } }
@media (min-width: 600px) and (max-width: 959px)  { .flare-hide-sm { display: none !important; } }
@media (min-width: 960px) and (max-width: 1279px) { .flare-hide-md { display: none !important; } }
@media (min-width: 1280px)                         { .flare-hide-lg { display: none !important; } }

.flare-show-xs-only { display: none !important; }
.flare-show-sm-only { display: none !important; }
.flare-show-md-only { display: none !important; }
@media (max-width: 599px)  { .flare-show-xs-only { display: block !important; } }
@media (min-width: 600px) and (max-width: 959px)  { .flare-show-sm-only { display: block !important; } }
@media (min-width: 960px) and (max-width: 1279px) { .flare-show-md-only { display: block !important; } }

.flare-flex       { display: flex; }
.flare-flex-col   { display: flex; flex-direction: column; }
.flare-flex-wrap  { flex-wrap: wrap; }
.flare-flex-1     { flex: 1; }
.flare-flex-auto  { flex: auto; }
.flare-flex-none  { flex: none; }
.flare-items-center  { align-items: center; }
.flare-items-start   { align-items: flex-start; }
.flare-items-end     { align-items: flex-end; }
.flare-justify-between { justify-content: space-between; }
.flare-justify-center  { justify-content: center; }
.flare-justify-end     { justify-content: flex-end; }
.flare-gap-sm   { gap: var(--flare-spacing-4); }
.flare-gap-md   { gap: var(--flare-spacing-8); }
.flare-gap-lg   { gap: var(--flare-spacing-12); }

.flare-row {
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--flare-spacing-4));
}
.flare-row > [class*="flare-col-"] {
    padding: var(--flare-spacing-4);
    box-sizing: border-box;
}

.flare-col-1  { width: 8.333%; }
.flare-col-2  { width: 16.667%; }
.flare-col-3  { width: 25%; }
.flare-col-4  { width: 33.333%; }
.flare-col-5  { width: 41.667%; }
.flare-col-6  { width: 50%; }
.flare-col-7  { width: 58.333%; }
.flare-col-8  { width: 66.667%; }
.flare-col-9  { width: 75%; }
.flare-col-10 { width: 83.333%; }
.flare-col-11 { width: 91.667%; }
.flare-col-12 { width: 100%; }

@media (min-width: 600px) {
    .flare-col-sm-1  { width: 8.333%; }
    .flare-col-sm-2  { width: 16.667%; }
    .flare-col-sm-3  { width: 25%; }
    .flare-col-sm-4  { width: 33.333%; }
    .flare-col-sm-5  { width: 41.667%; }
    .flare-col-sm-6  { width: 50%; }
    .flare-col-sm-7  { width: 58.333%; }
    .flare-col-sm-8  { width: 66.667%; }
    .flare-col-sm-9  { width: 75%; }
    .flare-col-sm-10 { width: 83.333%; }
    .flare-col-sm-11 { width: 91.667%; }
    .flare-col-sm-12 { width: 100%; }
}

@media (min-width: 960px) {
    .flare-col-md-1  { width: 8.333%; }
    .flare-col-md-2  { width: 16.667%; }
    .flare-col-md-3  { width: 25%; }
    .flare-col-md-4  { width: 33.333%; }
    .flare-col-md-5  { width: 41.667%; }
    .flare-col-md-6  { width: 50%; }
    .flare-col-md-7  { width: 58.333%; }
    .flare-col-md-8  { width: 66.667%; }
    .flare-col-md-9  { width: 75%; }
    .flare-col-md-10 { width: 83.333%; }
    .flare-col-md-11 { width: 91.667%; }
    .flare-col-md-12 { width: 100%; }
}

@media (min-width: 1280px) {
    .flare-col-lg-1  { width: 8.333%; }
    .flare-col-lg-2  { width: 16.667%; }
    .flare-col-lg-3  { width: 25%; }
    .flare-col-lg-4  { width: 33.333%; }
    .flare-col-lg-5  { width: 41.667%; }
    .flare-col-lg-6  { width: 50%; }
    .flare-col-lg-7  { width: 58.333%; }
    .flare-col-lg-8  { width: 66.667%; }
    .flare-col-lg-9  { width: 75%; }
    .flare-col-lg-10 { width: 83.333%; }
    .flare-col-lg-11 { width: 91.667%; }
    .flare-col-lg-12 { width: 100%; }
}

.flare-p-0  { padding: 0 !important; }
.flare-p-sm { padding: var(--flare-spacing-4) !important; }
.flare-p-md { padding: var(--flare-spacing-8) !important; }
.flare-p-lg { padding: var(--flare-spacing-12) !important; }
.flare-m-0  { margin: 0 !important; }
.flare-m-auto { margin: auto !important; }
.flare-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.flare-mt-sm { margin-top: var(--flare-spacing-4) !important; }
.flare-mt-md { margin-top: var(--flare-spacing-8) !important; }
.flare-mt-lg { margin-top: var(--flare-spacing-12) !important; }
.flare-mb-sm { margin-bottom: var(--flare-spacing-4) !important; }
.flare-mb-md { margin-bottom: var(--flare-spacing-8) !important; }
.flare-mb-lg { margin-bottom: var(--flare-spacing-12) !important; }

.flare-text-left    { text-align: left !important; }
.flare-text-center  { text-align: center !important; }
.flare-text-right   { text-align: right !important; }
@media (max-width: 599px) {
    .flare-text-sm-center { text-align: center !important; }
}

/* ---- datetimepicker.css ---- */
.flare-datetimepicker__panel { min-width: 280px; }

.flare-datetimepicker__panel:has(.flare-clock-dial) { min-width: 320px; }

.flare-datetimepicker__tabs {
  display: flex;
  gap: var(--flare-spacing-4);
  margin-bottom: var(--flare-spacing-6);
  border-bottom: var(--flare-border-divider);
}

.flare-datetimepicker__tab {
  background: none;
  border: none;
  padding: var(--flare-spacing-4) var(--flare-spacing-8);
  cursor: pointer;
  color: var(--flare-color-on-surface-variant);
  border-bottom: 2px solid transparent;
  font-family: var(--flare-typescale-label-large-font);
  font-size: var(--flare-typescale-body-medium-size);
  margin-bottom: -1px;
  transition: color var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-datetimepicker__tab--active {
  color: var(--flare-color-primary);
  border-bottom-color: var(--flare-color-primary);
}

.flare-datetimepicker__nav-label {
  font-weight: 500;
  font-size: var(--flare-typescale-body-large-size);
  color: var(--flare-color-on-surface);
}

.flare-datetimepicker__time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--flare-spacing-4);
  padding: var(--flare-spacing-12) 0;
  font-size: var(--flare-typescale-headline-small-size);
  color: var(--flare-color-on-surface);
}

.flare-datetimepicker__time-input {
  width: 3rem;
  text-align: center;
  border: var(--flare-border-outline);
  border-radius: var(--flare-shape-small);
  padding: var(--flare-spacing-2);
  font-size: var(--flare-typescale-headline-small-size);
  background: var(--flare-color-surface-container-highest);
  color: var(--flare-color-on-surface);
  outline: none;
  font-family: inherit;

  -moz-appearance: textfield;
  appearance: textfield;
}
.flare-datetimepicker__time-input::-webkit-inner-spin-button,
.flare-datetimepicker__time-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.flare-datetimepicker__time-input:focus {
  border-color: var(--flare-color-primary);
  border-width: 2px;
}

.flare-datetimepicker__footer { margin-top: var(--flare-spacing-6); }

.flare-datetimepicker__panel--split {
  min-width: 36rem !important;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.flare-datetimepicker__panes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flare-datetimepicker-panel-gap);
  align-items: flex-start;
}
.flare-datetimepicker__panel--split .flare-datetimepicker__pane {
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--flare-color-surface-container-high);
  border-radius: var(--flare-popover-radius);
  box-shadow: var(--flare-elevation-3);
  padding: var(--flare-spacing-6);
}

.flare-datetimepicker__panel--split .flare-datetimepicker__pane:has(.flare-clock-dial) {
  flex: 0 0 16.5rem;
  min-width: 16.5rem;
}

/* ---- resizable.css ---- */
.flare-resizable { position: relative; overflow: hidden; }
.flare-resizable__handle { position: absolute; z-index: 10; background: transparent; transition: background 0.15s; }
.flare-resizable__handle:hover { background: var(--flare-color-primary-container); }
.flare-resizable--right .flare-resizable__handle { top: 0; right: 0; width: 4px; height: 100%; cursor: col-resize; }
.flare-resizable--left .flare-resizable__handle { top: 0; left: 0; width: 4px; height: 100%; cursor: col-resize; }
.flare-resizable--bottom .flare-resizable__handle { bottom: 0; left: 0; height: 4px; width: 100%; cursor: row-resize; }
.flare-resizable--top .flare-resizable__handle { top: 0; left: 0; height: 4px; width: 100%; cursor: row-resize; }

/* ---- clipboard.css ---- */
.flare-clipboard--copied:not(.flare-btn--filled) {
    color: var(--flare-color-primary);
    border-color: var(--flare-color-primary);
}

/* ---- confirmdialog.css ---- */
.flare-confirmdialog__backdrop,
.flare-msgbox-scrim,
.flare-shortcuts-help__scrim {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--flare-color-scrim) calc(var(--flare-scrim-opacity) * 100%), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.flare-confirmdialog__backdrop { z-index: 1000; }

.flare-confirmdialog {
    background: var(--flare-color-surface-container-high);
    border-radius: var(--flare-dialog-radius);
    box-shadow: var(--flare-elevation-3);
    padding: var(--flare-spacing-12);
    min-width: 280px;
    max-width: 420px;
    width: 90%;
    outline: none;
}

.flare-confirmdialog__header { margin-bottom: var(--flare-spacing-6); }

.flare-confirmdialog__body {
    color: var(--flare-color-on-surface-variant);
    font-family: var(--flare-typescale-body-medium-font);
    font-size: var(--flare-typescale-body-medium-size);
    margin-bottom: var(--flare-spacing-12);
    line-height: 1.5;
}

.flare-confirmdialog__footer { display: flex; justify-content: flex-end; gap: var(--flare-spacing-6); }

.flare-confirmdialog__btn {
    position: relative;
    z-index: 0;
    border: none;
    padding: var(--flare-spacing-4) var(--flare-spacing-10);
    border-radius: var(--flare-btn-radius);
    cursor: pointer;
    font-family: var(--flare-typescale-label-large-font);
    font-size: var(--flare-typescale-label-large-size);
    font-weight: var(--flare-typescale-label-large-weight);
    transition: background var(--flare-motion-duration-short2);
}

.flare-confirmdialog__btn--cancel {
    background: transparent;
    color: var(--flare-color-primary);
}

.flare-confirmdialog__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--flare-motion-duration-short2) var(--flare-motion-easing-standard);
}

.flare-confirmdialog__btn:hover::before {
    background: var(--flare-state-hover-layer);
    opacity: 1;
}

.flare-confirmdialog__btn--confirm {
    background: var(--flare-color-primary);
    color: var(--flare-color-on-primary);
}

/* ---- otpinput.css ---- */
.flare-otp {
    display: flex;
    gap: var(--flare-spacing-4);
    align-items: center;
    max-inline-size: 100%;
}

.flare-otp__cell {

    min-inline-size: 0;
    width: var(--flare-otp-cell-width);
    height: var(--flare-otp-cell-height);
    text-align: center;
    font-size: var(--flare-otp-font-size);
    font-weight: var(--flare-otp-font-weight);
    letter-spacing: 0;
    border: var(--flare-otp-border-width) solid var(--flare-color-outline);
    border-radius: var(--flare-shape-small);
    background: var(--flare-color-surface);
    color: var(--flare-color-on-surface);
    outline: none;
    transition: border-color var(--flare-motion-duration-short2),
                box-shadow  var(--flare-motion-duration-short2);
    caret-color: transparent;
    cursor: pointer;
}

.flare-otp__cell:focus,
.flare-otp__cell--focused {
    border-color: var(--flare-color-primary);
    box-shadow: 0 0 0 var(--flare-otp-focus-ring-width) var(--flare-color-primary-container);
}

.flare-otp__cell--error {
    border-color: var(--flare-color-error);
}

.flare-otp__cell--error:focus {
    box-shadow: 0 0 0 var(--flare-otp-focus-ring-width) var(--flare-color-error-container);
}

.flare-otp--disabled .flare-otp__cell {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .flare-otp__cell { transition: none; }
}

/* ---- state-layer.css ---- */
.flare-state-layer-hover,
.flare-state-layer-focus,
.flare-state-layer-pressed,
.flare-state-layer-dragged { position: relative; }

.flare-state-layer-hover::before,
.flare-state-layer-focus::before,
.flare-state-layer-pressed::before,
.flare-state-layer-dragged::before {
    content: '';
    position: absolute;
    inset: 0;

    background: transparent;
    opacity: 0;
    pointer-events: none;
    border-radius: inherit;
    transition: opacity var(--flare-motion-duration-short1) var(--flare-motion-easing-standard);
}

.flare-state-layer-hover:hover::before { background: var(--flare-state-hover-layer); opacity: 1; }
.flare-state-layer-focus:focus-visible::before { background: var(--flare-state-focus-layer); opacity: 1; }
.flare-state-layer-pressed:active::before { background: var(--flare-state-pressed-layer); opacity: 1; }
.flare-state-layer-dragged[aria-grabbed="true"]::before { background: var(--flare-state-dragged-layer); opacity: 1; }

.flare-state-disabled {
    opacity: var(--flare-state-disabled-opacity);
    pointer-events: none;
    cursor: not-allowed;
}

.flare-state-disabled-container { opacity: var(--flare-state-disabled-container-opacity); }

/* ---- markers.css ---- */
.flare-checkbox--indeterminate {}
.flare-radio-group--error {}
.flare-nav-group--expanded {}
.flare-fab-menu--open {}
.flare-layout-drawer--open {}
.flare-markdown--highlight {}
.flare-splitter--horizontal {}
.flare-stepper--horizontal {}
.flare-divider--text-center {}
.flare-numericfield__step--down {}

.flare-chip__icon {}
.flare-icon--svg {}
.flare-select__option {}
.flare-timepicker__display-part {}

.flare-clipboard {}
.flare-media-query {}
.flare-password-input {}
.flare-snackbar-provider-host {}
.flare-datagrid__filter-th {}
.flare-datagrid__loading-text {}

/* ---- rtl.css ---- */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .flare-grid {
  direction: rtl;
}

[dir="rtl"] .flare-stack--row {
  direction: rtl;
}

[dir="rtl"] .flare-tabs__bar {
  direction: rtl;
}

[dir="rtl"] .flare-tabs__tab {
  margin-left: 0;
  margin-right: 0;
}

[dir="rtl"] .flare-breadcrumb__separator {
  transform: scaleX(-1);
}

[dir="rtl"] .flare-drawer--left {
  left: auto;
  right: 0;
}

[dir="rtl"] .flare-drawer--right {
  right: auto;
  left: 0;
}

[dir="rtl"] .flare-nav-link {
  text-align: right;
}

[dir="rtl"] .flare-input__adornment--start {
  padding-left: 0;
  padding-right: var(--flare-spacing-6);
}

[dir="rtl"] .flare-input__adornment--end {
  padding-right: 0;
  padding-left: var(--flare-spacing-6);
}

[dir="rtl"] .flare-input__icon--leading {
  margin-left: 0;
  margin-right: var(--flare-spacing-4);
}

[dir="rtl"] .flare-input__icon--trailing {
  margin-right: 0;
  margin-left: var(--flare-spacing-4);
}

[dir="rtl"] .flare-select__control {
  background-position: left 0.75rem center;
}

[dir="rtl"] .flare-datagrid {
  direction: rtl;
}

[dir="rtl"] .flare-datagrid__th,
[dir="rtl"] .flare-datagrid__td {
  text-align: right;
}

[dir="rtl"] .flare-table {
  direction: rtl;
}

[dir="rtl"] .flare-list-item {
  text-align: right;
}

[dir="rtl"] .flare-dialog {

}

[dir="rtl"] .flare-drawer--left {
  transform: translateX(100%);
}

[dir="rtl"] .flare-drawer--left.flare-drawer--open {
  transform: none;
}

[dir="rtl"] .flare-drawer--right {
  transform: translateX(-100%);
}

[dir="rtl"] .flare-drawer--right.flare-drawer--open {
  transform: none;
}

[dir="rtl"] .flare-snackbar {
  left: auto;
  right: 1rem;
}

[dir="rtl"] .flare-alert {
  text-align: right;
}

[dir="rtl"] .flare-split-btn {
  direction: rtl;
}

[dir="rtl"] .flare-text-left { text-align: right; }
[dir="rtl"] .flare-text-right { text-align: left; }