/* /Components/PiecesProgressCanvas.razor.rz.scp.css */
.pieces-progress-canvas[b-vok9pobdu9] {
    --pieces-progress-canvas-linear-height: 44px;
    --pieces-progress-canvas-linear-padding-y: var(--mud-spacing-1);
    padding: var(--mud-spacing-3);
    border-radius: 16px;
    background-color: transparent;
    display: block;
}

.pieces-progress-canvas__linear[b-vok9pobdu9] {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    min-height: var(--pieces-progress-canvas-linear-height);
    cursor: pointer;
    outline: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .pieces-progress-canvas__linear:focus-visible[b-vok9pobdu9] {
        box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.35);
    }

    .pieces-progress-canvas__linear:hover[b-vok9pobdu9] {
        transform: translateY(-1px);
    }

.pieces-progress-canvas__linear-bar[b-vok9pobdu9] {
    position: absolute;
    inset: 0;
    background-color: transparent;
    transition: opacity 0.2s ease;
}

.pieces-progress-canvas__linear-overlay[b-vok9pobdu9] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--pieces-progress-canvas-linear-padding-y) var(--mud-spacing-3);
    padding-inline-start: max(calc(var(--mud-spacing-3) * 2.5), 24px);
    color: inherit;
    background: linear-gradient(to right, rgba(17, 24, 39, 0.28), rgba(17, 24, 39, 0));
    mix-blend-mode: normal;
}

.mud-theme-dark .pieces-progress-canvas__linear-overlay[b-vok9pobdu9] {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}

.pieces-progress-canvas__icon[b-vok9pobdu9] {
    transition: transform 0.2s ease;
}

.pieces-progress-canvas__surface[b-vok9pobdu9] {
    margin-top: var(--mud-spacing-3);
    padding: var(--mud-spacing-3);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.mud-theme-dark .pieces-progress-canvas__surface[b-vok9pobdu9] {
    background-color: var(--mud-palette-background-grey);
}

.pieces-progress-canvas__canvas[b-vok9pobdu9] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.pieces-progress-canvas__empty[b-vok9pobdu9] {
    color: var(--mud-palette-text-secondary);
    padding: var(--mud-spacing-2);
}
/* /Components/PiecesProgressNew.razor.rz.scp.css */
.pieces-progress-new[b-gjrinqky11] {
    --pieces-progress-linear-height: 44px;
    --pieces-progress-linear-padding-y: var(--mud-spacing-1);
    --pieces-progress-heatmap-gap: clamp(3px, 0.35vw, 5px);
    --pieces-progress-cell-padding: clamp(0.4px, 0.12vw, 1px);
    padding: var(--mud-spacing-3);
    border-radius: 16px;
    background-color: transparent;
    display: block;
}

.pieces-progress-new__linear[b-gjrinqky11] {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    min-height: var(--pieces-progress-linear-height);
    cursor: pointer;
    outline: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .pieces-progress-new__linear:focus-visible[b-gjrinqky11] {
        box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.35);
    }

    .pieces-progress-new__linear:hover[b-gjrinqky11] {
        transform: translateY(-1px);
    }

.pieces-progress-new__linear-bar[b-gjrinqky11] {
    position: absolute;
    inset: 0;
    transition: opacity 0.2s ease;
}

.pieces-progress-new__linear-overlay[b-gjrinqky11] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--pieces-progress-linear-padding-y) var(--mud-spacing-3);
    padding-inline-start: max(calc(var(--mud-spacing-3) * 2.5), 24px);
    color: inherit;
    background-color: rgba(0, 0, 0, 0.16);
}

.mud-theme-dark .pieces-progress-new__linear-overlay[b-gjrinqky11] {
    background-color: rgba(0, 0, 0, 0.35);
}

.pieces-progress-new__icon[b-gjrinqky11] {
    transition: transform 0.2s ease;
}

.pieces-progress-new__heatmap[b-gjrinqky11] {
    margin-top: var(--mud-spacing-3);
    padding: var(--mud-spacing-3);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.mud-theme-dark .pieces-progress-new__heatmap[b-gjrinqky11] {
    background-color: var(--mud-palette-background-grey);
}

.pieces-progress-new__grid[b-gjrinqky11] {
    display: grid;
    grid-template-columns: repeat(var(--pieces-progress-columns, 64), minmax(0, 1fr));
    gap: var(--pieces-progress-heatmap-gap, 3px);
    width: 100%;
}

.pieces-progress-new__cell[b-gjrinqky11] {
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

    .pieces-progress-new__cell:not(.pieces-progress-new__cell--empty):hover[b-gjrinqky11] {
        transform: scale(1.05);
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    }

.pieces-progress-new__cell-inner[b-gjrinqky11] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--pieces-progress-cell-padding, 1px);
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.pieces-progress-new__cell-inner--single[b-gjrinqky11] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
}

.pieces-progress-new__cell-inner--dual[b-gjrinqky11] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

.pieces-progress-new__cell-segment[b-gjrinqky11] {
    border-radius: inherit;
    width: 100%;
    height: 100%;
}

.pieces-progress-new__cell-segment--whole[b-gjrinqky11] {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.pieces-progress-new__cell-segment--left[b-gjrinqky11] {
    grid-column: 1 / 2;
    grid-row: 1 / -1;
}

.pieces-progress-new__cell-segment--right[b-gjrinqky11] {
    grid-column: 2 / 3;
    grid-row: 1 / -1;
}

.pieces-progress-new__cell-segment--top-left[b-gjrinqky11] {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.pieces-progress-new__cell-segment--top-right[b-gjrinqky11] {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.pieces-progress-new__cell-segment--bottom-left[b-gjrinqky11] {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.pieces-progress-new__cell-segment--bottom-right[b-gjrinqky11] {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.pieces-progress-new__cell-segment.pieces-progress-new__cell--downloaded[b-gjrinqky11] {
    background-color: var(--mud-palette-success);
}

.pieces-progress-new__cell-segment.pieces-progress-new__cell--downloading[b-gjrinqky11] {
    background-color: var(--mud-palette-info);
}

.pieces-progress-new__cell-segment.pieces-progress-new__cell--pending[b-gjrinqky11] {
    background-color: var(--mud-palette-lines-default);
    opacity: 0.45;
}

.pieces-progress-new__legend[b-gjrinqky11] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mud-spacing-3);
    margin-top: var(--mud-spacing-3);
}

.pieces-progress-new__legend-item[b-gjrinqky11] {
    display: inline-flex;
    align-items: center;
    gap: var(--mud-spacing-2);
}

.pieces-progress-new__legend-swatch[b-gjrinqky11] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.pieces-progress-new__legend-swatch--downloaded[b-gjrinqky11] {
    background-color: var(--mud-palette-success);
}

.pieces-progress-new__legend-swatch--downloading[b-gjrinqky11] {
    background-color: var(--mud-palette-info);
}

.pieces-progress-new__legend-swatch--pending[b-gjrinqky11] {
    background-color: var(--mud-palette-lines-default);
}

.pieces-progress-new__legend-text[b-gjrinqky11] {
    padding-left: var(--mud-spacing-2);
    padding-right: var(--mud-spacing-3);
}

.pieces-progress-new__empty[b-gjrinqky11] {
    color: var(--mud-palette-text-secondary);
    padding: var(--mud-spacing-2);
}
/* /Components/PiecesProgressSvg.razor.rz.scp.css */
.pieces-progress-svg[b-w74x3xhk91] {
    --pieces-progress-svg-linear-height: 44px;
    --pieces-progress-svg-linear-padding-y: var(--mud-spacing-1);
    padding: var(--mud-spacing-3);
    border-radius: 16px;
    background-color: transparent;
    display: block;
}

.pieces-progress-svg__linear[b-w74x3xhk91] {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    min-height: var(--pieces-progress-svg-linear-height);
    cursor: pointer;
    outline: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .pieces-progress-svg__linear:focus-visible[b-w74x3xhk91] {
        box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.35);
    }

    .pieces-progress-svg__linear:hover[b-w74x3xhk91] {
        transform: translateY(-1px);
    }

.pieces-progress-svg__linear-bar[b-w74x3xhk91] {
    position: absolute;
    inset: 0;
    background-color: transparent;
    transition: opacity 0.2s ease;
}

.pieces-progress-svg__linear-overlay[b-w74x3xhk91] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--pieces-progress-svg-linear-padding-y) var(--mud-spacing-3);
    padding-inline-start: max(calc(var(--mud-spacing-3) * 2.5), 24px);
    color: inherit;
    background: linear-gradient(to right, rgba(17, 24, 39, 0.28), rgba(17, 24, 39, 0));
    mix-blend-mode: normal;
}

.mud-theme-dark .pieces-progress-svg__linear-overlay[b-w74x3xhk91] {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}

.pieces-progress-svg__icon[b-w74x3xhk91] {
    transition: transform 0.2s ease;
}

.pieces-progress-svg__surface[b-w74x3xhk91] {
    margin-top: var(--mud-spacing-3);
    padding: var(--mud-spacing-3);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.mud-theme-dark .pieces-progress-svg__surface[b-w74x3xhk91] {
    background-color: var(--mud-palette-background-grey);
}

.pieces-progress-svg__grid[b-w74x3xhk91] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.pieces-progress-svg__rect[b-w74x3xhk91] {
    rx: 0.2;
    ry: 0.2;
}

.pieces-progress-svg__empty[b-w74x3xhk91] {
    color: var(--mud-palette-text-secondary);
    padding: var(--mud-spacing-2);
}