/* _content/PersonalUI.Blazor/Buttons/ActionButton.razor.rz.scp.css */
.action-btn[b-12zj2utwv9] {
    --base-color: var(--ui-action);
    --text-color: var(--ui-text-inverse);
    --depth: var(--ui-depth);
    --anim-speed: var(--ui-anim-speed);
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-flex;
    width: 100%;
    background: transparent;
    border: none;
    margin: 0;
    box-sizing: border-box;
    padding: 0 0 var(--depth) 0;
    cursor: pointer;
    user-select: none;
    outline-offset: 4px;
    border-radius: var(--border-radius, var(--ui-radius-lg));
}

.btn-front[b-12zj2utwv9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--pad-y) var(--pad-x) max(0px, calc(var(--pad-y) - var(--depth))) var(--pad-x);
    font-size: var(--calc-font);
    font-family: inherit;
    font-weight: 600;
    text-align: center;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: transform var(--anim-speed) ease-in, box-shadow var(--anim-speed) ease-in, filter calc(var(--anim-speed) * 2) ease-out;
    transform: translateY(0);
}

.variant-solid .btn-front[b-12zj2utwv9] {
    background-color: var(--base-color);
    color: var(--text-color);
    border-color: var(--base-color);
    --auto-shadow: color-mix(in srgb, var(--base-color), black 25%);
    box-shadow: 0 var(--depth) 0 var(--auto-shadow);
}

.action-btn:hover:not(:disabled) .btn-front[b-12zj2utwv9] {
    filter: brightness(1.1);
}

.action-btn:active:not(:disabled) .btn-front[b-12zj2utwv9] {
    transform: translateY(var(--depth));
    box-shadow: 0 0 0 var(--auto-shadow);
    filter: brightness(0.75);
}

.variant-outline .btn-front[b-12zj2utwv9] {
    background-color: transparent;
    color: var(--base-color);
    border-color: var(--base-color);
    box-shadow: 0 var(--depth) 0 var(--base-color);
}

.action-btn.variant-outline:hover:not(:disabled) .btn-front[b-12zj2utwv9] {
    background-color: var(--base-color);
    color: var(--text-color);
}

.action-btn.variant-outline:active:not(:disabled) .btn-front[b-12zj2utwv9] {
    transform: translateY(var(--depth));
    box-shadow: 0 0 0 var(--base-color);
    filter: brightness(0.75);
}

.variant-ghost .btn-front[b-12zj2utwv9] {
    background-color: transparent;
    color: var(--base-color);
    border-color: transparent;
}

.action-btn.variant-ghost:hover:not(:disabled) .btn-front[b-12zj2utwv9] {
    background-color: color-mix(in srgb, var(--base-color), transparent 85%);
}

.action-btn.variant-ghost:active:not(:disabled) .btn-front[b-12zj2utwv9] {
    transform: translateY(var(--depth));
    filter: brightness(0.75);
}

.action-btn:disabled[b-12zj2utwv9] {
    cursor: not-allowed;
    opacity: 0.6;
}

    .action-btn:disabled .btn-front[b-12zj2utwv9] {
        transform: translateY(var(--depth));
        box-shadow: none !important;
    }

.shape-rectangle[b-12zj2utwv9] {
    --border-radius: var(--ui-radius-sm);
}

.shape-rounded[b-12zj2utwv9] {
    --border-radius: var(--ui-radius-lg);
}

.shape-pill[b-12zj2utwv9] {
    --border-radius: var(--ui-radius-pill);
}
/* _content/PersonalUI.Blazor/Data/DataTable.razor.rz.scp.css */
.data-table[b-9amljlafxl] {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    border-collapse: collapse;
    color: var(--text-color, #ffffff);
    font-family: inherit;
    font-size: clamp(0.82rem, 2.5vw, var(--font-size, 1rem));
    text-align: left;
}

    .data-table th[b-9amljlafxl],
    .data-table td[b-9amljlafxl] {
        padding: 0.6rem 0.5rem;
        border-bottom: 1px solid var(--border-color, var(--theme-border, #333333));
        vertical-align: middle;
        overflow-wrap: anywhere;
    }

        .data-table th:first-child[b-9amljlafxl],
        .data-table td:first-child[b-9amljlafxl] {
            width: 1%;
            white-space: nowrap;
            padding-left: 0.65rem;
            padding-right: 0.35rem;
        }

        .data-table td:nth-child(3)[b-9amljlafxl] {
            white-space: nowrap;
        }

    .data-table th[b-9amljlafxl] {
        background-color: color-mix(in srgb, var(--background-color, #2c2c2c), black 20%);
        font-weight: 600;
        font-size: 0.9em;
        white-space: nowrap;
    }

    .data-table tbody tr:last-child td[b-9amljlafxl] {
        border-bottom: none;
    }

    .data-table tbody tr:hover[b-9amljlafxl] {
        background-color: color-mix(in srgb, var(--text-color, #ffffff), transparent 95%);
    }

.table-toolbar[b-9amljlafxl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color, var(--theme-border, #333333));
    align-items: center;
    align-self: stretch;
}

.sort-button[b-9amljlafxl] {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.sort-icon[b-9amljlafxl] {
    font-size: 0.75em;
    opacity: 0.6;
}

.sort-button:hover .sort-icon[b-9amljlafxl],
.sort-button:focus-visible .sort-icon[b-9amljlafxl] {
    opacity: 1;
}

.quick-filter-bar[b-9amljlafxl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color, var(--theme-border, #333333));
    align-self: stretch;
}
/* _content/PersonalUI.Blazor/Indicators/Pill.razor.rz.scp.css */
.ui-pill[b-djpd1nc7sm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: var(--ui-radius-pill);
    padding: 0.3rem 0.75rem;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
    border: 1px solid var(--border-color, var(--ui-border));
    background-color: color-mix(in srgb, var(--background-color, var(--ui-bg-surface)), white 8%);
    color: var(--text-color, var(--ui-text));
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

    .ui-pill.interactive[b-djpd1nc7sm] {
        cursor: pointer;
    }

        .ui-pill.interactive:hover:not(:disabled)[b-djpd1nc7sm] {
            background-color: color-mix(in srgb, var(--background-color, var(--ui-bg-surface)), white 16%);
        }

        .ui-pill.interactive:active:not(:disabled)[b-djpd1nc7sm] {
            transform: scale(0.95);
        }

        .ui-pill.interactive:focus-visible[b-djpd1nc7sm] {
            outline: 2px solid var(--accent-color, var(--ui-accent));
            outline-offset: 2px;
        }

    .ui-pill:disabled[b-djpd1nc7sm] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .ui-pill.accent[b-djpd1nc7sm],
    .ui-pill.active[b-djpd1nc7sm] {
        background-color: var(--accent-color, var(--ui-accent));
        border-color: var(--accent-color, var(--ui-accent));
        color: var(--ui-text);
        font-weight: 600;
    }

    .ui-pill.success[b-djpd1nc7sm] {
        background-color: color-mix(in srgb, var(--ui-success), transparent 80%);
        border-color: var(--ui-success);
        color: color-mix(in srgb, var(--ui-success), white 45%);
    }

    .ui-pill.warning[b-djpd1nc7sm] {
        background-color: color-mix(in srgb, var(--ui-warning), transparent 80%);
        border-color: var(--ui-warning);
        color: color-mix(in srgb, var(--ui-warning), white 45%);
    }

    .ui-pill.danger[b-djpd1nc7sm] {
        background-color: color-mix(in srgb, var(--ui-danger), transparent 80%);
        border-color: var(--ui-danger);
        color: color-mix(in srgb, var(--ui-danger), white 45%);
    }
/* _content/PersonalUI.Blazor/Inputs/Checkbox.razor.rz.scp.css */
.checkbox-wrapper[b-x9kgi9wwv2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    color: var(--text-color, var(--ui-text));
    font-family: inherit;
    position: relative;
    vertical-align: middle;
}

    .checkbox-wrapper.disabled[b-x9kgi9wwv2] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.checkbox-native[b-x9kgi9wwv2] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.checkbox-box[b-x9kgi9wwv2] {
    width: var(--cb-size, 1.35rem);
    height: var(--cb-size, 1.35rem);
    background-color: color-mix(in srgb, var(--background-color, var(--ui-bg-surface)), black 15%);
    border: 1.5px solid var(--border-color, var(--ui-border));
    border-radius: var(--ui-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
    flex-shrink: 0;
}

.checkbox-icon[b-x9kgi9wwv2] {
    width: 80%;
    height: 80%;
    color: var(--ui-text);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checkbox-native:checked + .checkbox-box[b-x9kgi9wwv2] {
    background-color: var(--cb-accent, var(--ui-accent));
    border-color: var(--cb-accent, var(--ui-accent));
}

    .checkbox-native:checked + .checkbox-box .checkbox-icon[b-x9kgi9wwv2] {
        opacity: 1;
        transform: scale(1);
    }

.checkbox-wrapper:not(.disabled):hover .checkbox-box[b-x9kgi9wwv2] {
    border-color: color-mix(in srgb, var(--cb-accent, var(--ui-accent)), white 25%);
}

.checkbox-native:focus-visible + .checkbox-box[b-x9kgi9wwv2],
.checkbox-native:focus-visible + .switch-track[b-x9kgi9wwv2] {
    outline: 2px solid var(--cb-accent, var(--ui-accent));
    outline-offset: 2px;
}

.checkbox-wrapper:not(.disabled):active .checkbox-box[b-x9kgi9wwv2] {
    transform: scale(0.92);
}

.switch-track[b-x9kgi9wwv2] {
    width: calc(var(--cb-size, 1.35rem) * 1.85);
    height: var(--cb-size, 1.35rem);
    background-color: color-mix(in srgb, var(--background-color, var(--ui-bg-surface)), white 12%);
    border: 1px solid var(--border-color, var(--ui-border));
    border-radius: var(--ui-radius-pill);
    display: inline-flex;
    align-items: center;
    padding: 2px;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.switch-thumb[b-x9kgi9wwv2] {
    width: calc(var(--cb-size, 1.35rem) - 6px);
    height: calc(var(--cb-size, 1.35rem) - 6px);
    background-color: var(--ui-text);
    border-radius: var(--ui-radius-pill);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checkbox-native:checked + .switch-track[b-x9kgi9wwv2] {
    background-color: var(--cb-accent, var(--ui-accent));
    border-color: var(--cb-accent, var(--ui-accent));
}

    .checkbox-native:checked + .switch-track .switch-thumb[b-x9kgi9wwv2] {
        transform: translateX(calc(var(--cb-size, 1.35rem) * 0.85));
    }

.checkbox-label[b-x9kgi9wwv2] {
    font-size: 0.95rem;
    line-height: 1.2;
}
/* _content/PersonalUI.Blazor/Inputs/Dropdown.razor.rz.scp.css */
/* CSS for Dropdown component */
.ui-select-container[b-sjrbd6qf9t] {
    position: relative;
    display: inline-block;
    font-family: inherit;
    color: var(--text-color, #ffffff);
}


.select-backdrop[b-sjrbd6qf9t] {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}

.select-trigger[b-sjrbd6qf9t] {
    position: relative;
    z-index: 91;
    width: 100%;
    min-width: 8.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    background-color: var(--background-color, #2c2c2c);
    color: inherit;
    border: 1px solid var(--border-color, var(--theme-border, #333333));
    border-radius: var(--border-radius, var(--theme-radius-md, 10px));
    padding: 0.45rem 0.75rem;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .select-trigger:hover:not(:disabled)[b-sjrbd6qf9t],
    .select-trigger.open[b-sjrbd6qf9t] {
        border-color: var(--accent-color, #3b82f6);
    }

    .select-trigger:focus-visible[b-sjrbd6qf9t] {
        outline: 2px solid var(--accent-color, #3b82f6);
        outline-offset: 2px;
    }

.select-chevron[b-sjrbd6qf9t] {
    font-size: 0.7em;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.select-trigger.open .select-chevron[b-sjrbd6qf9t] {
    transform: rotate(180deg);
}

.select-menu[b-sjrbd6qf9t] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 950;
    min-width: 100%;
    max-height: 11rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background-color: var(--background-color, #242424);
    border: 1px solid var(--border-color, var(--theme-border, #3f3f46));
    border-radius: var(--border-radius, var(--theme-radius-md, 10px));
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

.select-option[b-sjrbd6qf9t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease;
}

    .select-option:hover[b-sjrbd6qf9t] {
        background-color: color-mix(in srgb, var(--text-color, #ffffff), transparent 90%);
    }

    .select-option.selected[b-sjrbd6qf9t] {
        background-color: color-mix(in srgb, var(--accent-color, #3b82f6), transparent 80%);
        color: #93c5fd;
        font-weight: 600;
    }

.option-check[b-sjrbd6qf9t] {
    font-size: 0.85em;
}
/* _content/PersonalUI.Blazor/Inputs/NumberInput.razor.rz.scp.css */
.number-field-wrapper[b-fnissu80uh] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0 0.5rem;
    gap: 0.25rem;
}

.number-native[b-fnissu80uh] {
    width: 100%;
    min-width: 3.5rem;
    background: transparent;
    border: none;
    color: var(--text-color, #ffffff);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

    .number-native[b-fnissu80uh]::-webkit-outer-spin-button,
    .number-native[b-fnissu80uh]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.number-suffix[b-fnissu80uh] {
    font-size: 0.85rem;
    opacity: 0.7;
    color: var(--text-color, #ffffff);
    white-space: nowrap;
    user-select: none;
}
/* _content/PersonalUI.Blazor/Inputs/RadioSlider.razor.rz.scp.css */
.radio-slider[b-9f3dst5wo1] {
    width: var(--dial-size, 250px);
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    display: grid;
    place-items: center;
}

.radio-scale[b-9f3dst5wo1] {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.scale-graphics[b-9f3dst5wo1] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.radio-button[b-9f3dst5wo1] {
    position: relative;
    grid-area: 1 / 1;
    width: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    z-index: 2;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    box-sizing: border-box;
    padding-bottom: var(--dial-depth, 4px);
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    touch-action: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .radio-button:active .dial-front[b-9f3dst5wo1] {
        transform: translateY(var(--dial-depth, 6px));
        box-shadow: 0 0px 0 var(--auto-shadow), 0 2px 4px rgba(0,0,0,0.05);
        filter: brightness(0.96);
    }

.dial-front[b-9f3dst5wo1] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: var(--dial-surface-color, #ffffff);
    --auto-shadow: color-mix(in srgb, var(--dial-surface-color, #ffffff), black 25%);
    box-shadow: 0 var(--dial-depth, 6px) 0 var(--auto-shadow), 0 10px 15px rgba(0,0,0,0.05);
    position: relative;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.1s;
}

.dial-indicator[b-9f3dst5wo1] {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    pointer-events: none;
    transform: rotate(var(--current-rotation, 0deg));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .dial-indicator.dragging[b-9f3dst5wo1] {
        transition: none;
    }

    .dial-indicator[b-9f3dst5wo1]::after {
        content: '';
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 6%;
        height: 15%;
        border-radius: 9999px;
        background: var(--dial-accent-color, #007bff);
    }

.dial-readout[b-9f3dst5wo1] {
    user-select: none;
    pointer-events: none;
    font-weight: 600;
    font-size: 8cqw;
    color: var(--dial-text-color, #111111);
}

.dial-hit-area[b-9f3dst5wo1] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 3;
}

    .dial-hit-area[b-9f3dst5wo1]::before {
        content: '';
        position: absolute;
        width: 70cqw;
        height: 70cqw;
        left: -35cqw;
        top: -35cqw;
        border-radius: 9999px;
    }

.radio-button.dragging .dial-hit-area[b-9f3dst5wo1]::before {
    width: 250cqw;
    height: 250cqw;
    left: -125cqw;
    top: -125cqw;
}
/* _content/PersonalUI.Blazor/Inputs/RangeSlider.razor.rz.scp.css */
/* CSS for RangeSlider component */
.range-slider[b-mu2119hfxu] {
    width: var(--slider-width, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0;
    box-sizing: border-box;
    user-select: none;
}

.range-scale[b-mu2119hfxu] {
    width: 100%;
    height: 10px;
    padding: 0 14px;
    box-sizing: border-box;
    pointer-events: none;
}

.scale-graphics[b-mu2119hfxu] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.range-track-button[b-mu2119hfxu] {
    position: relative;
    width: 100%;
    height: 2.25rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    touch-action: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

    .range-track-button:focus-visible .range-thumb[b-mu2119hfxu] {
        outline: 2px solid var(--slider-accent-color, #3b82f6);
        outline-offset: 3px;
    }

.range-track[b-mu2119hfxu] {
    width: 100%;
    height: 0.55rem;
    background-color: color-mix(in srgb, var(--background-color, #2c2c2c), black 30%);
    border: 1px solid var(--border-color, #3f3f46);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    pointer-events: none;
}

.range-fill[b-mu2119hfxu] {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background-color: var(--slider-accent-color, #3b82f6);
    border-radius: 9999px;
    transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.range-track-button.dragging .range-fill[b-mu2119hfxu] {
    transition: none;
}

.range-thumb[b-mu2119hfxu] {
    position: absolute;
    left: var(--progress, 0%);
    transform: translateX(-50%) translateY(0);
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: var(--slider-surface-color, #ffffff);
    --auto-shadow: color-mix(in srgb, var(--slider-surface-color, #ffffff), black 25%);
    box-shadow: 0 var(--slider-depth, 4px) 0 var(--auto-shadow), 0 4px 8px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-sizing: border-box;
    transition: left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.1s ease, box-shadow 0.1s ease;
}

    .range-thumb.dragging[b-mu2119hfxu] {
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

.range-track-button:active .range-thumb[b-mu2119hfxu] {
    transform: translateX(-50%) translateY(var(--slider-depth, 4px));
    box-shadow: 0 0px 0 var(--auto-shadow);
    filter: brightness(0.95);
}

.thumb-readout[b-mu2119hfxu] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--slider-text-color, #111111);
    white-space: nowrap;
}

.range-hit-area[b-mu2119hfxu] {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.range-track-button.dragging .range-hit-area[b-mu2119hfxu] {
    top: -60px;
    bottom: -60px;
    left: 0;
    right: 0;
}
/* _content/PersonalUI.Blazor/Inputs/TextInput.razor.rz.scp.css */
/* CSS for TextInput component */
.input-wrapper[b-c0g4a1jsig] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: var(--width, fit-content);
}

.custom-input[b-c0g4a1jsig]{
    background: transparent;
    border: none;
    outline: none;

    width: 100%;

    color: var(--text-color, #ffffff);
    font-family: inherit;
    font-size: var(--font-size, 1rem);
}

.custom-input[b-c0g4a1jsig]::placeholder{
    color: color-mix(in srgb, var(--text-color, #ffffff), transparent 55%);
    font-style: italic;
}

.input-error[b-c0g4a1jsig] {
    color: var(--error-color, #ff4d4d);
    font-size: calc(var(--font-size, 1rem) * 0.85);
    padding-left: 0.25rem;
}

.password-toggle[b-c0g4a1jsig] {
    background: transparent;
    border: none;
    padding: 0 0 0 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--text-color, #ffffff), transparent 40%);
    transition: color 0.15s ease;
}

    .password-toggle:hover[b-c0g4a1jsig],
    .password-toggle:focus-visible[b-c0g4a1jsig] {
        color: var(--text-color, #ffffff);
        outline: none;
    }
/* _content/PersonalUI.Blazor/Loaders/OrbitalLoader.razor.rz.scp.css */
.spinner-container[b-ftqm9mpx2s] {
    --calc-system-size: var(--system-size, 90px);
    --calc-orbit-tilt: var(--orbit-tilt, 80deg);
    --calc-sat-size: var(--sat-size, 3px);
    --orbit-radius: calc(var(--calc-system-size) / 2);
    --orbit-untilt: calc(var(--calc-orbit-tilt) * -1);
    --sat-offset: calc(var(--calc-sat-size) / -2);
    --sat-scale-min: 0.5;
    --sat-scale-max: 1.6;
    /* A generous 1.5x safe zone ensures shadows never hit the ceiling */
    --safe-bounding-box: calc(var(--calc-system-size) * 1.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.planetary-system[b-ftqm9mpx2s] {
    position: relative;
    width: var(--safe-bounding-box);
    height: var(--safe-bounding-box);
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.payload-stabilizer[b-ftqm9mpx2s] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.orbit-plane[b-ftqm9mpx2s] {
    position: absolute;
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    animation: precession-plane-b-ftqm9mpx2s var(--precession-duration, 30s) linear infinite;
}

@keyframes precession-plane-b-ftqm9mpx2s {
    from {
        transform: rotateZ(0deg) rotateX(var(--calc-orbit-tilt));
    }

    to {
        transform: rotateZ(360deg) rotateX(var(--calc-orbit-tilt));
    }
}

.sat-orbit[b-ftqm9mpx2s] {
    position: absolute;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    animation: spin-orbit-b-ftqm9mpx2s var(--orbit-duration, 3s) linear infinite;
    animation-delay: var(--delay);
}

@keyframes spin-orbit-b-ftqm9mpx2s {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

.sat-translate[b-ftqm9mpx2s] {
    position: absolute;
    transform-style: preserve-3d;
    transform: translateY(calc(var(--orbit-radius) * -1));
}

.sat-counter[b-ftqm9mpx2s] {
    position: absolute;
    transform-style: preserve-3d;
    animation: counter-spin-b-ftqm9mpx2s var(--orbit-duration, 3s) linear infinite;
    animation-delay: var(--delay);
}

@keyframes counter-spin-b-ftqm9mpx2s {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(-360deg);
    }
}

.sat-model[b-ftqm9mpx2s] {
    position: absolute;
    top: var(--sat-offset);
    left: var(--sat-offset);
    width: var(--calc-sat-size);
    height: var(--calc-sat-size);
    border-radius: 50%;
    animation: astrophysics-b-ftqm9mpx2s var(--orbit-duration, 3s) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes astrophysics-b-ftqm9mpx2s {
    0% {
        background-color: var(--base-color);
        transform: rotateX(var(--orbit-untilt)) scale(var(--sat-scale-min));
        box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5);
    }

    25% {
        background-color: color-mix(in srgb, var(--base-color), var(--tint-blueshift) var(--shift-intensity));
        transform: rotateX(var(--orbit-untilt)) scale(1.0);
        box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5);
    }

    50% {
        background-color: var(--base-color);
        transform: rotateX(var(--orbit-untilt)) scale(var(--sat-scale-max));
        box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5), 0 -15px 8px -3px rgba(0,0,0,0.8);
    }

    75% {
        background-color: color-mix(in srgb, var(--base-color), var(--tint-redshift) var(--shift-intensity));
        transform: rotateX(var(--orbit-untilt)) scale(1.0);
        box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5);
    }

    100% {
        background-color: var(--base-color);
        transform: rotateX(var(--orbit-untilt)) scale(var(--sat-scale-min));
        box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5);
    }
}

.spinner-text[b-ftqm9mpx2s] {
    color: #a0a0a0;
    font-family: sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
/* _content/PersonalUI.Blazor/Loaders/Planets/Mars.razor.rz.scp.css */
.planet[b-2y8txuz0kh] {
    position: relative;
    width: var(--planet-size);
    height: var(--planet-size);
    border-radius: 50%;
    background-color: var(--color-planet-core);
    overflow: hidden;
}

.crater[b-2y8txuz0kh] {
    position: absolute;
    border-radius: 50%;
    background-color: var(--color-crater);
    border: 1px solid var(--color-crater-rim);
}

.planet-lighting[b-2y8txuz0kh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 2;
    background: linear-gradient(90deg, transparent 48%, var(--color-night-shadow) 52%);
    animation: day-night-cycle-b-2y8txuz0kh var(--day-duration) linear infinite;
}

@keyframes day-night-cycle-b-2y8txuz0kh {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.building-base[b-2y8txuz0kh] {
    position: absolute;
    border-radius: 1px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: building-day-night-b-2y8txuz0kh var(--day-duration) linear infinite;
    animation-delay: calc(var(--day-duration) * -1 * (1 - (var(--feature-angle) / 360)));
}

@keyframes building-day-night-b-2y8txuz0kh {
    0%, 23% {
        background-color: var(--color-building-night);
        box-shadow: none;
    }

    27%, 73% {
        background-color: var(--color-building-day);
        box-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }

    77%, 100% {
        background-color: var(--color-building-night);
        box-shadow: none;
    }
}

.building-light[b-2y8txuz0kh] {
    position: absolute;
    background-color: var(--color-window-core);
    border-radius: 50%;
    box-shadow: 0 0 3px var(--color-window-core), 0 0 5px var(--color-window-glow);
    z-index: 3;
    animation: city-lights-b-2y8txuz0kh var(--day-duration) linear infinite;
    animation-delay: calc(var(--day-duration) * -1 * (1 - (var(--feature-angle) / 360)));
}

@keyframes city-lights-b-2y8txuz0kh {
    0%, 23% {
        opacity: 1;
    }

    27%, 73% {
        opacity: 0;
    }

    77%, 100% {
        opacity: 1;
    }
}
/* _content/PersonalUI.Blazor/Loaders/SimpleSpinner.razor.rz.scp.css */
.circular-loader[b-xrd2a3uiao] {
    /* Stop Flexbox from squishing it! */
    flex-shrink: 0;
    width: var(--loader-size);
    height: var(--loader-size);
    border-radius: 50%;
    /* The Velocity Tail: A smooth gradient wrapping 360 degrees */
    background: conic-gradient( from 0deg, transparent 0%, var(--loader-color) 100% );
    /* The Ring Cutout: Punches a hole in the center, leaving exactly the Thickness */
    -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - var(--loader-thickness)), black calc(100% - var(--loader-thickness) + 0.5px) /* +0.5px smooths the pixel edges */
    );
    mask: radial-gradient( farthest-side, transparent calc(100% - var(--loader-thickness)), black calc(100% - var(--loader-thickness) + 0.5px) );
    animation: spin-b-xrd2a3uiao var(--loader-speed) linear infinite;
}

@keyframes spin-b-xrd2a3uiao {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* _content/PersonalUI.Blazor/Navigation/BurgerMenu.razor.rz.scp.css */
.burger-menu-container[b-vtft9okxfc] {
    display: inline-flex;
    align-items: center;
}

.drawer-backdrop[b-vtft9okxfc] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: flex-end;
    animation: backdrop-fade-b-vtft9okxfc 0.15s ease-out;
}

.drawer-panel[b-vtft9okxfc] {
    height: 100vh;
    display: flex;
    animation: drawer-slide-in-b-vtft9okxfc 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-nav[b-vtft9okxfc] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
}

@keyframes backdrop-fade-b-vtft9okxfc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes drawer-slide-in-b-vtft9okxfc {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}
/* _content/PersonalUI.Blazor/Navigation/Navbar.razor.rz.scp.css */
.ui-navbar-wrapper[b-rjad437hqm] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.75rem;
}

.navbar-inner[b-rjad437hqm] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.navbar-brand[b-rjad437hqm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-color, #ffffff);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.navbar-links-desktop[b-rjad437hqm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-right[b-rjad437hqm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-actions[b-rjad437hqm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hide Burger Menu on Desktop */
.navbar-burger-mobile[b-rjad437hqm] {
    display: none;
}

/* Switch to Burger Menu on Phones & Tablets */
@media (max-width: 768px) {
    .navbar-links-desktop[b-rjad437hqm] {
        display: none;
    }

    .navbar-burger-mobile[b-rjad437hqm] {
        display: inline-flex;
    }
}
/* _content/PersonalUI.Blazor/Navigation/Tabs.razor.rz.scp.css */
.ui-tabs-container[b-g38tidy2vx] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tabs-header-bar[b-g38tidy2vx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.trail-separator[b-g38tidy2vx] {
    color: var(--text-color, #ffffff);
    opacity: 0.45;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0 0.15rem;
    user-select: none;
}

.tabs-body[b-g38tidy2vx] {
    width: 100%;
}
/* _content/PersonalUI.Blazor/Overlays/Modal.razor.rz.scp.css */
/* CSS for Modal component */
.modal-backdrop[b-u91p3le2ak] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.modal-wrapper[b-u91p3le2ak] {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.modal-footer[b-u91p3le2ak] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #333333);
}
/* _content/PersonalUI.Blazor/Overlays/ToastContainer.razor.rz.scp.css */
/* CSS for ToastContainer component */
.ui-toast-container[b-w170q31snu] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
}

.toast-item[b-w170q31snu] {
    pointer-events: auto;
    animation: toast-slide-in-b-w170q31snu 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-inner[b-w170q31snu] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #ffffff;
    font-size: 0.9rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .ui-toast-container[b-w170q31snu] {
        top: 1rem;
        bottom: auto;
        right: 1rem;
        left: 1rem;
        align-items: center;
    }
}

@keyframes toast-slide-in-b-w170q31snu {
    from {
        transform: translateY(10px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}
/* _content/PersonalUI.Blazor/Overlays/Tooltip.razor.rz.scp.css */
.ui-tooltip-wrapper[b-0ha1vjkiyf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tooltip-trigger[b-0ha1vjkiyf] {
    display: inline-flex;
    align-items: center;
}

.tooltip-bubble[b-0ha1vjkiyf] {
    position: absolute;
    z-index: 1200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

.tooltip-text[b-0ha1vjkiyf] {
    color: var(--text-color, #ffffff);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
}

/* Show on Hover or Keyboard Focus */
.ui-tooltip-wrapper:hover .tooltip-bubble[b-0ha1vjkiyf],
.ui-tooltip-wrapper:focus-within .tooltip-bubble[b-0ha1vjkiyf] {
    opacity: 1;
}

/* --- POSITIONS --- */
.pos-top .tooltip-bubble[b-0ha1vjkiyf] {
    bottom: calc(100% + 0.45rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

.pos-top:hover .tooltip-bubble[b-0ha1vjkiyf],
.pos-top:focus-within .tooltip-bubble[b-0ha1vjkiyf] {
    transform: translateX(-50%) translateY(0);
}

.pos-bottom .tooltip-bubble[b-0ha1vjkiyf] {
    top: calc(100% + 0.45rem);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

.pos-bottom:hover .tooltip-bubble[b-0ha1vjkiyf],
.pos-bottom:focus-within .tooltip-bubble[b-0ha1vjkiyf] {
    transform: translateX(-50%) translateY(0);
}

.pos-left .tooltip-bubble[b-0ha1vjkiyf] {
    right: calc(100% + 0.45rem);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

.pos-left:hover .tooltip-bubble[b-0ha1vjkiyf],
.pos-left:focus-within .tooltip-bubble[b-0ha1vjkiyf] {
    transform: translateY(-50%) translateX(0);
}

.pos-right .tooltip-bubble[b-0ha1vjkiyf] {
    left: calc(100% + 0.45rem);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

.pos-right:hover .tooltip-bubble[b-0ha1vjkiyf],
.pos-right:focus-within .tooltip-bubble[b-0ha1vjkiyf] {
    transform: translateY(-50%) translateX(0);
}
/* _content/PersonalUI.Blazor/Windows/TitledWindow.razor.rz.scp.css */
.title-bar[b-stvo2tl84s] {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--header-bg, var(--ui-bg-header));
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color, var(--ui-border));
    border-top-left-radius: calc(var(--border-radius, var(--ui-radius-md)) - 1px);
    border-top-right-radius: calc(var(--border-radius, var(--ui-radius-md)) - 1px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
}

.title-spacer[b-stvo2tl84s] {
    min-width: 0;
}

.title-text[b-stvo2tl84s] {
    color: var(--ui-text);
    font-family: sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-actions[b-stvo2tl84s] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.body-content[b-stvo2tl84s] {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
/* _content/PersonalUI.Blazor/Windows/Window.razor.rz.scp.css */
.window[b-yyx4q4ns7s] {
    display: var(--display, flex);
    border-radius: var(--border-radius, var(--ui-radius-md));
    background-color: var(--background-color, var(--ui-bg-surface));
    border: 1px solid var(--border-color, var(--ui-border));
    width: var(--width, 400px);
    height: var(--height, 300px);
    min-width: var(--min-width, 50px);
    min-height: var(--min-height, 50px);
    padding: var(--padding, 1rem);
    align-items: center;
    justify-content: center;
    overflow: var(--overflow, auto);
}

.window-content[b-yyx4q4ns7s] {
    display: flex;
    flex-direction: var(--flex-direction, column);
    align-items: var(--align-items, stretch);
    justify-content: var(--justify-content, flex-start);
    width: 100%;
    height: 100%;
}
