@charset "UTF-8";

/* geist-500 - latin */
@font-face {
    font-display: swap;
    font-family: "Geist";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/geist-v5-latin-500.woff2") format("woff2");
}

/* geist-700 - latin */
@font-face {
    font-display: swap;
    font-family: "Geist";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/geist-v5-latin-700.woff2") format("woff2");
}

@font-face {
    font-family: "Pliant";
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/pliant-regular.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Pliant";
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/pliant-bold.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/icons.woff2") format("woff2");
}

.ms {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    width: 1em;
    height: 1em;
    overflow: hidden;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

.container {
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 40px;
    box-sizing: border-box;
}

.container.small {
    max-width: 1000px;
}

@media (max-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 540px;
        padding: 0 30px;
    }
}

@media (max-width: 420px) {
    .container {
        max-width: 420px;
    }
}

.container.container_small {
    max-width: 1200px;
    padding: 0 30px;
}

@media (max-width: 992px) {
    .container.container_small {
        max-width: 860px;
    }
}

@media (max-width: 768px) {
    .container.container_small {
        max-width: 600px;
    }
}

@media (max-width: 576px) {
    .container.container_small {
        max-width: 400px;
    }
}

@media (max-width: 576px) {
    .sm_center {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .md_center {
        text-align: center;
    }
}

.gridContainer {
    display: grid;
    gap: 1rem;
}

.gridAlignCenter {
    align-items: center;
}

.gridAlignStart {
    align-items: start;
}

.gridContainerSmall {
    display: grid;
    gap: 0.5rem;
}

.gridContainerWide {
    display: grid;
    gap: 2rem;
}

.gridTwo {
    grid-template-columns: repeat(2, 1fr);
}

.gridThree {
    grid-template-columns: repeat(3, 1fr);
}

.gridFour {
    grid-template-columns: repeat(4, 1fr);
}

.gridOneTwo {
    grid-template-columns: 1fr 2fr;
}

.gridTwoOne {
    grid-template-columns: 2fr 1fr;
}

.gridOneThree {
    grid-template-columns: 1fr 3fr;
}

.gridThreeOne {
    grid-template-columns: 3fr 1fr;
}

.gridAutoOne {
    grid-template-columns: auto 1fr;
}

.gridOneAuto {
    grid-template-columns: 1fr auto;
}

@media (max-width: 576px) {

    .gridTwo,
    .gridThree,
    .gridFour,
    .gridOneTwo,
    .gridTwoOne,
    .gridOneThree,
    .gridThreeOne,
    .gridAutoOne,
    .gridOneAuto {
        grid-template-columns: 1fr;
    }
}

.spinAnimation {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes asyncSelectSpin {
    to {
        transform: rotate(360deg);
    }
}

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fontSans);
    background: var(--bg);
    color: var(--fg);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.authArea {
    background: var(--adminBgGradient);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: var(--fgColor);
}

a:active {
    color: var(--accent);
}

@supports (scrollbar-width: thin) and (not selector(::-webkit-scrollbar)) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbarThumb) var(--scrollbarTrack);
    }
}

::-webkit-scrollbar {
    width: var(--scrollbarSize);
    height: var(--scrollbarSize);
}

::-webkit-scrollbar-track {
    background: var(--scrollbarTrack);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbarThumb);
    border-radius: var(--scrollbarRadius);
    border: 2px solid var(--scrollbarTrack);
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbarThumbHover) !important;
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbarThumbActive) !important;
}

input,
textarea {
    padding: 10px 12px;
    border-radius: var(--radiusLg);
    border: 1px solid var(--line);
    font-size: 1rem;
    color: var(--fg);
    background-color: var(--sunken);
    font-family: var(--fontSans);
}

input::placeholder,
textarea::placeholder {
    color: var(--fg3);
}

input:hover,
textarea:hover {
    border-color: var(--line2);
}

input:focus,
textarea:focus {
    outline: none;
    background-color: var(--card);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accentSoft);
}

input[readonly],
textarea[readonly] {
    color: var(--fg2);
    background-color: var(--sunken);
    border-color: var(--line);
    box-shadow: none;
    cursor: default;
    user-select: text;
}

input[readonly]:hover,
input[readonly]:focus,
textarea[readonly]:hover,
textarea[readonly]:focus {
    color: var(--fg2);
    background-color: var(--sunken);
    border-color: var(--line);
    box-shadow: none;
}

input[disabled],
textarea[disabled] {
    color: var(--fg3);
    background-color: var(--sunken);
    border-color: var(--line);
    box-shadow: none;
    cursor: not-allowed;
}


.btn {
    padding: 10px;
    border-radius: var(--radiusMd);
    border: 0;
    font-family: var(--fontSans);
    font-size: 1rem;
    cursor: pointer;
    background-color: transparent;
    text-decoration: none;
    color: var(--fg);
}

.btn:hover {
    text-decoration: none;
    color: var(--fg);
}

.btn:focus-visible {
    outline-style: dashed;
    outline-width: 3px;
    outline-offset: 2px;
    outline-color: var(--accent);
}

.btn:disabled {
    cursor: not-allowed;
    color: var(--fg3) !important;
    background-color: var(--sunken) !important;
}

.btn:disabled:hover .ms {
    transform: scale(1) !important;
}

.btn.btnFlat {
    color: var(--fg);
    background-color: transparent;
}

.btn.btnFlat:hover,
.btn.btnFlat:focus {
    color: var(--fg);
    background-color: var(--card2);
}

.btn.btnFlat:active {
    color: var(--fg);
    background-color: var(--line);
}

.btn.btnPrimaryLight {
    color: var(--fg);
    background-color: var(--accentSoft);
}

.btn.btnPrimaryLight:hover,
.btn.btnPrimaryLight:focus {
    color: var(--accentBtnFg);
    background-color: var(--accentFill);
}

.btn.btnDanger {
    color: #ffffff;
    background-color: var(--danger);
}

.btn.btnDanger:hover {
    background-color: color-mix(in srgb, var(--danger) 80%, white);
}

.btn.btnDanger:active {
    background-color: var(--danger);
}

.btn.btnFlatDanger {
    color: var(--danger);
    background-color: transparent;
}

.btn.btnFlatDanger:hover {
    color: var(--danger);
    background-color: var(--dangerSoft);
}

.btn.btnFlatDanger:active {
    color: var(--danger);
    background-color: var(--dangerLine);
}

.btn.btnFlatSuccess {
    color: var(--ok);
    background-color: transparent;
}

.btn.btnFlatSuccess:hover {
    color: var(--ok);
    background-color: var(--okSoft);
}

.btn.btnFlatSuccess:active {
    color: var(--ok);
    background-color: var(--okLine);
}

.btn.btnPrimary {
    color: var(--accentBtnFg);
    background-color: var(--accentFill);
}

.btn.btnPrimary:hover {
    background-color: var(--accentFillHover);
}

.btn.btnPrimary:active {
    background-color: var(--accentFill);
}

.btn.btnPrimary:focus-visible {
    outline-style: dashed;
    outline-width: 3px;
    outline-color: var(--fg);
}

.btn.iconOnly {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.iconOnly:disabled {
    background-color: transparent !important;
}

.btn.iconOnly:disabled .ms {
    color: var(--grayColor) !important;
}

.btn.iconRight {
    display: inline-grid;
    grid-template-columns: 1fr auto;
    grid-gap: 10px;
    align-items: center;
}

.btn.iconLeft {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    grid-gap: 10px;
    align-items: center;
}

.btnToggleWrapper {
    padding: 6px 4px;
    border-radius: var(--borderRadius);
    background-color: var(--accentLight);
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    align-items: center;
}

.btnToggleWrapper .btn {
    padding: 4px 10px;
    box-sizing: border-box;
}

.dropdownBtnWrapper {
    position: relative;
    display: inline-block;
}

.dropdownBtnWrapper summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: white;
    border: none;
    border-radius: var(--borderRadius);
    cursor: pointer;
    font-size: 1rem;
    list-style: none;
    user-select: none;
}

.dropdownBtnWrapper summary::-webkit-details-marker {
    display: none;
}

.dropdownBtnWrapper summary::marker {
    display: none;
}

.dropdownBtnWrapper .dropdownMenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 140px;
    background-color: var(--mainAreaBg);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    --webkit-backdrop-filter: blur(5px);
    box-shadow: var(--boxShadow);
    padding: 5px;
    z-index: 100;
}

.dropdownBtnWrapper .dropdownMenu button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: none;
    border: none;
    color: var(--fgColor);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.dropdownBtnWrapper[open] summary::after {
    transform: rotate(180deg);
    margin-top: -2px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sortItem {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sortItem.activeSort {
    background-color: rgba(37, 99, 235, 0.1);
    font-weight: 500;
}

.sortItem .sortIcon {
    margin-left: auto;
    font-size: 18px;
    color: var(--fgColor);
    flex-shrink: 0;
}

.sortItem:hover {
    background-color: rgba(37, 99, 235, 0.05);
}

.inputButtonGroup {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.inputButtonGroup>input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

.inputButtonGroup>.btn {
    flex: 0 0 auto;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    white-space: nowrap;
}

.inputButtonGroup>input:disabled+.btn,
.inputButtonGroup>.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.inputButtonGroupStatus {
    margin-top: 8px;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
    border-radius: var(--borderRadius);
}

.inputButtonGroupStatus[data-state=idle],
.inputButtonGroupStatus:empty {
    display: none;
}

.inputButtonGroupStatus[data-state=loading] {
    display: block;
    padding: 8px 12px;
    background-color: var(--mainAreaBg);
    color: var(--fgColorMuted);
    border: 1px solid var(--inputBorderColor);
}

.inputButtonGroupStatus[data-state=success] {
    display: block;
    padding: 8px 12px;
    background-color: color-mix(in srgb, var(--successColor) 12%, transparent);
    color: var(--successColor);
    border: 1px solid color-mix(in srgb, var(--successColor) 40%, transparent);
}

.inputButtonGroupStatus[data-state=warn] {
    display: block;
    padding: 8px 12px;
    background-color: color-mix(in srgb, var(--warnColor) 12%, transparent);
    color: var(--warnColor);
    border: 1px solid color-mix(in srgb, var(--warnColor) 40%, transparent);
}

.inputButtonGroupStatus[data-state=error] {
    display: block;
    padding: 8px 12px;
    background-color: color-mix(in srgb, var(--dangerColor) 12%, transparent);
    color: var(--dangerColor);
    border: 1px solid color-mix(in srgb, var(--dangerColor) 40%, transparent);
}

table {
    border-collapse: collapse;
}

table th,
table td {
    padding: 0.7rem 1rem;
    text-align: left;
    font-size: 0.925rem;
    line-height: 1.5;
}

table th+th,
table th+td,
table td+th,
table td+td {
    border-left: 1px solid var(--inputBorderColor);
}

table thead th {
    background: var(--accentLight);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

table tbody tr+tr td {
    border-top: 1px solid var(--inputBorderColor);
}

form .formSection {
    margin-bottom: 20px;
}

form .formSection.withBorders {
    padding: 20px 0;
    border-top: 1px solid var(--inputBorderColor);
    border-bottom: 1px solid var(--inputBorderColor);
}

form .formSection.withBorders .checkboxGroup label {
    margin-bottom: 0;
}

form .formSection:last-of-type {
    margin-bottom: 0;
}

form .formSection h3 {
    margin-bottom: 10px !important;
}

form .formSection .gridContainer {
    margin-bottom: 20px;
}

form .formSection .gridContainer:last-of-type {
    margin-bottom: 0;
}

form .formGroup {
    margin-bottom: 20px;
}

form .formGroup:last-of-type {
    margin-bottom: 0;
}

form .formGroup label {
    margin-bottom: 6px;
    display: inline-block;
    color: var(--fg2);
    font-size: 0.92rem;
    font-weight: 600;
}

form .formGroup input {
    width: 100%;
    box-sizing: border-box;
}

form .formGroup .formHint {
    font-size: 0.8rem;
    color: var(--fg3);
}

form .formGroup.hasError input {
    border-color: var(--danger);
    background-color: var(--dangerSoft);
}

form .formGroup.hasError .errorText {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radiusFull);
    background-color: var(--danger);
    color: #ffffff;
    font-size: 0.8rem;
    margin-top: 4px;
}

form .formGroup.gridOneAuto {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 10px;
    align-items: center;
}

form .formGroup .fieldHint {
    font-size: 0.8rem;
    margin: 4px 0 0 0;
}

form .formGroup select {
    width: 100%;
}

form .formActions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

form .gridContainer.noMargin .formGroup {
    margin-bottom: 0;
}

.errorBox {
    margin: 20px 0;
    padding: 10px 12px;
    border-radius: var(--radiusLg);
    color: var(--danger);
    width: 100%;
    box-sizing: border-box;
    background-color: var(--dangerSoft);
    border: 1px solid var(--dangerLine);
}

.errorBox .errorMsg {
    text-align: center;
    line-height: 1.5;
}

.infoBox {
    padding: 10px;
    border-radius: var(--radiusLg);
    background-color: var(--sunken);
}

.infoBox p:first-of-type {
    margin-top: 0;
}

.infoBox p:last-of-type {
    margin-bottom: 0;
}

.infoBox ul:last-of-type {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .infoBox {
        display: none;
    }
}


.datepickerCalendar {
    z-index: 9000;
    position: absolute;
    background-color: var(--mainAreaBg);
    border: 1px solid var(--borderColor, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px;
    width: 300px;
    user-select: none;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.datepickerCalendar.datepickerOpen {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.dateRangePicker {
    width: 100%;
    min-width: 0;
    position: relative;
}

.dateRangeControl {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 44px;
    border: 2px solid var(--inputBorderColor);
    border-radius: var(--borderRadius);
    background-color: var(--inputBgColor);
    color: var(--fgColor);
    overflow: hidden;
    box-sizing: border-box;
}

.dateRangeControl:hover {
    border-color: var(--checkboxHoverBorderColor);
    box-shadow: 0 0 0 4px var(--checkboxHoverBoxShadowColor);
}

.dateRangeControl:focus-within {
    border-color: var(--inputFocusBorderColor);
    box-shadow: 0 0 0 4px var(--inputFocusBoxShadow);
}

.dateRangeBtn {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 10px;
    padding: 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--fontFamily);
    font-size: 1rem;
    cursor: pointer;
}

.dateRangeBtn:focus {
    outline: none;
}

.dateRangeBtn .ms {
    flex-shrink: 0;
}

.dateRangeBtn .dateRangeLabel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dateRangeClearBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    border: 0;
    border-left: 1px solid var(--inputBorderColor);
    background: transparent;
    color: var(--fgColorMuted);
    cursor: pointer;
}

.dateRangeClearBtn[hidden] {
    display: none;
}

.dateRangeClearBtn .ms {
    font-size: 20px;
}

.dateRangeClearBtn:hover {
    background-color: var(--accent);
    color: #ffffff;
}

.dateRangeClearBtn:active {
    background-color: var(--buttonFlatActiveBg);
}

.dateRangeClearBtn:focus {
    outline: none;
}

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

.datepickerMonthYear {
    font-size: 14px;
    font-weight: 700;
    color: var(--fgColor);
}

.datepickerNavBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--borderRadius);
    cursor: pointer;
    color: var(--fgColor);
    transition: background-color 0.12s ease;
}

.datepickerNavBtn .ms {
    font-size: 20px;
}

.datepickerNavBtn:hover {
    background-color: var(--buttonFlatHoverBg);
}

.datepickerNavBtn:active {
    background-color: var(--buttonFlatActiveBg);
}

.datepickerPresets {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.datepickerPresetBtn {
    padding: 4px 10px;
    border: 1px solid var(--inputBorderColor);
    border-radius: 16px;
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    color: var(--fgColorMuted);
    cursor: pointer;
    transition: all 0.12s ease;
}

.datepickerPresetBtn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background-color: var(--buttonFlatHoverBg);
}

.datepickerPresetBtn:active {
    background-color: var(--buttonFlatActiveBg);
}

.datepickerNames {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.datepickerDayName {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--fgColorMuted);
    padding: 4px 0;
}

.datepickerGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.datepickerDay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border: none;
    border-radius: var(--borderRadius);
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--fgColor);
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease, border-radius 0.1s ease;
    position: relative;
}

.datepickerDay:hover {
    background-color: var(--buttonFlatHoverBg);
}

.datepickerDay:active {
    background-color: var(--buttonFlatActiveBg);
}

.datepickerDay.datepickerDayEmpty {
    cursor: default;
    pointer-events: none;
}

.datepickerDay.datepickerToday {
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

.datepickerDay.datepickerSelected {
    background-color: var(--accent);
    color: #fff;
    font-weight: 700;
}

.datepickerDay.datepickerSelected:hover {
    background-color: var(--accent);
    opacity: 0.9;
}

.datepickerDay.datepickerSelected.datepickerToday {
    box-shadow: none;
}

.datepickerDay.datepickerRangeStart {
    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
}

.datepickerDay.datepickerRangeEnd {
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
}

.datepickerDay.datepickerRangeStart.datepickerRangeEnd {
    border-radius: var(--borderRadius);
}

.datepickerDay.datepickerRange {
    background-color: rgba(111, 36, 155, 0.15);
    color: var(--accent);
    border-radius: 0;
}

.datepickerDay.datepickerRange:hover {
    background-color: rgba(111, 36, 155, 0.25);
}

.datepickerDay.datepickerInRangePreview {
    background-color: rgba(111, 36, 155, 0.08);
    color: var(--fgColor);
    border-radius: 0;
}

.datepickerFooter {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--inputBorderColor);
}

.datepickerClearBtn {
    padding: 5px 12px;
    border: none;
    border-radius: var(--borderRadius);
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--dangerColor);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.datepickerClearBtn:hover {
    background-color: var(--dangerColorLight);
}

.datepickerClearBtn:active {
    background-color: var(--btnFlatDangerActiveBg);
}

.pagination {
    margin-top: 20px;
}

#header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 80px;
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 1000;
    background-color: var(--chrome);
    border-bottom: 1px solid var(--line);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#header .container {
    height: 100%;
}

#header .headerInner {
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

#header .logoArea {
    line-height: 0;
}

#header .logoArea a {
    display: inline-block;
    line-height: 0;
}

#header .logoArea a svg {
    width: 100px;
    height: auto;
}

#header .logoArea a svg path {
    fill: var(--logoColor);
}

#header .controlsArea ul {
    list-style: none;
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 0;
}

#header .controlsArea ul .navItem .navItemLink {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 8px;
    align-items: center;
    padding: 9px 12px;
    text-decoration: none;
    border-radius: var(--radiusMd);
    color: var(--fg2);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#header .controlsArea ul .navItem .navItemLink:hover {
    background-color: var(--card2);
    color: var(--fg);
}

#header .controlsArea ul .navItem .navItemLink:active {
    background-color: var(--line);
}

#header .controlsArea ul .navItem .navItemAction {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9px;
    border-radius: var(--radiusMd);
    color: var(--fg2);
    border: 0;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#header .controlsArea ul .navItem .navItemAction:hover {
    background-color: var(--card2);
    color: var(--fg);
}

#header .controlsArea ul .navItem .navItemAction:active {
    background-color: var(--line);
}

@media (max-width: 576px) {
    #header {
        padding-right: 0;
        padding-left: 0;
    }

    #header .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    #header .controlsArea ul {
        gap: 6px;
    }

    #header .controlsArea ul .navItem .navItemLink,
    #header .controlsArea ul .navItem .navItemAction {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    #header .controlsArea ul .navItem .navItemLink {
        display: inline-flex;
        gap: 0;
        font-size: 0;
    }
}

.hero {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.hero #heroCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    cursor: pointer;
}

.hero .heroContent {
    position: relative;
    z-index: 1;
    text-align: center;
    pointer-events: none;
    padding: 20px;
    margin-top: -80px;
}

.hero .heroContent h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 1rem;
    background: linear-gradient(to right, var(--fg), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero .heroContent p.subTitle {
    font-size: 1.4rem;
    color: var(--fg2);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 600;
}

.hero .scrollIndicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    opacity: 0.6;
    z-index: 2;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

.toggleSwitch {
    width: 56px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.toggleSwitch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggleSwitch .toggleSwitchTrack {
    position: relative;
    width: 56px;
    height: 30px;
    box-sizing: border-box;
    border: 2px solid var(--checkboxBorderColor);
    border-radius: 999px;
    background-color: var(--checkboxBgColor);
}

.toggleSwitch .toggleSwitchTrack::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid var(--inputBorderColor);
    border-radius: 50%;
    background-color: color-mix(in srgb, #ffffff 92%, var(--fgColor));
    box-shadow: var(--boxShadow);
    transition: transform 0.18s ease;
}

.toggleSwitch:hover .toggleSwitchTrack {
    border-color: var(--checkboxHoverBorderColor);
    box-shadow: 0 0 0 4px var(--checkboxHoverBoxShadowColor);
}

.toggleSwitch input:focus+.toggleSwitchTrack,
.toggleSwitch input:focus-visible+.toggleSwitchTrack {
    outline: none;
    border-color: var(--checkboxFocusBorderColor);
    box-shadow: 0 0 0 4px var(--inputFocusBoxShadow);
}

.toggleSwitch input:checked+.toggleSwitchTrack {
    border-color: var(--checkboxCheckedBorderColor);
    background-color: var(--checkboxCheckedBgColor);
}

.toggleSwitch input:checked+.toggleSwitchTrack::after {
    border-color: transparent;
    background-color: #ffffff;
    transform: translateX(26px);
}

.toggleSwitch:hover input:checked+.toggleSwitchTrack {
    border-color: var(--checkboxCheckedBorderColor);
    box-shadow: 0 0 0 4px var(--checkboxHoverBoxShadowColor);
}

.toggleSwitch input:checked:focus+.toggleSwitchTrack,
.toggleSwitch input:checked:focus-visible+.toggleSwitchTrack {
    border-color: var(--checkboxFocusBorderColor);
    box-shadow: 0 0 0 4px var(--inputFocusBoxShadow);
}

.toggleSwitch input:disabled+.toggleSwitchTrack {
    opacity: 0.55;
    cursor: not-allowed;
}

.toggleSwitch:has(input:disabled) {
    cursor: not-allowed;
}

.toggleSwitch:has(input:disabled):hover .toggleSwitchTrack {
    border-color: var(--checkboxBorderColor);
    box-shadow: none;
}

.customSelect {
    position: relative;
    width: 100%;
    min-width: 0;
    transition: none;
}

.customSelect .customSelectTrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px;
    border-radius: var(--borderRadius);
    border: 2px solid var(--inputBorderColor);
    background-color: var(--inputBgColor);
    color: var(--fgColor);
    font-size: 1rem;
    font-family: var(--fontFamily);
    cursor: pointer;
    user-select: none;
    transition: none;
}

.customSelect .customSelectTrigger:hover {
    border-color: var(--checkboxHoverBorderColor);
    box-shadow: 0 0 0 4px var(--checkboxHoverBoxShadowColor);
}

.customSelect .customSelectTrigger:focus {
    outline: none;
    border-color: var(--inputFocusBorderColor);
    box-shadow: 0 0 0 4px var(--inputFocusBoxShadow);
}

.customSelect .customSelectTrigger[aria-expanded=true] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.customSelect .customSelectTrigger .customSelectArrow {
    transition: none;
    line-height: 0;
}

.customSelect.open .customSelectTrigger {
    border-color: var(--inputFocusBorderColor);
    box-shadow: 0 0 0 4px var(--inputFocusBoxShadow);
}

.customSelect .customSelectValue {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customSelect .customSelectPlaceholder {
    color: var(--fgColorMuted);
}

.customSelect .customSelectArrow {
    flex-shrink: 0;
    margin-left: 8px;
    color: var(--fgColorMuted);
    transition: transform 0.2s ease;
}

.customSelect.open .customSelectArrow {
    transform: rotate(180deg);
}

.customSelect .customSelectDropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: auto;
    right: 0;
    width: max-content;
    min-width: 100%;
    max-width: min(560px, 100vw - 32px);
    max-height: 240px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    background-color: var(--asyncSelectBg);
    border: 1px solid var(--cardBorder);
    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
    box-shadow: 0 0 0 4px var(--asyncSelectDropdownBoxShadow);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: none;
    padding: 6px;
}

.customSelect.open .customSelectDropdown {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.customSelect.dropdownExpandedLeft:not(.dropUp) .customSelectDropdown {
    border-top-left-radius: var(--borderRadius);
}

.customSelect.dropdownExpandedRight:not(.dropUp) .customSelectDropdown {
    border-top-right-radius: var(--borderRadius);
}

.customSelect .customSelectOption {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    cursor: pointer;
    opacity: 1;
    border-radius: var(--borderRadius);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
    transition: background-color 0.1s ease;
}

.customSelect .customSelectOption:hover,
.customSelect .customSelectOption.highlighted {
    background-color: var(--checkboxHoverBoxShadowColor);
}

.customSelect .customSelectOption.selected {
    background-color: var(--checkboxCheckedBgColor);
    color: var(--checkboxCheckmarkColor);
}

.customSelect .customSelectOption.selected:hover {
    background-color: var(--checkboxCheckedBgColor);
}

.customSelect .customSelectNoResults {
    padding: 12px;
    text-align: center;
    color: var(--fgColorMuted);
    font-size: 0.9rem;
}

.customSelect.hasError .customSelectTrigger {
    border-color: var(--dangerColor);
    background-color: var(--dangerColorLight);
}

.customSelect.disabled .customSelectTrigger {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.customSelect.dropUp .customSelectDropdown {
    top: auto;
    bottom: calc(100% + 4px);
    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08), 0 0 0 4px var(--asyncSelectDropdownBoxShadow);
}

.customSelect.dropUp.dropdownExpandedLeft .customSelectDropdown {
    border-bottom-left-radius: var(--borderRadius);
}

.customSelect.dropUp.dropdownExpandedRight .customSelectDropdown {
    border-bottom-right-radius: var(--borderRadius);
}

.customSelect.dropUp .customSelectTrigger[aria-expanded=true] {
    border-bottom-left-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (max-width: 576px) {
    .customSelect .customSelectDropdown {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0 0 var(--borderRadius) var(--borderRadius);
    }

    .customSelect.dropUp .customSelectDropdown {
        border-radius: var(--borderRadius) var(--borderRadius) 0 0;
    }
}

.asyncSelect {
    position: relative;
    width: 100%;
    min-width: 0;
}

.asyncSelect .asyncSelectTrigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: var(--borderRadius);
    border: 2px solid var(--inputBorderColor);
    background-color: var(--inputBgColor);
    color: var(--fgColor);
    font-size: 1rem;
    font-family: var(--fontFamily);
    cursor: text;
    gap: 8px;
}

.asyncSelect .asyncSelectTrigger:hover {
    border-color: var(--inputHoverBorderColor);
    box-shadow: 0 0 0 4px var(--inputHoverBoxShadow);
}

.asyncSelect .asyncSelectTrigger:focus-within {
    border-color: var(--inputFocusBorderColor);
    box-shadow: 0 0 0 4px var(--inputFocusBoxShadow);
}

.asyncSelect.open .asyncSelectTrigger {
    border-color: var(--inputFocusBorderColor);
    box-shadow: 0 0 0 4px var(--inputFocusBoxShadow);
    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
}

.asyncSelect .asyncSelectionIcon {
    flex-shrink: 0;
    color: var(--fgColorMuted);
    padding: 10px;
}

.asyncSelect .asyncSelectInput {
    flex: 1;
    min-width: 0;
    border: none;
    background-color: transparent;
    color: var(--fgColor);
    font-size: 1rem;
    font-family: var(--fontFamily);
    outline: none;
    padding: 10px 10px 10px 0;
}

.asyncSelect .asyncSelectInput:hover,
.asyncSelect .asyncSelectInput:focus {
    box-shadow: none;
    outline: none;
    border: 0;
}

.asyncSelect .asyncSelectInput::placeholder {
    color: var(--fgColorMuted);
}

.asyncSelect .asyncSelectClear {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: var(--fgColor);
    padding: 4px;
    margin-right: 6px;
}

.asyncSelect.hasValue .asyncSelectClear {
    display: flex;
}

.asyncSelect .asyncSelectSpinner {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--cardBorder);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: asyncSelectSpin 0.8s linear infinite;
    display: none;
}

.asyncSelect.loading .asyncSelectSpinner {
    display: block;
}

.asyncSelect.loading .asyncSelectClear {
    display: none;
}

.asyncSelect .asyncSelectDropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background-color: var(--asyncSelectBg);
    border: 2px solid var(--asyncSelectBorder);
    border-radius: var(--borderRadius);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.06s ease, transform 0.06s ease, visibility 0.15s;
    padding: 6px;
}

.asyncSelect.open .asyncSelectDropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    box-shadow: 0 0 0 4px var(--asyncSelectDropdownBoxShadow);
    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
}

.asyncSelect .asyncSelectOption {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.06s ease;
    gap: 2px;
    border-radius: var(--borderRadius);
}

.asyncSelect .asyncSelectOption:hover,
.asyncSelect .asyncSelectOption.highlighted {
    background-color: var(--checkboxHoverBoxShadowColor);
}

.asyncSelect .asyncSelectOption.selected {
    background-color: var(--checkboxCheckedBgColor);
    color: var(--checkboxCheckmarkColor);
}

.asyncSelect .asyncSelectOption.selected:hover {
    background-color: var(--checkboxCheckedBgColor);
}

.asyncSelect .asyncSelectOption.selected .asyncSelectOptionSub {
    opacity: 0.85;
}

.asyncSelect .asyncSelectOption .asyncSelectOptionMain {
    font-weight: 700;
}

.asyncSelect .asyncSelectOption .asyncSelectOptionSub {
    font-size: 0.85rem;
    opacity: 0.7;
}

.asyncSelect .asyncSelectMessage {
    padding: 16px 12px;
    text-align: center;
    color: var(--fgColorMuted);
    font-size: 0.9rem;
}

.asyncSelect .asyncSelectMessage.error {
    color: var(--dangerColor);
}

.asyncSelect .asyncSelectSelectedDisplay {
    display: none;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 10px 10px 0;
    cursor: default;
}

.asyncSelect.hasValue .asyncSelectSelectedDisplay {
    display: flex;
}

.asyncSelect.hasValue .asyncSelectInput {
    display: none;
}

.asyncSelect .asyncSelectSelectedText {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asyncSelect .asyncSelectSelectedBadge {
    flex-shrink: 0;
    padding: 2px 8px;
    background-color: var(--accent);
    color: var(--checkboxCheckmarkColor);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
}

.asyncSelect.hasError .asyncSelectTrigger {
    border-color: var(--dangerColor);
    background-color: var(--dangerColorLight);
}

.asyncSelect.disabled .asyncSelectTrigger {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.asyncSelect.disabled .asyncSelectInput {
    cursor: not-allowed;
}

.filterSelect {
    position: relative;
    width: 100%;
    min-width: 0;
}

.filterSelect .filterSelectTrigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background: var(--sunken);
    color: var(--fg);
    font-family: inherit;
    font-size: 13.5px;
    cursor: text;
}

.filterSelect .filterSelectTrigger:hover {
    border-color: var(--line2);
    box-shadow: none;
}

.filterSelect .filterSelectTrigger:focus-within,
.filterSelect.open .filterSelectTrigger {
    border-color: var(--accent);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--accentSoft);
}

.filterSelect .filterSelectIcon {
    flex-shrink: 0;
    padding: 0 0 0 11px;
    color: var(--fg3);
    font-size: 17px;
}

.filterSelect .filterSelectInput {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--fg);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
}

.filterSelect .filterSelectInput:hover,
.filterSelect .filterSelectInput:focus {
    box-shadow: none;
    outline: none;
    border: 0;
    background: transparent;
}

.filterSelect .filterSelectInput::placeholder {
    color: var(--fg3);
}

.filterSelect .filterSelectClear {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 7px;
    padding: 0;
    border: none;
    border-radius: var(--radiusSm);
    background: none;
    color: var(--fg2);
    cursor: pointer;
}

.filterSelect .filterSelectClear:hover {
    background: var(--line);
    color: var(--fg);
}

.filterSelect .filterSelectClear .ms {
    font-size: 16px;
}

.filterSelect.hasValue .filterSelectClear {
    display: flex;
}

.filterSelect .filterSelectSpinner {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--line2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: filterSelectSpin 0.8s linear infinite;
    display: none;
    margin-right: 11px;
}

.filterSelect.loading .filterSelectSpinner {
    display: block;
}

.filterSelect.loading .filterSelectClear {
    display: none;
}

.filterSelect .filterSelectDropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--line2);
    border-radius: var(--radiusLg);
    box-shadow: var(--shadowLg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.06s ease, transform 0.06s ease, visibility 0.15s;
    padding: 5px;
}

.filterSelect.open .filterSelectDropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filterSelect .filterSelectOption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--radiusMd);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.filterSelect .filterSelectOption:hover,
.filterSelect .filterSelectOption.highlighted {
    background: var(--card2);
}

.filterSelect .filterSelectOption.selected,
.filterSelect .filterSelectOption.selected:hover,
.filterSelect .filterSelectOption.selected.highlighted {
    background: var(--accentSoft);
}

.filterSelect .filterSelectOption .filterSelectOptionMain {
    font-size: 13px;
    font-weight: 700;
    color: var(--fg);
}

.filterSelect .filterSelectOption.selected .filterSelectOptionMain {
    color: var(--accent);
}

.filterSelect .filterSelectOption .filterSelectOptionSub {
    font-family: var(--fontMono);
    font-size: 11.5px;
    color: var(--fg2);
}

.filterSelect .filterSelectOption.selected .filterSelectOptionSub {
    color: var(--accent);
    opacity: 0.8;
}

.filterSelect .filterSelectMessage {
    padding: 14px 12px;
    text-align: center;
    color: var(--fg2);
    font-size: 12.5px;
}

.filterSelect .filterSelectMessage.error {
    color: var(--danger);
}

.filterSelect .filterSelectLoading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px;
    color: var(--fg2);
    font-size: 12.5px;
}

.filterSelect .filterSelectLoading .fitlerSelectLoadingSpinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--line2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: filterSelectSpin 0.8s linear infinite;
}

.filterSelect .filterSelectSelectedDisplay {
    display: none;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 38px;
    cursor: pointer;
}

.filterSelect .filterSelectSelectedDisplay:hover {
    opacity: 0.85;
}

.filterSelect.hasValue .filterSelectSelectedDisplay {
    display: flex;
}

.filterSelect.hasValue .filterSelectInput {
    display: none;
}

.filterSelect .filterSelectSelectedText {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}

.filterSelect .filterSelectSelectedBadge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--radiusFull);
    background: var(--accentSoft);
    border: 1px solid var(--accentLine);
    color: var(--accent);
    font-family: var(--fontMono);
    font-size: 11px;
    font-weight: 500;
}

.filterSelect.hasError .filterSelectTrigger {
    border-color: var(--danger);
    background: var(--sunken);
}

.filterSelect.disabled .filterSelectTrigger {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.filterSelect.disabled .filterSelectInput {
    cursor: not-allowed;
}

@keyframes filterSelectSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

select {
    padding: 10px;
    border-radius: var(--borderRadius);
    font-size: 1rem;
    border: 2px solid var(--inputBorderColor);
    color: var(--fgColor);
    background-color: var(--inputBgColor);
    font-family: var(--fontFamily);
    outline: none;
    display: block;
}

select:hover {
    box-shadow: 0 0 0 4px var(--inputHoverBoxShadow);
    border: 2px solid var(--inputHoverBorderColor);
}

:root {
    --dropZoneBg: var(--sunken);
    --dropZoneBorder: var(--line2);
    --dropZoneHoverBg: color-mix(in srgb, var(--accent) 22%, transparent);
    --dropZoneHoverBorder: var(--accent);
    --dropZoneActiveBg: color-mix(in srgb, var(--accent) 32%, transparent);
    --dropZoneActiveBorder: var(--accent);
}

.mediaUploadTrigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 80px;
    border: 2px dashed var(--dropZoneBorder);
    border-radius: var(--borderRadiusDouble);
    background-color: var(--dropZoneBg);
    cursor: pointer;
    margin-bottom: 20px;
    user-select: none;
}

.mediaUploadTrigger:hover {
    border-color: var(--dropZoneHoverBorder);
    background-color: var(--dropZoneHoverBg);
}

.mediaUploadTrigger:hover .ms {
    color: var(--accent);
}

.mediaUploadTrigger:hover .triggerText {
    color: var(--fgColor);
}

.mediaUploadTrigger.dragover {
    border-style: solid;
    border-color: var(--dropZoneActiveBorder);
    background-color: var(--dropZoneActiveBg);
}

.mediaUploadTrigger.dragover .ms,
.mediaUploadTrigger.dragover .triggerText {
    color: var(--fgColor);
}

.mediaUploadTrigger .ms {
    font-size: 30px;
    color: var(--fgColor);
}

.mediaUploadTrigger .triggerText {
    font-size: 1rem;
    color: var(--fgColor);
}

.uploadClientSelect {
    margin-bottom: 20px;
}

.uploadClientSelect .settingLabel {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--fgColor);
}

.uploadClientSelect select {
    width: 100%;
}

.uploadClientInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background-color: var(--mainAreaBg);
    border: 1px solid var(--cardBorder);
    border-radius: var(--borderRadius);
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--fgColor);
}

.uploadClientInfo .ms {
    font-size: 20px;
    color: var(--accent);
}

.uploadDropzone {
    position: relative;
    border: 2px dashed var(--dropZoneBorder);
    border-radius: var(--borderRadiusDouble);
    background-color: var(--dropZoneBg);
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 20px;
}

.uploadDropzone:hover {
    background-color: var(--dropZoneHoverBg);
    border-color: var(--dropZoneHoverBorder);
}

.uploadDropzone.dragover {
    border-style: solid;
    border-color: var(--dropZoneActiveBorder);
    background-color: var(--dropZoneActiveBg);
}

.uploadDropzone .dropzoneIcon {
    font-size: 48px;
    color: var(--accent);
    opacity: 0.7;
}

.uploadDropzone .dropzoneText {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fgColor);
    margin: 0 0 6px 0;
}

.uploadDropzone .dropzoneSubtext {
    font-size: 0.8rem;
    color: var(--fgColorMuted);
    margin: 0 0 10px 0;
}

.uploadOverallProgress {
    margin-bottom: 16px;
    padding: 12px 14px;
    background-color: var(--mainAreaBg);
    border: 1px solid var(--cardBorder);
    border-radius: var(--borderRadius);
}

.uploadOverallProgress .progressLabel {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--fgColorMuted);
    margin-bottom: 10px;
}

.uploadOverallProgress .progressBar {
    height: 8px;
    background-color: var(--progressBg);
    border-radius: 4px;
    overflow: hidden;
}

.uploadOverallProgress .progressFill {
    height: 100%;
    background-color: var(--progressFill);
    border-radius: 4px;
    transition: width 0.2s ease;
}

.uploadOverallProgress .progressFill.animated {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    animation: progressStripes 1s linear infinite;
}

@keyframes progressStripes {
    0% {
        background-position: 40px 0;
    }

    100% {
        background-position: 0 0;
    }
}

.uploadFileList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uploadFileItem {
    padding: 10px 12px;
    background-color: var(--mainAreaBg);
    border: 1px solid var(--cardBorder);
    border-radius: var(--borderRadius);
    transition: border-color 0.2s ease;
}

.uploadFileItem.invalid {
    border-color: var(--dangerColor);
    background-color: var(--dangerColorLight);
}

.uploadFileItem.success {
    border-color: var(--successColor);
    background-color: var(--successColorLight);
}

.uploadFileItem.failed {
    border-color: var(--dangerColor);
}

.uploadFileItem .fileItemHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uploadFileItem .fileItemInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.uploadFileItem .fileIcon {
    font-size: 22px;
    color: var(--accent);
    flex-shrink: 0;
}

.uploadFileItem .fileItemMeta {
    min-width: 0;
    flex: 1;
}

.uploadFileItem .fileName {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fgColor);
}

.uploadFileItem .fileSize {
    display: block;
    font-size: 0.8rem;
    color: var(--fgColorMuted);
    margin-top: 2px;
}

.uploadFileItem .fileStatusIcon {
    font-size: 22px;
    flex-shrink: 0;
}

.uploadFileItem .fileStatusIcon.statusSuccess {
    color: var(--successColor);
}

.uploadFileItem .fileStatusIcon.statusError {
    color: var(--dangerColor);
}

.uploadFileItem .fileItemError {
    font-size: 0.8rem;
    color: var(--dangerColor);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cardBorder);
}

.uploadFileItem .fileProgressBar {
    height: 4px;
    background-color: var(--cardBorder);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.uploadFileItem .fileProgressBar .progressFill {
    height: 100%;
    background-color: var(--accent);
    border-radius: 2px;
    transition: width 0.15s ease;
}

.rteContainer {
    border: 2px solid var(--inputBorderColor);
    border-radius: var(--borderRadius);
    overflow: hidden;
    background-color: var(--mainAreaBg);
    transition: border-color 0.2s ease;
}

.rteContainer:focus-within {
    outline: none;
    border: 2px solid var(--inputFocusBorderColor);
    box-shadow: 0 0 0 4px var(--inputFocusBoxShadow);
}

.rteToolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0.35rem 0.5rem;
    border-bottom: 2px solid var(--inputBorderColor);
    background: var(--bg-subtle);
    flex-wrap: wrap;
}

.rteBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radiusSm);
    background: transparent;
    color: var(--fg2);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}

.rteBtn:hover {
    background: var(--line);
    color: var(--fg);
}

.rteContainer:focus-within .rteBtn:hover {
    background: var(--line2);
}

.rteBtn.rteActive {
    background: var(--accentSoft);
    color: var(--accent);
}

.rteBtn.rteDisabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.rteBtn .ms {
    font-size: 1.15rem;
}

.rteSeparator {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 4px;
}

.rteEditable .ql-editor {
    min-height: 180px;
    max-height: 500px;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.rteEditable .ql-editor p {
    margin: 0 0 0.5rem 0;
}

.rteEditable .ql-editor h1,
.rteEditable .ql-editor h2,
.rteEditable .ql-editor h3,
.rteEditable .ql-editor h4,
.rteEditable .ql-editor h5,
.rteEditable .ql-editor h6 {
    margin: 0.75rem 0 0.5rem 0;
    color: var(--text-primary);
}

.rteEditable .ql-editor h3 {
    font-size: 1.1rem;
}

.rteEditable .ql-editor ul,
.rteEditable .ql-editor ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.rteEditable .ql-editor a {
    color: var(--accent);
    text-decoration: underline;
}

.rteEditable .ql-editor a:hover {
    cursor: pointer;
}

.rteEditable .ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.rteEditable .ql-editor.ql-blank::before {
    color: var(--text-muted);
    font-style: normal;
    left: 1rem;
    right: 1rem;
}

.rteEditable .ql-container {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    border: none;
}

.rteLinkDialog {
    border-bottom: 2px solid var(--inputBorderColor);
    padding: 10px;
}

.rteLinkDialogInner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rteLinkField {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 200px;
}

.rteLinkField label {
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    margin-bottom: 0 !important;
}

.rteLinkField input {
    flex: 1;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    outline: none;
}

.rteLinkCheckbox {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.rteLinkCheckbox label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.rteLinkActions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.rteLinkActions .btnSm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.rteMediaPickerContent {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rteMediaPickerHeader {
    display: grid;
    grid-gap: 10px;
    align-items: center;
    grid-template-columns: 1fr auto;
}

.rteMediaPickerHeader .rteMediaSearch {
    width: 100%;
    margin: 0;
}

.rteMediaPickerHeader .rteMediaSearch input {
    width: 100%;
}

.rteMediaSearch {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rteMediaGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.rteMediaItem {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rteMediaItem:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.rteMediaPreview {
    aspect-ratio: 1/1;
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rteMediaPreview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rteMediaPreview .ms {
    font-size: 2rem;
    color: var(--text-muted);
}

.rteMediaName {
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rteMediaEmpty,
.rteMediaLoading {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.rteMediaEmpty .ms,
.rteMediaLoading .ms {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.rteUploadContent {
    padding: 0.5rem 0;
}

.uploadDropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
    color: var(--text-secondary);
}

.uploadDropzone.dragover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

.uploadDropzone .dropzoneIcon {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.uploadDropzone .uploadHint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0.5rem 0;
}

.uploadFileInfo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.uploadProgress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.progressBar {
    flex: 1;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.progressFill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    width: 0;
    transition: width 0.2s ease;
}

rteTenantSelect {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

rteTenantSelect label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.rteTenantName {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
}

.rteTenantList {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rteTenantItem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    text-align: left;
    width: 100%;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.rteTenantItem:hover {
    border-color: var(--accent);
    background: var(--card2);
}

.rteTenantItem .ms {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.ql-editor img {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
    max-width: 100%;
    height: auto;
}

.ql-editor img:hover {
    border-color: var(--primary-light);
}

.ql-editor img.rteImageSelected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

.rteImageToolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px;
    background-color: var(--bgColor);
    border: 2px solid var(--fgColorMuted);
    border-radius: var(--borderRadius);
    flex-wrap: wrap;
    width: fit-content;
    box-shadow: var(--boxShadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.rteImgBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radiusSm);
    background: transparent;
    color: var(--fg2);
    cursor: pointer;
    padding: 0;
}

.rteImgBtn:hover {
    background: var(--line);
    color: var(--fg);
}

.rteImgBtn.rteActive {
    background: var(--accentSoft);
    color: var(--accent);
}

.rteImgBtn .ms {
    font-size: 1.1rem;
}

.rteImgWidthInput {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rteWidthField {
    width: 60px;
    padding: 0.2rem 0.35rem;
    border: 2px solid var(--inputBorderColor);
    border-radius: var(--borderRadius);
    font-size: 0.8rem;
    text-align: right;
}

.rteWidthField:focus {
    border-color: var(--primary);
    outline: none;
}

.rteWidthField::-webkit-inner-spin-button,
.rteWidthField::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rteWidthField {
    -moz-appearance: textfield;
}

.rteWidthUnit {
    font-size: 0.75rem;
    color: var(--text-muted);
}

[data-copy] {
    cursor: pointer;
    border-radius: var(--borderRadius);
    padding: 8px 4px;
}

[data-copy]:hover {
    background-color: var(--buttonFlatHoverBg);
}

[data-copy][data-copy-active=true] {
    pointer-events: none;
}

.copyFeedback {
    animation: copyFeedbackPulse 0.3s ease;
}

@keyframes copyFeedbackPulse {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.snackbarContainer {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}

.snackbarContainer--top-left {
    top: 0;
    left: 0;
    align-items: flex-start;
}

.snackbarContainer--top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.snackbarContainer--top-right {
    top: 0;
    right: 0;
    align-items: flex-end;
}

.snackbarContainer--middle-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    align-items: flex-start;
}

.snackbarContainer--middle-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
}

.snackbarContainer--middle-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    align-items: flex-end;
}

.snackbarContainer--bottom-left {
    bottom: 0;
    left: 0;
    align-items: flex-start;
}

.snackbarContainer--bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.snackbarContainer--bottom-right {
    bottom: 0;
    right: 0;
    align-items: flex-end;
}

.snackbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    min-width: 260px;
    max-width: 480px;
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--line2);
    border-radius: var(--radiusLg);
    box-shadow: var(--shadowLg);
    font-size: 13.5px;
    line-height: 1.5;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.snackbarVisible {
    opacity: 1;
    transform: translateY(0);
}

.snackbarHiding {
    opacity: 0;
    transform: translateY(-8px);
}

.snackbarContainer--top-left .snackbar,
.snackbarContainer--top-center .snackbar,
.snackbarContainer--top-right .snackbar {
    transform: translateY(-12px);
}

.snackbarContainer--top-left .snackbarVisible,
.snackbarContainer--top-center .snackbarVisible,
.snackbarContainer--top-right .snackbarVisible {
    transform: translateY(0);
}

.snackbarContainer--top-left .snackbarHiding,
.snackbarContainer--top-center .snackbarHiding,
.snackbarContainer--top-right .snackbarHiding {
    transform: translateY(8px);
}

.snackbar--info {
    background: linear-gradient(var(--infoSoft), var(--infoSoft)), var(--card);
    border-color: var(--accentLine);
}

.snackbar--info .snackbarIcon {
    color: var(--info);
}

.snackbar--success {
    background: linear-gradient(var(--okSoft), var(--okSoft)), var(--card);
    border-color: var(--okLine);
}

.snackbar--success .snackbarIcon {
    color: var(--ok);
}

.snackbar--warning {
    background: linear-gradient(var(--warnSoft), var(--warnSoft)), var(--card);
    border-color: var(--warnLine);
}

.snackbar--warning .snackbarIcon {
    color: var(--warn);
}

.snackbar--error {
    background: linear-gradient(var(--dangerSoft), var(--dangerSoft)), var(--card);
    border-color: var(--dangerLine);
}

.snackbar--error .snackbarIcon {
    color: var(--danger);
}

.snackbarIcon {
    flex-shrink: 0;
    font-size: 20px;
}

.snackbarMessage {
    flex: 1;
    word-break: break-word;
}

.snackbarCloseBtn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    opacity: 0.8;
    transition: opacity 0.15s, background 0.15s;
    display: flex;
    align-items: center;
}

.snackbarCloseBtn:hover {
    opacity: 1;
    background: var(--line);
}

.snackbarCloseBtn .ms {
    font-size: 18px;
}

.processTimeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 20px 0;
}

.timelineStep {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    position: relative;
}

.timelineStep:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 36px;
    bottom: -12px;
    width: 2px;
    background-color: var(--cardBorder);
}

.timelineStep .stepIcon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
}

.timelineStep .stepIcon .ms {
    font-size: 18px;
}

.timelineStep .stepContent {
    flex: 1;
    min-width: 0;
}

.timelineStep .stepContent .stepTitle {
    font-weight: 500;
    color: var(--fgColor);
    margin: 0 0 4px 0;
    font-size: 0.95rem;
}

.timelineStep .stepContent .stepMessage {
    font-size: 0.85rem;
    color: var(--fgColorMuted);
    margin: 0;
}

.timelineStep.pending {
    opacity: 0.5;
}

.timelineStep.pending .stepIcon {
    background-color: var(--cardBorder);
    color: var(--fgColorMuted);
}

.timelineStep.in-progress {
    opacity: 1;
}

.timelineStep.in-progress .stepIcon {
    background-color: var(--accent);
    color: #ffffff;
    animation: stepPulse 1.5s ease-in-out infinite;
}

.timelineStep.in-progress .stepTitle {
    color: var(--accent);
}

.timelineStep.success {
    opacity: 1;
}

.timelineStep.success .stepIcon {
    background-color: var(--notificationTypeSuccess);
    color: #ffffff;
}

.timelineStep.success:not(:last-child)::before {
    background-color: var(--notificationTypeSuccess);
}

.timelineStep.error {
    opacity: 1;
}

.timelineStep.error .stepIcon {
    background-color: var(--notificationTypeError);
    color: #ffffff;
}

.timelineStep.error .stepTitle {
    color: var(--notificationTypeError);
}

.timelineStep.error .stepMessage {
    color: var(--notificationTypeError);
}

.timelineStep.skipped {
    opacity: 0.6;
}

.timelineStep.skipped .stepIcon {
    background-color: transparent;
    border: 2px solid var(--cardBorder);
    color: var(--fgColorMuted);
}

.timelineStep.warning {
    opacity: 1;
}

.timelineStep.warning .stepIcon {
    background-color: #f59e0b;
    color: #ffffff;
}

@keyframes stepPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(111, 36, 155, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(111, 36, 155, 0);
    }
}

.timelineStats {
    margin-top: 20px;
    padding: 16px;
    background-color: var(--infoBoxBg);
    border-radius: var(--borderRadius);
}

.timelineStats h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--fgColor);
}

.timelineStats .statsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.timelineStats .statItem {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.timelineStats .statItem .statLabel {
    color: var(--fgColorMuted);
}

.timelineStats .statItem .statValue {
    font-weight: 600;
    color: var(--fgColor);
}

.maintenancePanel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.maintenancePanel .maintenanceStatus {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--okLine);
    border-radius: var(--radiusLg);
    background: var(--okSoft);
}

.maintenancePanel .maintenanceStatus .statusIcon {
    font-size: 26px;
    color: var(--ok);
}

.maintenancePanel .maintenanceStatus .statusText {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.maintenancePanel .maintenanceStatus .statusLabel {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fg);
}

.maintenancePanel .maintenanceStatus .statusDetail {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fg);
}

.maintenancePanel .maintenanceStatus .statusMeta {
    font-size: 12px;
    color: var(--fg2);
}

.maintenancePanel .maintenanceStatus.isScheduled {
    border-color: var(--warnLine);
    background: var(--warnSoft);
}

.maintenancePanel .maintenanceStatus.isScheduled .statusIcon {
    color: var(--warn);
}

.maintenancePanel .maintenanceStatus.isLocked {
    border-color: var(--dangerLine);
    background: var(--dangerSoft);
}

.maintenancePanel .maintenanceStatus.isLocked .statusIcon {
    color: var(--danger);
}

.maintenancePanel .maintenanceStatus.isInactive {
    align-items: center;
}

.maintenancePanel .maintenanceActions {
    display: flex;
    flex-direction: column;
}

.maintenancePanel .maintenanceActions .sectionLabel {
    margin: 18px 0 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.maintenancePanel .maintenanceActions .sectionLabel:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.maintenanceActionBtn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background: var(--card);
    color: var(--fg);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.maintenanceActionBtn:hover {
    border-color: var(--line2);
    background: var(--card2);
}

.maintenanceActionBtn .ms {
    font-size: 19px;
    color: var(--fg2);
}

.maintenanceActionBtn.maintenanceActionBtnDanger {
    border-color: var(--dangerLine);
    color: var(--danger);
}

.maintenanceActionBtn.maintenanceActionBtnDanger:hover {
    border-color: var(--danger);
    background: var(--dangerSoft);
}

.maintenanceActionBtn.maintenanceActionBtnDanger .ms {
    color: var(--danger);
}

.maintenancePanel .maintenanceActions .actionHint {
    margin: 6px 2px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fg2);
}

.maintenanceActivateForm {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.maintenanceUntilRow {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.maintenanceDateBtn {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background: var(--sunken);
    color: var(--fg3);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.maintenanceDateBtn:hover {
    border-color: var(--line2);
}

.maintenanceDateBtn:focus-visible,
.maintenanceDateBtn.datepickerTriggerOpen {
    outline: none;
    border-color: var(--accent);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--accentSoft);
}

.maintenanceDateBtn.hasValue {
    color: var(--fg);
}

.maintenanceDateBtn .ms {
    flex: none;
    font-size: 17px;
    color: var(--fg3);
}

.maintenanceUntilRow input[name="untilTime"] {
    box-sizing: border-box;
    width: 112px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background: var(--sunken);
    color: var(--fg);
    font-family: inherit;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
}

.maintenanceUntilRow input[name="untilTime"]:hover {
    border-color: var(--line2);
}

.maintenanceUntilRow input[name="untilTime"]:focus,
.maintenanceUntilRow input[name="untilTime"].timepickerTriggerOpen {
    border-color: var(--accent);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--accentSoft);
}

.maintenanceActivateForm .maintenanceSubmit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.maintenanceModalForm {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.maintenanceModalForm .modalDescription {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg2);
}

.maintenanceModalForm .maintenanceModalButtons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

footer {
    position: relative;
    z-index: 10;
    border-top: 1px solid var(--line);
    background-color: var(--chrome);
    padding: 28px 20px;
}

footer .footerInner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

footer .footerCopy {
    color: var(--fg3);
    font-size: 0.9rem;
}

footer .footerNav {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

footer .footerNav a {
    color: var(--fg2);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

footer .footerNav a:hover {
    color: var(--accent);
}

.pageAuth {
    min-height: 100vh;
    min-height: 100dvh;
}

.pageAuth>header,
.pageAuth>footer {
    flex: 0 0 auto;
}

.pageAuth .contentWrapper {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.loginWrapper {
    display: flex;
    flex: 1 0 auto;
    width: 100%;
    min-height: 0;
}

.loginWrapper .leftPanel {
    box-sizing: border-box;
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    background-color: var(--chrome);
    overflow: hidden;
}

.loginWrapper .leftPanel .bubble {
    position: absolute;
    background-color: var(--bubbleColor);
    border-radius: 50%;
    filter: blur(40px);
    -webkit-filter: blur(40px);
    opacity: 0.7;
    z-index: 0;
    animation: floatBubble 10s infinite ease-in-out;
}

.loginWrapper .leftPanel .b1 {
    width: 300px;
    height: 300px;
    top: -50px;
    left: -50px;
    animation-duration: 7s;
}

.loginWrapper .leftPanel .b2 {
    width: 200px;
    height: 200px;
    right: 10%;
    bottom: 10%;
    animation-duration: 5s;
    animation-delay: 1s;
}

.loginWrapper .leftPanel .b3 {
    width: 150px;
    height: 150px;
    top: 40%;
    left: 40%;
    animation-duration: 8s;
    animation-delay: 2s;
}

.loginWrapper .leftPanel .b4 {
    width: 80px;
    height: 80px;
    top: 15%;
    right: 20%;
    animation-duration: 4s;
    animation-delay: 0.5s;
}

.loginWrapper .leftPanel .b5 {
    width: 220px;
    height: 220px;
    bottom: -20px;
    left: 15%;
    animation-duration: 6s;
    animation-delay: 1.5s;
}

@keyframes floatBubble {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(40px, -60px);
    }
}

.loginWrapper .leftPanel .thoughtContainer {
    position: relative;
    z-index: 1;
    max-width: 500px;
}

.loginWrapper .leftPanel .thoughtContainer .thoughtTitle {
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: 0.1rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

.loginWrapper .leftPanel .thoughtContainer .thoughtText {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    min-height: 120px;
    white-space: pre-line;
}

.loginWrapper .leftPanel .thoughtContainer .cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: var(--fg);
    margin-left: 4px;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.loginWrapper .rightPanel {
    box-sizing: border-box;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    position: relative;
    background-color: var(--bg);
    border-left: 1px solid var(--line);
    background-image: radial-gradient(var(--line) 1px, transparent 1px);
    background-size: 24px 24px;
}

.loginWrapper .rightPanel .loginBox {
    width: 100%;
    max-width: 400px;
    z-index: 10;
}

.loginWrapper .rightPanel .loginBox .loginHeader {
    margin-bottom: 40px;
    text-align: center;
}

.loginWrapper .rightPanel .loginBox .loginHeader h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.loginWrapper .rightPanel .loginBox .loginHeader p {
    color: var(--fg2);
}

.loginWrapper .rightPanel .loginBox .linksBox {
    margin-top: 20px;
}

.authFlowWrapper .thoughtContainer .thoughtText span {
    display: block;
}

.authFlowWrapper .loginBox .loginHeader {
    margin-bottom: 28px;
}

.authFlowWrapper .linksBox {
    text-align: center;
}

.authFlowWrapper .linksBox a {
    color: var(--accent);
    font-weight: 600;
}

.loginForm,
.authForm {
    padding: 20px;
    border-radius: var(--radiusXl);
    background-color: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.passwordResetForm .fieldHint {
    color: var(--fg2);
    line-height: 1.45;
}

.passwordResetForm .formSubmit {
    justify-content: center;
}

.successBox {
    margin: 20px 0;
    padding: 10px 12px;
    border-radius: var(--radiusLg);
    color: var(--ok);
    width: 100%;
    box-sizing: border-box;
    background-color: var(--okSoft);
    border: 1px solid var(--okLine);
}

.successBox .successMsg {
    text-align: center;
}

.authMessage {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

.authMessage .authMessageIcon {
    color: var(--accent);
    font-size: 1.35rem;
}

.authMessage .successMsg,
.authMessage .errorMsg {
    margin: 0;
    text-align: left;
    line-height: 1.45;
}

.authSecondaryActions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.authSecondaryActions .btn {
    flex: 1 1 auto;
    justify-content: center;
}

@media (max-width: 768px) {
    .loginWrapper {
        flex-direction: column;
    }

    .loginWrapper .leftPanel,
    .loginWrapper .rightPanel {
        width: 100%;
    }

    .loginWrapper .leftPanel {
        min-height: 260px;
        padding: 36px 28px;
    }

    .loginWrapper .rightPanel {
        flex: 1;
        padding: 36px 24px;
        box-shadow: none;
    }
}

@media (max-width: 576px) {
    .loginWrapper .leftPanel {
        min-height: 220px;
        padding: 28px 20px;
    }

    .loginWrapper .leftPanel .thoughtContainer .thoughtTitle {
        font-size: 0.95rem;
    }

    .loginWrapper .leftPanel .thoughtContainer .thoughtText {
        min-height: 80px;
        font-size: 1.45rem;
    }

    .loginWrapper .rightPanel {
        padding: 28px 18px;
    }

    .loginWrapper .rightPanel .loginBox {
        max-width: 100%;
    }

    .authSecondaryActions {
        flex-direction: column;
    }
}

.adminLoginWrapper {
    box-sizing: border-box;
    display: flex;
    flex: 1 0 auto;
    width: 100%;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.adminLoginWrapper .mfaQRCode {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.adminLoginWrapper .mfaQRCodeImage {
    width: 196px;
    height: 196px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background-color: #ffffff;
    image-rendering: pixelated;
}

.adminLoginWrapper .mfaRecoveryCodeList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.adminLoginWrapper .mfaRecoveryCodeList li {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background-color: var(--sunken);
}

.adminLoginWrapper .mfaRecoveryCodeList code {
    color: var(--fg);
    font-family: var(--fontMono);
    font-size: 0.95rem;
    font-weight: 700;
}

.adminLoginWrapper .mfaRecoveryActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
}

.adminLoginWrapper .loginFormWrapper {
    width: 100%;
    max-width: 520px;
    padding: 32px;
    border-radius: var(--radius2xl);
    background-color: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    text-align: center;
}

.adminLoginWrapper .formIcon span {
    font-size: 3rem;
    color: var(--accent);
}

.adminLoginWrapper .formTitle {
    margin-top: 8px;
    font-size: 1.25rem;
    font-weight: 700;
}

.adminLoginWrapper .formHint {
    margin-top: 10px;
    color: var(--fg2);
    font-size: 0.95rem;
    line-height: 1.5;
}

.adminLoginWrapper .adminLoginForm {
    margin-top: 22px;
    text-align: left;
}

.adminLoginWrapper .adminLoginForm .mfaFormActions>.btn {
    flex: 1 1 0;
}

.adminLoginWrapper .mfaReadonlyEmail {
    color: var(--fg2);
    cursor: default;
}

.adminLoginWrapper .mfaCodeCells {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.adminLoginWrapper .mfaCodeCell {
    width: 100%;
    aspect-ratio: 1;
    min-height: 54px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background-color: var(--sunken);
    color: var(--fg);
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.adminLoginWrapper .mfaCodeCell:hover {
    border-color: var(--line2);
}

.adminLoginWrapper .mfaCodeCell:focus {
    border-color: var(--accent);
    background-color: var(--card);
    box-shadow: 0 0 0 3px var(--accentSoft);
}

.adminLoginWrapper .mfaCodeCell[aria-invalid=true] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--dangerSoft);
}

.adminLoginWrapper .mfaCodeError {
    margin-top: 8px;
    color: var(--danger);
    font-size: 0.9rem;
    line-height: 1.4;
}

.adminLoginWrapper .mfaSetupNotice,
.adminLoginWrapper .mfaSetupBox {
    margin-top: 22px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background-color: var(--sunken);
    text-align: left;
}

.adminLoginWrapper .mfaSetupNotice {
    display: flex;
    gap: 12px;
}

.adminLoginWrapper .mfaSetupNotice .ms {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 1.6rem;
}

.adminLoginWrapper .mfaSetupNotice strong {
    display: block;
    margin-bottom: 4px;
    color: var(--fg);
}

.adminLoginWrapper .mfaSetupNotice span:last-child {
    color: var(--fg2);
    line-height: 1.45;
}

.adminLoginWrapper .mfaSetupBoxLabel {
    display: block;
    margin-bottom: 6px;
    color: var(--fg2);
    font-size: 0.85rem;
    font-weight: 700;
}

.adminLoginWrapper .mfaSetupSecret,
.adminLoginWrapper .mfaSetupUri {
    display: block;
    overflow-wrap: anywhere;
    font-family: var(--fontMono);
}

.adminLoginWrapper .mfaSetupSecret {
    color: var(--fg);
    font-size: 1rem;
    font-weight: 700;
}

.adminLoginWrapper .mfaSetupUri {
    margin-top: 10px;
    color: var(--fg2);
    font-size: 0.8rem;
    line-height: 1.45;
}

@media (max-width: 520px) {
    .adminLoginWrapper {
        padding: 16px;
    }

    .adminLoginWrapper .loginFormWrapper {
        padding: 24px;
    }

    .adminLoginWrapper .mfaCodeCells {
        gap: 6px;
    }

    .adminLoginWrapper .mfaCodeCell {
        min-height: 46px;
        font-size: 1.15rem;
    }

    .adminLoginWrapper .mfaRecoveryActions {
        grid-template-columns: 1fr;
    }
}

.adminLoginWrapper .loginFormWrapper.loginFormWrapperWide {
    max-width: 660px;
}

.mfaMethodCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin: 22px 0 0;
}

.mfaMethodCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 22px 20px;
    text-align: left;
    color: var(--fg);
    background: var(--card2);
    border: 1px solid var(--line);
    border-radius: var(--radiusXl);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mfaMethodCard:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.mfaMethodCard .mfaMethodIcon {
    font-size: 30px;
    color: var(--accent);
}

.mfaMethodCard .mfaMethodTitle {
    font-size: 1.05rem;
    font-weight: 600;
}

.mfaMethodCard .mfaMethodDesc {
    flex-grow: 1;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--fg2);
}

.mfaMethodCard .btn {
    width: 100%;
    margin-top: 12px;
    justify-content: center;
}

.adminLoginWrapper .mfaFormActions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 0;
}

.passkeyLoginError {
    margin: 0 0 16px;
    color: var(--danger);
    font-size: 0.9rem;
    line-height: 1.4;
}

@media (max-width: 560px) {
    .mfaMethodCards {
        grid-template-columns: 1fr;
    }
}

.adminLoginWrapper .mfaMethods {
    margin-top: 22px;
    text-align: left;
}

.adminLoginWrapper .mfaMethodInput {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.adminLoginWrapper .mfaMethodSwitch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

.adminLoginWrapper .mfaMethodTab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background-color: var(--card2);
    color: var(--fg2);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.adminLoginWrapper .mfaMethodTab[hidden] {
    display: none;
}

.adminLoginWrapper .mfaMethodTab .ms {
    font-size: 1.5rem;
    color: var(--fg3);
    transition: color 0.15s ease;
}

.adminLoginWrapper .mfaMethodTab:hover {
    border-color: var(--accent);
    color: var(--fg);
}

.adminLoginWrapper .mfaPanel {
    display: none;
    margin-top: 18px;
}

.adminLoginWrapper .mfaPanel .adminLoginForm {
    margin-top: 0;
}

.adminLoginWrapper .mfaPanelHint {
    margin: 0 0 16px;
    color: var(--fg2);
    font-size: 0.95rem;
    line-height: 1.5;
}

.adminLoginWrapper .mfaPanelActions {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.adminLoginWrapper .mfaPanelActions .btn {
    width: 100%;
    justify-content: center;
}

#mfaMethodWebauthn:checked ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodWebauthn"],
#mfaMethodTotp:checked ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodTotp"],
#mfaMethodEmail:checked ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodEmail"],
#mfaMethodRecovery:checked ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodRecovery"] {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--fg);
}

#mfaMethodWebauthn:checked ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodWebauthn"] .ms,
#mfaMethodTotp:checked ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodTotp"] .ms,
#mfaMethodEmail:checked ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodEmail"] .ms,
#mfaMethodRecovery:checked ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodRecovery"] .ms {
    color: var(--accent);
}

#mfaMethodWebauthn:focus-visible ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodWebauthn"],
#mfaMethodTotp:focus-visible ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodTotp"],
#mfaMethodEmail:focus-visible ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodEmail"],
#mfaMethodRecovery:focus-visible ~ .mfaMethodSwitch .mfaMethodTab[for="mfaMethodRecovery"] {
    box-shadow: 0 0 0 3px var(--accentSoft);
}

#mfaMethodWebauthn:checked ~ .mfaPanel[data-mfa-panel="webauthn"],
#mfaMethodTotp:checked ~ .mfaPanel[data-mfa-panel="totp"],
#mfaMethodEmail:checked ~ .mfaPanel[data-mfa-panel="email"],
#mfaMethodRecovery:checked ~ .mfaPanel[data-mfa-panel="recoveryCode"] {
    display: block;
}

.adminLoginWrapper .mfaEmailAddressList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.adminLoginWrapper .mfaEmailAddressOption {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radiusLg);
    background-color: var(--card2);
    color: var(--fg);
    cursor: pointer;
}

.adminLoginWrapper .mfaEmailAddressOption:hover {
    border-color: var(--accent);
}

.adminLoginWrapper .mfaEmailAddressOption input {
    margin: 0;
}

.adminLoginWrapper .mfaEmailAddressSingle {
    margin: 0 0 16px;
    color: var(--fg);
    font-weight: 600;
}

.adminLoginWrapper .mfaEmailPinStatus {
    margin-top: 14px;
    color: var(--fg2);
    font-size: 0.9rem;
    line-height: 1.4;
}

.adminLoginWrapper .mfaEmailPinError {
    margin-top: 14px;
    color: var(--danger);
    font-size: 0.9rem;
    line-height: 1.4;
}

.adminLoginWrapper .mfaEmailPinForm {
    margin-top: 16px;
}

@media (max-width: 420px) {
    .adminLoginWrapper .mfaMethodSwitch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}