/* /Components/CustomComponents/CanvasComponent.razor.rz.scp.css */
.Element[b-474bftr1g0] {
    padding: 0px;
    margin: 0px;
    position: absolute;
    cursor : grab;
}
.Element:hover[b-474bftr1g0] {
    outline: 1px dashed rgba(105, 111, 199) !important;
}



.MarginLine[b-474bftr1g0] {
    position: absolute;
    pointer-events: none;
    z-index: 100000;
    opacity: 0.5;
}
.VerticalSnapLine[b-474bftr1g0] {
    position: absolute;
    top: 0;
    z-index: 999;
    width: 1px;
    opacity: 0.7;
    background-color: var(--ThemeColor);
    transform: translateX(-50%);
    pointer-events: none;
}
.HorizontalSnapLine[b-474bftr1g0] {
    position: absolute;
    left: 0;
    height: 1px;
    background: var(--ThemeColor);
    opacity: 0.7;
    z-index: 999;
    transform: translateY(-50%);
    pointer-events: none;
}



.RotateButton[b-474bftr1g0] {
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    z-index: 100001;

    background-color: white;
    color: var(--ThemeColor);
    border: 1px solid var(--ThemeColor);
    border-radius: 50%;
    padding: 5px;

    cursor: n-resize;
    pointer-events: auto;
    margin-left: -5px;
    transition: opacity 0.15s ease;
}
[b-474bftr1g0] .RotateButton .RotateIcon{
}
.RotateButton:hover[b-474bftr1g0] {
    background-color: var(--ThemeColor);
    color: white;
}
[b-474bftr1g0] .RotateButton svg {
    width: 40px;
    height: 40px;
    margin: 0px;
    padding: 0px;
}
@media (pointer: coarse) {
    .RotateButton[b-474bftr1g0] {
        padding: 10px;
    }
    [b-474bftr1g0] .RotateButton svg {
        width: 52px;
        height: 52px;
    }
}

.ButtonsContainer[b-474bftr1g0] {
    display: flex;
    justify-content: space-between;
    justify-content: center;
    align-items: center;
    gap: 7px;
    position: absolute;
    z-index: 100001;
    padding: 7px 10px;
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid grey;
    background: white;
}
[b-474bftr1g0] .ButtonsContainer svg {
    width: 40px !important;
    height: 40px !important;
    cursor: pointer;
}

.NumericalContainer[b-474bftr1g0] {
    display : flex; 
    justify-content : center; 
    align-items : center; 
    width : 170px; 
    gap: 15px;

    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid grey;
    background: white;

    position: absolute;
    z-index : 100001;
}
.NumericalContainer span[b-474bftr1g0] {
    color: black;
    font-size : 20px !important;
    font-family : Fredoka;
    text-align:center;
}




.ResizingCorner[b-474bftr1g0] {
    position: absolute;
    z-index: 2000;
    width: 20px;
    height: 20px;
    /*    background: var(--ThemeShadowColor);*/
    background: var(--ThemeColor);
    border: 1px solid white;
    border-radius: 50%;
}

.ResizingSideContainer[b-474bftr1g0] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    padding: 10px;
    border-radius: 10px;
    background-color: transparent;
    transition: 0.3s;
}
.ResizingSideContainer:hover[b-474bftr1g0] {
    background-color: lightgray !important;
}
.ResizingSideContainer:hover .ResizingSide[b-474bftr1g0] {
    background-color: var(--ThemeColor) !important;
    border: 1px solid white;
}
.ResizingSide[b-474bftr1g0] {
    background-color: white;
    border-radius: 7px;
    transition: 0.3s;
    border : 2px solid var(--ThemeColor);
}
/* /Components/CustomComponents/CanvasPlaceholderComponent.razor.rz.scp.css */
.CanvasWrapper[b-ds8fgtdf7u] {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin: 0px auto;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    box-shadow: 0px 0px 15px 2px var(--ThemeShadowColor);
    margin-top: 10px;
}

.Canvas[b-ds8fgtdf7u] {
    overflow: hidden;
    transform-origin: top center;
    transition: 0.3s ease;
    background-color: white;
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
    display: inline-flex;
    flex-direction : column;
        gap : 20px;
}
    .Canvas > div[b-ds8fgtdf7u] {
        background-color : grey;
        flex : 1;
        border-radius : 10px;
        animation: PlaceHolder-b-ds8fgtdf7u 1.5s infinite ease-in-out;
    }

@keyframes PlaceHolder-b-ds8fgtdf7u{
    0% {opacity: 0.1;}
    50% {opacity: 0.4;}
    100% {opacity: 0.1;}
}


/* /Components/CustomComponents/CanvasPreviewComponent.razor.rz.scp.css */
.ZoomContainer[b-kn5qaleucj] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10px;
}

.ZoomContainer > img[b-kn5qaleucj] {
    cursor: pointer;
}

.CanvasWrapper[b-kn5qaleucj] {
    display: flex;
    flex-direction : column;
    justify-content: start;
    align-items : center;
    scroll-behavior: smooth;
    overscroll-behavior: contain;

    padding : 10px 0px;
    margin : 0px;
    transform-origin: center center;
}
.Canvas[b-kn5qaleucj] {
    transform-origin: top center;
    transition: 0.3s ease;
    background-color: white;
    margin: 0px;
    padding: 0px;
    outline: none !important;
    position: relative;
    display: inline-block;
    user-select: none;
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none;
    transition: none;
    overflow: hidden;
    box-shadow: 0px 0px 15px 2px var(--ThemeShadowColor);
}


.Element[b-kn5qaleucj] {
    padding: 0px;
    margin: 0px;
    position: absolute;
    transition: 0.4s outline;
}
.Paragraph[b-kn5qaleucj] {
    outline: none;
    color: white;
    resize: none;
    padding: 5px;
    white-space: pre;

}




















/* /Components/CustomComponents/Cards/DraftTemplateCardComponent.razor.rz.scp.css */
.StateContainer[b-4xta9s5h8m] {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 24px;
    border: 1px dashed rgb(from var(--ThemeForeColor) r g b / 0.12);
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
}

.EmptyState[b-4xta9s5h8m] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.70);
    text-align: center;
    padding: 30px 20px;
}

.EmptyState strong[b-4xta9s5h8m] {
    font-size: 18px;
    color: var(--ThemeForeColor);
}

.EmptyState span[b-4xta9s5h8m] {
    font-size: 13px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
}

.EmptyStateIcon[b-4xta9s5h8m] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    color: var(--ThemeColor);
}


.Card[b-4xta9s5h8m] {
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;


    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.06) inset;
}

.Card:hover[b-4xta9s5h8m] {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
    border-color: rgb(from var(--ThemeColor) r g b / 0.20);
}
.CardImageWrap[b-4xta9s5h8m] {
    position: relative;
    z-index: 0;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 360px;
    padding: 26px 22px 18px 22px;

    background:
        radial-gradient(circle at top, rgb(from var(--ThemeColor) r g b / 0.08), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #f8f8fb 100%);
    border-bottom: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

.CardImageWrap[b-4xta9s5h8m]::before {
    content: "";
    position: absolute;
    width: 78%;
    height: 26px;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgb(0 0 0 / 0.12);
    filter: blur(16px);
    z-index: 0;
}

.CardImageWrap[b-4xta9s5h8m]::after {
    content: "";
    position: absolute;
    inset-inline: 18px;
    top: 14px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgb(255 255 255 / 0.95), transparent);
    pointer-events: none;
    z-index: 2;
}

/* real image shadow wrapper */
.CVImageShadow[b-4xta9s5h8m] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    border-radius: 18px;
    box-shadow:
        0 14px 30px rgb(0 0 0 / 0.10),
        0 4px 10px rgb(0 0 0 / 0.06);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.CVImage[b-4xta9s5h8m] {
    display: block;
    max-width: 100%;
    max-height: 305px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: white;
    transition: transform 0.45s ease;
    box-shadow: none;
}

.Card:hover .CVImage[b-4xta9s5h8m] {
    transform: scale(1.06);
}

.Card:hover .CVImage[b-4xta9s5h8m] {
    transform: scale(1.06);
}

.CardOverlay[b-4xta9s5h8m] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgb(0 0 0 / 0.12), transparent 34%), linear-gradient(to bottom, rgb(255 255 255 / 0.05), transparent 20%);
    z-index: 1;
}

.CardTopBadges[b-4xta9s5h8m] {
    position: absolute;
    inset-inline: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 3;
}

.Card .PremiumLogo[b-4xta9s5h8m] {
    position: absolute;
    inset-inline-end: 12px;
    top: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.CardContent[b-4xta9s5h8m] {
    padding: 14px;
}

.CardFooter[b-4xta9s5h8m] {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 12px;
}

.CardFooter > .ProfilePicture[b-4xta9s5h8m] {
    border-radius: 50%;
    object-fit: cover;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 2px solid rgb(from var(--ThemeBackgroundColor) r g b / 0.95);
    box-shadow: 0 4px 12px rgb(from var(--ThemeForeColor) r g b / 0.10);
}

.CardFooter > .UserNameDateContainer[b-4xta9s5h8m] {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    min-width: 0;
    flex: 1;
    gap: 3px;
}

.CardFooter > .UserNameDateContainer > .UserName[b-4xta9s5h8m] {
    color: var(--ThemeForeColor);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 800;
    max-width: 100%;
}

.CardFooter > .UserNameDateContainer > .UserName:hover[b-4xta9s5h8m] {
    text-decoration: underline;
}

.CardFooter > .UserNameDateContainer > .Date[b-4xta9s5h8m] {
    font-size: 11px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.55);
}






.CardFooter > .UserNameDateContainer[b-4xta9s5h8m] {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    min-width: 0;
    flex: 1;
    gap: 3px;
}

.CardFooter > .UserNameDateContainer > .UserName[b-4xta9s5h8m] {
    color: var(--ThemeForeColor);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 800;
    max-width: 100%;
}

.CardFooter > .UserNameDateContainer > .UserName:hover[b-4xta9s5h8m] {
    text-decoration: underline;
}

.CardFooter > .UserNameDateContainer > .Date[b-4xta9s5h8m] {
    font-size: 11px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.55);
}





.Card .Draft[b-4xta9s5h8m], .Card .Submitted[b-4xta9s5h8m], .Card .Rejected[b-4xta9s5h8m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 6px 12px 7px 12px;
    font-size: 11px;
    font-family: SirwanBold;
    font-weight: bold;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 0.14);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.10);
    white-space: nowrap;
}

.CardTopBadges .Draft[b-4xta9s5h8m] {
    color: white;
    background-color: rgba(from var(--ThemeColor) r g b / 0.84);
}

.CardTopBadges .Submitted[b-4xta9s5h8m] {
    color: white;
    background-color: rgb(16 185 129 / 0.84);
}

.CardTopBadges .Rejected[b-4xta9s5h8m] {
    color: white;
    background-color: indianred;
}

[b-4xta9s5h8m] .mud-icon-root {
    width: 15px;
    height: 15px;
}
/* /Components/CustomComponents/Cards/RatingCardComponent.razor.rz.scp.css */

.Card[b-go975vpq7b] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    min-height: 220px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);


    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
}

.Card:hover[b-go975vpq7b] {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
    border-color: rgb(from var(--ThemeColor) r g b / 0.20);
}

.CardTop[b-go975vpq7b] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.RaterProfileContainer[b-go975vpq7b] {
    display: flex;
    flex-direction: row !important;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.RaterProfileContainer a[b-go975vpq7b] {
    text-decoration: none;
}

.RaterProfileContainer a:hover[b-go975vpq7b] {
    text-decoration: underline;
    color: var(--ThemeForeColor);
}

.RaterProfileContainer img[b-go975vpq7b] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgb(from var(--ThemeBackgroundColor) r g b / 0.95);
    box-shadow: 0 4px 12px rgb(from var(--ThemeForeColor) r g b / 0.10);
}

.RaterInfo[b-go975vpq7b] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.RaterName[b-go975vpq7b] {
    color: var(--ThemeForeColor);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.RaterDate[b-go975vpq7b] {
    font-size: 11px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.55);
}

.RatingValueBadge[b-go975vpq7b] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 0.14);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.10);
    white-space: nowrap;
    color: white;
    background: rgb(245 158 11 / 0.85);
    flex-shrink: 0;
}

.CommentWrap[b-go975vpq7b] {
    flex: 1;
    border-radius: 18px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.03);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
    padding: 12px;
    min-height: 96px;
}

.SpanComment[b-go975vpq7b] {
    color: var(--ThemeForeColor);
    opacity: 0.9;
    font-size: 14px;
    line-height: 1.8;
    display: block;
    overflow-y: auto;
    max-height: 115px;
    padding-inline-end: 4px;
}

.CardBottom[b-go975vpq7b] {
    display: flex;
    flex-direction : column;
    justify-content: center;
    align-items: center;
    padding-top: 2px;
}

.StateContainer[b-go975vpq7b] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 24px;
    border: 1px dashed rgb(from var(--ThemeForeColor) r g b / 0.12);
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
}

.EmptyState[b-go975vpq7b] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.70);
    text-align: center;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
}

.EmptyState strong[b-go975vpq7b] {
    font-size: 18px;
    color: var(--ThemeForeColor);
}

.EmptyState span[b-go975vpq7b] {
    font-size: 13px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
}

.EmptyStateIcon[b-go975vpq7b] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    color: var(--ThemeColor);
}

/* /Components/CustomComponents/Cards/TemplateCardComponent.razor.rz.scp.css */
.StateContainer[b-fv1yzte3nf] {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 24px;
    border: 1px dashed rgb(from var(--ThemeForeColor) r g b / 0.12);
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
}

.EmptyState[b-fv1yzte3nf] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.70);
    text-align: center;
    padding: 30px 20px;
}

.EmptyState strong[b-fv1yzte3nf] {
    font-size: 18px;
    color: var(--ThemeForeColor);
}

.EmptyState span[b-fv1yzte3nf] {
    font-size: 13px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
}

.EmptyStateIcon[b-fv1yzte3nf] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    color: var(--ThemeColor);
}


.Card[b-fv1yzte3nf] {
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;


    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.06) inset;
}

.Card:hover[b-fv1yzte3nf] {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
    border-color: rgb(from var(--ThemeColor) r g b / 0.20);
}
.CardImageWrap[b-fv1yzte3nf] {
    position: relative;
    z-index: 0;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 360px;
    padding: 26px 22px 18px 22px;

    background:
        radial-gradient(circle at top, rgb(from var(--ThemeColor) r g b / 0.08), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #f8f8fb 100%);
    border-bottom: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

.CardImageWrap[b-fv1yzte3nf]::before {
    content: "";
    position: absolute;
    width: 78%;
    height: 26px;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgb(0 0 0 / 0.12);
    filter: blur(16px);
    z-index: 0;
}

.CardImageWrap[b-fv1yzte3nf]::after {
    content: "";
    position: absolute;
    inset-inline: 18px;
    top: 14px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgb(255 255 255 / 0.95), transparent);
    pointer-events: none;
    z-index: 2;
}

/* real image shadow wrapper */
.CVImageShadow[b-fv1yzte3nf] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    border-radius: 18px;
    box-shadow:
        0 14px 30px rgb(0 0 0 / 0.10),
        0 4px 10px rgb(0 0 0 / 0.06);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.CVImage[b-fv1yzte3nf] {
    display: block;
    max-width: 100%;
    max-height: 305px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: white;
    transition: transform 0.45s ease;
    box-shadow: none;

}

.Card:hover .CVImage[b-fv1yzte3nf] {
    transform: scale(1.06);
}

.Card:hover .CVImage[b-fv1yzte3nf] {
    transform: scale(1.06);
}

.CardOverlay[b-fv1yzte3nf] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgb(0 0 0 / 0.12), transparent 34%), linear-gradient(to bottom, rgb(255 255 255 / 0.05), transparent 20%);
    z-index: 1;
}

.CardTopBadges[b-fv1yzte3nf] {
    position: absolute;
    inset-inline: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 3;
}

.Card .PremiumLogo[b-fv1yzte3nf] {
    position: absolute;
    inset-inline-end: 12px;
    top: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}


.Card > .Price[b-fv1yzte3nf],
.Card > .LabelView[b-fv1yzte3nf],
.CardTopBadges .Price[b-fv1yzte3nf],
.CardTopBadges .LabelView[b-fv1yzte3nf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 6px 12px 7px 12px;
    font-size: 11px;
    font-family: SirwanBold;
    font-weight: bold;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 0.14);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.10);
    white-space: nowrap;
}

.CardTopBadges .Price[b-fv1yzte3nf] {
    color: white;
    background: rgb(16 185 129 / 0.84);
}

.CardTopBadges .LabelView[b-fv1yzte3nf] {
    color: white;
    background: rgb(82 70 175 / 0.84);
}

[b-fv1yzte3nf] .mud-icon-root {
    width: 15px;
    height: 15px;
}

.CardContent[b-fv1yzte3nf] {
    padding: 14px;
}

.CardFooter[b-fv1yzte3nf] {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 12px;
}

.CardFooter > .ProfilePicture[b-fv1yzte3nf] {
    border-radius: 50%;
    object-fit: cover;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 2px solid rgb(from var(--ThemeBackgroundColor) r g b / 0.95);
    box-shadow: 0 4px 12px rgb(from var(--ThemeForeColor) r g b / 0.10);
}

.CardFooter > .UserNameDateContainer[b-fv1yzte3nf] {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    min-width: 0;
    flex: 1;
    gap: 3px;
}

.CardFooter > .UserNameDateContainer > .UserName[b-fv1yzte3nf] {
    color: var(--ThemeForeColor);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 800;
    max-width: 100%;
}

.CardFooter > .UserNameDateContainer > .UserName:hover[b-fv1yzte3nf] {
    text-decoration: underline;
}

.CardFooter > .UserNameDateContainer > .Date[b-fv1yzte3nf] {
    font-size: 11px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.55);
}





.CardContent[b-fv1yzte3nf] {
    padding: 14px;
}

.CardFooter > .UserNameDateContainer[b-fv1yzte3nf] {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    min-width: 0;
    flex: 1;
    gap: 3px;
}

.CardFooter > .UserNameDateContainer > .UserName[b-fv1yzte3nf] {
    color: var(--ThemeForeColor);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 800;
    max-width: 100%;
}

.CardFooter > .UserNameDateContainer > .UserName:hover[b-fv1yzte3nf] {
    text-decoration: underline;
}

.CardFooter > .UserNameDateContainer > .Date[b-fv1yzte3nf] {
    font-size: 11px;
    color: rgb(from  r g b / 0.55);
}




.LikeButton[b-fv1yzte3nf] {
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 54px;
    height: 42px;
    padding: 0 12px;

    border-radius: 999px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.05);
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);

    box-shadow: 0 4px 12px rgb(from var(--ThemeForeColor) r g b / 0.05);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.LikeButton:hover[b-fv1yzte3nf] {
    transform: translateY(-1px);
    background: rgb(from var(--ThemeForeColor) r g b / 0.08);
    color: #e11d48;
    border-color: rgb(225 29 72 / 0.20);
    box-shadow: 0 8px 18px rgb(225 29 72 / 0.12);
}
.LikeButton:active[b-fv1yzte3nf] {
    transform: scale(0.97);
}
.LikeButton span[b-fv1yzte3nf] {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
.LikeButton.Liked[b-fv1yzte3nf] {
    background: rgb(225 29 72 / 0.10);
    color: #e11d48;
    border-color: rgb(225 29 72 / 0.22);
}
.LikeButton.Liked:hover[b-fv1yzte3nf] {
    background: rgb(225 29 72 / 0.14);
}
/* /Components/CustomComponents/Desktop/ElementsComponent.razor.rz.scp.css */
.ElementsMainContainer[b-gg78wxt0vr] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 100%;

    background-color: var(--ThemeShadowColor);
}


[b-gg78wxt0vr] .MudChipset {
    gap: 5px !important;
    display: flex;
    flex-direction: row;
    overflow: auto;
    color: var(--ThemeForeColor);
    padding : 10px;

    width: 100%;
}
[b-gg78wxt0vr] .MudChip {
    background-color: var(--ThemeSurface);
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
    font-size: 12px !important;
    margin : 0px !important;
    width : auto !important;

    width: fit-content !important; 
    min-width: 0px !important; 
    flex: 0 0 auto !important;
    font-weight : bolder;
}
[b-gg78wxt0vr] .MudChip.mud-chip-selected {
    background-color : var(--ThemeColor) !important;
    color : var(--ThemeBackgroundColor) !important;
}




.ElementsContainer[b-gg78wxt0vr] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-content: start;
    gap: 5px;

    padding: 10px;
    overflow-y: auto;
}
.ElementCard[b-gg78wxt0vr] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    cursor: pointer;
    transition : 0.2s;

    min-height: 60px;
    border: 1px solid rgba(128,128,128,0.1);
    background-color: var(--ThemeSurface);
    aspect-ratio: 1 / 1;
}

.ElementCard:hover[b-gg78wxt0vr] {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
/*    z-index: 5;*/
}

.PremiumBadge[b-gg78wxt0vr] {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: gold; 
    color: #000;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.ElementPreview[b-gg78wxt0vr] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ElementPreview img[b-gg78wxt0vr] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.ElementPreview svg[b-gg78wxt0vr] {
    width: 75%;
    height: 75%;
}



/* /Components/CustomComponents/Desktop/ElementsStackComponent.razor.rz.scp.css */
.ElementsMainContainer[b-gvxm1btmv0] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    font-size: 14px;
    height : 100%;
    width : 100%;

    background-color: transparent; 
    background-color: var(--ThemeShadowColor);
}

.ElementsContainer[b-gvxm1btmv0] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    transition: 0.5s;
    gap : 5px;
}
[b-gvxm1btmv0] .list-group-item {
    padding: 0px;
    border: none;
    outline: none;
    background-color : transparent;
    border-radius : 0px;
    margin : 3px 0px;
}


.ElementWrapper[b-gvxm1btmv0] {
    cursor: grab;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    min-height: 60px;
    cursor: pointer;
    gap: 15px;
    transition: 0.2s;
    overflow: hidden;
    padding: 0px 10px;

    background: var(--ThemeSurface);
}
.ElementWrapper:hover[b-gvxm1btmv0] {
    background: rgb(from var(--ThemeColor) r g b / 0.2);
}
.ElementWrapper.Selected[b-gvxm1btmv0] {
    background: rgb(from var(--ThemeColor) r g b / 0.5);
}


.Element[b-gvxm1btmv0]{
    justify-self : flex-start;
}
.Element.Paragraph[b-gvxm1btmv0] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.Element.Image[b-gvxm1btmv0] {
    width: 60px;
    height: 60px;
}
[b-gvxm1btmv0] .ElementIcon {
    color:grey;
}


.ActionButtonsContainer[b-gvxm1btmv0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
/* /Components/CustomComponents/Desktop/PropertyComponent.razor.rz.scp.css */
.PropertyMainContainer[b-1vitn0jvea] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    height: 100%;
    width: 100%;

    background-color: var(--ThemeShadowColor);
    overscroll-behavior-y: contain;
    touch-action: pan-x pan-y;
}

.PropertiesContainer[b-1vitn0jvea] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    transition: 0.5s;
    height : 100% !important;
}

.PropertyItemContainer[b-1vitn0jvea] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
    padding: 10px 5px;
    border-radius: 5px;
    margin: 5px;

    background-color: var(--ThemeSurface);
}

.PropertyItemContainer[b-1vitn0jvea]  .MudSelect .mud-input-slot {
    padding: 10px;
    margin: 0px;
}
.PropertyItemContainer[b-1vitn0jvea]  .MudNumeric{
    max-width : 50px;
}

.PropertyItemContainer .PropertyHintContainer[b-1vitn0jvea]{
    display : flex;
    flex-direction : row;
    gap : 7px;
    align-items : center;
}
.PropertyItemContainer span[b-1vitn0jvea] {
    white-space: nowrap;
    font-size: 13px;
    color: #e0e0e0;
    opacity : 0.9;

    color: var(--ThemeForeColor); 
}



.PropertyItemContainer textarea[b-1vitn0jvea] {
    min-height: 100px;
    padding: 3px 5px;
    border-radius: 3px;
    outline: none;
    white-space: pre-wrap;
    width: 100%;
    resize: vertical;
    margin-top: 10px;
    color: var(--ThemeForeColor);
    border: 1px solid var(--ThemeBorderColor);
    background-color: var(--ThemeShadowColor);
}

.PropertyItemContainer input[type=color][b-1vitn0jvea] {
    border-radius: 2px;
    transition: 0.2s;
    width: 30px;
    height: 20px;
    overflow: hidden;
    padding: 0 !important;
    outline: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: none !important;
    background: none !important;
}

.PropertyItemContainer input[type="text"][b-1vitn0jvea] {
    padding-right: 5px;
    outline: none;
    transition: 0.2s;
    width: 100%;
    padding: 2px 5px;
    border-radius: 3px;
    padding: 3px 7px;
    text-align: left;
    border: 1px solid var(--ThemeBorderColor);
    background-color: var(--ThemeShadowColor);
    color: var(--ThemeForeColor);
}


.PropertyItemContainer .RangeContainer[b-1vitn0jvea] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 100%;
    padding: 0px 5px;
}
.PropertyItemContainer .RangeContainer input[type=range][b-1vitn0jvea] {
    max-width: 100%;
    height: 5px;
    outline: none;
    border: none;
    border-radius: 5px;
    transition: 0.2s;
    color: var(--ThemeColor);
}

.ActionButtonsContainer[b-1vitn0jvea] {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    border-top: 1px solid var(--ThemeBorderColor);
}


input[type="text"]:focus[b-1vitn0jvea], input[type="text"]:hover[b-1vitn0jvea], input[type=number]:focus[b-1vitn0jvea] ,input[type=number]:hover[b-1vitn0jvea] , textarea:hover[b-1vitn0jvea], textarea:focus[b-1vitn0jvea]{
    box-shadow: 0px 0px 2px 0px var(--ThemeColor);
    border: 1px solid var(--ThemeColor);
}

/* Removes the white internal spacing (Chrome/Edge/Safari) */
input[type=color][b-1vitn0jvea]::-webkit-color-swatch-wrapper {
    padding: 0 !important;
}
/* Removes the internal beveled border around the color itself */
input[type=color][b-1vitn0jvea]::-webkit-color-swatch {
    border: none !important;
    border-radius: 2px; /* Matches your current border-radius */
}
/* Firefox specific fix */
input[type=color][b-1vitn0jvea]::-moz-color-swatch {
    border: none !important;
}





















/* /Components/CustomComponents/Footer.razor.rz.scp.css */



.kleshe-footer[b-oo8g8nzvvu] {
    margin-top: 80px;
    padding-top: 60px;
    padding-bottom: 30px;
    transition: background 0.3s ease;
}
.footer-container[b-oo8g8nzvvu] {
    max-width: 1300px;
    margin: auto;
    padding: 0 40px;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 40px !important;
}
.footer-logo[b-oo8g8nzvvu] {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}
.footer-description[b-oo8g8nzvvu] {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.8;
    color: grey;
}
.footer-column h4[b-oo8g8nzvvu] {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
}
.footer-column a[b-oo8g8nzvvu] {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
    text-decoration: none;
    color: grey;
    opacity: 0.85;
    transition: all 0.25s ease;
}
.footer-column a:hover[b-oo8g8nzvvu] {
    opacity: 1;
    transform: translateX(4px);
}
.footer-bottom[b-oo8g8nzvvu] {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(128,128,128,0.15);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 13px;
    opacity: 0.7;
}
/* /Components/CustomComponents/GifComponent.razor.rz.scp.css */
.CanvasWrapper[b-6xqhd0du5k] {
    display: flex;
    flex-direction : column;
    justify-content: start;
    align-items : center;
    margin: 0px auto;
    overflow: hidden;
    padding-bottom: 40px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.Canvas[b-6xqhd0du5k] {
    transform-origin: top center;
    transition: 0.3s ease;
    box-shadow: 0px 0px 15px 2px var(--ThemeShadowColor);
    background-color: white;
    margin: 0px;
    padding: 0px;
    border: none !important;
    outline: none !important;
    position: relative;
    display: inline-block;
    user-select: none;  Standard 
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none;
    transition: none;

}
    .Canvas.interacting[b-6xqhd0du5k] {
    }

@keyframes PlaceHolder-b-6xqhd0du5k{
    0% {opacity: 0.1;}
    50% {opacity: 0.4;}
    100% {opacity: 0.1;}
}
.Placeholder[b-6xqhd0du5k] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.Placeholder > div[b-6xqhd0du5k]{
    background-color: lightgray;
    animation: PlaceHolder-b-6xqhd0du5k 2s infinite;
    flex : 1;
    margin : 10px 20px;
}

.Element[b-6xqhd0du5k] {
    padding: 0px;
    margin: 0px;
    position: absolute;
    transition: 0.4s outline;
    cursor : grab;
}
.Element:hover[b-6xqhd0du5k]{
    outline: 1px solid var(--ThemeColor) !important;
}
.Paragraph[b-6xqhd0du5k] {
    outline: none;
    color: white;
    resize: none;
    padding: 5px;
    white-space: pre;

}


.ResizingCorner[b-6xqhd0du5k] {
    position: absolute;
    z-index: 2000;
    width: 20px;
    height: 20px;
    /*    background: var(--ThemeShadowColor);*/
    background: linear-gradient(90deg, #FE6E3B 0%, #6F2DFF 100%);
    border: 1px solid white;
    border-radius: 50%;
}
.ResizingSide[b-6xqhd0du5k] {
    position : absolute;
    border: 1px solid white;
    border-radius: 7px;
    transition: 0.3s;
}
.ResizingSide:hover[b-6xqhd0du5k]{
    background-color: var(--ThemeColor) !important;
}














input[type=number][b-6xqhd0du5k] {
    width: 70px;
}
select[b-6xqhd0du5k] {
    border: 1px solid lightgrey;
    padding: 3px 10px;
    border-radius: 3px;
    outline: none;
    border: 1px solid var(--ThemeShadowColor);
    background-color: var(--ThemeBackgroundColor);
    color: var(--ThemeForeColor);
    cursor: pointer;
}







/* /Components/CustomComponents/LoadingAnimation.razor.rz.scp.css */
@keyframes spin-b-fyibixkf38 {
    from {
        transform: rotate(0deg);
    }

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


.spinner[b-fyibixkf38] {    
    border-radius: 50%;
    animation: spin-b-fyibixkf38 1s ease-in-out infinite alternate;
}
/* /Components/CustomComponents/LoadingAnimation2.razor.rz.scp.css */
.loader[b-60nz1wky7a] {
    margin: 0px auto;
    gap: 0.6rem;
    display: flex;
}

.loader span[b-60nz1wky7a] {
    width: 0.8rem;
    height: 0.8rem;
    background: var(--ThemeColor);
    border-radius: 50%;
    display: inline-block;
    animation: bounce-b-60nz1wky7a 0.6s infinite alternate;
}

/* Delay each dot for staggered bounce */
.loader span:nth-child(1)[b-60nz1wky7a] {
    animation-delay: 0s;
}

.loader span:nth-child(2)[b-60nz1wky7a] {
    animation-delay: 0.2s;
}

.loader span:nth-child(3)[b-60nz1wky7a] {
    animation-delay: 0.4s;
}

/* Bounce animation */
@keyframes bounce-b-60nz1wky7a {
    0% {
        transform: translateY(0);
        opacity: 0.5;
    }

    100% {
        transform: translateY(-15px);
        opacity: 1;
    }
}
/* /Components/CustomComponents/Mobile/ElementsMobileComponent.razor.rz.scp.css */
.ElementsMainContainer[b-bmw8vst4r1] {
    display: flex;
    flex-direction: column;
    height: 0px;
    width: 100%;
    overflow: hidden;
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
    transition: 0.3s;

    background-color: var(--ThemeBackgroundColor);
    box-shadow: 0 0 10px 0 var(--ThemeShadowColor);

    border-top: 1px solid var(--ThemeBorderColor);
}

#ElementsMainContainerResizer[b-bmw8vst4r1] {
    width: 100%;
    height: 100%;
}

.ResizerBar[b-bmw8vst4r1] {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    width: 60px;
    border-radius: 10px;
    background-color: dimgrey;
}

.Title[b-bmw8vst4r1] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    color: var(--ThemeForeColor);
    cursor: pointer;
    position: relative;
    padding: 15px 10px;
    font-size: 12px;
}

.TitleContent[b-bmw8vst4r1] {
    display: flex;
    gap: 10px;
    align-items: center;
}


[b-bmw8vst4r1] .MudChipset {
    gap: 5px !important;
    display: flex;
    flex-direction: row;
    overflow: auto;
    color: var(--ThemeForeColor);
    padding: 10px;

    width: 100%;
}

[b-bmw8vst4r1] .MudChip {
    background-color: var(--ThemeSurface) !important;
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
    font-size: 12px !important;
    margin: 0px !important;
    width: auto !important;

    width: fit-content !important;
    min-width: 0px !important;
    flex: 0 0 auto !important;
    font-weight: bolder;
}

[b-bmw8vst4r1] .MudChip.mud-chip-selected {
    background-color: var(--ThemeColor) !important;
    color: var(--ThemeBackgroundColor) !important;
}




.ElementsContainer[b-bmw8vst4r1] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    gap: 5px;

    padding: 10px;
    overflow-y: auto;
    min-height: 0;
}

.ElementCard[b-bmw8vst4r1] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;

    min-height: 60px;
    border: 1px solid rgba(128, 128, 128, 0.1);
    background-color: var(--ThemeSurface);
    aspect-ratio: 1 / 1;
}

.ElementCard:hover[b-bmw8vst4r1] {
    transform: scale(1.03);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.PremiumBadge[b-bmw8vst4r1] {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: gold;
    color: #000;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ElementPreview[b-bmw8vst4r1] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ElementPreview img[b-bmw8vst4r1] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.ElementPreview svg[b-bmw8vst4r1] {
    width: 75%;
    height: 75%;
}
/* /Components/CustomComponents/Mobile/ElementsStackMobileComponent.razor.rz.scp.css */
.ElementsSpaceMainContainer[b-55mohl9oa3] {
    display: flex;
    flex-direction: column;
    height: 0px;
    width: 100%;
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
    user-select: none;
    font-size: 14px;
    transition: 0.3s;

    background-color : var(--ThemeBackgroundColor);
    box-shadow : 0 0 10px 0 var(--ThemeShadowColor);

    border-top : 1px solid var(--ThemeBorderColor);
}

#ElementsSpaceMainContainerResizer[b-55mohl9oa3] {
    width: 100%;
    height: 100%;
}

.ResizerBar[b-55mohl9oa3] {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    width: 60px;
    border-radius: 10px;
    background-color: dimgrey;
}


.Title[b-55mohl9oa3] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    color: var(--ThemeForeColor);
    cursor: pointer;
    position: relative;
    padding: 15px 10px;
    font-size: 12px;
}
.TitleContent[b-55mohl9oa3] {
    display: flex;
    gap: 10px;
    align-items: center;
}





.ElementsContainer[b-55mohl9oa3] {
    display: flex;
    flex-direction: column;
    overflow: auto;
    transition: 0.5s;
    gap : 5px;
}

[b-55mohl9oa3] .list-group-item {
    padding: 0px;
    border: none;
    outline: none;
    background-color: transparent;
    border-radius: 0px;
    margin: 3px 0px;
}

.ElementWrapper[b-55mohl9oa3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 60px;
    min-height: 60px;
    cursor: pointer;
    gap: 15px;
    transition: 0.2s;
    overflow: hidden;
    padding: 0px 10px;

    background: var(--ThemeSurface);
}
.ElementWrapper:hover[b-55mohl9oa3] {
    background: rgb(from var(--ThemeColor) r g b / 0.2);
}
.ElementWrapper.Selected[b-55mohl9oa3] {
    background: rgb(from var(--ThemeColor) r g b / 0.5);
}

.ElementWrapper > .ElementTypeImage[b-55mohl9oa3] {
    width: 30px;
    height: 30px;
}


.ElementWrapper> .Element[b-55mohl9oa3]{
    justify-self : flex-start;
}
.ElementWrapper > .Element.Paragraph[b-55mohl9oa3] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ElementWrapper > .Element.Image[b-55mohl9oa3] {
    width: 60px;
    height: 60px;
}

.pe-2[b-55mohl9oa3] {
    height: 100%;
    width : 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
    color: blue;
}

.ActionButtonsContainer[b-55mohl9oa3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.ActionButtonsContainer > .ElementVisibilityIcon[b-55mohl9oa3] {
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin-left: auto;
}
.icon-btn[b-55mohl9oa3] {
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    background-color: #333;
    background-color: #1e1e1e; /* Dark professional theme */
}
    .icon-btn:hover[b-55mohl9oa3] {
        background: #444;
    }
.ElementWrapper.Dragging[b-55mohl9oa3] {
    opacity: 0.4;
}

.ElementWrapper[b-55mohl9oa3] {
    cursor: grab;
}

    .ElementWrapper:active[b-55mohl9oa3] {
        cursor: grabbing;
    }
/* /Components/CustomComponents/Mobile/MobileBottomNavbar.razor.rz.scp.css */
.MobileBottomNavbar[b-cgtopiuu0x] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;

    position : relative;
    z-index: 0;
    border-radius: 0;
    overflow-x: auto;

    background-color: var(--ThemeBackgroundColor);
    border-top: 1px solid var(--ThemeBorderColor);

    height: 60px;
    width: 100%;


    overflow-y: hidden;
    padding: 0 10px;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
}
.NavToolsContainer[b-cgtopiuu0x]::-webkit-scrollbar {
    display: none;
}

.NavToolItem[b-cgtopiuu0x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap : 3px;

    cursor: pointer;
    border-radius: 4px; /* Slight radius or sharp */
    transition: background-color 0.2s ease;
    
    padding : 5px;
    height: 50px;
    min-width: 50px;
    color: var(--ThemeForeColor); /* White line art style icons */
}

.NavToolItem.Active[b-cgtopiuu0x] {
    background-color: var(--ThemeColor); /* Active blue square background */
}

[b-cgtopiuu0x] .NavToolItem svg {
    width : 20px !important;
    height : 20px !important;
}

.NavToolItem .ToolLabel[b-cgtopiuu0x] {
    font-size: 12px;
    font-weight: 500;
    font-family: inherit; /* Use default sans-serif to match */
}
/* /Components/CustomComponents/Mobile/MobilePropertyBottomNavbar.razor.rz.scp.css */
.PropertiesNavbarMainContainer[b-nxv9yc2nx6]{
    display : flex;
    flex-direction : column;
    gap : 5px;


    bottom : 0px;
    left : 0px;
    right : 0px;
    position: absolute;
    z-index: 0;
}

.ValueContainer[b-nxv9yc2nx6]{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 7px;


    padding: 10px 5px;
    margin: 5px;
    box-shadow : 0px 0px 10px 0px var(--ThemeShadowColor);
    border-radius: 5px;
    height : fit-content;

    background-color: var(--ThemeSurface);
}
.ValueContainer[b-nxv9yc2nx6]  .MudSelect {

}
.ValueContainer[b-nxv9yc2nx6]  .MudSelect .mud-input-slot {
    padding : 10px;
    margin : 0px;
}
.ValueContainer[b-nxv9yc2nx6]  .MudNumeric {
    max-width: 50px;
}

.MobilePropertyHeader[b-nxv9yc2nx6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.PropertiesContainer[b-nxv9yc2nx6] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

    border-radius: 0;
    overflow-x: auto;
    background-color: var(--ThemeBackgroundColor);
    border-top: 1px solid var(--ThemeBorderColor);
    height: 60px;
    width: 100%;
    overflow-y: hidden;
    padding: 0 10px;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}
.NavToolsContainer[b-nxv9yc2nx6]::-webkit-scrollbar {
    display: none;
}

.PropertyItem[b-nxv9yc2nx6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap : 5px;

    cursor: pointer;
    border-radius: 4px; /* Slight radius or sharp */
    transition: background-color 0.2s ease;
    
    padding : 5px 10px;
    height: 50px;
    width : fit-content;
    color: var(--ThemeForeColor); /* White line art style icons */
}

.PropertyItem.Active[b-nxv9yc2nx6] {
    background-color: var(--ThemeColor); /* Active blue square background */
}

[b-nxv9yc2nx6] .PropertyItem svg {
    width : 20px !important;
    height : 20px !important;
}

.PropertyItem .ToolLabel[b-nxv9yc2nx6] {
    font-size: 12px;
    font-weight: 500;
    font-family: inherit; /* Use default sans-serif to match */
}











span[b-nxv9yc2nx6] {
    white-space: nowrap;
    font-size: 13px;
    color: #e0e0e0;
    opacity: 0.9;
    color: var(--ThemeForeColor);
}
.ButtonTranslate[b-nxv9yc2nx6] {
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    color: var(--ThemeBackgroundColor);
    background: linear-gradient(90deg, #FE6E3B 0%, #C62EA5 50%, #6F2DFF 100%);
    border: none;
    margin: 5px 0px;
    font-size: 13px;
}

textarea[b-nxv9yc2nx6] {
    min-height: 100px;
    padding: 3px 5px;
    border-radius: 3px;
    outline: none;
    white-space: pre-wrap;
    width: 100%;
    resize: vertical;
    margin-top: 10px;

    color: var(--ThemeForeColor);
    border: 1px solid var(--ThemeBorderColor);
    background-color: var(--ThemeShadowColor);
}
.RangeContainer[b-nxv9yc2nx6] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 100%;
    padding: 0px 5px;
}
input[type=range][b-nxv9yc2nx6] {
    width: 100%;
    height: 5px;
    outline: none;
    border: none;
    border-radius: 5px;
    transition: 0.2s;
    color: var(--ThemeColor);
}
input[type=color][b-nxv9yc2nx6] {
    border-radius: 2px;
    transition: 0.2s;
    width: 30px;
    height: 20px;
    overflow: hidden;
    padding: 0 !important; 
    outline: none !important; 
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width : 100%;

    border: none !important; 
    background: none !important;
}
input[type="text"][b-nxv9yc2nx6] {
    padding-right: 5px;
    outline: none;
    transition: 0.2s;
    width: 100%;
    padding: 2px 5px;
    border-radius: 3px;
    padding: 3px 7px;
    text-align : left;

    border: 1px solid var(--ThemeBorderColor);
    background-color: var(--ThemeShadowColor);
    color: var(--ThemeForeColor);
}


input[type="text"]:focus[b-nxv9yc2nx6], input[type="text"]:hover[b-nxv9yc2nx6], input[type=number]:focus[b-nxv9yc2nx6] ,input[type=number]:hover[b-nxv9yc2nx6] , textarea:hover[b-nxv9yc2nx6], textarea:focus[b-nxv9yc2nx6]{
    box-shadow: 0px 0px 2px 0px var(--ThemeColor);
    border: 1px solid var(--ThemeColor);
}


/* Removes the white internal spacing (Chrome/Edge/Safari) */
input[type=color][b-nxv9yc2nx6]::-webkit-color-swatch-wrapper {
    padding: 0 !important;
}
/* Removes the internal beveled border around the color itself */
input[type=color][b-nxv9yc2nx6]::-webkit-color-swatch {
    border: none !important;
    border-radius: 2px; /* Matches your current border-radius */
}
/* Firefox specific fix */
input[type=color][b-nxv9yc2nx6]::-moz-color-swatch {
    border: none !important;
}










/* This makes the invisible touch area around the slider thumb much larger */
[b-nxv9yc2nx6] .mud-slider-thumb {
    transform: scale(1.5) !important; /* Makes the thumb slightly bigger for visibility */
    background-color : red !important;
    color : red !important;
}

[b-nxv9yc2nx6] .mud-slider-container {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-top: -10px !important;
    margin-bottom: -10px !important;
}

/* This targets the actual input range that MudBlazor uses under the hood */
[b-nxv9yc2nx6] .mud-slider-input {
    height: 40px !important ; /* Creates a taller touch zone */
    cursor: pointer !important;
}

.RangeContainer[b-nxv9yc2nx6] {
    touch-action: pan-y !important; /* Allows vertical scrolling of the menu but stops horizontal interference */
}

.RangeContainer .mud-slider[b-nxv9yc2nx6] {
    touch-action: none !important; /* Forces the browser to give all touch control to the slider */
}
/* /Components/CustomComponents/OtpInput.razor.rz.scp.css */
.otp-container[b-3n91khr9dc] {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.otp-box[b-3n91khr9dc] {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid var(--ThemeBorderColor);
    background: transparent;
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: .2s;
}

.otp-box:focus[b-3n91khr9dc] {
    border-color: var(--ThemeColor);
}

.otp-box[b-3n91khr9dc]::-webkit-outer-spin-button,
.otp-box[b-3n91khr9dc]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* /Components/CustomComponents/PlaceholderComponent.razor.rz.scp.css */

div[b-szg6s36zug] {
    animation: PlaceHolder-b-szg6s36zug 1.5s infinite ease;
    background-color: #999999;
}

@keyframes PlaceHolder-b-szg6s36zug {
    0% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 0.1;
    }
}

@media (max-width: 680px) {
    .ElementsContainer[b-szg6s36zug] {
        display: none;
    }
}
/* /Components/CustomComponents/TipComponent.razor.rz.scp.css */
.TipContainer[b-d7si7sis2a] {
    display: flex;
    flex-direction: row;

    border-radius: 2px;
    overflow: hidden;
}

.TipContainer .Side[b-d7si7sis2a] {
    width: 3px;
    max-width: 3px;
    min-width: 3px;
}
.TipContainer .Description[b-d7si7sis2a] {
    font-size: 14px;
    padding: 10px;
}
/* /Components/CustomComponents/TipTitleComponent.razor.rz.scp.css */
.TipTitleContainer[b-hdpiurbixw] {
    display: flex;
    flex-direction: row;

    border-radius: 5px;
    overflow: hidden;
}

.TipTitleContainer > div:not(.Side)[b-hdpiurbixw]{
    display : flex;
    flex-direction : column;
    gap : 10px;
    padding : 5px 13px;
}

.TipTitleContainer .Side[b-hdpiurbixw] {
    width: 3px;
    max-width: 3px;
    min-width: 3px;
}
.TipTitleContainer .Title[b-hdpiurbixw]{
    font-size: 16px;
}
.TipTitleContainer .Description[b-hdpiurbixw] {
    font-size: 14px;
}
/* /Components/Popups/AppRatingPopup.razor.rz.scp.css */
.Backdrop[b-7bfbg33tr7] {
    z-index: 1;
}

.RatingMainPoupContainer[b-7bfbg33tr7] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}

.RatingMainPoupContainer.popup-show[b-7bfbg33tr7] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.RatingMainPoupContainer > .Header[b-7bfbg33tr7] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.RatingMainPoupContainer > .Header > .HeaderTitle[b-7bfbg33tr7] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-7bfbg33tr7] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.RatingMainContent[b-7bfbg33tr7] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

.RatingMainPoupContainer > .ScrollableBody > .ButtonsContainer[b-7bfbg33tr7] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}




.RatingMainContent >  textarea[b-7bfbg33tr7] {
    background-color: transparent;
    color: var(--ThemeForeColor);
    opacity: 0.9;
    border: 2px solid var(--ThemeBorderColor);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    outline: none;
    font-size: 16px;
    align-self: stretch;
    width: 100%;
    min-height : 100px;
    margin-top : 5px;
    transition : 0.4s;
}
.RatingMainContent >  textarea:focus[b-7bfbg33tr7] {
    border: 2px solid var(--ThemeColor);
}



/* /Components/Popups/BuyPopup.razor.rz.scp.css */
.Backdrop[b-c98sl60wgy] {
    z-index: 2;
}

.BuyPopupContainer[b-c98sl60wgy] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}
.BuyPopupContainer.popup-show[b-c98sl60wgy] {
    opacity: 1;
    transform: scale(1) translateY(0);
}



.BuyPopupContainer > .Header[b-c98sl60wgy] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.BuyPopupContainer > .Header > .HeaderTitle[b-c98sl60wgy] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-c98sl60wgy] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.BuyPopupContainer > .ScrollableBody > .ButtonsContainer[b-c98sl60wgy] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.BuyPopupContainer > .ScrollableBody > .BuyPopupContent[b-c98sl60wgy] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}




.ProductInfo .Title[b-c98sl60wgy] {
    color: var(--ThemeColor);
    font-weight: 800;

    margin-bottom: 4px;
    font-size: 1.4rem;
}

.ProductInfo .Description[b-c98sl60wgy] {
    color: #9e9e9e;
    line-height: 1.6;
}

.PriceTag[b-c98sl60wgy] {
    background: rgba(105, 111, 199, 0.1); /* Slight tint of Primary */
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dashed var(--ThemeColor);
}

.PriceLabel[b-c98sl60wgy] {
    color: var(--ThemeForeColor);
    font-weight: 500;
}

.PriceValue[b-c98sl60wgy] {
    color: #10b981; /* Success Green */
    font-weight: 800;
    font-size: 1.5rem;
}

/* ... (existing CSS) ... */

.WalletTag[b-c98sl60wgy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: rgba(128, 128, 128, 0.05); /* Very subtle background */
    border-radius: 8px;
    border: 1px solid rgba(128, 128, 128, 0.1);
    margin-top: -5px; /* Pull it closer to the PriceTag */
}

.WalletLabel[b-c98sl60wgy], .CostLabel[b-c98sl60wgy] {
    display: flex;
    align-items: center;
    color: #9e9e9e;
    font-size: 0.9rem;
}

.WalletValue[b-c98sl60wgy] {
    font-weight: 600;
    color: var(--ThemeForeColor);
    font-size: 1rem;
}

/* Optional: Highlight if balance is insufficient */
.insufficient[b-c98sl60wgy] {
    color: var(--mud-palette-error) !important;
}
/*.BuyPopupContent .Title {
    color: var(--ThemeColor);
    font-weight : bolder;
}
.BuyPopupContent .Description {
    color: grey;
}*/


[b-c98sl60wgy] .BuyPopupContent .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}
[b-c98sl60wgy] .BuyPopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-c98sl60wgy] .BuyPopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}






/* /Components/Popups/CreatorUpsellPopup.razor.rz.scp.css */
.Backdrop[b-dbrpfuf3t5] {
    z-index: 1;
}

.CreatorUpsellPopupContainer[b-dbrpfuf3t5] {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    transform: scale(0.1) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    max-width: 400px;
    min-width: 320px;
    width: 50%;
    max-height: 80%;
    border: 1px solid var(--ThemeColor);
    padding: 15px 20px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.CreatorUpsellPopupContainer[b-dbrpfuf3t5]::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: conic-gradient(var(--ThemeColor), #ec4899, #8b5cf6, var(--ThemeColor));
    animation: rotateBorder-b-dbrpfuf3t5 4s linear infinite;
}

.CreatorUpsellPopupContainer[b-dbrpfuf3t5]::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: var(--ThemeBackgroundColor);
    border-radius: 10px;
}
.CreatorUpsellPopupContainer.popup-show[b-dbrpfuf3t5] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
[b-dbrpfuf3t5] .CreatorUpsellPopupContainer .HeaderCloseButton {
    position: absolute;
    left : 10px;
    top : 10px;
}




.CreatorUpsellPopupContainer > .CreatorUpsellPopupContent[b-dbrpfuf3t5] {
    font-size: 17px;
    padding: 40px 10px 0px 10px;
    text-align: center;
    direction: rtl;
    overflow: auto;
}


.upsell-hero .icon-circle[b-dbrpfuf3t5] {
    color: black;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    background: var(--ThemeColor);
    box-shadow: 0 0 20px rgb(from var(--ThemeColor) r g b / 0.3);
}

.gradient-text[b-dbrpfuf3t5] {
    font-size: 29px;
    font-weight: 800;
    background: linear-gradient(90deg, gold, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.upsell-hero p[b-dbrpfuf3t5] {
    color: var(--ThemeForeColor);
    opacity: 0.8;
    font-size: 14px;
    line-height: 1.6;
}

.mini-features[b-dbrpfuf3t5] {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: right;
    display: inline-block;
}

.mini-features li[b-dbrpfuf3t5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--ThemeForeColor);
}

[b-dbrpfuf3t5] .mini-features .mud-icon-root {
    color: var(--ThemeColor) !important;
}

[b-dbrpfuf3t5] .cta-btn-upsell {
    background-color: var(--ThemeColor) !important;
    color: black !important;
    font-weight: 700 !important;
    padding: 10px 30px !important;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.upsell-actions[b-dbrpfuf3t5] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}





@keyframes rotateBorder-b-dbrpfuf3t5 {
    100% {
        transform: rotate(1turn);
    }
}
/* /Components/Popups/DepositMoneyPopup.razor.rz.scp.css */
.Backdrop[b-g8snkgiq47] {
    z-index: 2;
}

.DepositMoneyPopupContainer[b-g8snkgiq47] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}
.DepositMoneyPopupContainer.popup-show[b-g8snkgiq47] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.DepositMoneyPopupContainer > .Header[b-g8snkgiq47] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.DepositMoneyPopupContainer > .Header > .HeaderTitle[b-g8snkgiq47] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-g8snkgiq47] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.DepositMoneyPopupContainer > .ScrollableBody > .ButtonsContainer[b-g8snkgiq47] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.DepositMoneyPopupContainer > .ScrollableBody > .DepositMoneyPopupContent[b-g8snkgiq47] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 17px;
    flex: 1;
}


[b-g8snkgiq47] .DepositMoneyPopupContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}
[b-g8snkgiq47] .DepositMoneyPopupContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-g8snkgiq47] .DepositMoneyPopupContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}


/* Payment status states */
.PaymentStatusContainer[b-g8snkgiq47] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 10px;
    min-height: 160px;
    text-align: center;
}

.PaymentStatusText[b-g8snkgiq47] {
    font-size: 16px;
    font-weight: 800;
    color: var(--ThemeForeColor);
    line-height: 1.6;
}

.PaymentStatusHint[b-g8snkgiq47] {
    font-size: 13px;
    font-weight: 600;
    color: rgb(from var(--ThemeForeColor) r g b / 0.55);
    line-height: 1.7;
    max-width: 320px;
}


/* /Components/Popups/FragmentPopup.razor.rz.scp.css */
.Backdrop[b-3dci3z3gc5] {
    z-index: 0;
}

.MainPoupContainer[b-3dci3z3gc5] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    max-height: 90vh;
    overflow: hidden;
}

.MainPoupContainer.popup-show[b-3dci3z3gc5] {
    opacity: 1;
    transform: scale(1) translateY(0);
}


.MainPoupContainer > .Header[b-3dci3z3gc5] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.MainPoupContainer > .Header > .HeaderTitle[b-3dci3z3gc5] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.MainPoupContainer > .Header > .HeaderCloseButton[b-3dci3z3gc5] {
}

.ScrollableBody[b-3dci3z3gc5] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.MainPoupContainer > .ScrollableBody > .ButtonsContainer[b-3dci3z3gc5] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.MainPoupContainer > .ScrollableBody > .MainContent[b-3dci3z3gc5] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

/* /Components/Popups/LoadingAlertPopup.razor.rz.scp.css */
.Backdrop[b-nvv0b4qbcz] {
    z-index: 2;
}

.LoadingAlertPopup[b-nvv0b4qbcz] {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.7);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: loadingPopupIn-b-nvv0b4qbcz 0.28s ease-out;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,255,0.86) 100%);
    background: var(--ThemeSurface);

    max-height: 90vh;
    min-width: 300px;
    max-width: 500px;
    padding: 28px 24px;
    width: 30%;

}

.LoadingAlertGlow[b-nvv0b4qbcz] {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: linear-gradient(90deg, #ec4899, gold, #8b5cf6);
    background: radial-gradient(circle, rgba(123, 97, 255, 0.22) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(10px);
}

.LoadingAlertContent[b-nvv0b4qbcz] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-align: center;

}

.LoadingAlertSpinnerWrap[b-nvv0b4qbcz] {
    position: relative;
    width: 230px;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
}

.LoadingAlertSpinnerRing[b-nvv0b4qbcz] {
    border-radius: 50%;
    position: absolute;
    inset: 0;
    border: 3px solid rgba(124, 92, 255, 0.15);
    border-top-color: rgba(124, 92, 255, 0.95);
    border-right-color: rgba(0, 188, 212, 0.85);
    border-bottom-color: var(--ThemeColor);
    border-left-color: gold;
    animation: loadingSpin-b-nvv0b4qbcz 1s linear infinite;
    box-shadow: 0 0 30px rgba(124, 92, 255, 0.08);
}

.LoadingAlertGifWrap[b-nvv0b4qbcz] {
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.62);
    box-shadow: 0 8px 30px rgba(89, 70, 160, 0.10), inset 0 1px 0 rgba(255,255,255,0.8);
    object-fit : fill;
}

.LoadingAlertGifWrap[b-nvv0b4qbcz]  img,
.LoadingAlertGifWrap[b-nvv0b4qbcz]  svg,
.LoadingAlertGifWrap[b-nvv0b4qbcz]  video,
.LoadingAlertGifWrap[b-nvv0b4qbcz]  canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.LoadingAlertTextWrap[b-nvv0b4qbcz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.LoadingAlertBadge[b-nvv0b4qbcz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #6b46ff;
    background: rgba(107, 70, 255, 0.10);
    border: 1px solid rgba(107, 70, 255, 0.14);
}

.LoadingAlertTitle[b-nvv0b4qbcz] {
    margin: 0;
    font-family: SirwanLight;
    font-size: 24px;
    line-height: 1.4;
    color: var(--ThemeColor);
    direction: rtl;
}

.LoadingAlertDescription[b-nvv0b4qbcz] {
    margin: 0;
    max-width: 290px;
    font-family: SirwanLight;
    font-size: 15px;
    line-height: 1.8;
    color: #6b7280;
    direction: rtl;
}

@keyframes loadingSpin-b-nvv0b4qbcz {
    from {
        transform: rotate(0deg);
    }

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

@keyframes loadingFadeIn-b-nvv0b4qbcz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes loadingPopupIn-b-nvv0b4qbcz {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

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

@media (max-width: 768px) {
    .LoadingAlertBackdrop[b-nvv0b4qbcz] {
        padding: 18px;
    }

    .LoadingAlertPopup[b-nvv0b4qbcz] {
        padding: 24px 18px;
        border-radius: 24px;
    }



    .LoadingAlertGifWrap[b-nvv0b4qbcz] {
        width: 88px;
        height: 88px;
        border-radius: 20px;
    }

    .LoadingAlertTitle[b-nvv0b4qbcz] {
        font-size: 21px;
    }

    .LoadingAlertDescription[b-nvv0b4qbcz] {
        font-size: 14px;
        max-width: 260px;
    }
}

@media (max-width: 420px) {
    .LoadingAlertGifWrap[b-nvv0b4qbcz] {
        width: 80px;
        height: 80px;
    }

    .LoadingAlertTitle[b-nvv0b4qbcz] {
        font-size: 20px;
    }

    .LoadingAlertDescription[b-nvv0b4qbcz] {
        font-size: 13px;
    }
}
/* /Components/Popups/NormalAlertPopup.razor.rz.scp.css */
.Backdrop[b-2g8guh64un] {
    z-index: 100;
}

.MainPoupContainer[b-2g8guh64un] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    max-height: 90vh;
    overflow: hidden;
}

.MainPoupContainer.popup-show[b-2g8guh64un] {
    opacity: 1;
    transform: scale(1) translateY(0);
}


.MainPoupContainer > .Header[b-2g8guh64un] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.MainPoupContainer > .Header > .HeaderTitle[b-2g8guh64un] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.MainPoupContainer > .Header > .HeaderCloseButton[b-2g8guh64un] {
}

.ScrollableBody[b-2g8guh64un] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.MainPoupContainer > .ScrollableBody > .ButtonsContainer[b-2g8guh64un] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.MainPoupContainer > .ScrollableBody > .MainContent[b-2g8guh64un] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

/* /Components/Popups/PremiumUpsellPopup.razor.rz.scp.css */
.Backdrop[b-7apwczrwa1] {
    z-index:2;
}

.PremiumUpsellPopupContainer[b-7apwczrwa1] {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    transform: scale(0.1) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    max-width: 400px;
    min-width: 320px;
    width: 50%;
    max-height: 80%;
    border: 1px solid gold;
    padding: 15px 20px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.PremiumUpsellPopupContainer[b-7apwczrwa1]::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;

    background-image: conic-gradient(gold, #ec4899, #8b5cf6, gold);
    animation: rotateBorder-b-7apwczrwa1 4s linear infinite;
}
.PremiumUpsellPopupContainer[b-7apwczrwa1]::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: var(--ThemeBackgroundColor);
    border-radius: 10px;
}
.PremiumUpsellPopupContainer.popup-show[b-7apwczrwa1] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
[b-7apwczrwa1] .PremiumUpsellPopupContainer .HeaderCloseButton {
    position: absolute;
    left : 10px;
    top : 10px;
}




.PremiumUpsellPopupContainer > .PremiumUpsellPopupContent[b-7apwczrwa1] {
    font-size: 17px;
    padding: 40px 10px 0px 10px;
    text-align: center;
    direction: rtl;
    overflow: auto;
}


.upsell-hero .icon-circle[b-7apwczrwa1] {
    background: gold;
    color: black;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    box-shadow: 0 0 20px rgb(from gold r g b / 0.3);
}

.gradient-text[b-7apwczrwa1] {
    font-size: 29px;
    font-weight: 800;
    background: linear-gradient(90deg, #ec4899, gold, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.upsell-hero p[b-7apwczrwa1] {
    color: var(--ThemeForeColor);
    opacity: 0.8;
    font-size: 14px;
    line-height: 1.6;
}

.mini-features[b-7apwczrwa1] {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: right;
    display: inline-block;
}

.mini-features li[b-7apwczrwa1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--ThemeForeColor);
}

[b-7apwczrwa1] .mini-features .mud-icon-root {
    color: gold !important;
}

[b-7apwczrwa1] .cta-btn-upsell {
    background-color: gold !important;
    color: black !important;
    font-weight: 700 !important;
    padding: 10px 30px !important;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.upsell-actions[b-7apwczrwa1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}





@keyframes rotateBorder-b-7apwczrwa1 {
    100% {
        transform: rotate(1turn);
    }
}
/* /Components/Popups/Snackbars.razor.rz.scp.css */

.SnackbarsWrapper[b-7b15dn0krr] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: min(92vw, 460px);
    pointer-events: none;
}


.SnackbarsContainer[b-7b15dn0krr] {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12),
        0 2px 10px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    user-select: none;
    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
    outline : none;

    backdrop-filter: blur(14px);
    min-height: 40px;
    background-color : red;
    background-color : var(--ThemeSurface);
}
.SnackbarsContainer.show[b-7b15dn0krr] {
    opacity: 1;
    transform: translateY(0);
}
.SnackbarsContainer.leaving[b-7b15dn0krr] {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
}

.SnackbarsContainer > .CloseButton[b-7b15dn0krr] {
    align-self: flex-start;
    margin: 8px 8px 0 0;
    color: #6b7280 !important;
    background-color: transparent !important;
    margin: 8px 8px 0 0;
}
.SnackbarsContainer > .CloseButton:hover[b-7b15dn0krr] {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/*.NotificationContainer.Success {
    background: linear-gradient(-90deg, var(--ThemeSurface) 40%, #22c55e 400%);
}

.NotificationContainer.Danger {
    background: linear-gradient(-90deg, var(--ThemeSurface) 40%, #ef4444 400%);
}

.NotificationContainer.Warning {
    background: linear-gradient(-90deg, var(--ThemeSurface) 40%, #f59e0b 400%);
}*/


.SnackbarAccent[b-7b15dn0krr] {
    width: 5px;
    flex-shrink: 0;
}
.SnackbarAccent.Success[b-7b15dn0krr] {
    background: #22c55e;
}
.SnackbarAccent.Danger[b-7b15dn0krr] {
    background: #ef4444;
}
.SnackbarAccent.Warning[b-7b15dn0krr] {
    background: #f59e0b;
}



.SnackbarsIconBox[b-7b15dn0krr] {
    width: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.SnackbarsIconBox.Success[b-7b15dn0krr] {
    color: #16a34a;
}
.SnackbarsIconBox.Danger[b-7b15dn0krr] {
    color: #dc2626;
}
.SnackbarsIconBox.Warning[b-7b15dn0krr] {
    color: #d97706;
}

.SnackbarsIcon[b-7b15dn0krr] {
    font-size: 30px !important;
}



.SnackbarsContent[b-7b15dn0krr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 6px 14px 0;
    min-width: 0;
}

.SnackbarsMessage[b-7b15dn0krr] {
    font-family: SirwanLight, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.9;
    direction: rtl;
    text-align: right;
    word-break: break-word;
    padding-right: 4px;
}
.SnackbarsMessage.Success[b-7b15dn0krr] {
    color: #16a34a;
}
.SnackbarsMessage.Danger[b-7b15dn0krr] {
    color: #dc2626;
}
.SnackbarsMessage.Warning[b-7b15dn0krr] {
    color: #d97706;
}







@media (max-width: 600px) {
    .SnackbarsWrapper[b-7b15dn0krr] {
        top: 14px;
        width: min(95vw, 95vw);
    }

    .SnackbarsContainer[b-7b15dn0krr] {
        min-height: 68px;
        border-radius: 16px;
    }

    .SnackbarsIconBox[b-7b15dn0krr] {
        width: 56px;
        min-width: 56px;
    }

    .SnackbarsIcon[b-7b15dn0krr] {
        font-size: 26px !important;
    }

    .Message[b-7b15dn0krr] {
        font-size: 13px;
        line-height: 1.6;
    }
}
/* /Components/Popups/Template/DraftTemplateAddPopup.razor.rz.scp.css */
.Backdrop[b-wg0c14hzb8] {
    z-index: 1;
}

.DraftTemplateAddPopupContainer[b-wg0c14hzb8] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden; /* Prevents container from scrolling, allowing internal ScrollableBody to scroll */
}

.DraftTemplateAddPopupContainer.popup-show[b-wg0c14hzb8] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.DraftTemplateAddPopupContainer > .Header[b-wg0c14hzb8] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.DraftTemplateAddPopupContainer > .Header > .HeaderTitle[b-wg0c14hzb8] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-wg0c14hzb8] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.DraftTemplateAddPopupContainer > .ScrollableBody > .ButtonsContainer[b-wg0c14hzb8] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.DraftTemplateAddPopupContent[b-wg0c14hzb8] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

[b-wg0c14hzb8] .DraftTemplateAddPopupContent .mud-input-slot {
    font-size: 15px;
    font-weight : bolder;
    padding : 14px !important;
}
[b-wg0c14hzb8] .DraftTemplateAddPopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.7) !important;
}
[b-wg0c14hzb8] .DraftTemplateAddPopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}
/* /Components/Popups/Template/DraftTemplateDownloadingPopup.razor.rz.scp.css */
.Backdrop[b-5kqmcotmkm] {
    z-index: 1;
}

.DraftTemplateDownloadingPoupContainer[b-5kqmcotmkm] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
}
.DraftTemplateDownloadingPoupContainer.popup-show[b-5kqmcotmkm] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.DraftTemplateDownloadingPoupContainer > .Header[b-5kqmcotmkm] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.DraftTemplateDownloadingPoupContainer > .Header > .HeaderTitle[b-5kqmcotmkm] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-5kqmcotmkm] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.DraftTemplateDownloadingPoupContainer > .ScrollableBody > .ButtonsContainer[b-5kqmcotmkm] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.DraftTemplateDownloadingPoupContent[b-5kqmcotmkm] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
[b-5kqmcotmkm] .DraftTemplateDownloadingPoupContent .mud-input-slot {
    font-size: 15px;
    font-weight : bolder;
    padding : 14px !important;
}
[b-5kqmcotmkm] .DraftTemplateDownloadingPoupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.7) !important;
}
[b-5kqmcotmkm] .DraftTemplateDownloadingPoupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}


/* /Components/Popups/Template/DraftTemplatePreviewPopup.razor.rz.scp.css */
.Backdrop[b-nsardtzx2m] {
    z-index: 1;
}

.DraftTemplatePreviewPopup[b-nsardtzx2m] {
    display: flex;
    flex-direction: column;
    gap: 0px;
    opacity: 0;
    border-radius: 10px;
    transform: scale(0.1) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    overflow-y: auto;
    padding: 0px;
    background: var(--ThemeGlassColor);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 90%;
    height: 80%;
    max-height: 80%;
    min-height: 80%;
    /*    max-height: 85vh;*/
}

    .DraftTemplatePreviewPopup.popup-show[b-nsardtzx2m] {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

.Header[b-nsardtzx2m] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 0px 5px;
    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /*    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 0px grey;*/
}


    .Header > .ButtonClose[b-nsardtzx2m] {
        background-color: transparent;
        color: indianred;
        font-family: Fredoka;
        font-weight: bold;
        border: none;
        width: 35px;
        height: 40px;
        border-radius: 2px;
    }

    .Header > .Title[b-nsardtzx2m] {
        text-align: center;
        color: grey;
        font-family: SirwanBold;
        font-size: 18px;
    }



.DraftTemplatePreviewMainContainer[b-nsardtzx2m] {
    display: flex;
    flex-direction: row-reverse;
    overflow: auto;
    width: 100%;
    height: 100%;
}

.DraftTemplatePreviewContainer[b-nsardtzx2m] {
    width: 100%;
    height: 100%;
    padding: 20px;
}

[b-nsardtzx2m] .MudCarousel {
    height: 100%;
    width: 100%;
    touch-action: pan-y !important;
}

    /* Force vertical scrolling to pass through the carousel's swipe handler */
    [b-nsardtzx2m] .MudCarousel .mud-carousel-swipe {
        touch-action: pan-y !important;
    }

[b-nsardtzx2m] .MudCarouselItem {
    padding: 0px 0px 50px 0px;
    text-align: center;
    user-select: none;
    touch-action: pan-y !important;
}

.MudCarouselItemThumbnail[b-nsardtzx2m] {
    border-radius: 5px;
    touch-action: pan-y;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.GifMainContainer[b-nsardtzx2m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    gap: 10px !important;
    padding-bottom: 10px;
}


.DraftTemplatePreviewDetailContainer[b-nsardtzx2m] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 60px;
    min-width: 350px;
    width: 350px;
    overflow-y: auto;
    background: var(--ThemeBackgroundColor);
    background: var(--ThemeSurface);
}

.DraftTemplatePreviewDetailTopContainer[b-nsardtzx2m] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
}


.DraftTemplatePreviewStatisticsContainer[b-nsardtzx2m] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.StatisticsItem[b-nsardtzx2m] {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 15px;
}

[b-nsardtzx2m] .StatisticsItem > .StatisticsIcon {
    color: grey;
}


.StatisticsItem > .StatisticsValue[b-nsardtzx2m] {
    direction: ltr !important;
    color: var(--ThemeForeColor);
    opacity: 0.9;
}

.Price[b-nsardtzx2m] {
    color: mediumseagreen;
    font-weight: bold;
    font-size: 23px;
    border-radius: 10px;
    transition: 0.5s;
    margin-bottom: 40px;
}




.RatingsContainer[b-nsardtzx2m] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 25px;
}

.RatingsItem[b-nsardtzx2m] {
    width: 100%;
    border: 1px solid var(--ThemeShadowColor);
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 5px;
    transition: 0.3s;
}

    .RatingsItem:hover[b-nsardtzx2m] {
        transform: translateY(-4px);
        box-shadow: 0px 0px 5px 0px var(--ThemeShadowColor);
    }

.SpanComment[b-nsardtzx2m] {
    color: var(--ThemeForeColor);
    margin-right: 40px;
    opacity: 0.9;
    font-size: 15px;
}

.RaterProfileContainer[b-nsardtzx2m] {
    display: flex;
    flex-direction: row !important;
    gap: 10px;
    width: 100%;
}

    .RaterProfileContainer a:hover[b-nsardtzx2m] {
        text-decoration: underline;
        color: var(--ThemeForeColor);
    }

    .RaterProfileContainer img[b-nsardtzx2m] {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        object-fit: cover;
    }










.ButtonNew[b-nsardtzx2m] {
    color: var(--ThemeBackgroundColor);
    background: linear-gradient(90deg, #FE6E3B 0%, #6F2DFF 100%);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    text-decoration: none;
    width: 100px;
    font-family: SirwanBold;
}

[b-nsardtzx2m] .DraftTemplatePreviewContainer .mud-icon-root {
    color: var(--ThemeColor) !important;
}

@media (max-width: 870px) {
    .DraftTemplatePreviewMainContainer[b-nsardtzx2m] {
        flex-direction: column;
        gap: 100px;
    }

    [b-nsardtzx2m] .MudCarousel {
        height: 400px;
        touch-action: pan-y !important;
        overflow: hidden;
    }

        /* Ensure the carousel's swipe area doesn't block vertical scroll on mobile */
        [b-nsardtzx2m] .MudCarousel .mud-carousel-swipe {
            touch-action: pan-y !important;
        }

    [b-nsardtzx2m] .MudCarouselItem {
        touch-action: pan-y !important;
    }

    .GifMainContainer[b-nsardtzx2m] {
        height: 400px;
    }

    .DraftTemplatePreviewDetailContainer[b-nsardtzx2m] {
        gap: 50px;
        width: 100%;
        overflow-y: unset;
        padding-top: 50px;
        min-width: 0px !important;
    }

    .DraftTemplatePreviewContainer[b-nsardtzx2m] {
        height: 330px !important;
    }
}





.ActionsRow[b-nsardtzx2m] {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: 10px;
}



[b-nsardtzx2m] .ActionsRow button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08) !important;
}

[b-nsardtzx2m] .ActionsRow button {
    padding: 7px;
    transition: 0.2s ease;
    flex: 1;
}
/* /Components/Popups/Template/DraftTemplateUpdatePopup.razor.rz.scp.css */
.Backdrop[b-yi6fzlhuog] {
    z-index: 1;
}

.DraftTemplateUpdatePopupContainer[b-yi6fzlhuog] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
}
.DraftTemplateUpdatePopupContainer.popup-show[b-yi6fzlhuog] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.DraftTemplateUpdatePopupContainer .Header[b-yi6fzlhuog] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.DraftTemplateUpdatePopupContainer .Header .HeaderTitle[b-yi6fzlhuog] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-yi6fzlhuog] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.DraftTemplateUpdatePopupContainer > .ScrollableBody > .ButtonsContainer[b-yi6fzlhuog] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.DraftTemplateUpdatePopupContent[b-yi6fzlhuog] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

[b-yi6fzlhuog] .DraftTemplateUpdatePopupContent .mud-input-slot {
    font-size: 15px;
    font-weight : bolder;
    padding : 14px !important;
}
[b-yi6fzlhuog] .DraftTemplateUpdatePopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-yi6fzlhuog] .DraftTemplateUpdatePopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}
/* /Components/Popups/Template/TemplateFinalPreviewPopup.razor.rz.scp.css */
.PopupBackdrop[b-q93e1wglk6] {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}



.PreviewPopup[b-q93e1wglk6] {
    color: black !important;
    animation: previewFadeIn-b-q93e1wglk6 0.35s ease forwards;
    transform-origin: center;
    opacity: 0;
    position: relative;
    top: 0px;


    background-color: var(--ThemeSurface);
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align : center;
}

.PreviewTopContainer[b-q93e1wglk6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px 10px;

    border-bottom: 1px solid var(--ThemeBorderColor);

    flex: 0 0 auto;
}
.PreviewTopContainer > .Title[b-q93e1wglk6] {
    text-align: center;
    color: grey;
    font-family: SirwanBold;
    font-size: 18px;
}
.ButtonClose[b-q93e1wglk6] {
    background-color: transparent;
    color: indianred;
    font-family: Fredoka;
    font-weight: bold;
    border: none;
    width: 35px;
    height: 40px;
    border-radius: 2px;
}

.PreviewContainer[b-q93e1wglk6] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
[b-q93e1wglk6] .PreviewContainer .mud-icon-root {
   color : var(--ThemeColor) !important;
}

[b-q93e1wglk6] .MudCarousel {
    height: 100%;
    width: 100%;
}

[b-q93e1wglk6] .MudCarouselItem {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom : 10px !important;
}


@keyframes previewFadeIn-b-q93e1wglk6 {
    0% {
        opacity: 0;
        transform: scale(0.90);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Components/Popups/Template/TemplatePreviewPopup.razor.rz.scp.css */
@keyframes PreviewPlaceholderAnimation-b-vzuh5scihb {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

.PreviewPlaceholder[b-vzuh5scihb] {
    background-color: grey;
}


.Backdrop[b-vzuh5scihb] {
    z-index: 1;
}

.PreviewPopup[b-vzuh5scihb] {
    display: flex;
    flex-direction: column;
    gap: 0px;
    opacity: 0;
    border-radius: 10px;
    transform: scale(0.1) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    overflow-y: auto;
    padding: 0px;
    background: var(--ThemeGlassColor);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 90%;
    height: 80%;
    max-height: 80%;
    min-height: 80%;
    /*    max-height: 85vh;*/
}

    .PreviewPopup.popup-show[b-vzuh5scihb] {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

.Header[b-vzuh5scihb] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 0px 5px;
    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /*    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 0px grey;*/
}


    .Header > .ButtonClose[b-vzuh5scihb] {
        background-color: transparent;
        color: indianred;
        font-family: Fredoka;
        font-weight: bold;
        border: none;
        width: 35px;
        height: 40px;
        border-radius: 2px;
    }

    .Header > .Title[b-vzuh5scihb] {
        text-align: center;
        color: grey;
        font-family: SirwanBold;
        font-size: 18px;
    }



.DetailMainContainer[b-vzuh5scihb] {
    display: flex;
    flex-direction: row-reverse;
    overflow: auto;
    width: 100%;
    height: 100%;
}

.PreviewContainer[b-vzuh5scihb] {
    width: 100%;
    height: 100%;
    padding: 20px;
}

[b-vzuh5scihb] .MudCarousel {
    height: 100%;
    width: 100%;
    touch-action: pan-y !important;
}

    /* Force vertical scrolling to pass through the carousel's swipe handler */
    [b-vzuh5scihb] .MudCarousel .mud-carousel-swipe {
        touch-action: pan-y !important;
    }

[b-vzuh5scihb] .MudCarouselItem {
    padding: 0px 0px 50px 0px;
    text-align: center;
    user-select: none;
    touch-action: pan-y !important;
}

.MudCarouselItemThumbnail[b-vzuh5scihb] {
    border-radius: 5px;
    touch-action: pan-y;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.GifMainContainer[b-vzuh5scihb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    gap: 10px !important;
    padding-bottom: 10px;
}


.DetailContainer[b-vzuh5scihb] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 60px;
    min-width: 350px;
    width: 350px;
    overflow-y: auto;
    background: var(--ThemeSurface);
}

.DetailTopContainer[b-vzuh5scihb] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 30px;
}


.StatisticsContainer[b-vzuh5scihb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.StatisticsItem[b-vzuh5scihb] {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 15px;
}

[b-vzuh5scihb] .StatisticsItem > .StatisticsIcon {
    color: grey;
}


.StatisticsItem > .StatisticsValue[b-vzuh5scihb] {
    direction: ltr !important;
    color: var(--ThemeForeColor);
    opacity: 0.9;
}

.Price[b-vzuh5scihb] {
    color: mediumseagreen;
    font-weight: bold;
    font-size: 23px;
    border-radius: 10px;
    transition: 0.5s;
    margin-bottom: 40px;
}


.UserContainer[b-vzuh5scihb] {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

    .UserContainer > .ProfilePicture[b-vzuh5scihb] {
        border-radius: 50%;
        width: 42px;
        max-width: 42px;
        min-width: 42px;
        height: 42px;
        object-fit: cover;
    }

    .UserContainer > .UserNameDateContainer[b-vzuh5scihb] {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        flex: 1;
    }

        .UserContainer > .UserNameDateContainer > .UserName[b-vzuh5scihb] {
            color: var(--ThemeForeColor);
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 17px;
        }

            .UserContainer > .UserNameDateContainer > .UserName:hover[b-vzuh5scihb] {
                text-decoration: underline;
            }

        .UserContainer > .UserNameDateContainer > .Date[b-vzuh5scihb] {
            font-size: 11px;
            color: var(--ThemeColor);
            opacity: 0.9;
        }




.RatingsContainer[b-vzuh5scihb] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 25px;
}

.RatingsItem[b-vzuh5scihb] {
    width: 100%;
    border: 1px solid var(--ThemeShadowColor);
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 5px;
    transition: 0.3s;
}

    .RatingsItem:hover[b-vzuh5scihb] {
        transform: translateY(-4px);
        box-shadow: 0px 0px 5px 0px var(--ThemeShadowColor);
    }

.SpanComment[b-vzuh5scihb] {
    color: var(--ThemeForeColor);
    margin-right: 40px;
    opacity: 0.9;
    font-size: 15px;
}

.RaterProfileContainer[b-vzuh5scihb] {
    display: flex;
    flex-direction: row !important;
    gap: 10px;
    width: 100%;
}

    .RaterProfileContainer a:hover[b-vzuh5scihb] {
        text-decoration: underline;
        color: var(--ThemeForeColor);
    }

    .RaterProfileContainer img[b-vzuh5scihb] {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        object-fit: cover;
    }










.ButtonNew[b-vzuh5scihb] {
    color: var(--ThemeBackgroundColor);
    background: linear-gradient(90deg, #FE6E3B 0%, #6F2DFF 100%);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    text-decoration: none;
    width: 100px;
    font-family: SirwanBold;
}

[b-vzuh5scihb] .PreviewContainer .mud-icon-root {
    color: var(--ThemeColor) !important;
}

@media (max-width: 870px) {
    .DetailMainContainer[b-vzuh5scihb] {
        flex-direction: column;
        gap: 100px;
    }

    [b-vzuh5scihb] .MudCarousel {
        height: 400px;
        touch-action: pan-y !important;
        overflow: hidden;
    }

        /* Ensure the carousel's swipe area doesn't block vertical scroll on mobile */
        [b-vzuh5scihb] .MudCarousel .mud-carousel-swipe {
            touch-action: pan-y !important;
        }

    [b-vzuh5scihb] .MudCarouselItem {
        touch-action: pan-y !important;
    }

    .GifMainContainer[b-vzuh5scihb] {
        height: 400px;
    }

    .DetailContainer[b-vzuh5scihb] {
        gap: 50px;
        width: 100%;
        overflow-y: unset;
        padding-top: 50px;
        min-width: 0px !important;
    }

    .PreviewContainer[b-vzuh5scihb] {
        height: 330px !important;
    }
}





.ActionsRow[b-vzuh5scihb] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}



[b-vzuh5scihb] .ActionsRow button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08) !important;
}

[b-vzuh5scihb] .ActionsRow button {
    padding: 7px;
    transition: 0.2s ease;
    flex: 1;
}






.LikeButton[b-vzuh5scihb] {
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
    box-shadow: 0 4px 12px rgb(from var(--ThemeForeColor) r g b / 0.05);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
    border: 1px solid var(--ThemeBorderColor);
    background: transparent;
    max-width: 70px;
}

    .LikeButton:hover[b-vzuh5scihb] {
        transform: translateY(-1px);
        background: rgb(from var(--ThemeForeColor) r g b / 0.08);
        color: #e11d48;
        border-color: rgb(225 29 72 / 0.20);
        box-shadow: 0 8px 18px rgb(225 29 72 / 0.12);
    }

    .LikeButton:active[b-vzuh5scihb] {
        transform: scale(0.97);
    }

    .LikeButton span[b-vzuh5scihb] {
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
    }

    .LikeButton.Liked[b-vzuh5scihb] {
        background: rgb(225 29 72 / 0.10);
        color: #e11d48;
        border-color: rgb(225 29 72 / 0.22);
    }

        .LikeButton.Liked:hover[b-vzuh5scihb] {
            background: rgb(225 29 72 / 0.14);
        }
/* /Components/Popups/Template/TemplatePublishPopup.razor.rz.scp.css */
.Backdrop[b-4dktgukcq3] {
    z-index: 1;
}

.TemplatePublishPopupContainer[b-4dktgukcq3] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
}
.TemplatePublishPopupContainer.popup-show[b-4dktgukcq3] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.TemplatePublishPopupContainer > .Header[b-4dktgukcq3] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.TemplatePublishPopupContainer > .Header > .HeaderTitle[b-4dktgukcq3] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-4dktgukcq3] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.TemplatePublishPopupContainer > .ScrollableBody > .ButtonsContainer[b-4dktgukcq3] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.TemplatePublishPopupContent[b-4dktgukcq3] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
[b-4dktgukcq3] .TemplatePublishPopupContent .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}
[b-4dktgukcq3] .TemplatePublishPopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-4dktgukcq3] .TemplatePublishPopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}




.WarningContainer[b-4dktgukcq3] {
    padding: 10px 5px;
    display : flex;
    flex-direction : column;
    gap : 10px;

}


/* /Components/Popups/Template/TemplateRatingPopup.razor.rz.scp.css */
.Backdrop[b-4qufa2ddja] {
    z-index: 2;
}

.TemplateRatingMainPoupContainer[b-4qufa2ddja] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}
.TemplateRatingMainPoupContainer.popup-show[b-4qufa2ddja] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.TemplateRatingMainPoupContainer > .Header[b-4qufa2ddja] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.TemplateRatingMainPoupContainer > .Header > .HeaderTitle[b-4qufa2ddja] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.TemplateRatingMainPoupContainer > .Header > .HeaderCloseButton[b-4qufa2ddja] {
}

.ScrollableBody[b-4qufa2ddja] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.TemplateRatingMainPoupContainer > .ScrollableBody > .ButtonsContainer[b-4qufa2ddja] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.TemplateRatingContent[b-4qufa2ddja] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
.TemplateRatingContent >  textarea[b-4qufa2ddja] {
    background-color: transparent;
    color: var(--ThemeForeColor);
    opacity: 0.9;
    border: 2px solid var(--ThemeBorderColor);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    outline: none;
    font-size: 16px;
    align-self: stretch;
    width: 100%;
    min-height : 100px;
    margin-top : 5px;
    transition : 0.4s;
}
.TemplateRatingContent >  textarea:focus[b-4qufa2ddja] {
    border: 2px solid var(--ThemeColor);
}




/* /Components/Popups/Template/TemplateSharePopup.razor.rz.scp.css */
.Backdrop[b-hswdu3mvsv] {
    z-index: 2;
}

.TemplateSharePopupContainer[b-hswdu3mvsv] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}
.TemplateSharePopupContainer.popup-show[b-hswdu3mvsv] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.TemplateSharePopupContainer > .Header[b-hswdu3mvsv] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.TemplateSharePopupContainer > .Header > .HeaderTitle[b-hswdu3mvsv] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-hswdu3mvsv] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.TemplateSharePopupContainer > .ScrollableBody > .TemplateSharePopupContent[b-hswdu3mvsv] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    flex: 1;
}
[b-hswdu3mvsv] .TemplateSharePopupContent .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
    direction : ltr;
}
[b-hswdu3mvsv] .TemplateSharePopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-hswdu3mvsv] .TemplateSharePopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}




.SocialShareRow[b-hswdu3mvsv] {
    display: flex;
    justify-content: center;
    gap: 0px;
    padding: 10px;
    border-top: 1px solid rgba(128,128,128,0.1);
}
/* /Components/Popups/Template/TemplateVersionCloneAddPopup.razor.rz.scp.css */
.Backdrop[b-vv4r8j48p8] {
    z-index: 2;
}

.TemplateAddVersionPopupContainer[b-vv4r8j48p8] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}
.TemplateAddVersionPopupContainer.popup-show[b-vv4r8j48p8] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.TemplateAddVersionPopupContainer > .Header[b-vv4r8j48p8] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.TemplateAddVersionPopupContainer > .Header > .HeaderTitle[b-vv4r8j48p8] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-vv4r8j48p8] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.TemplateAddVersionPopupContainer > .ScrollableBody > .ButtonsContainer[b-vv4r8j48p8] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.TemplateAddVersionPopupContent[b-vv4r8j48p8] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
[b-vv4r8j48p8] .TemplateAddVersionPopupContent .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}
[b-vv4r8j48p8] .TemplateAddVersionPopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-vv4r8j48p8] .TemplateAddVersionPopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}




/* /Components/Popups/Template/TemplateVersionCloneDownloadingPopup.razor.rz.scp.css */
.Backdrop[b-nanw3049g7] {
    z-index: 1;
}

.TemplateVersionCloneDownloadingPopupContainer[b-nanw3049g7] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
}
.TemplateVersionCloneDownloadingPopupContainer.popup-show[b-nanw3049g7] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.TemplateVersionCloneDownloadingPopupContainer > .Header[b-nanw3049g7] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.TemplateVersionCloneDownloadingPopupContainer > .Header > .HeaderTitle[b-nanw3049g7] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-nanw3049g7] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.TemplateVersionCloneDownloadingPopupContainer > .ScrollableBody > .ButtonsContainer[b-nanw3049g7] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.TemplateVersionCloneDownloadingPopupContent[b-nanw3049g7] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
[b-nanw3049g7] .TemplateVersionCloneDownloadingPopupContent .mud-input-slot {
    font-size: 15px;
    font-weight : bolder;
    padding : 14px !important;
}
[b-nanw3049g7] .TemplateVersionCloneDownloadingPopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.7) !important;
}
[b-nanw3049g7] .TemplateVersionCloneDownloadingPopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}


/* /Components/Popups/Template/TemplateVersionCloneRenamePopup.razor.rz.scp.css */
.Backdrop[b-lkwybyk663] {
    z-index: 2;
}

.TemplateRenameVersionPopupContainer[b-lkwybyk663] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}
.TemplateRenameVersionPopupContainer.popup-show[b-lkwybyk663] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.TemplateRenameVersionPopupContainer > .Header[b-lkwybyk663] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.TemplateRenameVersionPopupContainer > .Header > .HeaderTitle[b-lkwybyk663] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-lkwybyk663] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.TemplateRenameVersionPopupContainer > .ScrollableBody > .ButtonsContainer[b-lkwybyk663] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.TemplateRenameVersionPopupContent[b-lkwybyk663] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
[b-lkwybyk663] .TemplateRenameVersionPopupContent .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}
[b-lkwybyk663] .TemplateRenameVersionPopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-lkwybyk663] .TemplateRenameVersionPopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}




/* /Components/Popups/Template/TemplateVersionClonesManagementPopup.razor.rz.scp.css */
.Backdrop[b-raqdungnt3] {
    z-index: 1;
}

.TemplateVersionsPopupContainer[b-raqdungnt3] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
}
.TemplateVersionsPopupContainer.popup-show[b-raqdungnt3] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.TemplateVersionsPopupContainer .Header[b-raqdungnt3] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.TemplateVersionsPopupContainer .Header .HeaderTitle[b-raqdungnt3] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-raqdungnt3] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}




.TemplateVersionsPopupContent[b-raqdungnt3] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
[b-raqdungnt3] .TemplateVersionsPopupContent .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}
[b-raqdungnt3] .TemplateVersionsPopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-raqdungnt3] .TemplateVersionsPopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}




.UserTemplatesConverContainer[b-raqdungnt3]{
    display : flex;
    flex-direction : column;
    gap : 10px;
    background-color: var(--ThemeBackgroundColor);
    border-radius : 10px;
}


.UserTemplatesContainer[b-raqdungnt3] {
    height: 200px;
    overflow: auto;
    margin : 5px;
}

.UserTemplatesContainer .UserTemplateItem[b-raqdungnt3]{
    display : flex;
    flex-direction : row;
    justify-content  : space-between;
    align-items : center;

    border-bottom : 1px solid var(--ThemeBorderColor);
    padding : 5px 10px;
    transition : 0.3s;
}
.UserTemplateItem:hover[b-raqdungnt3] {
    background-color: var(--ThemeSurface);
}
.UserTemplateItem.Selected[b-raqdungnt3] {
    background-color: rgb(from var(--ThemeColor) r g b /0.2);
}

.UserTemplatesContainer .UserTemplateItem .NameAndDateCoverContainer[b-raqdungnt3]{
    display : flex;
    flex-direction : column;
    gap : 0px;
    font-size : 15px;
    cursor : pointer;
    flex : 1;
}

.UserTemplatesContainer .UserTemplateItem .NameAndDateCoverContainer .VersionName[b-raqdungnt3]{
    opacity : 0.9;
}

.UserTemplatesContainer .UserTemplateItem .NameAndDateCoverContainer .VersionDate[b-raqdungnt3]{
    color : var(--ThemeColor);
    opacity : 0.8;
    font-size : 12px;
}
.UserTemplatesContainer .UserTemplateItem .NameAndDateCoverContainer:hover .VersionName[b-raqdungnt3], .UserTemplatesContainer .UserTemplateItem .NameAndDateCoverContainer:active .VersionName[b-raqdungnt3] {
    text-decoration: underline;
}

.UserTemplatesContainer .ActionsContainer[b-raqdungnt3]{

}




/* /Components/Popups/Template/TemplateVersionCloneUpdateSizePopup.razor.rz.scp.css */
.Backdrop[b-b72rruh5ud] {
    z-index: 1 !important;
}

.UserTemplateUpdateSizePopupContainer[b-b72rruh5ud] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
}
.UserTemplateUpdateSizePopupContainer.popup-show[b-b72rruh5ud] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.UserTemplateUpdateSizePopupContainer .Header[b-b72rruh5ud] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.UserTemplateUpdateSizePopupContainer .Header .HeaderTitle[b-b72rruh5ud] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-b72rruh5ud] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.UserTemplateUpdateSizePopupContainer > .ScrollableBody > .ButtonsContainer[b-b72rruh5ud] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.UserTemplateUpdateSizePopupContent[b-b72rruh5ud] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

[b-b72rruh5ud] .UserTemplateUpdateSizePopupContent .mud-input-slot {
    font-size: 15px;
    font-weight : bolder;
    padding : 14px !important;
}
[b-b72rruh5ud] .UserTemplateUpdateSizePopupContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-b72rruh5ud] .UserTemplateUpdateSizePopupContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}

@media (max-width: 630px) {
    .ProfileAndBioContainer[b-b72rruh5ud] {
        flex-direction : column;
        align-items : center;
    }
}
/* /Components/Popups/TranslatingPopup.razor.rz.scp.css */
.Backdrop[b-9y608cho6k] {
    z-index: 1;
}

.TranslatingPoupContainer[b-9y608cho6k] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
}
.TranslatingPoupContainer.popup-show[b-9y608cho6k] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.TranslatingPoupContainer .Header[b-9y608cho6k] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.TranslatingPoupContainer .Header .HeaderTitle[b-9y608cho6k] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-9y608cho6k] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.TranslatingPoupContainer > .ScrollableBody > .ButtonsContainer[b-9y608cho6k] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.TranslatingContent[b-9y608cho6k] {
    font-size: 17px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    flex: 1;
}

[b-9y608cho6k] .TranslatingContent .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}

[b-9y608cho6k] .TranslatingContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}

[b-9y608cho6k] .TranslatingContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}
/* /Components/Popups/UserRatingPopup.razor.rz.scp.css */
.Backdrop[b-ccwasdeaj3] {
    z-index: 1;
}

.RatingMainPoupContainer[b-ccwasdeaj3] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}
.RatingMainPoupContainer.popup-show[b-ccwasdeaj3] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.RatingMainPoupContainer > .Header[b-ccwasdeaj3] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.RatingMainPoupContainer > .Header > .HeaderTitle[b-ccwasdeaj3] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-ccwasdeaj3] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.RatingMainPoupContainer > .ScrollableBody > .ButtonsContainer[b-ccwasdeaj3] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.RatingMainContent[b-ccwasdeaj3] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}




.RatingMainContent >  textarea[b-ccwasdeaj3] {
    background-color: transparent;
    color: var(--ThemeForeColor);
    opacity: 0.9;
    border: 2px solid var(--ThemeBorderColor);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    outline: none;
    font-size: 16px;
    align-self: stretch;
    width: 100%;
    min-height : 100px;
    margin-top : 5px;
    transition : 0.4s;
}
.RatingMainContent >  textarea:focus[b-ccwasdeaj3] {
    border: 2px solid var(--ThemeColor);
}



/* /Components/Popups/UserShareProfilePopup.razor.rz.scp.css */
.Backdrop[b-wzuwvdtoo9] {
    z-index: 1;
}

.UserShareProfileContainer[b-wzuwvdtoo9] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}
.UserShareProfileContainer.popup-show[b-wzuwvdtoo9] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.UserShareProfileContainer > .Header[b-wzuwvdtoo9] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.UserShareProfileContainer > .Header > .HeaderTitle[b-wzuwvdtoo9] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-wzuwvdtoo9] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}




.UserShareProfileContainer > .ScrollableBody > .UserShareProfileContent[b-wzuwvdtoo9] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    flex: 1;
}
[b-wzuwvdtoo9] .UserShareProfileContent .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
    direction: ltr;
}
[b-wzuwvdtoo9] .UserShareProfileContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-wzuwvdtoo9] .UserShareProfileContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}




.UserShareProfileContainer > .ScrollableBody > .SocialShareRow[b-wzuwvdtoo9] {
    display: flex;
    justify-content: center;
    gap: 0px;
    margin-top: 24px;
    padding-top: 15px;
}
/* /Components/Popups/UserUpdateDataPopup.razor.rz.scp.css */
.Backdrop[b-g1qcubv3fo] {
    z-index: 1;
}

.UserUpdateDataPoupContainer[b-g1qcubv3fo] {
    background-color: var(--ThemeBackgroundColor);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    transition: opacity 225ms cubic-bezier(0.0, 0, 0.2, 1), transform 225ms cubic-bezier(0.0, 0, 0.2, 1);
    will-change: transform, opacity;
    color: var(--ThemeForeColor) !important;
    background: linear-gradient( to top, rgb(from var(--ThemeBackgroundColor) r g b / 1) 10%, rgb(from var(--ThemeSurface) r g b / 1) 100% );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
}
.UserUpdateDataPoupContainer.popup-show[b-g1qcubv3fo] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.UserUpdateDataPoupContainer > .Header[b-g1qcubv3fo] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.UserUpdateDataPoupContainer > .Header > .HeaderTitle[b-g1qcubv3fo] {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--ThemeForeColor);
}

.ScrollableBody[b-g1qcubv3fo] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.UserUpdateDataPoupContainer > .ScrollableBody > .ButtonsContainer[b-g1qcubv3fo] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 15px;
}

.UserUpdateDataContent[b-g1qcubv3fo] {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}


.ProfileAndBioContainer[b-g1qcubv3fo] {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.UserUpdateDataContent  textarea[b-g1qcubv3fo] {
    background-color: transparent;
    color: var(--ThemeForeColor);
    opacity: 0.9;
    border: 1px solid var(--ThemeBorderColor);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    outline: none;
    font-size: 15px;
    align-self: stretch;
    width: 100%;
    max-height : 95px;
    min-height : 95px;
    margin-top : 5px;
    transition : 0.4s;
}
.UserUpdateDataContent  textarea:focus[b-g1qcubv3fo] {
    border: 2px solid var(--ThemeColor);
}
.UserUpdateDataContent .ProfilePictureContainer[b-g1qcubv3fo]{
    position : relative;
    height : fit-content;
}
.UserUpdateDataContent .ProfilePictureContainer img[b-g1qcubv3fo] {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    object-fit : cover;
    cursor : pointer;
}


.UserUpdateDataContent .FieldsContainer[b-g1qcubv3fo] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
[b-g1qcubv3fo] .UserUpdateDataContent .FieldsContainer .mud-input-label.mud-input-label-animated {
    color: grey !important;
}


[b-g1qcubv3fo] .UserUpdateDataContent .mud-input-slot {
    text-align: left !important;
    direction: ltr;
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}

[b-g1qcubv3fo] .UserUpdateDataContent .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}

[b-g1qcubv3fo] .UserUpdateDataContent .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}

@media (max-width: 630px) {
    .ProfileAndBioContainer[b-g1qcubv3fo] {
        flex-direction : column;
        align-items : center;
    }
}
/* /Layout/EmptyLayout.razor.rz.scp.css */

[b-cbiaowg6dk] .mud-drawer-header, [b-cbiaowg6dk] .MudDrawerHeader {
    padding: 0px !important;
    background-color: red !important;
}





.MainLayoutLinksContainer[b-cbiaowg6dk] {
    flex-direction: column;
    padding: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 25px;
    height: 100%;
}

[b-cbiaowg6dk] .MainLayoutLinksContainer .a {
    color: grey;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px !important;
    text-decoration: none;
    padding: 10px 10px 5px 10px;
    border-bottom: 4px solid transparent;
    transition: all 0.3s ease-in-out;
}

.MainLayoutLinksContainer[b-cbiaowg6dk]  a.active {
    color: var(--ThemeColor) !important;
    border-bottom: 4px solid var(--ThemeButtonColor);
}

.MainLayoutLinksContainer[b-cbiaowg6dk]  a.active svg {
    fill: var(--ThemeColor) !important;
    color: var(--ThemeColor) !important;
    transition: fill 0.3s ease;
}

[b-cbiaowg6dk] .MainLayoutLinksContainer a:hover {
    color: var(--ThemeColor);
}

[b-cbiaowg6dk] .MainLayoutLinksContainer a:hover svg {
    fill: var(--ThemeColor);
    transform: translateY(-2px);
}
/* /Layout/MainLayout.razor.rz.scp.css */
.AppMainArea[b-5v8tpqbggv] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100%;
    overflow: hidden; 
    position: relative;
}
.BodyContainer[b-5v8tpqbggv] {
    flex: 1;
    overflow-y: auto; 
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}


.AppMainArea[b-5v8tpqbggv]::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
.AppMainArea[b-5v8tpqbggv]::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 5px;
}





/* Drawer shell */
[b-5v8tpqbggv] .MainDrawer.mud-drawer {
    width: 330px !important;
    max-width: 92vw;
    background: linear-gradient(180deg, rgb(from var(--ThemeBackgroundColor) r g b / 0.98), rgb(from var(--ThemeBackgroundColor) r g b / 0.94)) !important;
    border-inline-end: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08) !important;
    box-shadow: 0 18px 40px rgb(from var(--ThemeForeColor) r g b / 0.10) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[b-5v8tpqbggv] .mud-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[b-5v8tpqbggv] .mud-drawer-header,
[b-5v8tpqbggv] .MudDrawerHeader {
    padding: 0 !important;
    background: transparent !important;
}

.DrawerContainer[b-5v8tpqbggv] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.DrawerHeader[b-5v8tpqbggv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), transparent 60%);
    position: relative;
    height : 65px;
    padding : 0px 10px;
}
.DrawerHeader[b-5v8tpqbggv]::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    inset-inline-end: -55px;
    top: -70px;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    filter: blur(10px);
    pointer-events: none;
}

.DrawerBrandTitle[b-5v8tpqbggv] {
    color: var(--ThemeForeColor);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.DrawerBrandSubtitle[b-5v8tpqbggv] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.56);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

[b-5v8tpqbggv] .DrawerCloseButton {
    border-radius: 14px !important;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04) !important;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
    color: rgb(from var(--ThemeForeColor) r g b / 0.74) !important;
    position: relative;
    z-index: 1;
}

[b-5v8tpqbggv] .DrawerCloseButton:hover {
    background: rgb(from var(--ThemeForeColor) r g b / 0.07) !important;
}

/* Body */
.DrawerBody[b-5v8tpqbggv] {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.DrawerSectionLabel[b-5v8tpqbggv] {
    display: flex;
    align-items: center;
    padding-inline: 4px;
}
.DrawerSectionLabel span[b-5v8tpqbggv] {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.16);
}

/* Links */
.MainLayoutLinksContainer[b-5v8tpqbggv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
[b-5v8tpqbggv] .MainLayoutLinksContainer a {
    color: rgb(from var(--ThemeForeColor) r g b / 0.66);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-decoration: none;
    padding: 13px 14px;
    border-radius: 18px;
    border: 1px solid transparent;
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
    transition: all 0.25s ease;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    min-height: 50px;
}
[b-5v8tpqbggv] .MainLayoutLinksContainer a .mud-icon-root {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
[b-5v8tpqbggv] .MainLayoutLinksContainer a span {
    line-height: 1.2;
}

.MainLayoutLinksContainer[b-5v8tpqbggv]  a.active {
    color: var(--ThemeColor) !important;
    background: rgb(from var(--ThemeColor) r g b / 0.10) !important;
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.16) !important;
    box-shadow: 0 10px 24px rgb(from var(--ThemeColor) r g b / 0.08);
}
.MainLayoutLinksContainer[b-5v8tpqbggv]  a.active svg {
    fill: var(--ThemeColor) !important;
    color: var(--ThemeColor) !important;
    transition: fill 0.25s ease;
}
[b-5v8tpqbggv] .MainLayoutLinksContainer a:hover {
    color: var(--ThemeForeColor);
    background: rgb(from var(--ThemeForeColor) r g b / 0.05);
    border-color: rgb(from var(--ThemeForeColor) r g b / 0.06);
    transform: translateY(-1px);
}
[b-5v8tpqbggv] .MainLayoutLinksContainer a:hover svg {
    fill: var(--ThemeForeColor);
    color: var(--ThemeForeColor);
    transform: translateY(-1px);
}



/*--------------------*/



[b-5v8tpqbggv] .MainLayoutLinksContainer .PremiumNavLink a{
    color: #b8860b !important;
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
}

[b-5v8tpqbggv] .MainLayoutLinksContainer .PremiumNavLink a .mud-icon-root,
[b-5v8tpqbggv] .MainLayoutLinksContainer .PremiumNavLink a svg {
    color: #d4a017 !important;
    fill: #d4a017 !important;
}
[b-5v8tpqbggv] .MainLayoutLinksContainer .PremiumNavLink a.active {
    background: linear-gradient(135deg, rgb(255 215 0 / 0.14), rgb(255 193 7 / 0.08)) !important;
    border-color: rgb(255 193 7 / 0.48) !important;
    color: #8c6500 !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}


[b-5v8tpqbggv] .MainLayoutLinksContainer .CreatorNavLink a{
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
}

[b-5v8tpqbggv] .MainLayoutLinksContainer .CreatorNavLink a .mud-icon-root,
[b-5v8tpqbggv] .MainLayoutLinksContainer .CreatorNavLink a svg {
    color: var(--ThemeColor) !important;
    fill: var(--ThemeColor) !important;
}

[b-5v8tpqbggv] .MainLayoutLinksContainer .CreatorNavLink a.active {
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.14), rgb(from var(--ThemeColor) r g b / 0.07)) !important;
    border-color: rgb(from var(--ThemeColor) r g b / 0.42) !important;
    color: var(--ThemeColor) !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.10);
}


/*--------------------*/












/* Bottom card */
.DrawerBottomCard[b-5v8tpqbggv] {
    margin-top: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), rgb(from var(--ThemeForeColor) r g b / 0.02));
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.04);
}

.DrawerBottomIcon[b-5v8tpqbggv] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    flex-shrink: 0;
}

.DrawerBottomText[b-5v8tpqbggv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .DrawerBottomText strong[b-5v8tpqbggv] {
        color: var(--ThemeForeColor);
        font-size: 14px;
        font-weight: 900;
        line-height: 1.2;
    }

    .DrawerBottomText span[b-5v8tpqbggv] {
        color: rgb(from var(--ThemeForeColor) r g b / 0.62);
        font-size: 12px;
        line-height: 1.7;
    }

/* Scroll polish */
.DrawerBody[b-5v8tpqbggv]::-webkit-scrollbar {
    width: 8px;
}

.DrawerBody[b-5v8tpqbggv]::-webkit-scrollbar-thumb {
    background: rgb(from var(--ThemeForeColor) r g b / 0.12);
    border-radius: 999px;
}

.DrawerBody[b-5v8tpqbggv]::-webkit-scrollbar-track {
    background: transparent;
}

/* Responsive */
@media (max-width: 640px) {
    [b-5v8tpqbggv] .MainDrawer.mud-drawer {
        width: 300px !important;
    }

    .DrawerHeader[b-5v8tpqbggv] {
        padding: 14px;
    }

    .DrawerBody[b-5v8tpqbggv] {
        padding: 12px;
    }

    [b-5v8tpqbggv] .MainLayoutLinksContainer a {
        padding: 12px 13px;
        min-height: 48px;
        font-size: 13px;
    }

    .DrawerBottomCard[b-5v8tpqbggv] {
        padding: 14px;
        border-radius: 20px;
    }
}





/* /Layout/NavMenu.razor.rz.scp.css */
.Navbar[b-ol16v71nh5] {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    position: sticky;
    top: 0;
    z-index: 0;
    
    
    background-color : transparent;
    transition: all 0.3s ease;
    padding: 10px 18px;
    
    
    height: 68px;
    min-height: 68px;
    max-height: 68px;
}
.NavSection[b-ol16v71nh5] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.NavSectionRight[b-ol16v71nh5] {
    justify-content: flex-start;
    min-width: fit-content;
}
.NavSectionLeft[b-ol16v71nh5] {
    justify-content: flex-end;
    min-width: fit-content;
}


/*--------------------------*/


[b-ol16v71nh5] .NavMenuLinksContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border-radius: 20px;


    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
    box-shadow: inset 0 1px 0 rgb(from var(--ThemeBackgroundColor) r g b / 0.65);
    background: rgb(from var(--ThemeForeColor) r g b / 0.03);
}
[b-ol16v71nh5] .NavMenuLinksContainer a {
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}
[b-ol16v71nh5] .NavMenuLinksContainer a .mud-icon-root {
    width: 18px;
    height: 18px;
}
[b-ol16v71nh5] .NavMenuLinksContainer a.active {
    color: var(--ThemeColor) !important;
    border-color: rgb(from var(--ThemeColor) r g b / 0.16);
    box-shadow: 0 8px 18px rgb(from var(--ThemeColor) r g b / 0.10);

    background: rgb(from var(--ThemeColor) r g b / 0.10);
}
[b-ol16v71nh5] .NavMenuLinksContainer a.active svg {
    fill: var(--ThemeColor) !important;
}
[b-ol16v71nh5] .NavMenuLinksContainer a:hover {
    color: var(--ThemeForeColor);
    background: rgb(from var(--ThemeForeColor) r g b / 0.05);
    transform: translateY(-1px);
}
[b-ol16v71nh5] .NavMenuLinksContainer a:hover svg {
    transform: translateY(-1px);
}


[b-ol16v71nh5] .NavMenuLinksContainer a.PremiumNavLink {
    color: #d4a017;
    background: transparent;
}
[b-ol16v71nh5] .NavMenuLinksContainer a.PremiumNavLink svg {
    color: #d4a017 !important;
    fill: #d4a017 !important;
}
[b-ol16v71nh5] .NavMenuLinksContainer a.PremiumNavLink:hover
{
    background: rgb(from gold r g b / 0.05);
    transform: translateY(-1px);
}
[b-ol16v71nh5] .NavMenuLinksContainer a.PremiumNavLink.active {
    background: linear-gradient(135deg, rgb(255 215 0 / 0.14), rgb(255 193 7 / 0.08)) !important;
    border-color: rgb(255 193 7 / 0.48) !important;
    color: #d4a017 !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}


[b-ol16v71nh5] .NavMenuLinksContainer a.CreatorNavLink {
    color: var(--ThemeColor);
    background: transparent;
}
[b-ol16v71nh5] .NavMenuLinksContainer a.CreatorNavLink svg {
    color: var(--ThemeColor) !important;
    fill: var(--ThemeColor) !important;
}
[b-ol16v71nh5] .NavMenuLinksContainer a.CreatorNavLink:hover
{
    background: rgb(from var(--ThemeColor) r g b / 0.05);
    transform: translateY(-1px);
}
[b-ol16v71nh5] .NavMenuLinksContainer a.CreatorNavLink.active {
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.14), rgb(from var(--ThemeColor) r g b / 0.07)) !important;
    border-color: rgb(from var(--ThemeColor) r g b / 0.42) !important;
    color: var(--ThemeColor) !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.10);
}


/*--------------------------*/


.ProfileActivator[b-ol16v71nh5] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ProfileAvatarWrap[b-ol16v71nh5] {
    padding: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgb(from var(--ThemeForeColor) r g b / 0.06), rgb(from var(--ThemeForeColor) r g b / 0.02));
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    transition: all 0.25s ease;
}
.ProfileAvatarWrap:hover[b-ol16v71nh5] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgb(from var(--ThemeForeColor) r g b / 0.10);
}
[b-ol16v71nh5] .ProfileAvatar {
    background: transparent !important;
}
.Navbar .ProfilePicture[b-ol16v71nh5] {
    border-radius: 50%;
    object-fit: cover !important;
    display: block;
}
.Navbar .ProfilePicture.IsCreator[b-ol16v71nh5] {
    border: 3px solid var(--ThemeColor);
}
.Navbar .ProfilePicture.IsPremium[b-ol16v71nh5] {
    outline: 2.5px solid gold;
}


/*--------------------------*/

.NotificationContainer[b-ol16v71nh5] {
    display: flex;
    flex-direction: column;
    gap: 0px !important;

    width: 350px;
    max-width: 350px;
    min-width: 250px;
    height: 460px;
}
.NotificationsState[b-ol16v71nh5] {
    flex : 1;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
}
.NotificationsState.Empty[b-ol16v71nh5] {
    flex-direction: column;
    gap: 8px;
}
.NotificationsContainer[b-ol16v71nh5] {
    flex : 1;
    padding: 10px;
    width : 100%;
    height : 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.NotificationItem[b-ol16v71nh5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.05);
    background: rgb(from var(--ThemeForeColor) r g b / 0.025);
    transition: all 0.25s ease;
}
.NotificationItem.Unread[b-ol16v71nh5] {
    background: rgb(from var(--ThemeColor) r g b / 0.10) !important;
    border-color: rgb(from var(--ThemeColor) r g b / 0.12) !important;
}
.NotificationItem:hover[b-ol16v71nh5] {
    background: rgb(from var(--ThemeForeColor) r g b / 0.05) !important;
    transform: translateY(-1px);
}
.NotificationItem:hover .NotificationTitle[b-ol16v71nh5] {
    color: var(--ThemeColor) !important;
}
.NotificationItem .NotificationTitle[b-ol16v71nh5] {
    font-size: 14px;
    font-weight: 900 !important;
    opacity: 0.9;
}
.NotificationItem .NotificationDescription[b-ol16v71nh5] {
    white-space: normal !important;
    font-size: 13px;
    color: var(--ThemeForeColor);
    opacity: 0.78;
    line-height: 1.75;
}
.NotificationItem .NotificationDate[b-ol16v71nh5] {
    margin-right: auto;
    font-size: 11px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.48);
    color: var(--ThemeColor);
}


/*--------------------------*/


.WalletLink[b-ol16v71nh5] {
    text-decoration: none;
}
.WalletCapsule[b-ol16v71nh5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), rgb(from var(--ThemeForeColor) r g b / 0.02));
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.12);
    transition: all 0.25s ease;
    cursor: pointer;

    border-radius: 15px;
    padding : 4px 10px;
}
.WalletCapsule:hover[b-ol16v71nh5] {
    border-color: rgb(from var(--ThemeColor) r g b / 0.24);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgb(from var(--ThemeColor) r g b / 0.10);
}
.WalletIconWrap[b-ol16v71nh5] {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    color: var(--ThemeColor);
    flex-shrink: 0;
}
.WalletTextWrap[b-ol16v71nh5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
}
.WalletMiniLabel[b-ol16v71nh5] {
    font-size: 10px;
    font-weight: 800;
    color: rgb(from var(--ThemeForeColor) r g b / 0.52);
}
.WalletCapsule .SpanWallet[b-ol16v71nh5] {
    font-weight: 900;
    font-family: Fredoka, SirwanBold;
    color: var(--ThemeColor) !important;
    font-size: 14px;
}
[b-ol16v71nh5] .WalletCapsule .mud-icon-root {
    color: var(--ThemeColor) !important;
}


/*--------------------------*/


.ThemeToggleWrap[b-ol16v71nh5], .MenuToggleWrap[b-ol16v71nh5], .NotificationToggleWrap[b-ol16v71nh5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
    transition: all 0.25s ease;
}
.ThemeToggleWrap:hover[b-ol16v71nh5] {
    background: rgb(from var(--ThemeForeColor) r g b / 0.06);
    transform: translateY(-1px);
}
.SigninButton[b-ol16v71nh5] {
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    min-width: 130px;
}
[b-ol16v71nh5] .MenuIcon {
    display: none;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72) !important;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
    border-radius: 14px !important;
}


/*--------------------------*/

.MenuToggleWrap[b-ol16v71nh5] {
    display: none;
}

/*--------------------------*/

@media (max-width: 1100px) {

    .NavMenuLinksContainer[b-ol16v71nh5] {
        gap: 6px;
        padding: 5px;
    }

    [b-ol16v71nh5] .NavMenuLinksContainer a {
        padding: 9px 11px;
        font-size: 12px;
    }
}

@media (max-width: 860px) {
    .Navbar .NavMenuLinksContainer[b-ol16v71nh5] {
        display: none !important;
    }

    .MenuToggleWrap[b-ol16v71nh5] {
        display: inline-flex;
    }

    .Navbar[b-ol16v71nh5] {
        padding: 10px 12px;
        gap: 10px;
    }

    .NavSectionRight[b-ol16v71nh5] {
        flex: 1;
        min-width: 0;
    }

    .NavSectionLeft[b-ol16v71nh5] {
        gap: 8px;
    }
}

@media (max-width: 560px) {
    .Navbar[b-ol16v71nh5] {
        height: 64px;
        min-height: 64px;
        padding: 8px 10px;
    }

    .NotificationContainer[b-ol16v71nh5] {
        width: 270px;
    }

    .SigninButton[b-ol16v71nh5] {
        min-width: 110px;
        padding-inline: 10px !important;
    }
}
/* /Pages/Creator.razor.rz.scp.css */
.CreatorHeroContent[b-tuct108aob] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.12), transparent 55%), linear-gradient(180deg, rgb(from var(--ThemeBackgroundColor) r g b / 0.96), rgb(from var(--ThemeBackgroundColor) r g b / 0.88));
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 10px 35px rgb(from var(--ThemeForeColor) r g b / 0.05);
    overflow: hidden;
    position: relative;
    min-height: 460px;
}

.CreatorHeroContent[b-tuct108aob]::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    top: -80px;
    inset-inline-end: -60px;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    filter: blur(10px);
    pointer-events: none;
}

.CreatorHeroText[b-tuct108aob] {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 0;
}

.HeroMiniLabel[b-tuct108aob],
.SectionMiniLabel[b-tuct108aob] {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}

.CreatorHeroText h1[b-tuct108aob] {
    margin: 0;
    font-size: clamp(30px, 5vw, 50px);
    line-height: 1.12;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.CreatorHeroText p[b-tuct108aob] {
    margin: 16px 0 0 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 2;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
}

.HeroButtons[b-tuct108aob] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

[b-tuct108aob] .HeroPrimaryButton {
    border-radius: 14px !important;
    min-width: 155px;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 25px rgb(from var(--ThemeColor) r g b / 0.22);
}

.HeroTrustBadge[b-tuct108aob] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    color: rgb(from var(--ThemeForeColor) r g b / 0.82);
    background: rgb(from var(--ThemeForeColor) r g b / 0.05);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
}

/* Preview */
.CreatorPreviewCard[b-tuct108aob] {
    width: 390px;
    min-width: 320px;
    border-radius: 24px;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    padding: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.06);
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.PreviewHeader[b-tuct108aob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.PreviewDots[b-tuct108aob] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .PreviewDots span[b-tuct108aob] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgb(from var(--ThemeForeColor) r g b / 0.18);
    }

.PreviewLabel[b-tuct108aob] {
    font-size: 12px;
    font-weight: 800;
    color: rgb(from var(--ThemeForeColor) r g b / 0.58);
}

.PreviewBody[b-tuct108aob] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.PreviewTopStat[b-tuct108aob] {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), rgb(from var(--ThemeForeColor) r g b / 0.02));
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.14);
}

.PreviewIconWrap[b-tuct108aob] {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    flex-shrink: 0;
}

.PreviewTopText[b-tuct108aob] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .PreviewTopText strong[b-tuct108aob] {
        font-size: 15px;
        color: var(--ThemeForeColor);
    }

    .PreviewTopText span[b-tuct108aob] {
        font-size: 13px;
        line-height: 1.7;
        color: rgb(from var(--ThemeForeColor) r g b / 0.65);
    }

.PreviewBenefitList[b-tuct108aob] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.PreviewBenefit[b-tuct108aob] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
    color: rgb(from var(--ThemeForeColor) r g b / 0.82);
    font-size: 12px;
    font-weight: 800;
}

    .PreviewBenefit[b-tuct108aob]  .mud-icon-root {
        color: var(--ThemeColor);
    }

.PreviewStatsGrid[b-tuct108aob] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.MiniPreviewStat[b-tuct108aob] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-height: 74px;
    border-radius: 16px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

    .MiniPreviewStat strong[b-tuct108aob] {
        color: var(--ThemeColor);
        font-size: 16px;
        font-weight: 900;
        line-height: 1.1;
    }

    .MiniPreviewStat span[b-tuct108aob] {
        color: rgb(from var(--ThemeForeColor) r g b / 0.58);
        font-size: 11px;
        font-weight: 800;
    }

/* Shared section */
.BenefitsSection[b-tuct108aob],
.pricing[b-tuct108aob] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.SectionHeader[b-tuct108aob] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

    .SectionHeader.Centered[b-tuct108aob] {
        align-items: center;
        text-align: center;
    }

    .SectionHeader h2[b-tuct108aob] {
        margin: 0;
        font-size: clamp(24px, 4vw, 34px);
        line-height: 1.2;
        font-weight: 900;
        color: var(--ThemeForeColor);
    }

    .SectionHeader p[b-tuct108aob] {
        margin: 0;
        font-size: 14px;
        line-height: 1.9;
        color: rgb(from var(--ThemeForeColor) r g b / 0.62);
        max-width: 760px;
    }

/* Benefits */
.BenefitsGrid[b-tuct108aob] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.BenefitCard[b-tuct108aob] {
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    padding: 22px;
    border-radius: 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .BenefitCard:hover[b-tuct108aob] {
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
        border-color: rgb(from var(--ThemeColor) r g b / 0.20);
    }

.BenefitIcon[b-tuct108aob] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    color: var(--ThemeColor);
}

.BenefitCard h3[b-tuct108aob] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--ThemeForeColor);
}

.BenefitCard p[b-tuct108aob] {
    margin: 0;
    color: rgb(from var(--ThemeForeColor) r g b / 0.66);
    line-height: 1.9;
    font-size: 13px;
}

/* Pricing */
.pricing[b-tuct108aob] {
    padding: 0;
}

.pricing-container[b-tuct108aob] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.price-card[b-tuct108aob] {
    position: relative;
    background: linear-gradient(180deg, rgb(from var(--ThemeColor) r g b / 0.05), rgb(from var(--ThemeBackgroundColor) r g b / 0.92));
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    padding: 22px;
    border-radius: 26px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.price-card:hover[b-tuct108aob] {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
    border-color: rgb(from var(--ThemeColor) r g b / 0.22);
}

.price-card.popular[b-tuct108aob] {
    border: 2px solid rgb(from var(--ThemeColor) r g b / 0.75);
    box-shadow: 0 20px 40px rgb(from var(--ThemeColor) r g b / 0.10);
}

.PopularBadge[b-tuct108aob] {
    position: absolute;
    inset-inline-end: 16px;
    top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 800;
    color: var(--ThemeBackgroundColor);
    background: var(--ThemeColor);
    box-shadow: 0 8px 22px rgb(from var(--ThemeColor) r g b / 0.18);
}

.PlanHeader[b-tuct108aob] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    margin-bottom: 6px;
}

    .PlanHeader h3[b-tuct108aob] {
        margin: 0;
        color: var(--ThemeForeColor);
        font-size: 22px;
        font-weight: 900;
    }

.PlanSubtitle[b-tuct108aob] {
    font-size: 12px;
    line-height: 1.7;
    color: rgb(from var(--ThemeForeColor) r g b / 0.58);
    min-height: 38px;
}

.price[b-tuct108aob] {
    font-size: 42px;
    font-weight: 900;
    margin: 16px 0 18px 0;
    color: var(--ThemeColor);
    line-height: 1.1;
}

    .price span[b-tuct108aob] {
        font-size: 14px;
        color: rgb(from var(--ThemeForeColor) r g b / 0.52);
        font-weight: 700;
    }

.price-card ul[b-tuct108aob] {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

    .price-card ul li[b-tuct108aob] {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: 8px;
        color: var(--ThemeForeColor);
        line-height: 1.7;
        font-size: 13px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgb(from var(--ThemeForeColor) r g b / 0.03);
        border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.05);
    }

.PlanCheckIcon[b-tuct108aob] {
    color: var(--ThemeColor) !important;
    margin-top: 2px;
    flex-shrink: 0;
}

[b-tuct108aob] .subscribe-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 14px !important;
    border: none;
    font-weight: 900 !important;
    cursor: pointer;
    margin-top: 18px;
    box-shadow: 0 10px 25px rgb(from var(--ThemeColor) r g b / 0.18);
}

/* Active Plan Badge */
.ActivePlanBadge[b-tuct108aob] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.12), rgb(from var(--ThemeColor) r g b / 0.04));
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.25);
}

    .ActivePlanBadge[b-tuct108aob]  .mud-icon-root {
        color: var(--ThemeColor);
        flex-shrink: 0;
    }

.ActivePlanBadgeText[b-tuct108aob] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .ActivePlanBadgeText span[b-tuct108aob] {
        font-size: 12px;
        font-weight: 700;
        color: var(--ThemeForeColor);
        line-height: 1.6;
    }

        .ActivePlanBadgeText span strong[b-tuct108aob] {
            color: var(--ThemeColor);
        }

    .ActivePlanBadgeText .ActivePlanRemaining[b-tuct108aob] {
        font-size: 11px;
        color: rgb(from var(--ThemeForeColor) r g b / 0.55);
        font-weight: 800;
    }

/* States */
.StateContainer[b-tuct108aob] {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 24px;
    border: 1px dashed rgb(from var(--ThemeForeColor) r g b / 0.12);
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
    grid-column: 1 / -1;
}

/* Responsive */
@media (max-width: 1100px) {
    .CreatorHeroContent[b-tuct108aob] {
        flex-direction: column;
        min-height: unset;
    }

    .CreatorPreviewCard[b-tuct108aob] {
        display : none;
    }
}

@media (max-width: 760px) {
    .CreatorHeroContent[b-tuct108aob],
    .BenefitCard[b-tuct108aob],
    .price-card[b-tuct108aob] {
        border-radius: 20px;
    }

    .CreatorHeroContent[b-tuct108aob] {
        padding: 18px;
    }

    .HeroButtons[b-tuct108aob] {
        flex-direction: column;
        align-items: stretch;
    }

    .HeroTrustBadge[b-tuct108aob],
    [b-tuct108aob] .HeroPrimaryButton {
        width: 100%;
        justify-content: center;
    }

    .PreviewBenefitList[b-tuct108aob],
    .PreviewStatsGrid[b-tuct108aob],
    .pricing-container[b-tuct108aob] {
        grid-template-columns: 1fr;
    }

    .SectionHeader h2[b-tuct108aob] {
        font-size: 26px;
    }
}

@media (max-width: 520px) {
    .CreatorHeroText h1[b-tuct108aob] {
        font-size: 30px;
    }

    .CreatorHeroText p[b-tuct108aob] {
        font-size: 14px;
    }

    .price[b-tuct108aob] {
        font-size: 36px;
    }

    .PopularBadge[b-tuct108aob] {
        position: static;
        width: fit-content;
        margin-bottom: 12px;
    }
}



/*.MainContainer {
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow: auto;
    height: calc(100% - 60px);
    width: 100%;
}

.hero {
    text-align: center;
    padding: 120px 20px 80px 20px;
}

.hero h1 {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(90deg, gold, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    margin-top: 20px;
    font-size: 18px;
    color: var(--ThemeForeColor);
    opacity : 0.8;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

::deep .cta-btn {
    margin-top: 40px;
    padding: 15px 40px;
    border-radius: 50px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.cta-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 10px 30px rgba(99,102,241,0.4);
}*/

/* FEATURES */
/*.features {
    padding: 80px 8%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--ThemeSurface);
    padding: 30px;
    border-radius: 20px;
    transition: 0.3s;
}

.feature-card:hover {
    transform: translateY(-10px);
    background: #263449;
}

.feature-card h3 {
    margin-bottom: 15px;
    font-size: 20px;
}

.feature-card p {
    color: grey;
}*/

/* PRICING */
/*.pricing {
    padding: 100px 8%;
    text-align: center;
}

.pricing h2 {
    font-size: 36px;
    margin-bottom: 60px;
}

.pricing-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.price-card {
    background: rgb(from var(--ThemeColor) r g b / 0.05) !important;
    border: 1px solid var(--ThemeBorderColor);
    padding: 40px;
    border-radius: 25px;
    width: 300px;
    transition: 0.3s;
}
.price-card h3{
        color : grey ;
}

.price-card:hover {
    transform: scale(1.05);
}

    .price-card.popular {
        border: 2px solid var(--ThemeColor);
        transform: scale(1.1);
    }

.price {
    font-size: 40px;
    font-weight: 700;
    margin: 20px 0;
    color: var(--ThemeColor);
}

.price span {
    font-size: 16px;
    color: #94a3b8;
}

.price-card ul {
    list-style: none;
    margin: 20px 0;
    text-align: right;
}

.price-card ul li {
    margin: 12px 0;
    color: var(--ThemeForeColor);
}

::deep .subscribe-btn {
    width: 100%;
    padding: 12px;
    border-radius: 30px;
    border: none;
    
    color: white;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
}*/
/* /Pages/EditorDraft.razor.rz.scp.css */
.MenubarContainer[b-1zy5ife2eg] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;

    width: 100%;
    height: 50px;

    padding: 0px 5px;
    background-color: transparent;
    border-bottom: 1px solid var(--ThemeBorderColor);
}

.disabled[b-1zy5ife2eg] {
    opacity: 0.4;
    pointer-events: none;
}



[b-1zy5ife2eg] .SubmitButton {
    min-height: 35px;
    padding: 6px 14px;
    color: var(--ThemeColor) !important;
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.22) !important;
    border-radius: 10px !important;
    background: rgb(from var(--ThemeColor) r g b / 0.05) !important;
    transition: all 0.25s ease;
    font-weight: 900 !important;
}

[b-1zy5ife2eg] .SubmitButton:hover {
    background: rgb(from var(--ThemeColor) r g b / 0.12) !important;
    border-color: rgb(from var(--ThemeColor) r g b / 0.34) !important;
    box-shadow: 0 10px 22px rgb(from var(--ThemeColor) r g b / 0.10);
}




.MainContainer[b-1zy5ife2eg] {
    display: flex;
    flex-direction: row-reverse;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    height: calc(100% - 50px);


    /*    height: calc(100% - 80px);
    margin : 7px 15px 15px 15px;
    border-radius : 20px;
    overflow : hidden;
    box-shadow : 0px 0px 3px 0px var(--ThemeShadowColor);*/
}

.CenterContainer[b-1zy5ife2eg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.CenterContainer>.CenterTopContainer[b-1zy5ife2eg] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;

    /*    background-color : orange;*/
}

.PagesButtonMainContainer[b-1zy5ife2eg] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid var(--ThemeShadowColor);
    padding: 0px 5px;
    border-radius: 27px;
    height: 38px;
    user-select: none;
    background-color: var(--ThemeSurface) !important;
    overflow: hidden;
}

.PagesButtonMainContainer>button[b-1zy5ife2eg],
.PagesButtonMainContainer>img[b-1zy5ife2eg] {
    cursor: pointer;
}

.PagesButtonActualContainer[b-1zy5ife2eg] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.PagesButtonActualContainer .PageButton[b-1zy5ife2eg] {
    color: grey;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin: 0px 2px;
    font-family: Fredoka;
    display: block;
    cursor: grab;
    transition: transform 0.15s ease;

    height: 26px;
    width: 26px;
}

.PagesButtonActualContainer .PageButton:hover[b-1zy5ife2eg] {
    background-color: #e0e0e0;
}

.PagesButtonActualContainer .PageButton.active[b-1zy5ife2eg] {
    background: var(--ThemeColor);
    color: white;
}

.PagesButtonActualContainer .PageButton.dragging[b-1zy5ife2eg] {
    border: 2px dashed #007bff;
    opacity: 0.3;
}

.drag-placeholder[b-1zy5ife2eg] {
    width: 40px;
    height: 40px;
    border: 2px dashed #bbb;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.05);
    pointer-events: none;
}




/*Used only for allow overflow scrolling*/
.CenterContainer>.CanvasContainer[b-1zy5ife2eg] {
    flex: 1;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

[b-1zy5ife2eg] .CanvasWrapper {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    position: relative;


    box-shadow: 0px 0px 15px 2px var(--ThemeShadowColor);
    background-color: white;

    margin: auto;
}

[b-1zy5ife2eg] .Canvas {
    transform-box: content-box;
    transform-origin: top center;

    margin: 0px;
    padding: 0px;
    border: none !important;
    outline: none !important;
    position: relative;
    display: inline-block;
    overflow: hidden;


    /*        background-color: white;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;*/
}



.ZoomContainer[b-1zy5ife2eg] {
    display: inline-flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 20px;
    position: absolute;
    bottom: 15px;
    right: 15px;
    height: 220px;
    width: 33px;
    padding: 10px 0px;
    border-radius: 15px;
    background-color: var(--ThemeSurface);
    font-size: 15px;
    font-family: Fredoka;
    color: grey;
}

.ZoomContainer[b-1zy5ife2eg]>  .MudSlider {
    width: 150px !important;
    height: 23px !important;
}




.ComponentsContainer[b-1zy5ife2eg] {
    width: 350px !important;
    min-width: 350px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--ThemeShadowColor);
}

/*Tabs Header Individual*/
[b-1zy5ife2eg] .mud-tab {
    width: calc(350px /3) !important;
    min-width: 70px !important;
    max-width: 120px;
    height: 45px;
    min-height: 32px;

    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    font-size: 12px;
    transition: background-color 0.3s;

    color: grey !important;
    padding: 10px;
    background-color: var(--ThemeShadowColor);

}

[b-1zy5ife2eg] .mud-tab:hover {
    background-color: var(--ThemeBorderColor) !important;
}

[b-1zy5ife2eg] .mud-tabs-tabbar {
    border-bottom: 1px solid var(--ThemeBorderColor) !important;
}

/* Active Tab's slider Color*/
[b-1zy5ife2eg] .mud-tab-slider {
    background-color: var(--ThemeColor) !important;
}

/* Active Tab */
[b-1zy5ife2eg] .mud-tab-active {
    color: var(--ThemeColor) !important;
}

/*Main MudTab*/
[b-1zy5ife2eg] .full-height-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*Tabs Header Main Container*/
[b-1zy5ife2eg] .full-height-tabs .mud-tabs-tab-bar,
[b-1zy5ife2eg] .full-height-tabs .mud-tabs-tabbar-inner,
[b-1zy5ife2eg] .full-height-tabs .mud-tabs-tabbar-content {
    height: 45px !important;
    min-height: 45px !important;
    margin-bottom: 0px !important;
    border-bottom: none !important;
    flex-shrink: 0;
}

/*This enables overflow scrolling*/
[b-1zy5ife2eg] .mud-tabs-panels {
    flex-grow: 1;
    height: 0;
    overflow-y: auto;
    margin-top: 0px !important;
    padding-top: 0px !important;
}

.MobileComponentsContainer[b-1zy5ife2eg] {
    position: absolute;
    bottom: 60px;
    left: 0px;
    right: 0px;
    z-index: 0;
}




@media (max-width: 870px) {
    .MainContainer[b-1zy5ife2eg] {
        flex-direction: column;
    }


    .PagesButtonActualContainer>button[b-1zy5ife2eg] {
        font-size: 15px;
        width: 30px;
        height: 30px;
    }

}


@media (max-width: 550px) {

    [b-1zy5ife2eg] .mud-icon-button-label {
        width: 15px !important;
        height: 15px !important;
    }

    [b-1zy5ife2eg] .mud-icon-root {
        width: 20px !important;
        height: 20px !important;
    }

    [b-1zy5ife2eg] .SubmitButton {
        font-size: 11px;
        padding: 2px 5px;
    }

    .PagesButtonActualContainer .PageButton[b-1zy5ife2eg] {
        height: 24px;
        width: 24px;
    }
}
/* /Pages/EditorUser.razor.rz.scp.css */
.MenubarContainer[b-h790re1y7b] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;

    width: 100%;
    height: 50px;

    padding: 0px 5px;
    background-color: transparent;
    border-bottom: 1px solid var(--ThemeBorderColor);
    position : relative;
}

.disabled[b-h790re1y7b] {
    opacity: 0.4;
    pointer-events: none;
}


.UserVersionContainer[b-h790re1y7b]{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: var(--ThemeColor);
}
.UserVersionContainer:hover .VersionName[b-h790re1y7b]{
    text-decoration : underline;
}
.VersionName[b-h790re1y7b] {
    font-weight: bolder;
    cursor: pointer;
    font-size: 14px;
    max-width: 130px;
    text-align: center;
}










.MainContainer[b-h790re1y7b] {
    display: flex;
    flex-direction: row-reverse;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    height: calc(100% - 50px);
    overflow: hidden;
}

.CenterContainer[b-h790re1y7b] {
    flex : 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    height: 100%;
}
.CenterContainer > .CenterTopContainer[b-h790re1y7b] {
    display: flex;
    justify-content: center;
    align-items : center;
    height : 60px;
}
.PagesButtonMainContainer[b-h790re1y7b] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid var(--ThemeShadowColor);
    padding: 0px 5px;
    border-radius: 27px;
    height: 38px;
    user-select: none;
    background-color: var(--ThemeSurface) !important;
    overflow: hidden;
}
.PagesButtonMainContainer > button[b-h790re1y7b] , .PagesButtonMainContainer > img[b-h790re1y7b] {
    cursor : pointer;
}
.PagesButtonActualContainer[b-h790re1y7b] {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.PagesButtonActualContainer .PageButton[b-h790re1y7b] {
    color: grey;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin: 0px 2px;
    font-family: Fredoka;
    display: block;
    cursor: grab;
    transition: transform 0.15s ease;

    height: 26px;
    width: 26px;
}
.PagesButtonActualContainer .PageButton:hover[b-h790re1y7b] {
    background-color: #e0e0e0;
}
.PagesButtonActualContainer .PageButton.active[b-h790re1y7b] {
    background: var(--ThemeColor);
    color: white;
}
.PagesButtonActualContainer .PageButton.dragging[b-h790re1y7b] {
    border: 2px dashed #007bff;
    opacity: 0.3;
}
.drag-placeholder[b-h790re1y7b] {
    width: 40px; 
    height: 40px;
    border: 2px dashed #bbb;
    border-radius: 6px;
    background: rgba(0,0,0,0.05);
    pointer-events: none;
}





/*Used only for allow overflow scrolling*/
.CenterContainer > .CanvasContainer[b-h790re1y7b] {
    flex: 1;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 20px; /* added to prevent canvas boundaries/shadows clipping at edges */
}
[b-h790re1y7b] .CanvasWrapper {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    position: relative;
    margin: auto;

    box-shadow: 0px 0px 15px 2px var(--ThemeShadowColor);
    background-color: white;
}

[b-h790re1y7b] .Canvas {
    transform-box: content-box;
    transform-origin: top center;
    margin: 0px;
    padding: 0px;
    border: none !important;
    outline: none !important;
    position: relative;
    display: inline-block;
    overflow: hidden;

/*            background-color: white;
    background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;*/
}



.ZoomContainer[b-h790re1y7b] {
    display: inline-flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 20px;
    position: absolute;
    bottom: 15px;
    right: 15px;
    height: 220px;
    width: 33px;
    padding: 10px 0px;
    border-radius: 15px;
    background-color: var(--ThemeSurface);
    font-size: 15px;
    font-family: Fredoka;
    color: grey;
}

.ZoomContainer[b-h790re1y7b] >  .MudSlider {
    width: 150px !important;
    height: 23px !important;
}




.ComponentsContainer[b-h790re1y7b] {
    width: 350px !important;
    min-width: 350px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/*Tabs Header Individual*/
[b-h790re1y7b] .mud-tab {
    width: calc(350px /3) !important;
    min-width: 70px !important;
    max-width: 120px;
    height: 45px;
    min-height: 32px;

    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    font-size: 12px;
    transition: background-color 0.3s;


    color: grey !important;
    padding : 10px;
    background-color: var(--ThemeSurface);
    background-color: var(--ThemeShadowColor);

}
[b-h790re1y7b] .mud-tab:hover {
    background-color: var(--ThemeBorderColor) !important;
}


[b-h790re1y7b] .mud-tabs-tabbar {
    border-bottom: 1px solid var(--ThemeBorderColor) !important;
}
/* Active Tab's slider Color*/
[b-h790re1y7b] .mud-tab-slider {
    background-color: var(--ThemeColor) !important;
}

/* Active Tab */
[b-h790re1y7b] .mud-tab-active {
    color: var(--ThemeColor) !important;
}

/*Main MudTab*/
[b-h790re1y7b] .full-height-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*Tabs Header Main Container*/
[b-h790re1y7b] .full-height-tabs .mud-tabs-tab-bar,
[b-h790re1y7b] .full-height-tabs .mud-tabs-tabbar-inner,
[b-h790re1y7b] .full-height-tabs .mud-tabs-tabbar-content {
    height: 45px !important;
    min-height: 45px !important;
    margin-bottom: 0px !important;
    border-bottom: none !important;
    flex-shrink: 0;

}

/*This enables overflow scrolling*/
[b-h790re1y7b] .mud-tabs-panels {
    flex-grow: 1;
    height: 0;
    overflow-y: auto;
    margin-top: 0px !important;
    padding-top: 0px !important;
}



.MobileComponentsContainer[b-h790re1y7b] {
    position: absolute;
    bottom: 60px;
    left: 0px;
    right: 0px;
    z-index: 0;
}




@media (max-width: 870px) {
    .MainContainer[b-h790re1y7b] {
        flex-direction: column;
    }


    .PagesButtonActualContainer > button[b-h790re1y7b]{
        font-size : 15px;
        width : 30px;
        height : 30px;
    }

}

@media (max-width: 550px) {

    [b-h790re1y7b] .mud-icon-button-label {
        width: 15px !important;
        height: 15px !important;
    }

    [b-h790re1y7b] .mud-icon-root {
        width: 20px !important;
        height: 20px !important;
    }

    .VersionName[b-h790re1y7b]{
        font-size : 12px;
    }

    .PagesButtonActualContainer .PageButton[b-h790re1y7b] {
        height: 24px;
        width: 24px;
    }
}
/* /Pages/FooterStuff/About.razor.rz.scp.css */
.kleshe-page[b-8s9zpgs6zs] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 96px;
    color: var(--ThemeForeColor);
}

.kleshe-hero[b-8s9zpgs6zs] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    gap: 24px;
    position: relative;
    margin-bottom: 28px;
    padding: 28px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.75);
    border-radius: 30px;
    background: radial-gradient(circle at top left, rgb(from var(--ThemeColor) r g b / 0.15), transparent 34%), linear-gradient(180deg, rgb(from var(--ThemeSurface) r g b / 0.95), rgb(from var(--ThemeSurface) r g b / 0.78));
    overflow: hidden;
}

.hero-badge[b-8s9zpgs6zs] {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.25);
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.hero-content[b-8s9zpgs6zs] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.hero-content h1[b-8s9zpgs6zs] { margin: 0; line-height: 1.1; font-size: clamp(34px, 5vw, 56px); font-weight: 900; }

.hero-content p[b-8s9zpgs6zs],
.content-card p[b-8s9zpgs6zs],
.feature-card p[b-8s9zpgs6zs],
.panel-card li[b-8s9zpgs6zs],
.stat-card .stat-label[b-8s9zpgs6zs] {
    line-height: 1.9;
    font-size: 15px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.7);
}

.hero-actions[b-8s9zpgs6zs] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.hero-button[b-8s9zpgs6zs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.2s ease;
}

    .hero-button.primary[b-8s9zpgs6zs] {
        background: var(--ThemeColor);
        color: white;
        box-shadow: 0 16px 32px rgb(from var(--ThemeColor) r g b / 0.24);
    }

    .hero-button.secondary[b-8s9zpgs6zs] {
        border: 1px solid var(--ThemeBorderColor);
        background: rgb(from var(--ThemeSurface) r g b / 0.75);
        color: var(--ThemeForeColor);
    }

    .hero-button:hover[b-8s9zpgs6zs],
    .content-card:hover[b-8s9zpgs6zs],
    .feature-card:hover[b-8s9zpgs6zs],
    .panel-card:hover[b-8s9zpgs6zs],
    .stat-card:hover[b-8s9zpgs6zs] {
        transform: translateY(-3px);
    }

.hero-panel[b-8s9zpgs6zs] { display: flex; align-items: stretch; }

.panel-card[b-8s9zpgs6zs],
.content-card[b-8s9zpgs6zs],
.feature-card[b-8s9zpgs6zs] {
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.78);
    background: rgb(from var(--ThemeSurface) r g b / 0.82);
    border-radius: 24px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.panel-card[b-8s9zpgs6zs] { width: 100%; padding: 24px; }

.glow-card[b-8s9zpgs6zs] { box-shadow: 0 20px 50px rgb(from var(--ThemeColor) r g b / 0.10); }

.panel-card h3[b-8s9zpgs6zs], .content-card h2[b-8s9zpgs6zs], .feature-card h3[b-8s9zpgs6zs] { margin: 0 0 10px; font-size: 22px; }

.panel-card ul[b-8s9zpgs6zs] { margin: 18px 0 0; padding-inline-start: 18px; }

.kleshe-grid[b-8s9zpgs6zs] {
    display: grid;
    gap: 18px;
}

    .kleshe-grid.three[b-8s9zpgs6zs] { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
    .kleshe-grid.two[b-8s9zpgs6zs] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.content-card[b-8s9zpgs6zs], .feature-card[b-8s9zpgs6zs] { padding: 24px; }

.card-icon[b-8s9zpgs6zs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    font-size: 18px;
    font-weight: 800;
}

.content-section[b-8s9zpgs6zs] {
    margin-top: 24px;
    padding: 30px;
    border-radius: 30px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.72);
    background: linear-gradient(180deg, rgb(from var(--ThemeSurface) r g b / 0.85), rgb(from var(--ThemeSurface) r g b / 0.68));
}

.section-heading[b-8s9zpgs6zs] { margin-bottom: 18px; }
.section-heading h2[b-8s9zpgs6zs] { margin-top: 8px; font-size: clamp(26px, 4vw, 38px); font-weight: 850; }

.stat-card[b-8s9zpgs6zs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.78);
    background: rgb(from var(--ThemeSurface) r g b / 0.82);
    border-radius: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    gap: 8px;
}

.stat-number[b-8s9zpgs6zs] {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 900px) {
    .kleshe-hero[b-8s9zpgs6zs],
    .kleshe-grid.three[b-8s9zpgs6zs],
    .kleshe-grid.two[b-8s9zpgs6zs] {
        grid-template-columns: 1fr;
    }

    .kleshe-page[b-8s9zpgs6zs] { padding: 28px 16px 72px; }
    .kleshe-hero[b-8s9zpgs6zs], .content-section[b-8s9zpgs6zs] { padding: 20px; border-radius: 24px; }
}
/* /Pages/FooterStuff/Contact.razor.rz.scp.css */
.kleshe-page[b-bl0z4xtrgr] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 96px;
    color: var(--ThemeForeColor);
}

.kleshe-hero[b-bl0z4xtrgr] {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
    position: relative;
    margin-bottom: 28px;
    padding: 40px 28px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.75);
    border-radius: 30px;
    background: radial-gradient(circle at top left, rgb(from var(--ThemeColor) r g b / 0.15), transparent 34%), linear-gradient(180deg, rgb(from var(--ThemeSurface) r g b / 0.95), rgb(from var(--ThemeSurface) r g b / 0.78));
    overflow: hidden;
}

.hero-kicker[b-bl0z4xtrgr] {
    color: var(--ThemeColor);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hero-content[b-bl0z4xtrgr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 700px;
    margin: 0 auto;
}

.hero-content h1[b-bl0z4xtrgr] { font-size: clamp(34px, 5vw, 56px); font-weight: 900; margin: 0; line-height: 1.1; }
.hero-content p[b-bl0z4xtrgr], .contact-card p[b-bl0z4xtrgr] { line-height: 1.9; font-size: 15px; color: rgb(from var(--ThemeForeColor) r g b / 0.84); }

.hero-button[b-bl0z4xtrgr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.2s ease;
}

.hero-button.primary[b-bl0z4xtrgr] { background: var(--ThemeColor); color: white; box-shadow: 0 16px 32px rgb(from var(--ThemeColor) r g b / 0.24); }
.hero-button.secondary[b-bl0z4xtrgr] { border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.8); background: rgb(from var(--ThemeSurface) r g b / 0.75); color: var(--ThemeForeColor); }
.hero-button:hover[b-bl0z4xtrgr], .contact-card:hover[b-bl0z4xtrgr] { transform: translateY(-3px); }

.contact-grid[b-bl0z4xtrgr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.contact-card[b-bl0z4xtrgr] {
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.78);
    background: rgb(from var(--ThemeSurface) r g b / 0.82);
    border-radius: 24px;
    padding: 30px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-full[b-bl0z4xtrgr] { grid-column: 1 / -1; }
.glow-card[b-bl0z4xtrgr] { box-shadow: 0 20px 50px rgb(from var(--ThemeColor) r g b / 0.10); }

.contact-card h2[b-bl0z4xtrgr] { margin: 0 0 10px; font-size: 22px; }

.card-icon[b-bl0z4xtrgr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    font-size: 18px;
    font-weight: 800;
}

.contact-routes[b-bl0z4xtrgr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.route-item[b-bl0z4xtrgr] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.route-icon[b-bl0z4xtrgr] {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.route-item h3[b-bl0z4xtrgr] {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
}

.route-item p[b-bl0z4xtrgr] {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgb(from var(--ThemeForeColor) r g b / 0.7);
}

@media (max-width: 900px) {
    .kleshe-hero[b-bl0z4xtrgr], .contact-grid[b-bl0z4xtrgr], .contact-routes[b-bl0z4xtrgr] { grid-template-columns: 1fr; }
    .kleshe-page[b-bl0z4xtrgr] { padding: 28px 16px 72px; }
}
/* /Pages/FooterStuff/Help.razor.rz.scp.css */
.kleshe-page[b-xsy6i3csag] { max-width: 1200px; margin: 0 auto; padding: 48px 24px 96px; color: var(--ThemeForeColor); }

.kleshe-hero[b-xsy6i3csag] { display: grid; grid-template-columns: 1fr; text-align: center; gap: 24px; position: relative; margin-bottom: 28px; padding: 40px 28px; border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.75); border-radius: 30px; background: radial-gradient(circle at top left, rgb(from var(--ThemeColor) r g b / 0.15), transparent 34%), linear-gradient(180deg, rgb(from var(--ThemeSurface) r g b / 0.95), rgb(from var(--ThemeSurface) r g b / 0.78)); overflow: hidden; }

.hero-kicker[b-xsy6i3csag] { color: var(--ThemeColor); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }

.hero-content[b-xsy6i3csag] { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 700px; margin: 0 auto; }
.hero-content h1[b-xsy6i3csag], .help-cta h2[b-xsy6i3csag] { font-size: clamp(34px, 5vw, 56px); font-weight: 900; margin: 0; line-height: 1.1; }
.hero-content p[b-xsy6i3csag], .help-card p[b-xsy6i3csag], .help-cta p[b-xsy6i3csag] { line-height: 1.9; font-size: 15px; color: rgb(from var(--ThemeForeColor) r g b / 0.84); }

.hero-button[b-xsy6i3csag] { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; min-height: 46px; padding: 0 18px; border-radius: 14px; text-decoration: none; font-weight: 700; transition: 0.2s ease; }
.hero-button.primary[b-xsy6i3csag] { background: var(--ThemeColor); color: white; box-shadow: 0 16px 32px rgb(from var(--ThemeColor) r g b / 0.24); }
.hero-button.secondary[b-xsy6i3csag] { border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.8); background: rgb(from var(--ThemeSurface) r g b / 0.75); color: var(--ThemeForeColor); }
.hero-button:hover[b-xsy6i3csag], .help-card:hover[b-xsy6i3csag], .content-card:hover[b-xsy6i3csag] { transform: translateY(-3px); }

.help-grid[b-xsy6i3csag] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }

.help-card[b-xsy6i3csag] { border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.78); background: rgb(from var(--ThemeSurface) r g b / 0.82); border-radius: 24px; padding: 30px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.help-card.featured[b-xsy6i3csag] { grid-column: 1 / -1; background: linear-gradient(135deg, rgb(from var(--ThemeSurface) r g b / 0.95), rgb(from var(--ThemeSurface) r g b / 0.8)); border-color: rgb(from var(--ThemeColor) r g b / 0.4); }
.glow-card[b-xsy6i3csag] { box-shadow: 0 20px 50px rgb(from var(--ThemeColor) r g b / 0.10); }
.help-card h2[b-xsy6i3csag] { margin: 0 0 10px; font-size: 22px; }
.help-card ul[b-xsy6i3csag] { margin: 15px 0 0; padding-inline-start: 20px; line-height: 1.8; font-size: 14px; color: rgb(from var(--ThemeForeColor) r g b / 0.8); }

.card-icon[b-xsy6i3csag] { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; background: rgb(from var(--ThemeColor) r g b / 0.12); color: var(--ThemeColor); font-size: 18px; font-weight: 800; }

/* FAQ Section inside Help */
.content-section[b-xsy6i3csag] { margin-top: 30px; padding: 40px; border-radius: 30px; border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.72); background: linear-gradient(180deg, rgb(from var(--ThemeSurface) r g b / 0.85), rgb(from var(--ThemeSurface) r g b / 0.68)); }
.section-heading[b-xsy6i3csag] { margin-bottom: 24px; }
.section-heading h2[b-xsy6i3csag] { margin-top: 8px; font-size: clamp(26px, 4vw, 38px); font-weight: 850; }

.faq-stack[b-xsy6i3csag] { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }
.faq-group-title[b-xsy6i3csag] { font-size: 12px; font-weight: 900; letter-spacing: 0.1em; color: var(--ThemeColor); padding: 6px 4px 0; border-top: 1px solid rgb(from var(--ThemeColor) r g b / 0.2); margin-top: 8px; }

.content-card[b-xsy6i3csag] { display: flex; gap: 24px; padding: 28px; border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.78); background: rgb(from var(--ThemeSurface) r g b / 0.82); border-radius: 24px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.content-card:hover[b-xsy6i3csag] { border-color: var(--ThemeColor); box-shadow: 0 20px 50px rgb(from var(--ThemeColor) r g b / 0.08); }

.legal-number[b-xsy6i3csag] { display: flex; align-items: center; justify-content: center; min-width: 48px; height: 44px; background: rgb(from var(--ThemeColor) r g b / 0.12); color: var(--ThemeColor); font-size: 16px; font-weight: 900; border-radius: 14px; flex-shrink: 0; padding: 0 8px; }
.legal-content h3[b-xsy6i3csag] { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.legal-content p[b-xsy6i3csag] { font-size: 14px; line-height: 1.8; color: rgb(from var(--ThemeForeColor) r g b / 0.84); margin: 0; }

/* CTA */
.help-cta[b-xsy6i3csag] { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.help-cta .hero-kicker[b-xsy6i3csag] { margin-bottom: 10px; display: block; }

@media (max-width: 900px) {
    .help-grid[b-xsy6i3csag], .help-cta[b-xsy6i3csag] { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; }
    .kleshe-page[b-xsy6i3csag] { padding: 28px 16px 72px; }
    .content-section[b-xsy6i3csag] { padding: 24px; border-radius: 24px; }
    .content-card[b-xsy6i3csag] { flex-direction: column; gap: 16px; padding: 20px; }
}
/* /Pages/FooterStuff/Privacy.razor.rz.scp.css */
.kleshe-page[b-f6ls4ycg09] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 96px;
    color: var(--ThemeForeColor);
}

.kleshe-hero[b-f6ls4ycg09] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    position: relative;
    margin-bottom: 40px;
    padding: 40px 28px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.75);
    border-radius: 30px;
    background: radial-gradient(circle at top, rgb(from var(--ThemeColor) r g b / 0.15), transparent 60%), linear-gradient(180deg, rgb(from var(--ThemeSurface) r g b / 0.95), rgb(from var(--ThemeSurface) r g b / 0.78));
    overflow: hidden;
}

.hero-badge[b-f6ls4ycg09] {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.25);
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hero-content[b-f6ls4ycg09] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 700px;
}

.hero-content h1[b-f6ls4ycg09] { font-size: clamp(34px, 5vw, 48px); font-weight: 900; margin: 0; line-height: 1.2; }
.hero-content p[b-f6ls4ycg09] { color: rgb(from var(--ThemeForeColor) r g b / 0.84); font-size: 16px; line-height: 1.8; margin: 0; }

.kleshe-content-stack[b-f6ls4ycg09] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}

.content-card[b-f6ls4ycg09] {
    display: flex;
    gap: 24px;
    padding: 32px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.78);
    background: rgb(from var(--ThemeSurface) r g b / 0.82);
    border-radius: 24px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.content-card:hover[b-f6ls4ycg09] {
    transform: translateY(-3px);
    border-color: var(--ThemeColor);
    box-shadow: 0 20px 50px rgb(from var(--ThemeColor) r g b / 0.08);
}

.legal-number[b-f6ls4ycg09] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 48px;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    font-size: 18px;
    font-weight: 900;
    border-radius: 14px;
    flex-shrink: 0;
    padding: 0 8px;
}

.legal-content h2[b-f6ls4ycg09] { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--ThemeForeColor); }
.legal-content p[b-f6ls4ycg09], .legal-content li[b-f6ls4ycg09] { font-size: 15px; line-height: 1.8; color: rgb(from var(--ThemeForeColor) r g b / 0.84); margin: 0 0 10px 0; }
.legal-content ul[b-f6ls4ycg09] { margin: 8px 0 0; padding-inline-start: 24px; }
.legal-content a[b-f6ls4ycg09] { color: var(--ThemeColor); }

.cookie-divider[b-f6ls4ycg09] {
    text-align: center;
    padding: 16px 0 4px;
    border-top: 1px solid rgb(from var(--ThemeColor) r g b / 0.2);
    margin-top: 8px;
}

@media (max-width: 900px) {
    .kleshe-page[b-f6ls4ycg09] { padding: 28px 16px 72px; }
    .kleshe-hero[b-f6ls4ycg09] { padding: 30px 20px; border-radius: 24px; }
    .content-card[b-f6ls4ycg09] { flex-direction: column; gap: 16px; padding: 24px; }
}
/* /Pages/FooterStuff/Rules.razor.rz.scp.css */
.kleshe-page[b-uvx5c3owg8] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 96px;
    color: var(--ThemeForeColor);
}

.kleshe-hero[b-uvx5c3owg8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    position: relative;
    margin-bottom: 40px;
    padding: 40px 28px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.75);
    border-radius: 30px;
    background: radial-gradient(circle at top, rgb(from var(--ThemeColor) r g b / 0.15), transparent 60%), linear-gradient(180deg, rgb(from var(--ThemeSurface) r g b / 0.95), rgb(from var(--ThemeSurface) r g b / 0.78));
    overflow: hidden;
}

.hero-badge[b-uvx5c3owg8] {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.25);
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hero-content[b-uvx5c3owg8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 700px;
}

.hero-content h1[b-uvx5c3owg8] { font-size: clamp(34px, 5vw, 48px); font-weight: 900; margin: 0; line-height: 1.2; }
.hero-content p[b-uvx5c3owg8] { color: rgb(from var(--ThemeForeColor) r g b / 0.84); font-size: 16px; line-height: 1.8; margin: 0; }

.kleshe-content-stack[b-uvx5c3owg8] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}

/* Section label that visually groups related rules */
.rules-section-label[b-uvx5c3owg8] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ThemeColor);
    padding: 6px 4px 0;
    border-top: 1px solid rgb(from var(--ThemeColor) r g b / 0.2);
    margin-top: 12px;
}

.content-card[b-uvx5c3owg8] {
    display: flex;
    gap: 24px;
    padding: 32px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.78);
    background: rgb(from var(--ThemeSurface) r g b / 0.82);
    border-radius: 24px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.content-card:hover[b-uvx5c3owg8] {
    transform: translateY(-3px);
    border-color: var(--ThemeColor);
    box-shadow: 0 20px 50px rgb(from var(--ThemeColor) r g b / 0.08);
}

.legal-number[b-uvx5c3owg8] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 48px;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    font-size: 16px;
    font-weight: 900;
    border-radius: 14px;
    flex-shrink: 0;
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
}

.legal-content h2[b-uvx5c3owg8] { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--ThemeForeColor); }
.legal-content p[b-uvx5c3owg8], .legal-content li[b-uvx5c3owg8] { font-size: 15px; line-height: 1.8; color: rgb(from var(--ThemeForeColor) r g b / 0.84); margin: 0 0 10px 0; }
.legal-content ul[b-uvx5c3owg8] { margin: 8px 0 0; padding-inline-start: 24px; }
.legal-content a[b-uvx5c3owg8] { color: var(--ThemeColor); }

@media (max-width: 900px) {
    .kleshe-page[b-uvx5c3owg8] { padding: 28px 16px 72px; }
    .kleshe-hero[b-uvx5c3owg8] { padding: 30px 20px; border-radius: 24px; }
    .content-card[b-uvx5c3owg8] { flex-direction: column; gap: 16px; padding: 24px; }
    .rules-section-label[b-uvx5c3owg8] { margin-top: 6px; }
}
/* /Pages/FooterStuff/Terms.razor.rz.scp.css */
.kleshe-page[b-ph07e3c4tn] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 96px;
    color: var(--ThemeForeColor);
}

.kleshe-hero[b-ph07e3c4tn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    position: relative;
    margin-bottom: 40px;
    padding: 40px 28px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.75);
    border-radius: 30px;
    background: radial-gradient(circle at top, rgb(from var(--ThemeColor) r g b / 0.15), transparent 60%), linear-gradient(180deg, rgb(from var(--ThemeSurface) r g b / 0.95), rgb(from var(--ThemeSurface) r g b / 0.78));
    overflow: hidden;
}

.hero-badge[b-ph07e3c4tn] {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.25);
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hero-content[b-ph07e3c4tn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 700px;
}

.hero-content h1[b-ph07e3c4tn] { font-size: clamp(34px, 5vw, 48px); font-weight: 900; margin: 0; line-height: 1.2; }
.hero-content p[b-ph07e3c4tn] { color: rgb(from var(--ThemeForeColor) r g b / 0.84); font-size: 16px; line-height: 1.8; margin: 0; }

.kleshe-content-stack[b-ph07e3c4tn] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
}

.content-card[b-ph07e3c4tn] {
    display: flex;
    gap: 24px;
    padding: 32px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.78);
    background: rgb(from var(--ThemeSurface) r g b / 0.82);
    border-radius: 24px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.content-card:hover[b-ph07e3c4tn] {
    transform: translateY(-3px);
    border-color: var(--ThemeColor);
    box-shadow: 0 20px 50px rgb(from var(--ThemeColor) r g b / 0.08);
}

.legal-number[b-ph07e3c4tn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 48px;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
    font-size: 18px;
    font-weight: 900;
    border-radius: 14px;
    flex-shrink: 0;
    padding: 0 8px;
}

.legal-content h2[b-ph07e3c4tn] { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--ThemeForeColor); }
.legal-content p[b-ph07e3c4tn], .legal-content li[b-ph07e3c4tn] { font-size: 15px; line-height: 1.8; color: rgb(from var(--ThemeForeColor) r g b / 0.84); margin: 0 0 10px 0; }
.legal-content ul[b-ph07e3c4tn] { margin: 8px 0 0; padding-inline-start: 24px; }
.legal-content a[b-ph07e3c4tn] { color: var(--ThemeColor); }

@media (max-width: 900px) {
    .kleshe-page[b-ph07e3c4tn] { padding: 28px 16px 72px; }
    .kleshe-hero[b-ph07e3c4tn] { padding: 30px 20px; border-radius: 24px; }
    .content-card[b-ph07e3c4tn] { flex-direction: column; gap: 16px; padding: 24px; }
}
/* /Pages/Home.razor.rz.scp.css */
/*.MainContainer {
    display: flex;
    flex-direction: column;
    gap: 30px;

    overflow: auto;
    padding: 18px;
    background-color : brown;
}*/



.HomeHeroContent[b-cncslwfe7q] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), transparent 55%), linear-gradient(180deg, rgb(from var(--ThemeBackgroundColor) r g b / 0.96), rgb(from var(--ThemeBackgroundColor) r g b / 0.88));
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 10px 35px rgb(from var(--ThemeForeColor) r g b / 0.05);
    overflow: hidden;
    position: relative;
    min-height: 470px;
}

.HomeHeroContent[b-cncslwfe7q]::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    top: -80px;
    inset-inline-end: -60px;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    filter: blur(10px);
    pointer-events: none;
}

.HeroTextSection[b-cncslwfe7q] {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.HeroMiniLabel[b-cncslwfe7q],
.SectionMiniLabel[b-cncslwfe7q] {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}

.HomeTitle[b-cncslwfe7q] {
    font-size: clamp(34px, 6vw, 56px);
    font-weight: 900;
    color: var(--ThemeForeColor);
    margin: 0 0 12px 0;
    line-height: 1.08;
}

.HomeSubtitle[b-cncslwfe7q] {
    font-size: clamp(17px, 2.3vw, 24px);
    font-weight: 600;
    margin: 0 0 18px 0;
    color: rgb(from var(--ThemeForeColor) r g b / 0.88);
    line-height: 1.6;
}

.HomeDescription[b-cncslwfe7q] {
    font-size: clamp(13px, 1.35vw, 16px);
    line-height: 2;
    max-width: 760px;
    margin: 0 0 28px 0;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
}

.BrandHighlight[b-cncslwfe7q] {
    color: var(--ThemeColor);
    font-weight: 900;
}

.HeroButtons[b-cncslwfe7q] {
    display: flex;
    justify-content: start;
    gap: 12px;
    flex-wrap: wrap;
}

.PrimaryHeroButton[b-cncslwfe7q],
.SecondaryHeroButton[b-cncslwfe7q] {
    border-radius: 14px !important;
    min-width: 145px;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.PrimaryHeroButton[b-cncslwfe7q] {
    box-shadow: 0 10px 25px rgb(from var(--ThemeColor) r g b / 0.24);
}
.KlesheLogo[b-cncslwfe7q] {
    width: 70%;
    height: auto;
    max-width: 320px;
    display: block;
    margin: auto;
}
.KlesheLogoMini[b-cncslwfe7q] {
    width: 55%;
    height: auto;
    max-width: 200px;
    display: none;
}
.HeroPreviewCard[b-cncslwfe7q] {
    width: 400px;
    min-width: 320px;
    border-radius: 24px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    padding: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.06);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.PreviewFooterStats[b-cncslwfe7q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.MiniPreviewStat[b-cncslwfe7q] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-height: 72px;
    border-radius: 16px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

    .MiniPreviewStat strong[b-cncslwfe7q] {
        color: var(--ThemeColor);
        font-size: 16px;
        font-weight: 900;
        line-height: 1.1;
    }

    .MiniPreviewStat span[b-cncslwfe7q] {
        color: rgb(from var(--ThemeForeColor) r g b / 0.58);
        font-size: 11px;
        font-weight: 800;
    }

/* Shared sections */
.ValueSection[b-cncslwfe7q],
.RatingsSection[b-cncslwfe7q] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.SectionHeader[b-cncslwfe7q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

.SectionHeader h2[b-cncslwfe7q],
.RatingsHeaderText h2[b-cncslwfe7q] {
    margin: 0;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.2;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.SectionHeader p[b-cncslwfe7q],
.RatingsHeaderText p[b-cncslwfe7q] {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
}

/* Value section */
.ValueGrid[b-cncslwfe7q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.ValueCard[b-cncslwfe7q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: 24px;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ValueCard:hover[b-cncslwfe7q] {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
    border-color: rgb(from var(--ThemeColor) r g b / 0.20);
}

.ValueIcon[b-cncslwfe7q] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    color: var(--ThemeColor);
}

.ValueCard h4[b-cncslwfe7q] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--ThemeForeColor);
}

.ValueCard p[b-cncslwfe7q] {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: rgb(from var(--ThemeForeColor) r g b / 0.66);
}

/* Ratings */
.RatingsHeaderCard[b-cncslwfe7q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    box-shadow: 0 8px 30px rgb(from var(--ThemeForeColor) r g b / 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.RatingsHeaderText[b-cncslwfe7q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.RateButton[b-cncslwfe7q] {
    border-radius: 14px !important;
    min-width: 170px;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 25px rgb(from var(--ThemeColor) r g b / 0.24);
}

.RatingsContainer[b-cncslwfe7q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
    width: 100%;
}

[b-cncslwfe7q] .mud-icon-root {
    width: 15px;
    height: 15px;
}

/* Responsive */
@media (max-width: 1100px) {
    .HomeHeroContent[b-cncslwfe7q] {
        flex-direction: column;
        min-height: unset;
    }

    .KlesheLogoMini[b-cncslwfe7q]{
        display : block;
    }

    .HeroPreviewCard[b-cncslwfe7q] {
        display: none;
    }

    .RatingsHeaderCard[b-cncslwfe7q] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    .MainContainer[b-cncslwfe7q] {
        padding: 12px;
        gap: 24px;
    }

    .HomeHeroContent[b-cncslwfe7q],
    .RatingsHeaderCard[b-cncslwfe7q],
    .ValueCard[b-cncslwfe7q],
    .Card[b-cncslwfe7q] {
        border-radius: 20px;
    }

    .HomeHeroContent[b-cncslwfe7q] {
        padding: 18px;
    }

    .SectionHeader h2[b-cncslwfe7q],
    .RatingsHeaderText h2[b-cncslwfe7q] {
        font-size: 26px;
    }

    .HeroButtons[b-cncslwfe7q] {
        flex-direction: column;
        align-items: stretch;
    }

    .PrimaryHeroButton[b-cncslwfe7q],
    .SecondaryHeroButton[b-cncslwfe7q],
    .RateButton[b-cncslwfe7q] {
        width: 100%;
        justify-content: center;
    }

    .PreviewFooterStats[b-cncslwfe7q] {
        grid-template-columns: 1fr;
    }

    .CardContainer[b-cncslwfe7q] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .PreviewCanvas[b-cncslwfe7q] {
        min-height: 220px;
        padding: 12px;
    }

    .PreviewGrid[b-cncslwfe7q] {
        gap: 10px;
    }

    .PreviewBlock.Tall[b-cncslwfe7q] {
        min-height: 100px;
    }

    .CardTop[b-cncslwfe7q] {
        flex-direction: column;
        align-items: stretch;
    }

    .RatingValueBadge[b-cncslwfe7q] {
        align-self: flex-start;
    }

    .CommentWrap[b-cncslwfe7q] {
        min-height: 88px;
    }
}




/*.Logo {
    width: 20%;
}


.MainContainer {
    display: flex;
    flex-direction: column;
    gap : 50px;

    overflow: auto;
    height: calc(100% - 70px);
    border-radius: 20px;
    padding : 20px;*/ 


/*    box-shadow: 0px 0px 3px 0px var(--ThemeShadowColor);
    margin: 10px 15px 15px 15px;
    background-color: var(--ThemeSurface) !important;*/
/*}


.RatingsCoverContainer {
    display: flex;
    flex-direction: column;
}


.CardContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: min-content;
    gap: 20px;
    height: 100% !important;
    width: 100%;
    padding: 25px;
}


.Card {
    width: 100%;
    border: 1px solid var(--ThemeShadowColor);
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 5px;
    transition: 0.3s;

    height: 190px;

    border: 1px solid var(--ThemeBorderColor);
}
.Card:hover {
    transform: translateY(-6px);
    box-shadow : 0px 0px 10px 0px var(--ThemeShadowColor);
}

.SpanComment {
    color: var(--ThemeForeColor);
    padding : 0px 40px 0px 8px;
    opacity: 0.9;
    font-size: 16px;
    overflow-y:auto;
    height : 100%;
}


.RaterProfileContainer{
    display : flex;
    flex-direction : row !important;
    gap : 10px;
    width : 100%;
}
.RaterProfileContainer a:hover{
    text-decoration : underline;
    color : var(--ThemeForeColor);
}
.RaterProfileContainer img{
    width : 35px;
    height : 35px;
    border-radius : 50%;
    object-fit : cover;
}*/







/* ================= HOME HERO ================= */

/*.HomeHero {
    padding: 120px 40px 100px 40px;
    text-align: center;*/
/*            background: linear-gradient(
        180deg,
        rgb(from var(--ThemeColor) r g b / 0.07),
        transparent
    );*/
/*}

.HeroContent {
    max-width: 850px;
    margin: auto;
}

.HomeTitle {
    font-size: clamp(33px, 8vw, 50px);
    font-weight: 800;
    color: var(--ThemeColor);
    margin-bottom: 15px;
}

.HomeSubtitle {
    font-size: clamp(16px, 4vw, 22px);
    font-weight: 600;
    margin-bottom: 25px;
    opacity: 0.9;
    color: var(--ThemeForeColor);
    line-height : 24px;
}

.HomeDescription {
    font-size: clamp(12px, 3vw, 17px);
    line-height: 1.9;
    max-width: 700px;
    margin: auto;
    opacity: 0.8;
    margin-bottom: 35px;
    color: var(--ThemeForeColor);
}

.HeroButtons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}*/

/* ================= VALUE SECTION ================= */

/*.ValueSection {
    max-width: 1100px;
    margin: 100px auto;
    padding: 0 40px;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.ValueCard {
    background: var(--ThemeSurface);
    border: 1px solid var(--ThemeBorderColor);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    transition: 0.3s ease;
}

.ValueCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.ValueCard h4 {
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--ThemeColor);
}

.ValueCard p {
    opacity: 0.85;
}



@media (max-width: 870px) {
    .ValueSection{
        display : flex;
        flex-direction : column;
    }
}*/
/* /Pages/Lists/CreatorsList.razor.rz.scp.css */

.CreatorsHeroContent[b-04b64945vj] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background:
        linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), transparent 55%),
        linear-gradient(180deg, rgb(from var(--ThemeBackgroundColor) r g b / 0.96), rgb(from var(--ThemeBackgroundColor) r g b / 0.88));
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 10px 35px rgb(from var(--ThemeForeColor) r g b / 0.05);
    overflow: hidden;
    position: relative;
}

.CreatorsHeroContent[b-04b64945vj]::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    top: -80px;
    inset-inline-end: -60px;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    filter: blur(10px);
    pointer-events: none;
}

.CreatorsHeroText[b-04b64945vj] {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.HeroMiniLabel[b-04b64945vj] {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}

.CreatorsHeroText h1[b-04b64945vj] {
    margin: 0;
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.15;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.CreatorsHeroText p[b-04b64945vj] {
    margin: 12px 0 0 0;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.9;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
}

.HeroActionCard[b-04b64945vj] {
    width: 320px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.HeroActionCardIcon[b-04b64945vj] {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
}

.HeroActionCardText[b-04b64945vj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.HeroActionCardText strong[b-04b64945vj] {
    font-size: 15px;
    color: var(--ThemeForeColor);
}

.HeroActionCardText span[b-04b64945vj] {
    font-size: 13px;
    line-height: 1.7;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
}

.HeroActionButton[b-04b64945vj] {
    align-self: flex-start;
    border-radius: 14px !important;
    min-width: 145px;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 25px rgb(from var(--ThemeColor) r g b / 0.25);
}

.HeroBadge[b-04b64945vj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}


.ToolbarCard[b-04b64945vj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    margin-bottom: 24px;
    border-radius: 24px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    box-shadow: 0 8px 30px rgb(from var(--ThemeForeColor) r g b / 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ToolbarTop[b-04b64945vj] {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
}

.ToolbarHeading[b-04b64945vj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ToolbarHeading strong[b-04b64945vj] {
    font-size: 18px;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.ToolbarHeading span[b-04b64945vj] {
    font-size: 13px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
}

.MiniStat[b-04b64945vj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    color: rgb(from var(--ThemeForeColor) r g b / 0.82);
    background: rgb(from var(--ThemeForeColor) r g b / 0.05);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
}

.FilterContainer[b-04b64945vj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
[b-04b64945vj] .DesktopCreatorButton{
    height : 45px;
}
.FilterContainer .SortAndAddButtonContainer[b-04b64945vj] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
[b-04b64945vj] .FilterContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}

[b-04b64945vj] .FilterContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}

[b-04b64945vj] .FilterContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}
.SearchBoxWrap[b-04b64945vj] {
    flex: 1;
    min-width: 260px;
}

[b-04b64945vj] .SearchField .mud-input-root {
    border-radius: 16px !important;
}

[b-04b64945vj] .SearchField .mud-input-slot {
    font-size: 13px;
    font-weight: 800;
}

[b-04b64945vj] .SearchField .mud-input-adornment {
    color: rgb(from var(--ThemeForeColor) r g b / 0.55) !important;
}

[b-04b64945vj] .mud-input-label {
    font-size: 13px !important;
    color: #999999 !important;
}


[b-04b64945vj] .FilterContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}

[b-04b64945vj] .FilterContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}

[b-04b64945vj] .FilterContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}

/* Grid */
.CardContainer[b-04b64945vj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 18px;
}

.CreatorLink[b-04b64945vj] {
    text-decoration: none;
}

.Card[b-04b64945vj] {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    min-height: 430px;
}

.Card:hover[b-04b64945vj] {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
    border-color: rgb(from var(--ThemeColor) r g b / 0.20);
}

.CardImageWrap[b-04b64945vj] {
    position: relative;
    overflow: hidden;
    height: 270px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.03);
}

.ProfilePic[b-04b64945vj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
    display: block;
}

.Card:hover .ProfilePic[b-04b64945vj] {
    transform: scale(1.06);
}

.ProfileGradient[b-04b64945vj] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.38), transparent 48%);
    pointer-events: none;
}

.TagsContainer[b-04b64945vj] {
    position: absolute;
    inset-inline: 12px;
    bottom: 12px;
    z-index: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;

    padding : 0px 5px;
    right : 0px;
    left : 0px;
}
.Tag[b-04b64945vj] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgb(255 255 255 / 0.14);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.10);
    white-space: nowrap;
    color: white;

    border-radius: 100px;
    gap: 6px;
    padding: 5px 10px;
}

.Tag.Creator[b-04b64945vj] {
    color: var(--ThemeColor);
    opacity: 0.95;
    background-color: rgb(from var(--ThemeColor) r g b / 0.12);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}

.Tag.Premium[b-04b64945vj] {
    color: #c28b00;
    opacity: 0.95;
    background-color: rgb(255 215 0 / 0.12);
    border: 1px solid rgb(255 215 0 / 0.2);
}




.ProfileButtonBadge[b-04b64945vj] {
    background: rgb(82 70 175 / 0.84);
}

.CardFooter[b-04b64945vj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.CreatorMainInfo[b-04b64945vj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.TextFullName[b-04b64945vj] {
    color: var(--ThemeForeColor);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

.TextBio[b-04b64945vj] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
    font-size: 13px;
    line-height: 1.8;
    min-height: 44px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.RatingRow[b-04b64945vj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

.RatingText[b-04b64945vj] {
    font-size: 12px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.60);
    font-weight: 800;
}

.StatisticMainContainer[b-04b64945vj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.StatisticContainer[b-04b64945vj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 82px;
    border-radius: 18px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
    padding: 10px 8px;
}

.StatisticContainer > .Field[b-04b64945vj] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.50);
    font-weight: 800;
    font-size: 11px;
    margin: 0;
}

.StatisticContainer > .Value[b-04b64945vj] {
    color: var(--ThemeColor);
    font-size: 24px;
    font-weight: 700;
    font-family: Fredoka;
    line-height: 1.1;
    margin: 0;
}

/* States */
.StateContainer[b-04b64945vj] {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 24px;
    border: 1px dashed rgb(from var(--ThemeForeColor) r g b / 0.12);
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
}

.EmptyState[b-04b64945vj] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.70);
    text-align: center;
    padding: 30px 20px;
}

.EmptyState strong[b-04b64945vj] {
    font-size: 18px;
    color: var(--ThemeForeColor);
}

.EmptyState span[b-04b64945vj] {
    font-size: 13px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
}

.EmptyStateIcon[b-04b64945vj] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    color: var(--ThemeColor);
}

/* Responsive */
@media (max-width: 1100px) {
    .CreatorsHeroContent[b-04b64945vj] {
        flex-direction: column;
    }

    .HeroActionCard[b-04b64945vj] {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 900px) {
    .ToolbarTop[b-04b64945vj] {
        flex-direction: column;
        align-items: stretch;
    }

    .FilterContainer[b-04b64945vj] {
        flex-direction: column;
        align-items: stretch;
    }

    .DesktopCreatorButton[b-04b64945vj] {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .CreatorsHero[b-04b64945vj],
    .CardsMainContainer[b-04b64945vj] {
        padding: 12px;
    }

    .CreatorsHeroContent[b-04b64945vj],
    .ToolbarCard[b-04b64945vj] {
        padding: 16px;
        border-radius: 20px;
    }

    .CreatorsHeroText h1[b-04b64945vj] {
        font-size: 26px;
    }

    .CreatorsHeroText p[b-04b64945vj] {
        font-size: 13px;
    }


    .Card[b-04b64945vj] {
        min-height: auto;
    }

    .CardImageWrap[b-04b64945vj] {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .HeroActionButton[b-04b64945vj] {
        width: 100%;
        justify-content: center;
    }

    .MiniStat[b-04b64945vj] {
        width: 100%;
        justify-content: center;
    }

    .StatisticMainContainer[b-04b64945vj] {
        gap: 8px;
    }

    .StatisticContainer > .Value[b-04b64945vj] {
        font-size: 21px;
    }
}









/* /Pages/Lists/PurchasedList.razor.rz.scp.css */
.HeroContent[b-dhrd9vxfu6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), transparent 55%), linear-gradient(180deg, rgb(from var(--ThemeBackgroundColor) r g b / 0.96), rgb(from var(--ThemeBackgroundColor) r g b / 0.88));
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 10px 35px rgb(from var(--ThemeForeColor) r g b / 0.05);
}

.HeroText[b-dhrd9vxfu6] {
    flex: 1;
    min-width: 260px;
}

.HeroMiniLabel[b-dhrd9vxfu6],
.SectionMiniLabel[b-dhrd9vxfu6] {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}

.HeroText h1[b-dhrd9vxfu6] {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.HeroText p[b-dhrd9vxfu6] {
    margin: 14px 0 0 0;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.95;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
}

.HeroStatsCard[b-dhrd9vxfu6] {
    width: 320px;
    min-width: 280px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
}

.MiniStat[b-dhrd9vxfu6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

.MiniStatLabel[b-dhrd9vxfu6] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.62);
    font-size: 13px;
    font-weight: 800;
}

.MiniStat strong[b-dhrd9vxfu6] {
    font-size: 24px;
    font-weight: 900;
    color: var(--ThemeColor);
    font-family: Fredoka;
}

.ContentSection[b-dhrd9vxfu6] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.SectionCard[b-dhrd9vxfu6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.86);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.04);
}

.SectionHeader h2[b-dhrd9vxfu6] {
    margin: 4px 0 0 0;
    font-size: 24px;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.CardsGrid[b-dhrd9vxfu6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}

.PlanCard[b-dhrd9vxfu6] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    box-shadow: 0 10px 24px rgb(from var(--ThemeForeColor) r g b / 0.04);
    transition: all 0.22s ease;
}

    .PlanCard:hover[b-dhrd9vxfu6] {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px rgb(from var(--ThemeForeColor) r g b / 0.08);
    }

.PremiumCard:hover[b-dhrd9vxfu6] {
    border-color: rgb(255 193 7 / 0.28);
}

.CreatorCard:hover[b-dhrd9vxfu6] {
    border-color: rgb(from var(--ThemeColor) r g b / 0.24);
}

.TemplateCard:hover[b-dhrd9vxfu6] {
    border-color: rgb(from mediumseagreen r g b / 0.26);
}

.PlanCardTop[b-dhrd9vxfu6] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

    .PlanCardTop h3[b-dhrd9vxfu6] {
        margin: 8px 0 0 0;
        font-size: 18px;
        font-weight: 900;
        color: var(--ThemeForeColor);
    }

.PlanTypeBadge[b-dhrd9vxfu6] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.PremiumBadge[b-dhrd9vxfu6] {
    color: #8c6500;
    background: linear-gradient(135deg, rgb(255 215 0 / 0.18), rgb(255 193 7 / 0.08));
    border: 1px solid rgb(255 193 7 / 0.30);
}

.CreatorBadge[b-dhrd9vxfu6] {
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.20);
}

.TemplateBadge[b-dhrd9vxfu6] {
    color: mediumseagreen;
    background: rgb(from mediumseagreen r g b / 0.10);
    border: 1px solid rgb(from mediumseagreen r g b / 0.20);
}

.PlanDescription[b-dhrd9vxfu6] {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: rgb(from var(--ThemeForeColor) r g b / 0.68);
    min-height: 48px;
}

.PlanMetaGrid[b-dhrd9vxfu6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.MetaItem[b-dhrd9vxfu6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 16px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

.MetaLabel[b-dhrd9vxfu6] {
    font-size: 11px;
    font-weight: 800;
    color: rgb(from var(--ThemeForeColor) r g b / 0.55);
}

.MetaItem strong[b-dhrd9vxfu6] {
    font-size: 13px;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.StatusBadge[b-dhrd9vxfu6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    border: 1px solid transparent;
}

.StatusBadge.active[b-dhrd9vxfu6] {
    color: mediumseagreen;
    background: rgb(from mediumseagreen r g b / 0.10);
    border-color: rgb(from mediumseagreen r g b / 0.16);
}

.StatusBadge.completed[b-dhrd9vxfu6] {
    color: mediumseagreen;
    background: rgb(from mediumseagreen r g b / 0.10);
    border-color: rgb(from mediumseagreen r g b / 0.16);
}

.StatusBadge.pending[b-dhrd9vxfu6] {
    color: orange;
    background: rgb(255 165 0 / 0.10);
    border-color: rgb(255 165 0 / 0.16);
}

.StatusBadge.expired[b-dhrd9vxfu6] {
    color: indianred;
    background: rgb(205 92 92 / 0.10);
    border-color: rgb(205 92 92 / 0.16);
}

.StatusBadge.canceled[b-dhrd9vxfu6] {
    color: gray;
    background: rgb(128 128 128 / 0.12);
    border-color: rgb(128 128 128 / 0.18);
}

.StatusBadge.default[b-dhrd9vxfu6] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.68);
    background: rgb(from var(--ThemeForeColor) r g b / 0.06);
    border-color: rgb(from var(--ThemeForeColor) r g b / 0.08);
}

.StateContainer[b-dhrd9vxfu6] {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 24px;
    border: 1px dashed rgb(from var(--ThemeForeColor) r g b / 0.12);
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
}

.EmptyState[b-dhrd9vxfu6],
.EmptyBlock[b-dhrd9vxfu6] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.68);
    text-align: center;
    padding: 24px;
    border-radius: 18px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.03);
    border: 1px dashed rgb(from var(--ThemeForeColor) r g b / 0.10);
}

@media (max-width: 980px) {
    .HeroContent[b-dhrd9vxfu6] {
        flex-direction: column;
    }

    .HeroStatsCard[b-dhrd9vxfu6] {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 700px) {

    .HeroContent[b-dhrd9vxfu6],
    .SectionCard[b-dhrd9vxfu6],
    .PlanCard[b-dhrd9vxfu6] {
        border-radius: 20px;
    }

    .CardsGrid[b-dhrd9vxfu6] {
        grid-template-columns: 1fr;
    }

    .PlanMetaGrid[b-dhrd9vxfu6] {
        grid-template-columns: 1fr;
    }

    .SectionHeader h2[b-dhrd9vxfu6] {
        font-size: 22px;
    }
}
/* /Pages/Lists/TemplatesList.razor.rz.scp.css */
.TemplatesHeroContent[b-90g0822atl] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), transparent 55%), linear-gradient(180deg, rgb(from var(--ThemeBackgroundColor) r g b / 0.96), rgb(from var(--ThemeBackgroundColor) r g b / 0.88));
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 10px 35px rgb(from var(--ThemeForeColor) r g b / 0.05);
    overflow: hidden;
    position: relative;
    z-index: 0;
}
.TemplatesHeroContent[b-90g0822atl]::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    top: -80px;
    inset-inline-end: -60px;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    filter: blur(10px);
    pointer-events: none;
}
.TemplatesHeroText[b-90g0822atl] {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.TemplatesHeroText h1[b-90g0822atl] {
    margin: 0;
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.15;
    font-weight: 900;
    color: var(--ThemeForeColor);
}
.TemplatesHeroText p[b-90g0822atl] {
    margin: 12px 0 0 0;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.9;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
}



.HeroActionCard[b-90g0822atl] {
    width: 320px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.HeroActionCardIcon[b-90g0822atl] {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: rgb(from var(--ThemeColor) r g b / 0.12);
    color: var(--ThemeColor);
}
.HeroActionCardText[b-90g0822atl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.HeroActionCardText strong[b-90g0822atl] {
    font-size: 15px;
    color: var(--ThemeForeColor);
}
.HeroActionCardText span[b-90g0822atl] {
    font-size: 13px;
    line-height: 1.7;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
}


/*---------------*/

.ToolbarCard[b-90g0822atl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    margin-bottom: 24px;
    border-radius: 24px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    box-shadow: 0 8px 30px rgb(from var(--ThemeForeColor) r g b / 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[b-90g0822atl] .TopContainer .MudChipset,
[b-90g0822atl] .ToolbarCard .MudChipset {
    gap: 8px !important;
    display: flex;
    flex-direction: row;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    flex: 1;
    padding-bottom: 2px;
}
[b-90g0822atl] .TopContainer .MudChip,
[b-90g0822atl] .ToolbarCard .MudChip {
    background-color: rgb(from var(--ThemeForeColor) r g b / 0.05);
    color: rgb(from var(--ThemeForeColor) r g b / 0.82) !important;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    font-size: 13px;
    margin: 0 !important;
    width: fit-content !important;
    min-width: 0px !important;
    flex: 0 0 auto !important;
    font-weight: 800;
    border-radius: 10px !important;
    padding-inline: 4px;
    padding : 0px 10px;
}
[b-90g0822atl] .TopContainer .MudChip.mud-chip-selected,
[b-90g0822atl] .ToolbarCard .MudChip.mud-chip-selected {
    background-color: var(--ThemeForeColor) !important;
    color: var(--ThemeBackgroundColor) !important;
    border-color: var(--ThemeForeColor) !important;
}



.FilterContainer[b-90g0822atl] {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.FilterContainer .SortAndAddButtonContainer[b-90g0822atl] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
[b-90g0822atl] .SearchField .mud-input-root,
[b-90g0822atl] .FilterContainer .MudSelect .mud-input-control > .mud-input-input-control {
    border-radius: 16px !important;
}
[b-90g0822atl] .SearchField .mud-input-slot,
[b-90g0822atl] .FilterContainer .mud-input-slot {
    font-size: 13px;
    font-weight: 800;
}
[b-90g0822atl] .SearchField .mud-input-adornment {
    color: rgb(from var(--ThemeForeColor) r g b / 0.55) !important;
}
[b-90g0822atl] .FilterContainer .MudSelect {
    width: 170px !important;
    min-width: 170px !important;
}
[b-90g0822atl] .FilterContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}
[b-90g0822atl] .FilterContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-90g0822atl] .FilterContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}
.SearchBoxWrap[b-90g0822atl] {
    flex: 1;
    min-width: 250px;
}

.ToolbarTop[b-90g0822atl] {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
}
.ChipSection[b-90g0822atl] {
    flex: 1;
    min-width: 0;
}
.ToolbarStats[b-90g0822atl] {
    display: flex;
    align-items: center;
    gap: 10px;

}

.TemplatesActionButtonsContainer[b-90g0822atl] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: stretch;
    align-items: stretch;
}
[b-90g0822atl] .ActionButton {
    padding: 4px 12px;
    width: 100%;
}

/*---------------------------*/

.CardContainer[b-90g0822atl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 18px;
    text-align: right;
}

.HeroMiniLabel[b-90g0822atl] {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}


.HeroAddButton[b-90g0822atl] {
    align-self: flex-start;
    border-radius: 14px !important;
    min-width: 135px;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 25px rgb(from var(--ThemeColor) r g b / 0.25);
}



[b-90g0822atl] .mud-icon-root {
    width: 15px;
    height: 15px;
}













@media (max-width: 1100px) {
    .TemplatesHeroContent[b-90g0822atl] {
        flex-direction: column;
    }

    .HeroActionCard[b-90g0822atl] {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 910px) {
    .ToolbarCard[b-90g0822atl]{
        flex-direction : column;
    }

    .FilterContainer[b-90g0822atl] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .FilterContainer .SortAndAddButtonContainer[b-90g0822atl] {
        width: 100%;
        flex-wrap: wrap;
    }

    [b-90g0822atl] .FilterContainer .MudSelect {
        flex : 1;
    }

    .TemplatesHero[b-90g0822atl] {
        display: none;
    }
}

@media (max-width: 700px) {
    .TemplatesHero[b-90g0822atl],
    .CardsMainContainer[b-90g0822atl] {
        padding: 12px;
    }

    .TemplatesHeroContent[b-90g0822atl],
    .ToolbarCard[b-90g0822atl] {
        padding: 16px;
        border-radius: 20px;
    }

    .TemplatesHeroText h1[b-90g0822atl] {
        font-size: 26px;
    }

    .TemplatesHeroText p[b-90g0822atl] {
        font-size: 13px;
    }

    .CardContainer[b-90g0822atl] {
        grid-template-columns: 1fr;
    }

    .Card[b-90g0822atl] {
        min-height: auto;
    }
    .ToolbarTop[b-90g0822atl] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 600px) {
    .TemplatesActionButtonsContainer[b-90g0822atl]{
        justify-content : center;
    }
}
@media (max-width: 480px) {
    .HeroAddButton[b-90g0822atl] {
        width: 100%;
        justify-content: center;
    }

    .MiniStat[b-90g0822atl] {
        width: 100%;
        justify-content: center;
    }

    .CardTopBadges[b-90g0822atl] {
        inset-inline: 10px;
        bottom: 10px;
    }

    .CardTopBadges .Price[b-90g0822atl],
    .CardTopBadges .LabelView[b-90g0822atl] {
        font-size: 10px;
        padding: 6px 10px;
    }
}















/* /Pages/Premium.razor.rz.scp.css */
.PremiumHeroContent[b-5ayavdna2t] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: linear-gradient(135deg, rgb(from gold r g b / 0.10), transparent 55%), linear-gradient(180deg, rgb(from var(--ThemeBackgroundColor) r g b / 0.96), rgb(from var(--ThemeBackgroundColor) r g b / 0.88));
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 10px 35px rgb(from var(--ThemeForeColor) r g b / 0.05);
    overflow: hidden;
    position: relative;
    min-height: 460px;
}

.PremiumHeroContent[b-5ayavdna2t]::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    top: -80px;
    inset-inline-end: -60px;
    background: rgb(from gold r g b / 0.10);
    filter: blur(10px);
    pointer-events: none;
}

.PremiumHeroText[b-5ayavdna2t] {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.HeroMiniLabel[b-5ayavdna2t],
.SectionMiniLabel[b-5ayavdna2t] {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    color: rgb(from gold r g b / 0.90);
    background: rgb(from gold r g b / 0.12);
    border: 1px solid rgb(from gold r g b / 0.22);
}

.PremiumHeroText h1[b-5ayavdna2t] {
    margin: 0;
    font-size: clamp(30px, 5vw, 50px);
    line-height: 1.12;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.PremiumHeroText p[b-5ayavdna2t] {
    margin: 16px 0 0 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 2;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
}

.HeroButtons[b-5ayavdna2t] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.HeroTrustBadge[b-5ayavdna2t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    color: rgb(from var(--ThemeForeColor) r g b / 0.82);
    background: rgb(from var(--ThemeForeColor) r g b / 0.05);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
}

[b-5ayavdna2t] .HeroPrimaryButton {
    border-radius: 14px !important;
    min-width: 155px;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 25px rgb(from gold r g b / 0.20);
    background: linear-gradient(135deg, rgb(from gold r g b / 0.85), rgb(from gold r g b / 0.60)) !important;
    color: #1e1e1e !important;
}

/* Preview */
.PremiumPreviewCard[b-5ayavdna2t] {
    width: 390px;
    min-width: 320px;
    border-radius: 24px;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    padding: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.06);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.PreviewHeader[b-5ayavdna2t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.PreviewDots[b-5ayavdna2t] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .PreviewDots span[b-5ayavdna2t] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgb(from var(--ThemeForeColor) r g b / 0.18);
    }

.PreviewLabel[b-5ayavdna2t] {
    font-size: 12px;
    font-weight: 800;
    color: rgb(from var(--ThemeForeColor) r g b / 0.58);
}

.PreviewBody[b-5ayavdna2t] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.PreviewTopStat[b-5ayavdna2t] {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgb(from gold r g b / 0.10), rgb(from var(--ThemeForeColor) r g b / 0.02));
    border: 1px solid rgb(from gold r g b / 0.14);
}

.PreviewIconWrap[b-5ayavdna2t] {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(from gold r g b / 0.14);
    color: rgb(from gold r g b / 0.92);
    flex-shrink: 0;
}

.PreviewTopText[b-5ayavdna2t] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .PreviewTopText strong[b-5ayavdna2t] {
        font-size: 15px;
        color: var(--ThemeForeColor);
    }

    .PreviewTopText span[b-5ayavdna2t] {
        font-size: 13px;
        line-height: 1.7;
        color: rgb(from var(--ThemeForeColor) r g b / 0.65);
    }

.PreviewBenefitList[b-5ayavdna2t] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.PreviewBenefit[b-5ayavdna2t] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
    color: rgb(from var(--ThemeForeColor) r g b / 0.82);
    font-size: 12px;
    font-weight: 800;
}

    .PreviewBenefit[b-5ayavdna2t]  .mud-icon-root {
        color: rgb(from gold r g b / 0.92);
    }

.PreviewStatsGrid[b-5ayavdna2t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.MiniPreviewStat[b-5ayavdna2t] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-height: 74px;
    border-radius: 16px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

    .MiniPreviewStat strong[b-5ayavdna2t] {
        color: rgb(from gold r g b / 0.92);
        font-size: 16px;
        font-weight: 900;
        line-height: 1.1;
    }

    .MiniPreviewStat span[b-5ayavdna2t] {
        color: rgb(from var(--ThemeForeColor) r g b / 0.58);
        font-size: 11px;
        font-weight: 800;
    }

/* Shared sections */
.FeaturesSection[b-5ayavdna2t],
.pricing[b-5ayavdna2t] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.SectionHeader[b-5ayavdna2t] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

    .SectionHeader.Centered[b-5ayavdna2t] {
        align-items: center;
        text-align: center;
    }

    .SectionHeader h2[b-5ayavdna2t] {
        margin: 0;
        font-size: clamp(24px, 4vw, 34px);
        line-height: 1.2;
        font-weight: 900;
        color: var(--ThemeForeColor);
    }

    .SectionHeader p[b-5ayavdna2t] {
        margin: 0;
        font-size: 14px;
        line-height: 1.9;
        color: rgb(from var(--ThemeForeColor) r g b / 0.62);
        max-width: 760px;
    }

/* Features */
.features[b-5ayavdna2t] {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.feature-card[b-5ayavdna2t] {
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    padding: 22px;
    border-radius: 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .feature-card:hover[b-5ayavdna2t] {
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
        border-color: rgb(from gold r g b / 0.22);
    }

.FeatureIcon[b-5ayavdna2t] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgb(from gold r g b / 0.12);
    color: rgb(from gold r g b / 0.92);
}

.feature-card h3[b-5ayavdna2t] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--ThemeForeColor);
}

.feature-card p[b-5ayavdna2t] {
    margin: 0;
    color: rgb(from var(--ThemeForeColor) r g b / 0.66);
    line-height: 1.9;
    font-size: 13px;
}

/* Pricing */
.pricing[b-5ayavdna2t] {
    padding: 0;
}

.pricing-container[b-5ayavdna2t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.price-card[b-5ayavdna2t] {
    position: relative;
    background: linear-gradient(180deg, rgb(from gold r g b / 0.05), rgb(from var(--ThemeBackgroundColor) r g b / 0.92));
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    padding: 22px;
    border-radius: 26px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

    .price-card:hover[b-5ayavdna2t] {
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
        border-color: rgb(from gold r g b / 0.25);
    }

    .price-card.popular[b-5ayavdna2t] {
        border: 2px solid rgb(from gold r g b / 0.75);
        box-shadow: 0 20px 40px rgb(from gold r g b / 0.10);
    }

.PopularBadge[b-5ayavdna2t] {
    position: absolute;
    inset-inline-end: 16px;
    top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #1e1e1e;
    background: linear-gradient(135deg, rgb(from gold r g b / 0.95), rgb(from gold r g b / 0.70));
    box-shadow: 0 8px 22px rgb(from gold r g b / 0.18);
}

.PlanHeader[b-5ayavdna2t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    margin-bottom: 6px;
}

    .PlanHeader h3[b-5ayavdna2t] {
        margin: 0;
        color: var(--ThemeForeColor);
        font-size: 22px;
        font-weight: 900;
    }

.PlanSubtitle[b-5ayavdna2t] {
    font-size: 12px;
    line-height: 1.7;
    color: rgb(from var(--ThemeForeColor) r g b / 0.58);
    min-height: 38px;
}

.price[b-5ayavdna2t] {
    font-size: 42px;
    font-weight: 900;
    margin: 16px 0 18px 0;
    color: rgb(from gold r g b / 0.92);
    line-height: 1.1;
}

    .price span[b-5ayavdna2t] {
        font-size: 14px;
        color: rgb(from var(--ThemeForeColor) r g b / 0.52);
        font-weight: 700;
    }

.price-card ul[b-5ayavdna2t] {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

    .price-card ul li[b-5ayavdna2t] {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: 8px;
        color: var(--ThemeForeColor);
        line-height: 1.7;
        font-size: 13px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgb(from var(--ThemeForeColor) r g b / 0.03);
        border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.05);
    }

.PlanCheckIcon[b-5ayavdna2t] {
    color: rgb(from gold r g b / 0.92) !important;
    margin-top: 2px;
    flex-shrink: 0;
}

[b-5ayavdna2t] .subscribe-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 14px !important;
    border: none;
    color: #1e1e1e !important;
    font-weight: 900 !important;
    cursor: pointer;
    margin-top: 18px;
    background: linear-gradient(135deg, rgb(from gold r g b / 0.95), rgb(from gold r g b / 0.72)) !important;
    box-shadow: 0 10px 25px rgb(from gold r g b / 0.18);
}

/* Active Plan Badge */
.ActivePlanBadge[b-5ayavdna2t] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgb(from gold r g b / 0.12), rgb(from gold r g b / 0.04));
    border: 1px solid rgb(from gold r g b / 0.25);
}

    .ActivePlanBadge[b-5ayavdna2t]  .mud-icon-root {
        color: rgb(from gold r g b / 0.92);
        flex-shrink: 0;
    }

.ActivePlanBadgeText[b-5ayavdna2t] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .ActivePlanBadgeText span[b-5ayavdna2t] {
        font-size: 12px;
        font-weight: 700;
        color: var(--ThemeForeColor);
        line-height: 1.6;
    }

        .ActivePlanBadgeText span strong[b-5ayavdna2t] {
            color: rgb(from gold r g b / 0.92);
        }

    .ActivePlanBadgeText .ActivePlanRemaining[b-5ayavdna2t] {
        font-size: 11px;
        color: rgb(from var(--ThemeForeColor) r g b / 0.55);
        font-weight: 800;
    }

/* States */
.StateContainer[b-5ayavdna2t] {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    border-radius: 24px;
    border: 1px dashed rgb(from var(--ThemeForeColor) r g b / 0.12);
    background: rgb(from var(--ThemeForeColor) r g b / 0.02);
    grid-column: 1 / -1;
}

/* Responsive */
@media (max-width: 1100px) {
    .PremiumHeroContent[b-5ayavdna2t] {
        flex-direction: column;
        min-height: unset;
    }

    .PremiumPreviewCard[b-5ayavdna2t] {
        display : none;
    }

    .PremiumHeroContent[b-5ayavdna2t],
    .feature-card[b-5ayavdna2t],
    .price-card[b-5ayavdna2t] {
        border-radius: 20px;
    }

    .PremiumHeroContent[b-5ayavdna2t] {
        padding: 18px;
    }

    .HeroButtons[b-5ayavdna2t] {
        flex-direction: column;
        align-items: stretch;
    }

    .HeroTrustBadge[b-5ayavdna2t],
    [b-5ayavdna2t] .HeroPrimaryButton {
        width: 100%;
        justify-content: center;
    }

    .PreviewBenefitList[b-5ayavdna2t],
    .PreviewStatsGrid[b-5ayavdna2t],
    .pricing-container[b-5ayavdna2t] {
        grid-template-columns: 1fr;
    }

    .SectionHeader h2[b-5ayavdna2t] {
        font-size: 26px;
    }
}

@media (max-width: 520px) {
    .PremiumHeroText h1[b-5ayavdna2t] {
        font-size: 30px;
    }

    .PremiumHeroText p[b-5ayavdna2t] {
        font-size: 14px;
    }

    .price[b-5ayavdna2t] {
        font-size: 36px;
    }

    .PopularBadge[b-5ayavdna2t] {
        position: static;
        width: fit-content;
        margin-bottom: 12px;
    }
}



/*.MainContainer {
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow: auto;
    height: calc(100% - 60px);
    width: 100%;
}



.hero {
    text-align: center;
    padding: 120px 20px 80px 20px;
}

.hero h1 {
    font-size: 48px;
    font-weight: 800;

    background: linear-gradient(90deg, #ec4899, gold, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    margin-top: 20px;
    font-size: 18px;
    color: var(--ThemeForeColor);
    opacity : 0.8;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

::deep .cta-btn {
    margin-top: 40px;
    padding: 15px 40px;
    border-radius: 50px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: 0.3s;
    background-color: rgb(from gold r g b /0.5) !important;
}

.cta-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 10px 30px rgba(99,102,241,0.4);
}*/

/* FEATURES */
/*.features {
    padding: 80px 8%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--ThemeSurface);
    padding: 30px;
    border-radius: 20px;
    transition: 0.3s;
}

    .feature-card:hover {
        transform: translateY(-10px);
        background: rgb(from gold r g b / 0.1) !important;
    }

.feature-card h3 {
    margin-bottom: 15px;
    font-size: 20px;
}

.feature-card p {
    color: grey;
}*/

/* PRICING */
/*.pricing {
    padding: 100px 8%;
    text-align: center;
}

.pricing h2 {
    font-size: 36px;
    margin-bottom: 60px;
}

.pricing-container {
    display: flex;
    flex-direction : row;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.price-card {
    background: var(--ThemeSurface);
    background: rgb(from gold r g b / 0.05) !important;
    border: 1px solid var(--ThemeBorderColor);
    padding: 20px;
    border-radius: 25px;
    width: 300px;
    transition: 0.3s;
}
.price-card h3{
        color : grey ;
}

.price-card:hover {
    transform: scale(1.05);
}

.price-card.popular {
    border: 2px solid gold;
    transform: scale(1.1);
}

.price {
    font-size: 40px;
    font-weight: 700;
    margin: 20px 0;
    color: gold;
}

.price span {
    font-size: 16px;
    color: #94a3b8;
}

.price-card ul {
    list-style: none;
    margin: 20px 0;
    text-align: right;
}

.price-card ul li {
    margin: 12px 0;
    color: var(--ThemeForeColor);
}

::deep .subscribe-btn {
    width: 100%;
    padding: 12px;
    border-radius: 30px;
    border: none;
    background-color: rgb(from gold r g b /0.5) !important;
    color: white;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
}*/
/* /Pages/User/Account.razor.rz.scp.css */
.ProfileMainContainer[b-asft5dht44] {
    display: flex;
    flex-direction: row;
    width: 100% !important;
    gap: 40px;
    padding: 10px;
}

.ProfilePicture[b-asft5dht44] {
    object-fit: cover;
    border-radius: 10px;
    width: 250px;
    max-height: 400px;
    height: 400px;
    padding: 5px;
}

.ProfileDetailContainer[b-asft5dht44] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.UserFullName[b-asft5dht44] {
    font-size: 30px;
    color: var(--ThemeForeColor);
    opacity: 0.9;
}

.UserBio[b-asft5dht44] {
    color: grey;
    font-size: 14px;
    margin-top: 3px;
    width: 100%;
    word-break: break-all;
}

.SocialMediasContainer[b-asft5dht44] {
    display: flex;
    flex-direction: row;
    gap: 0px;
    padding-right: -5px;
}

.ActionButtonsContainer[b-asft5dht44] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: auto;
    flex-wrap: wrap;
}
.ActionButtonsContainer.Primary[b-asft5dht44] {
    display: flex;
}
.ActionButtonsContainer.Secondary[b-asft5dht44] {
    display: none;
}
[b-asft5dht44] .ProfileMainActionButton {
    border-color: rgb(from var(--ThemeBorderColor) r g b / 0.85) !important;
    border-radius: 10px !important;
    padding-inline: 16px !important;
}








.ProfileMainContainer[b-asft5dht44] {
    display: flex;
    flex-direction: row;
    width: 100% !important;
    gap: 40px;
    padding: 10px;
}

.ProfilePicture[b-asft5dht44] {
    object-fit: cover;
    border-radius: 10px;
    width: 250px;
    max-height: 400px;
    height: 400px;
}

.ProfileDetailContainer[b-asft5dht44] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.UserFullName[b-asft5dht44] {
    font-size: 30px;
    color: var(--ThemeForeColor);
    opacity: 0.9;
}

.UserBio[b-asft5dht44] {
    color: grey;
    font-size: 14px;
    margin-top: 3px;
    width: 100%;
    word-break: break-word;
}

.UserTagsContainer[b-asft5dht44] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.UserTag[b-asft5dht44] {
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    width: fit-content;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.UserTag.Creator[b-asft5dht44] {
    color: var(--ThemeColor);
    opacity: 0.95;
    background-color: rgb(from var(--ThemeColor) r g b / 0.12);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}

.UserTag.User[b-asft5dht44] {
    color: grey;
    opacity: 0.9;
    background-color: rgb(from grey r g b / 0.1);
    border: 1px solid rgb(from grey r g b / 0.12);
}

.UserTag.Premium[b-asft5dht44] {
    color: #c28b00;
    opacity: 0.95;
    background-color: rgb(255 215 0 / 0.12);
    border: 1px solid rgb(255 215 0 / 0.2);
}

.SocialMediasContainer[b-asft5dht44] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    flex-wrap: wrap;
}


.ProfileHeaderTopRow[b-asft5dht44] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
}

.ProfileNameBioBlock[b-asft5dht44] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ProfileQuickActionsDesktop[b-asft5dht44] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.QuickActionButton[b-asft5dht44] {
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.8);
    background: rgb(from var(--ThemeSurface) r g b / 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgb(from var(--ThemeForeColor) r g b / 0.85) !important;
}

.ProfileMetaGrid[b-asft5dht44] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
}

.ProfileMetaCard[b-asft5dht44] {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.7);
    background: linear-gradient(to bottom, rgb(from var(--ThemeSurface) r g b / 0.78), rgb(from var(--ThemeBackgroundColor) r g b / 0.64));
    box-shadow: 0 8px 30px rgb(from var(--ThemeShadowColor) r g b / 0.12);
}

.ProfileRatingRow[b-asft5dht44] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.SectionMiniTitle[b-asft5dht44] {
    color: grey;
    font-size: 13px;
    font-weight: 700;
}




.OverviewStatsGrid[b-asft5dht44] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.OverviewStatCard[b-asft5dht44] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.65);
    background: linear-gradient(to bottom right, rgb(from var(--ThemeSurface) r g b / 0.82), rgb(from var(--ThemeBackgroundColor) r g b / 0.7));
    box-shadow: 0 10px 35px rgb(from var(--ThemeShadowColor) r g b / 0.12);
    min-height: 100px;
}

.OverviewStatIcon[b-asft5dht44] {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(from var(--ThemeColor) r g b / 0.1);
    color: var(--ThemeColor);
    font-size: 22px;
}

.OverviewStatContent[b-asft5dht44] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.OverviewStatValue[b-asft5dht44] {
    font-size: 28px;
    font-weight: 800;
    color: var(--ThemeForeColor);
    line-height: 1;
}

.OverviewStatLabel[b-asft5dht44] {
    font-size: 13px;
    color: grey;
    font-weight: 700;
}


.ProfileTabsWrapper[b-asft5dht44] {
    width: 100%;
    height : fit-content;
}

[b-asft5dht44] .ProfileTabs {
    background: transparent !important;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.7);
    background: linear-gradient(to bottom, rgb(from var(--ThemeSurface) r g b / 0.82), rgb(from var(--ThemeBackgroundColor) r g b / 0.72));
/*    min-height : 600px !important;*/
}

[b-asft5dht44] .ProfileTabs .mud-tabs-toolbar {
    margin-bottom: 18px;
    padding: 8px;
    background: rgb(from var(--ThemeSurface) r g b / 0.55);
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.65);
}

[b-asft5dht44] .ProfileTabs .mud-tab {
    min-height: 42px;
    font-weight: 700;
    color: var(--ThemeForeColor) !important;
    opacity : 0.8;
}

[b-asft5dht44] .ProfileTabs .mud-tab.mud-tab-active {
    background: rgb(from var(--ThemeColor) r g b / 0.12);
}

.ModernSectionCard[b-asft5dht44] {
    border-radius: 24px;
    padding: 22px;
    padding: 18px;
}


.SectionHeader[b-asft5dht44] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.SectionHeaderResponsive[b-asft5dht44] {
    flex-wrap: wrap;
}

.SectionEyebrow[b-asft5dht44] {
    display: inline-block;
    font-size: 12px;
    color: var(--ThemeColor);
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.SectionTitle[b-asft5dht44] {
    margin: 0;
    color: var(--ThemeForeColor);
    font-size: 22px;
    font-weight: 800;
}

.OverviewTabGrid[b-asft5dht44] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
}

.PersonalInfoModernGrid[b-asft5dht44] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px;
}

.InfoModernItem[b-asft5dht44] {
    padding: 16px;
    border-radius: 18px;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.45);
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.55);
}

.InfoValueRow[b-asft5dht44] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.InfoTitle[b-asft5dht44] {
    color: grey;
    font-size: 12px;
    font-weight: 700;
}

.InfoValue[b-asft5dht44] {
    color: var(--ThemeForeColor);
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}


.RatingsMainContainer[b-asft5dht44] {
    border-radius: 24px;
    padding: 22px;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.65);
    box-shadow: 0 10px 35px rgb(from var(--ThemeShadowColor) r g b / 0.12);
}

.RatingsPreviewContainer[b-asft5dht44],
.RatingsListModern[b-asft5dht44] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.RatingsContainer[b-asft5dht44] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
    width: 100%;
}

.ReviewModernCard[b-asft5dht44] {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.55);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.42);
    transition: 0.25s;
}

.ReviewModernCard:hover[b-asft5dht44] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgb(from var(--ThemeShadowColor) r g b / 0.1);
}

.ReviewModernCard.Large[b-asft5dht44] {
    padding: 18px;
}

.ReviewModernHeader[b-asft5dht44] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.ReviewUserBlock[b-asft5dht44] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ReviewUserBlock img[b-asft5dht44] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.ReviewUserBlock a[b-asft5dht44] {
    color: var(--ThemeForeColor);
    text-decoration: none;
    font-weight: 700;
}

.ReviewUserBlock a:hover[b-asft5dht44] {
    text-decoration: underline;
}

.ReviewUserBlock span[b-asft5dht44] {
    display: block;
    font-size: 12px;
    color: grey;
    margin-top: 2px;
}

.ReviewRateBlock[b-asft5dht44] {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 4px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.8);
    font-size: 12px;
}

.ReviewComment[b-asft5dht44] {
    margin: 12px 0 0 0;
    color: rgb(from var(--ThemeForeColor) r g b / 0.9);
    font-size: 14px;
    line-height: 1.8;
    word-break: break-word;
}








/*---------------*/

.ToolbarCard[b-asft5dht44] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    margin-bottom: 24px;
    border-radius: 24px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    box-shadow: 0 8px 30px rgb(from var(--ThemeForeColor) r g b / 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[b-asft5dht44] .TopContainer .MudChipset,
[b-asft5dht44] .ToolbarCard .MudChipset {
    gap: 8px !important;
    display: flex;
    flex-direction: row;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    flex: 1;
    padding-bottom: 2px;
}
[b-asft5dht44] .TopContainer .MudChip,
[b-asft5dht44] .ToolbarCard .MudChip {
    background-color: rgb(from var(--ThemeForeColor) r g b / 0.05);
    color: rgb(from var(--ThemeForeColor) r g b / 0.82) !important;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    font-size: 13px;
    margin: 0 !important;
    width: fit-content !important;
    min-width: 0px !important;
    flex: 0 0 auto !important;
    font-weight: 800;
    border-radius: 10px !important;
    padding-inline: 4px;
    padding : 0px 10px;
}
[b-asft5dht44] .TopContainer .MudChip.mud-chip-selected,
[b-asft5dht44] .ToolbarCard .MudChip.mud-chip-selected {
    background-color: var(--ThemeForeColor) !important;
    color: var(--ThemeBackgroundColor) !important;
    border-color: var(--ThemeForeColor) !important;
}



.FilterContainer[b-asft5dht44] {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.FilterContainer .SortAndAddButtonContainer[b-asft5dht44] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
[b-asft5dht44] .SearchField .mud-input-root,
[b-asft5dht44] .FilterContainer .MudSelect .mud-input-control > .mud-input-input-control {
    border-radius: 16px !important;
}
[b-asft5dht44] .SearchField .mud-input-slot,
[b-asft5dht44] .FilterContainer .mud-input-slot {
    font-size: 13px;
    font-weight: 800;
}
[b-asft5dht44] .SearchField .mud-input-adornment {
    color: rgb(from var(--ThemeForeColor) r g b / 0.55) !important;
}
[b-asft5dht44] .FilterContainer .MudSelect {
    width: 170px !important;
    min-width: 170px !important;
}
[b-asft5dht44] .FilterContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}
[b-asft5dht44] .FilterContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-asft5dht44] .FilterContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}
.SearchBoxWrap[b-asft5dht44] {
    flex: 1;
    min-width: 250px;
}

.ToolbarTop[b-asft5dht44] {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
}
.ChipSection[b-asft5dht44] {
    flex: 1;
    min-width: 0;
}
.ToolbarStats[b-asft5dht44] {
    display: flex;
    align-items: center;
    gap: 10px;

}

[b-asft5dht44] .ActionButton {
    padding: 5px 15px;
    width: 100%;
}

/*---------------------------*/

.CardContainer[b-asft5dht44] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 18px;
    text-align: right;
}





@media (max-width: 1100px) {
    .OverviewTabGrid[b-asft5dht44] {
        grid-template-columns: 1fr;
    }

    .OverviewStatsGrid[b-asft5dht44] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .PersonalInfoModernGrid[b-asft5dht44] {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 910px) {
    .FilterContainer[b-asft5dht44] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    [b-asft5dht44] .FilterContaine .MudSelect {
        flex: 1;
    }

    .FilterContainer .SortAndAddButtonContainer[b-asft5dht44] {
        width: 100%;
        flex-wrap: wrap;
    }
}
@media (max-width: 880px) {
    .ProfileHeaderTopRow[b-asft5dht44] {
        flex-direction: column;
        align-items: stretch;
    }

    .ProfileQuickActionsDesktop[b-asft5dht44] {
        justify-content: start;
    }

    .ProfileMetaGrid[b-asft5dht44] {
        grid-template-columns: 1fr;
    }

    .ModernSearchBox[b-asft5dht44],
    [b-asft5dht44] .ModernStatusSelect {
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (max-width: 650px) {
    .ProfileMainContainer[b-asft5dht44] {
        flex-direction: column !important;
        align-items: center;
        gap: 20px;
    }

    .ProfilePicture[b-asft5dht44] {
        width: 100%;
        max-width: 320px;
        height: 320px;
    }

    .ProfileDetailContainer[b-asft5dht44] {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .ActionButtonsContainer[b-asft5dht44] {
        flex-direction: column;
        align-items: stretch !important;
    }
    .ActionButtonsContainer.Primary[b-asft5dht44] {
        display : none;
    }
    .ActionButtonsContainer.Secondary[b-asft5dht44] {
        display : flex;
        width : 100%;
    }

    .ProfileMainActionButton[b-asft5dht44] {
        width: 100%;
    }

    .OverviewStatsGrid[b-asft5dht44] {
        margin-top: 30px;
        grid-template-columns: 1fr;
    }

    .PersonalInfoModernGrid[b-asft5dht44] {
        grid-template-columns: 1fr;
    }

    .TemplatesGrid[b-asft5dht44] {
        grid-template-columns: 1fr;
    }

    .ReviewModernHeader[b-asft5dht44] {
        flex-direction: column;
        align-items: stretch;
    }

    .ReviewRateBlock[b-asft5dht44] {
        align-items: start;
    }
}




[b-asft5dht44] .mud-tabs-scroll-button {
    display: none !important;
}
[b-asft5dht44] .mud-tabs-tabbar-inner {
    overflow-x: auto !important;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
[b-asft5dht44] .mud-tabs-tabbar-inner::-webkit-scrollbar {
    display: none;
}


/* /Pages/User/Dashboard.razor.rz.scp.css */
.CreatorDashboardPage[b-fy2ezjtaje] {
    width: 100%;
    min-height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background:
        radial-gradient(circle at top left, rgba(130, 90, 255, 0.10), transparent 26%),
        radial-gradient(circle at top right, rgba(0, 183, 255, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(10, 10, 14, 0.98), rgba(16, 16, 22, 1));
}

.DashboardHero[b-fy2ezjtaje] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.DashboardHeroLeft[b-fy2ezjtaje],
.CreatorSpotlightCard[b-fy2ezjtaje],
.StatCard[b-fy2ezjtaje],
.DashboardCard[b-fy2ezjtaje] {
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.18);
}

.DashboardHeroLeft[b-fy2ezjtaje] {
    border-radius: 28px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 240px;
}

.DashboardBadge[b-fy2ezjtaje] {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
    color: #d8ccff;
    background: rgba(132, 94, 255, 0.14);
    border: 1px solid rgba(132, 94, 255, 0.22);
    font-size: 13px;
    font-weight: 600;
}

.DashboardTitle[b-fy2ezjtaje] {
    margin: 0;
    color: white;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
}

.DashboardSubtitle[b-fy2ezjtaje] {
    margin: 12px 0 0 0;
    max-width: 700px;
    color: rgba(255,255,255,0.72);
    font-size: 15px;
    line-height: 1.9;
}

.DashboardHeroActions[b-fy2ezjtaje] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.CreatorSpotlightCard[b-fy2ezjtaje] {
    border-radius: 28px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    position: relative;
    overflow: hidden;
}

.CreatorSpotlightCard[b-fy2ezjtaje]::before {
    content: "";
    position: absolute;
    inset: auto -40px -40px auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 92, 255, 0.22), transparent 70%);
    pointer-events: none;
}

.CreatorSpotlightTop[b-fy2ezjtaje] {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 0;
}

.CreatorAvatar[b-fy2ezjtaje] {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.14);
}

.CreatorSpotlightInfo[b-fy2ezjtaje] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.CreatorName[b-fy2ezjtaje] {
    color: white;
    font-size: 18px;
    font-weight: 700;
}

.CreatorUsername[b-fy2ezjtaje] {
    color: rgba(255,255,255,0.62);
    font-size: 14px;
}

.CreatorSpotlightStats[b-fy2ezjtaje] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    position: relative;
    z-index: 0;
}

.MiniStat[b-fy2ezjtaje] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.MiniStatLabel[b-fy2ezjtaje] {
    color: rgba(255,255,255,0.60);
    font-size: 12px;
}

.MiniStatValue[b-fy2ezjtaje] {
    color: white;
    font-size: 20px;
    font-weight: 800;
}

.StatsGrid[b-fy2ezjtaje] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.StatCard[b-fy2ezjtaje] {
    border-radius: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.StatCardTop[b-fy2ezjtaje] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.StatIcon[b-fy2ezjtaje] {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.StatIcon.Purple[b-fy2ezjtaje] {
    background: linear-gradient(135deg, #8d5cff, #6e40e9);
}

.StatIcon.Blue[b-fy2ezjtaje] {
    background: linear-gradient(135deg, #3ca8ff, #127bff);
}

.StatIcon.Green[b-fy2ezjtaje] {
    background: linear-gradient(135deg, #22c55e, #119c47);
}

.StatIcon.Orange[b-fy2ezjtaje] {
    background: linear-gradient(135deg, #ff9b3d, #ff6d1f);
}

.StatLabel[b-fy2ezjtaje] {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
}

.StatValue[b-fy2ezjtaje] {
    margin: 0;
    color: white;
    font-size: 30px;
    font-weight: 800;
}

.StatHint[b-fy2ezjtaje] {
    color: rgba(255,255,255,0.45);
    font-size: 12px;
}

.StatChange[b-fy2ezjtaje] {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.StatChange.Up[b-fy2ezjtaje] {
    color: #86efac;
    background: rgba(34,197,94,0.14);
    border: 1px solid rgba(34,197,94,0.18);
}

.StatChange.Down[b-fy2ezjtaje] {
    color: #fda4af;
    background: rgba(244,63,94,0.14);
    border: 1px solid rgba(244,63,94,0.18);
}

.DashboardGrid[b-fy2ezjtaje] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
    gap: 20px;
    align-items: start;
}

.DashboardMainColumn[b-fy2ezjtaje],
.DashboardSideColumn[b-fy2ezjtaje] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.DashboardCard[b-fy2ezjtaje] {
    border-radius: 28px;
    padding: 22px;
}

.CardHeader[b-fy2ezjtaje] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.CardHeader.Small[b-fy2ezjtaje] {
    margin-bottom: 16px;
}

.CardHeader h3[b-fy2ezjtaje] {
    margin: 0;
    color: white;
    font-size: 20px;
    font-weight: 750;
}

.CardHeader span[b-fy2ezjtaje] {
    color: rgba(255,255,255,0.60);
    font-size: 13px;
}

.EarningsGrid[b-fy2ezjtaje] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.EarningBox[b-fy2ezjtaje] {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.EarningLabel[b-fy2ezjtaje] {
    color: rgba(255,255,255,0.62);
    font-size: 13px;
}

.EarningBox h2[b-fy2ezjtaje] {
    margin: 0;
    color: white;
    font-size: 30px;
    font-weight: 800;
}

.EarningHint[b-fy2ezjtaje] {
    color: rgba(255,255,255,0.46);
    font-size: 12px;
}

.ModernTableWrapper[b-fy2ezjtaje] {
    width: 100%;
    overflow-x: auto;
}

.ModernTable[b-fy2ezjtaje] {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.ModernTable th[b-fy2ezjtaje] {
    text-align: left;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 700;
    padding: 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ModernTable td[b-fy2ezjtaje] {
    color: white;
    font-size: 14px;
    padding: 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: middle;
}

.TableTemplateCell[b-fy2ezjtaje] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.TemplateMiniThumb[b-fy2ezjtaje] {
    width: 44px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(140, 110, 255, 0.55), rgba(255,255,255,0.10));
    border: 1px solid rgba(255,255,255,0.10);
    flex-shrink: 0;
}

.PrimaryText[b-fy2ezjtaje] {
    display: block;
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.SecondaryText[b-fy2ezjtaje] {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,0.52);
    font-size: 12px;
}

.StatusBadge[b-fy2ezjtaje] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.StatusBadge.Success[b-fy2ezjtaje] {
    color: #86efac;
    background: rgba(34,197,94,0.14);
    border: 1px solid rgba(34,197,94,0.18);
}

.StatusBadge.Pending[b-fy2ezjtaje] {
    color: #fcd34d;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.18);
}

.StatusBadge.Rejected[b-fy2ezjtaje] {
    color: #fda4af;
    background: rgba(244,63,94,0.14);
    border: 1px solid rgba(244,63,94,0.18);
}

.TopTemplatesGrid[b-fy2ezjtaje] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.TemplatePerformanceCard[b-fy2ezjtaje] {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    transition: 0.25s ease;
}

.TemplatePerformanceCard:hover[b-fy2ezjtaje] {
    transform: translateY(-4px);
    border-color: rgba(145, 110, 255, 0.30);
    box-shadow: 0 18px 34px rgba(0,0,0,0.18);
}

.TemplatePreview[b-fy2ezjtaje] {
    height: 170px;
    background:
        linear-gradient(135deg, rgba(140, 110, 255, 0.30), rgba(255,255,255,0.05)),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

.TemplatePerformanceContent[b-fy2ezjtaje] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.TemplatePerformanceContent h4[b-fy2ezjtaje] {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: 700;
}

.TemplatePerformanceContent span[b-fy2ezjtaje] {
    color: rgba(255,255,255,0.58);
    font-size: 13px;
}

.TemplateMetaRow[b-fy2ezjtaje] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    color: white;
    font-size: 13px;
    font-weight: 700;
}

.QuickActions[b-fy2ezjtaje] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.QuickActionButton[b-fy2ezjtaje] {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
    color: white;
    border-radius: 18px;
    padding: 15px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: 0.22s ease;
    font-size: 14px;
    font-weight: 600;
}

.QuickActionButton:hover[b-fy2ezjtaje] {
    transform: translateY(-2px);
    background: rgba(132, 94, 255, 0.10);
    border-color: rgba(132, 94, 255, 0.24);
}

.PlanCard[b-fy2ezjtaje] {
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(132,94,255,0.14), rgba(255,255,255,0.03));
    border: 1px solid rgba(132,94,255,0.18);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.PlanTop[b-fy2ezjtaje] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.PlanName[b-fy2ezjtaje] {
    color: white;
    font-size: 18px;
    font-weight: 800;
}

.PlanBadge[b-fy2ezjtaje] {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(34,197,94,0.14);
    border: 1px solid rgba(34,197,94,0.18);
    color: #86efac;
    font-size: 12px;
    font-weight: 700;
}

.PlanFeatures[b-fy2ezjtaje] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.PlanFeature[b-fy2ezjtaje] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.80);
    font-size: 14px;
}

.ActivityList[b-fy2ezjtaje] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ActivityItem[b-fy2ezjtaje] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ActivityDot[b-fy2ezjtaje] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.ActivityDot.Success[b-fy2ezjtaje] {
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34,197,94,0.10);
}

.ActivityDot.Info[b-fy2ezjtaje] {
    background: #3b82f6;
    box-shadow: 0 0 0 6px rgba(59,130,246,0.10);
}

.ActivityDot.Warning[b-fy2ezjtaje] {
    background: #f59e0b;
    box-shadow: 0 0 0 6px rgba(245,158,11,0.10);
}

.ActivityContent[b-fy2ezjtaje] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ActivityTitle[b-fy2ezjtaje] {
    color: white;
    font-size: 14px;
    font-weight: 650;
}

.ActivityTime[b-fy2ezjtaje] {
    color: rgba(255,255,255,0.50);
    font-size: 12px;
}

@media (max-width: 1200px) {
    .StatsGrid[b-fy2ezjtaje] {
        grid-template-columns: repeat(2, 1fr);
    }

    .DashboardGrid[b-fy2ezjtaje] {
        grid-template-columns: 1fr;
    }

    .TopTemplatesGrid[b-fy2ezjtaje] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .DashboardHero[b-fy2ezjtaje] {
        grid-template-columns: 1fr;
    }

    .EarningsGrid[b-fy2ezjtaje] {
        grid-template-columns: 1fr;
    }

    .TopTemplatesGrid[b-fy2ezjtaje] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .CreatorDashboardPage[b-fy2ezjtaje] {
        padding: 14px;
        gap: 16px;
    }

    .DashboardHeroLeft[b-fy2ezjtaje],
    .CreatorSpotlightCard[b-fy2ezjtaje],
    .DashboardCard[b-fy2ezjtaje],
    .StatCard[b-fy2ezjtaje] {
        border-radius: 22px;
    }

    .DashboardTitle[b-fy2ezjtaje] {
        font-size: 28px;
    }

    .DashboardSubtitle[b-fy2ezjtaje] {
        font-size: 14px;
    }

    .StatsGrid[b-fy2ezjtaje] {
        grid-template-columns: 1fr;
    }

    .CreatorSpotlightStats[b-fy2ezjtaje] {
        grid-template-columns: 1fr;
    }

    .CardHeader[b-fy2ezjtaje] {
        flex-direction: column;
        align-items: stretch;
    }

    .ModernTable[b-fy2ezjtaje] {
        min-width: 680px;
    }
}
/* /Pages/User/ForgetPassword.razor.rz.scp.css */
.MainContainer[b-gu7pveqxw1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    min-height: calc(100vh - 100px);
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.MainContainer[b-gu7pveqxw1]::before,
.MainContainer[b-gu7pveqxw1]::after {
    content: '';
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    filter: blur(120px);
    opacity: 0.15;
}

.MainContainer[b-gu7pveqxw1]::before {
    left: -20vw;
    background: var(--ThemeColor);
}

.MainContainer[b-gu7pveqxw1]::after {
    right: -20vw;
    background: var(--ThemeColor);
}

.AuthLogo[b-gu7pveqxw1] {
    width: 75px;
    height: 75px;
    object-fit: contain;
    margin-bottom: -10px;
    z-index: 2;
    animation: fadeDown-b-gu7pveqxw1 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.FormContainer[b-gu7pveqxw1] {
    padding: 50px;
    background: rgba(from var(--ThemeBackgroundColor) r g b / 0.2);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(from var(--ThemeForeColor) r g b / 0.05);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    width: 90%;
    max-width: 450px;
    animation: fadeUp-b-gu7pveqxw1 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeUp-b-gu7pveqxw1 {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown-b-gu7pveqxw1 {
    0% { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.LoadingContainer[b-gu7pveqxw1] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.FormContainer a[b-gu7pveqxw1] {
    color: var(--ThemeColor);
    text-decoration: none;
    transition: all 0.3s ease;
}

.FormContainer a:hover[b-gu7pveqxw1] {
    filter: brightness(1.2);
    text-shadow: 0 0 10px rgba(from var(--ThemeColor) r g b / 0.4);
}


.InputsContainer[b-gu7pveqxw1] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 20px 0px;
}
.ButtonsContainer[b-gu7pveqxw1] {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.LoadingContainer h1[b-gu7pveqxw1] {
    font-size: clamp(17px, 3vw, 30px);
    font-weight: 600;
    color: var(--ThemeColor);
}


.LoadingContainer > span[b-gu7pveqxw1] {
    font-size: clamp(10px, 1vw, 17px);
    opacity: 0.8;
}

[b-gu7pveqxw1] .InputsContainer .mud-input-label.mud-input-label-animated {
    color: grey !important;
}


[b-gu7pveqxw1] .InputsContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
    text-align: left;
    direction: ltr;
}
[b-gu7pveqxw1] .MudSelect .mud-input-slot {
    text-align: right;
    direction: ltr;
}

[b-gu7pveqxw1] .InputsContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}

[b-gu7pveqxw1] .InputsContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}


.CodeLabel[b-gu7pveqxw1] {
    background-color: var(--ThemeBackgroundColor);
    position: absolute;
    top: -10px;
    right: 17px;
    font-size: 13px;
}


@media (max-width: 750px) {
    .ButtonsContainer[b-gu7pveqxw1] {
        flex-direction: column;
        gap: 10px;
    }

    .LinksContainer[b-gu7pveqxw1] {
        flex-direction: column;
        gap: 5px;
    }
}
/* /Pages/User/Profile.razor.rz.scp.css */
.ProfileMainContainer[b-hht75ubpa9] {
    display: flex;
    flex-direction: row;
    width: 100% !important;
    gap: 40px;
    padding: 10px;
}

.ProfilePicture[b-hht75ubpa9] {
    object-fit: cover;
    border-radius: 10px;
    width: 250px;
    max-height: 400px;
    height: 400px;
}

.ProfileDetailContainer[b-hht75ubpa9] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.UserFullName[b-hht75ubpa9] {
    font-size: 30px;
    color: var(--ThemeForeColor);
    opacity: 0.9;
}

.UserBio[b-hht75ubpa9] {
    color: grey;
    font-size: 14px;
    margin-top: 3px;
    width: 100%;
    word-break: break-all;
}

.SocialMediasContainer[b-hht75ubpa9] {
    display: flex;
    flex-direction: row;
    gap: 0px;
    padding-right: -5px;
}

.ActionButtonsContainer[b-hht75ubpa9] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: auto;
    flex-wrap: wrap;
}
.ActionButtonsContainer.Primary[b-hht75ubpa9] {
    display: flex;
}
.ActionButtonsContainer.Secondary[b-hht75ubpa9] {
    display: none;
}

[b-hht75ubpa9] .ProfileMainActionButton {
    border-color: rgb(from var(--ThemeBorderColor) r g b / 0.85) !important;
    border-radius: 10px !important;
    padding-inline: 16px !important;
}









.ProfileMainContainer[b-hht75ubpa9] {
    display: flex;
    flex-direction: row;
    width: 100% !important;
    gap: 40px;
    padding: 10px;
}

.ProfilePicture[b-hht75ubpa9] {
    object-fit: cover;
    border-radius: 10px;
    width: 250px;
    max-height: 400px;
    height: 400px;
    padding : 5px;
}

.ProfileDetailContainer[b-hht75ubpa9] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.UserFullName[b-hht75ubpa9] {
    font-size: 30px;
    color: var(--ThemeForeColor);
    opacity: 0.9;
}

.UserBio[b-hht75ubpa9] {
    color: grey;
    font-size: 14px;
    margin-top: 3px;
    width: 100%;
    word-break: break-word;
}

.UserTagsContainer[b-hht75ubpa9] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.UserTag[b-hht75ubpa9] {
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    width: fit-content;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.UserTag.Creator[b-hht75ubpa9] {
    color: var(--ThemeColor);
    opacity: 0.95;
    background-color: rgb(from var(--ThemeColor) r g b / 0.12);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}

.UserTag.User[b-hht75ubpa9] {
    color: grey;
    opacity: 0.9;
    background-color: rgb(from grey r g b / 0.1);
    border: 1px solid rgb(from grey r g b / 0.12);
}

.UserTag.Premium[b-hht75ubpa9] {
    color: #c28b00;
    opacity: 0.95;
    background-color: rgb(255 215 0 / 0.12);
    border: 1px solid rgb(255 215 0 / 0.2);
}

.SocialMediasContainer[b-hht75ubpa9] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    flex-wrap: wrap;
}


.ProfileHeaderTopRow[b-hht75ubpa9] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
}

.ProfileNameBioBlock[b-hht75ubpa9] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ProfileQuickActionsDesktop[b-hht75ubpa9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.QuickActionButton[b-hht75ubpa9] {
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.8);
    background: rgb(from var(--ThemeSurface) r g b / 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgb(from var(--ThemeForeColor) r g b / 0.85) !important;
}

.ProfileMetaGrid[b-hht75ubpa9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
}

.ProfileMetaCard[b-hht75ubpa9] {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.7);
    background: linear-gradient(to bottom, rgb(from var(--ThemeSurface) r g b / 0.78), rgb(from var(--ThemeBackgroundColor) r g b / 0.64));
    box-shadow: 0 8px 30px rgb(from var(--ThemeShadowColor) r g b / 0.12);
}

.ProfileRatingRow[b-hht75ubpa9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.SectionMiniTitle[b-hht75ubpa9] {
    color: grey;
    font-size: 13px;
    font-weight: 700;
}





.OverviewStatsGrid[b-hht75ubpa9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.OverviewStatCard[b-hht75ubpa9] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.65);
    background: linear-gradient(to bottom right, rgb(from var(--ThemeSurface) r g b / 0.82), rgb(from var(--ThemeBackgroundColor) r g b / 0.7));
    box-shadow: 0 10px 35px rgb(from var(--ThemeShadowColor) r g b / 0.12);
    min-height: 100px;
}

.OverviewStatIcon[b-hht75ubpa9] {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(from var(--ThemeColor) r g b / 0.1);
    color: var(--ThemeColor);
    font-size: 22px;
}

.OverviewStatContent[b-hht75ubpa9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.OverviewStatValue[b-hht75ubpa9] {
    font-size: 28px;
    font-weight: 800;
    color: var(--ThemeForeColor);
    line-height: 1;
}

.OverviewStatLabel[b-hht75ubpa9] {
    font-size: 13px;
    color: grey;
    font-weight: 700;
}


.ProfileTabsWrapper[b-hht75ubpa9] {
    width: 100%;
    height : fit-content;
}

[b-hht75ubpa9] .ProfileTabs {
    background: transparent !important;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.7);
    background: linear-gradient(to bottom, rgb(from var(--ThemeSurface) r g b / 0.82), rgb(from var(--ThemeBackgroundColor) r g b / 0.72));
/*    min-height : 600px !important;*/
}

[b-hht75ubpa9] .ProfileTabs .mud-tabs-toolbar {
    margin-bottom: 18px;
    padding: 8px;
    background: rgb(from var(--ThemeSurface) r g b / 0.55);
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.65);

}

[b-hht75ubpa9] .ProfileTabs .mud-tab {
    min-height: 42px;
    font-weight: 700;
    color: var(--ThemeForeColor) !important;
    opacity : 0.8;
}

[b-hht75ubpa9] .ProfileTabs .mud-tab.mud-tab-active {
    background: rgb(from var(--ThemeColor) r g b / 0.12);
}

.ModernSectionCard[b-hht75ubpa9] {
    border-radius: 24px;
    padding: 22px;
    padding: 18px;
}

.SectionHeader[b-hht75ubpa9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.SectionHeaderResponsive[b-hht75ubpa9] {
    flex-wrap: wrap;
}

.SectionEyebrow[b-hht75ubpa9] {
    display: inline-block;
    font-size: 12px;
    color: var(--ThemeColor);
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.SectionTitle[b-hht75ubpa9] {
    margin: 0;
    color: var(--ThemeForeColor);
    font-size: 22px;
    font-weight: 800;
}

.OverviewTabGrid[b-hht75ubpa9] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
}

.PersonalInfoModernGrid[b-hht75ubpa9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px;
}

.InfoModernItem[b-hht75ubpa9] {
    padding: 16px;
    border-radius: 18px;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.45);
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.55);
}

.InfoValueRow[b-hht75ubpa9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.InfoTitle[b-hht75ubpa9] {
    color: grey;
    font-size: 12px;
    font-weight: 700;
}

.InfoValue[b-hht75ubpa9] {
    color: var(--ThemeForeColor);
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}






.RatingsMainContainer[b-hht75ubpa9] {
    border-radius: 24px;
    padding: 22px;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.65);
    box-shadow: 0 10px 35px rgb(from var(--ThemeShadowColor) r g b / 0.12);
}

.RatingsContainer[b-hht75ubpa9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
    width: 100%;
}

.ReviewModernCard[b-hht75ubpa9] {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgb(from var(--ThemeBorderColor) r g b / 0.55);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.42);
    transition: 0.25s;
}

.ReviewModernCard:hover[b-hht75ubpa9] {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgb(from var(--ThemeShadowColor) r g b / 0.1);
}

.ReviewModernCard.Large[b-hht75ubpa9] {
    padding: 18px;
}

.ReviewModernHeader[b-hht75ubpa9] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.ReviewUserBlock[b-hht75ubpa9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ReviewUserBlock img[b-hht75ubpa9] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.ReviewUserBlock a[b-hht75ubpa9] {
    color: var(--ThemeForeColor);
    text-decoration: none;
    font-weight: 700;
}

.ReviewUserBlock a:hover[b-hht75ubpa9] {
    text-decoration: underline;
}

.ReviewUserBlock span[b-hht75ubpa9] {
    display: block;
    font-size: 12px;
    color: grey;
    margin-top: 2px;
}

.ReviewRateBlock[b-hht75ubpa9] {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 4px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.8);
    font-size: 12px;
}

.ReviewComment[b-hht75ubpa9] {
    margin: 12px 0 0 0;
    color: rgb(from var(--ThemeForeColor) r g b / 0.9);
    font-size: 14px;
    line-height: 1.8;
    word-break: break-word;
}







/*---------------*/

.ToolbarCard[b-hht75ubpa9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    margin-bottom: 24px;
    border-radius: 24px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    box-shadow: 0 8px 30px rgb(from var(--ThemeForeColor) r g b / 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[b-hht75ubpa9] .TopContainer .MudChipset,
[b-hht75ubpa9] .ToolbarCard .MudChipset {
    gap: 8px !important;
    display: flex;
    flex-direction: row;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    flex: 1;
    padding-bottom: 2px;
}
[b-hht75ubpa9] .TopContainer .MudChip,
[b-hht75ubpa9] .ToolbarCard .MudChip {
    background-color: rgb(from var(--ThemeForeColor) r g b / 0.05);
    color: rgb(from var(--ThemeForeColor) r g b / 0.82) !important;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    font-size: 13px;
    margin: 0 !important;
    width: fit-content !important;
    min-width: 0px !important;
    flex: 0 0 auto !important;
    font-weight: 800;
    border-radius: 10px !important;
    padding-inline: 4px;
    padding : 0px 10px;
}
[b-hht75ubpa9] .TopContainer .MudChip.mud-chip-selected,
[b-hht75ubpa9] .ToolbarCard .MudChip.mud-chip-selected {
    background-color: var(--ThemeForeColor) !important;
    color: var(--ThemeBackgroundColor) !important;
    border-color: var(--ThemeForeColor) !important;
}



.FilterContainer[b-hht75ubpa9] {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.FilterContainer .SortAndAddButtonContainer[b-hht75ubpa9] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
[b-hht75ubpa9] .SearchField .mud-input-root,
[b-hht75ubpa9] .FilterContainer .MudSelect .mud-input-control > .mud-input-input-control {
    border-radius: 16px !important;
}
[b-hht75ubpa9] .SearchField .mud-input-slot,
[b-hht75ubpa9] .FilterContainer .mud-input-slot {
    font-size: 13px;
    font-weight: 800;
}
[b-hht75ubpa9] .SearchField .mud-input-adornment {
    color: rgb(from var(--ThemeForeColor) r g b / 0.55) !important;
}
[b-hht75ubpa9] .FilterContainer .MudSelect {
    width: 170px !important;
    min-width: 170px !important;
}
[b-hht75ubpa9] .FilterContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
}
[b-hht75ubpa9] .FilterContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}
[b-hht75ubpa9] .FilterContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}
.SearchBoxWrap[b-hht75ubpa9] {
    flex: 1;
    min-width: 250px;
}

.ToolbarTop[b-hht75ubpa9] {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
}
.ChipSection[b-hht75ubpa9] {
    flex: 1;
    min-width: 0;
}
.ToolbarStats[b-hht75ubpa9] {
    display: flex;
    align-items: center;
    gap: 10px;

}

[b-hht75ubpa9] .ActionButton {
    padding: 5px 15px;
    width: 100%;
}

/*---------------------------*/

.CardContainer[b-hht75ubpa9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 18px;
    text-align: right;
}




@media (max-width: 1100px) {
    .OverviewTabGrid[b-hht75ubpa9] {
        grid-template-columns: 1fr;
    }

    .OverviewStatsGrid[b-hht75ubpa9] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .PersonalInfoModernGrid[b-hht75ubpa9] {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 910px) {
    .FilterContainer[b-hht75ubpa9] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    [b-hht75ubpa9] .FilterContaine .MudSelect {
        flex: 1;
    }
    .FilterContainer .SortAndAddButtonContainer[b-hht75ubpa9] {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 880px) {
    .ProfileHeaderTopRow[b-hht75ubpa9] {
        flex-direction: column;
        align-items: stretch;
    }

    .ProfileQuickActionsDesktop[b-hht75ubpa9] {
        justify-content: start;
    }

    .ProfileMetaGrid[b-hht75ubpa9] {
        grid-template-columns: 1fr;
    }

}
@media (max-width: 700px) {
    .CardContainer[b-hht75ubpa9] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .ProfileMainContainer[b-hht75ubpa9] {
        flex-direction: column !important;
        align-items: center;
        gap: 20px;
    }

    .ProfilePicture[b-hht75ubpa9] {
        width: 100%;
        max-width: 320px;
        height: 320px;
    }

    .ProfileDetailContainer[b-hht75ubpa9] {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .ActionButtonsContainer[b-hht75ubpa9] {
        flex-direction: column;
        align-items: stretch !important;
    }

    .ActionButtonsContainer.Primary[b-hht75ubpa9] {
        display: none;
    }

    .ActionButtonsContainer.Secondary[b-hht75ubpa9] {
        display: flex;
        width: 100%;
    }

    .ProfileMainActionButton[b-hht75ubpa9] {
        width: 100%;
    }

    .OverviewStatsGrid[b-hht75ubpa9] {
        margin-top: 30px;
        grid-template-columns: 1fr;
    }

    .PersonalInfoModernGrid[b-hht75ubpa9] {
        grid-template-columns: 1fr;
    }


    .ReviewModernHeader[b-hht75ubpa9] {
        flex-direction: column;
        align-items: stretch;
    }

    .ReviewRateBlock[b-hht75ubpa9] {
        align-items: start;
    }
}




[b-hht75ubpa9] .mud-tabs-scroll-button {
    display: none !important;
}

[b-hht75ubpa9] .mud-tabs-tabbar-inner {
    overflow-x: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

[b-hht75ubpa9] .mud-tabs-tabbar-inner::-webkit-scrollbar {
    display: none;
}



/* /Pages/User/Signin.razor.rz.scp.css */
.MainContainer[b-7y8j53gu4z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content : center;
    gap: 30px;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 100px);
    padding: 40px 0;
}

.MainContainer[b-7y8j53gu4z]::before,
.MainContainer[b-7y8j53gu4z]::after {
    content: '';
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    filter: blur(120px);
    opacity: 0.15;
}

.MainContainer[b-7y8j53gu4z]::before {
    left: -20vw;
    background: var(--ThemeColor);
}

.MainContainer[b-7y8j53gu4z]::after {
    right: -20vw;
    background: var(--ThemeColor);
}

.AuthLogo[b-7y8j53gu4z] {
    width: 75px;
    height: 75px;
    object-fit: contain;
    margin-bottom: -10px;
    z-index: 2;
    animation: fadeDown-b-7y8j53gu4z 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.FormContainer[b-7y8j53gu4z] {
    padding: 50px;
    background: rgba(from var(--ThemeBackgroundColor) r g b / 0.2);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(from var(--ThemeForeColor) r g b / 0.05);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    width: 90%;
    max-width: 450px;
    animation: fadeUp-b-7y8j53gu4z 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeUp-b-7y8j53gu4z {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown-b-7y8j53gu4z {
    0% { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 1; transform: translateY(0); }
}
.LoadingContainer[b-7y8j53gu4z] {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.FormContainer a[b-7y8j53gu4z] {
    color: var(--ThemeColor);
    text-decoration: none;
    transition: all 0.3s ease;
}

.FormContainer a:hover[b-7y8j53gu4z] {
    filter: brightness(1.2);
    text-shadow: 0 0 10px rgba(from var(--ThemeColor) r g b / 0.4);
}


.InputsContainer[b-7y8j53gu4z]{
    display : flex;
    flex-direction : column;
    gap : 7px;
    margin : 20px 0px;
}

.ButtonsContainer[b-7y8j53gu4z] {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.MainContainer > h1[b-7y8j53gu4z] {
    font-size: clamp(33px, 8vw, 40px);
    font-weight: 800;
    color: var(--ThemeColor);
    margin-bottom: 15px;
}


.LoadingContainer > h1[b-7y8j53gu4z]{
    opacity : 0.8;
}

.LinksContainer[b-7y8j53gu4z]{
    display : flex;
    flex-direction : row;
    gap : 20px;
}

[b-7y8j53gu4z] .InputsContainer .mud-input-label.mud-input-label-animated {
    color: grey !important;
}


[b-7y8j53gu4z] .InputsContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
    text-align: left;
    direction: ltr;
}

[b-7y8j53gu4z] .InputsContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}

[b-7y8j53gu4z] .InputsContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}






@media (max-width: 750px) {
    .ButtonsContainer[b-7y8j53gu4z] {
        flex-direction: column;
        gap: 10px;
    }

    .LinksContainer[b-7y8j53gu4z]{
        flex-direction : column;
        gap : 5px;
    }
}
/* /Pages/User/SignUp.razor.rz.scp.css */
.MainContainer[b-6891u3ui06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 100px);
    padding: 40px 0;
}

.MainContainer[b-6891u3ui06]::before,
.MainContainer[b-6891u3ui06]::after {
    content: '';
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    filter: blur(120px);
    opacity: 0.15;
}

.MainContainer[b-6891u3ui06]::before {
    left: -20vw;
    background: var(--ThemeColor);
}

.MainContainer[b-6891u3ui06]::after {
    right: -20vw;
    background: var(--ThemeColor);
}

.AuthLogo[b-6891u3ui06] {
    width: 75px;
    height: 75px;
    object-fit: contain;
    margin-bottom: -10px;
    z-index: 2;
    animation: fadeDown-b-6891u3ui06 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.FormContainer[b-6891u3ui06] {
    padding: 50px;
    background: rgba(from var(--ThemeBackgroundColor) r g b / 0.2);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(from var(--ThemeForeColor) r g b / 0.05);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    width: 90%;
    max-width: 450px;
    animation: fadeUp-b-6891u3ui06 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeUp-b-6891u3ui06 {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown-b-6891u3ui06 {
    0% { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.LoadingContainer[b-6891u3ui06] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.LoadingContainer > h1[b-6891u3ui06] {
    font-size: clamp(20px, 3vw, 35px);
    font-weight: 800;
    color: var(--ThemeColor);
    margin-bottom: 15px;
}

.FormContainer a[b-6891u3ui06] {
    color: var(--ThemeColor);
    text-decoration: none;
    transition: all 0.3s ease;
}

.FormContainer a:hover[b-6891u3ui06] {
    filter: brightness(1.2);
    text-shadow: 0 0 10px rgba(from var(--ThemeColor) r g b / 0.4);
}


.InputsContainer[b-6891u3ui06] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 20px 0px;
}

.ButtonsContainer[b-6891u3ui06] {
    display: flex;
    flex-direction: row;
    gap: 15px;
}



[b-6891u3ui06] .InputsContainer .mud-input-label.mud-input-label-animated {
    color: grey !important;
}


[b-6891u3ui06] .InputsContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
    text-align: left;
    direction: ltr;
}

[b-6891u3ui06] .InputsContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}

[b-6891u3ui06] .InputsContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}






@media (max-width: 800px) {
    .ButtonsContainer[b-6891u3ui06] {
        flex-direction: column;
    }
}
/* /Pages/User/SignupVerification.razor.rz.scp.css */
.MainContainer[b-v5qbpqaact] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.MainContainer[b-v5qbpqaact]::before,
.MainContainer[b-v5qbpqaact]::after {
    content: '';
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    filter: blur(120px);
    opacity: 0.15;
}

.MainContainer[b-v5qbpqaact]::before {
    left: -20vw;
    background: var(--ThemeColor);
}

.MainContainer[b-v5qbpqaact]::after {
    right: -20vw;
    background: var(--ThemeColor);
}

.AuthLogo[b-v5qbpqaact] {
    width: 75px;
    height: 75px;
    object-fit: contain;
    margin-bottom: -10px;
    z-index: 2;
    animation: fadeDown-b-v5qbpqaact 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.MainContainer > img[b-v5qbpqaact] {
    animation: fadeDown-b-v5qbpqaact 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 10px 20px rgba(from var(--ThemeColor) r g b / 0.4));
}

.FormContainer[b-v5qbpqaact] {
    padding: 40px;
    background: rgba(from var(--ThemeBackgroundColor) r g b / 0.4);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(from var(--ThemeForeColor) r g b / 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    width: 90%;
    max-width: 500px;
    animation: fadeUp-b-v5qbpqaact 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeUp-b-v5qbpqaact {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown-b-v5qbpqaact {
    0% { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.LoadingContainer[b-v5qbpqaact] {
    display: flex;
    flex-direction : column;
    justify-content: center;
    align-items: center;
    gap : 5px;
}
.FormContainer a[b-v5qbpqaact] {
    color: var(--ThemeColor);
    text-decoration: none;
    transition: all 0.3s ease;
}

.FormContainer a:hover[b-v5qbpqaact] {
    filter: brightness(1.2);
    text-shadow: 0 0 10px rgba(from var(--ThemeColor) r g b / 0.4);
}


.InputsContainer[b-v5qbpqaact] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 20px 0px;
}

.ButtonsContainer[b-v5qbpqaact] {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.LoadingContainer h1[b-v5qbpqaact] {
    font-size: clamp(17px, 3vw, 30px);
    font-weight: 600;
    color: var(--ThemeColor);
}


.LoadingContainer > span[b-v5qbpqaact] {
    font-size: clamp(10px, 1vw, 17px);
    opacity: 0.8;
}

[b-v5qbpqaact] .InputsContainer .mud-input-label.mud-input-label-animated {
    color: grey !important;
}


[b-v5qbpqaact] .InputsContainer .mud-input-slot {
    font-size: 15px;
    font-weight: bolder;
    padding: 14px !important;
    text-align : left;
    direction : ltr;
}
[b-v5qbpqaact] .MudSelect .mud-input-slot {
    text-align: right;
    direction: ltr;
}
[b-v5qbpqaact] .InputsContainer .mud-input-label.mud-input-label-animated {
    color: rgb(from var(--ThemeForeColor) r g b / 0.8) !important;
}

[b-v5qbpqaact] .InputsContainer .mud-input-label-outlined.mud-input-label-inputcontrol {
    transform: translate(-10px, 14px);
}


.CodeLabel[b-v5qbpqaact] {
    background-color: var(--ThemeBackgroundColor);
    position: absolute;
    top: -10px;
    right: 17px;
    font-size : 13px;
}



@media (max-width: 750px) {
    .ButtonsContainer[b-v5qbpqaact] {
        flex-direction: column;
        gap: 10px;
    }
}
/* /Pages/User/Wallet.razor.rz.scp.css */
.WalletHero[b-besjcxspkm] {
    padding: 0;
}

.WalletHeroContent[b-besjcxspkm] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), transparent 55%), linear-gradient(180deg, rgb(from var(--ThemeBackgroundColor) r g b / 0.96), rgb(from var(--ThemeBackgroundColor) r g b / 0.88));
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 10px 35px rgb(from var(--ThemeForeColor) r g b / 0.05);
    overflow: hidden;
    position: relative;
}

.WalletHeroContent[b-besjcxspkm]::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    top: -80px;
    inset-inline-end: -60px;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    filter: blur(10px);
    pointer-events: none;
}

.WalletHeroText[b-besjcxspkm] {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.HeroMiniLabel[b-besjcxspkm],
.SectionMiniLabel[b-besjcxspkm] {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--ThemeColor);
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.18);
}

.WalletHeroText h1[b-besjcxspkm] {
    margin: 0;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.15;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.WalletHeroText p[b-besjcxspkm] {
    margin: 14px 0 0 0;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.95;
    color: rgb(from var(--ThemeForeColor) r g b / 0.72);
}

/* Preview */
.WalletPreviewCard[b-besjcxspkm] {
    width: 360px;
    min-width: 320px;
    border-radius: 24px;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    padding: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.06);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.PreviewHeader[b-besjcxspkm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.PreviewDots[b-besjcxspkm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .PreviewDots span[b-besjcxspkm] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgb(from var(--ThemeForeColor) r g b / 0.18);
    }

.PreviewLabel[b-besjcxspkm] {
    font-size: 12px;
    font-weight: 800;
    color: rgb(from var(--ThemeForeColor) r g b / 0.58);
}

.PreviewBody[b-besjcxspkm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.PreviewAmountWrap[b-besjcxspkm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 20px;
    padding: 18px;
    background: linear-gradient(135deg, rgb(from var(--ThemeColor) r g b / 0.10), rgb(from var(--ThemeForeColor) r g b / 0.02));
    border: 1px solid rgb(from var(--ThemeColor) r g b / 0.12);
}

.PreviewAmountLabel[b-besjcxspkm] {
    font-size: 12px;
    font-weight: 800;
    color: rgb(from var(--ThemeForeColor) r g b / 0.58);
}

.PreviewAmountWrap strong[b-besjcxspkm] {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 900;
    color: var(--ThemeColor);
}

.PreviewStatsGrid[b-besjcxspkm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.MiniPreviewStat[b-besjcxspkm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 78px;
    padding: 14px;
    border-radius: 16px;
    background: rgb(from var(--ThemeForeColor) r g b / 0.04);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

.MiniPreviewStat span[b-besjcxspkm] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.58);
    font-size: 11px;
    font-weight: 800;
}

.MiniPreviewStat strong[b-besjcxspkm] {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}

.IncomingText[b-besjcxspkm] {
    color: mediumseagreen;
}

.OutgoingText[b-besjcxspkm] {
    color: indianred;
}

.PreviewActionRow[b-besjcxspkm] {
    display: flex;
    gap: 10px;
}

.PreviewActionButton[b-besjcxspkm] {
    flex: 1;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Stats cards */
.WalletStatsGrid[b-besjcxspkm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.BalanceCard[b-besjcxspkm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .BalanceCard:hover[b-besjcxspkm] {
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgb(from var(--ThemeForeColor) r g b / 0.10);
    }

.CurrentCard:hover[b-besjcxspkm] {
    border-color: rgb(from var(--ThemeColor) r g b / 0.20);
}

.IncomingCard:hover[b-besjcxspkm] {
    border-color: rgb(60 179 113 / 0.26);
}

.OutgoingCard:hover[b-besjcxspkm] {
    border-color: rgb(205 92 92 / 0.26);
}

.BalanceCardTop[b-besjcxspkm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.BalanceLabel[b-besjcxspkm] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.60);
    font-size: 13px;
    font-weight: 800;
}

.BalanceIconWrap[b-besjcxspkm] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgb(from var(--ThemeColor) r g b / 0.10);
    color: var(--ThemeColor);
    flex-shrink: 0;
}

.IncomingIcon[b-besjcxspkm] {
    background: rgb(60 179 113 / 0.12);
    color: mediumseagreen;
}

.OutgoingIcon[b-besjcxspkm] {
    background: rgb(205 92 92 / 0.12);
    color: indianred;
}

.BalanceValueWrap[b-besjcxspkm] {
    display: flex;
    align-items: center;
    min-height: 58px;
}

.WalletBalanceValue.Current[b-besjcxspkm] {
    font-size: 34px;
    color: var(--ThemeColor);
    font-weight: 900;
    line-height: 1.1;
}

.WalletBalanceValue.Incomming[b-besjcxspkm] {
    font-size: 28px;
    color: mediumseagreen;
    font-weight: 900;
    line-height: 1.1;
}

.WalletBalanceValue.Outgoing[b-besjcxspkm] {
    font-size: 28px;
    color: indianred;
    font-weight: 900;
    line-height: 1.1;
}

.BalanceActions[b-besjcxspkm] {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.ActionButton[b-besjcxspkm] {
    flex: 1;
    min-width: 120px;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.BalanceNote[b-besjcxspkm] {
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
    color: rgb(from var(--ThemeForeColor) r g b / 0.55);
}

/* Transactions */
.TransactionsSection[b-besjcxspkm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.TransactionsHeaderCard[b-besjcxspkm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.78);
    box-shadow: 0 8px 30px rgb(from var(--ThemeForeColor) r g b / 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.TransactionsHeaderText[b-besjcxspkm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .TransactionsHeaderText h2[b-besjcxspkm] {
        margin: 0;
        font-size: clamp(24px, 4vw, 34px);
        line-height: 1.2;
        font-weight: 900;
        color: var(--ThemeForeColor);
    }

    .TransactionsHeaderText p[b-besjcxspkm] {
        margin: 0;
        font-size: 14px;
        line-height: 1.9;
        color: rgb(from var(--ThemeForeColor) r g b / 0.62);
    }

.SearchWrap[b-besjcxspkm] {
    min-width: 260px;
}

.SearchInputWrap[b-besjcxspkm] {
    position: relative;
    display: flex;
    align-items: center;
}

.SearchIcon[b-besjcxspkm] {
    position: absolute;
    inset-inline-start: 12px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.50);
    width: 18px !important;
    height: 18px !important;
    pointer-events: none;
}

.SearchInput[b-besjcxspkm] {
    width: 100%;
    padding: 12px 14px 12px 40px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.78);
    font-weight: 800;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.10);
    border-radius: 16px;
    background-color: rgb(from var(--ThemeBackgroundColor) r g b / 0.85);
    outline: none;
    transition: 0.25s;
    font-size: 13px;
}

    .SearchInput:focus[b-besjcxspkm] {
        border-color: rgb(from var(--ThemeColor) r g b / 0.35);
        box-shadow: 0 0 0 4px rgb(from var(--ThemeColor) r g b / 0.08);
    }

/* Table */
.TableContainer[b-besjcxspkm] {
    border-radius: 24px;
    position: relative;
    overflow: auto;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
}

.Table[b-besjcxspkm] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.TableHeaderRow th[b-besjcxspkm] {
    color: rgb(from var(--ThemeForeColor) r g b / 0.60);
    font-weight: 900;
    height: 54px;
    text-align: right;
    position: sticky;
    top: 0;
    z-index: 0;
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.96);
    border-bottom: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
}

.TableRow[b-besjcxspkm] {
    height: 58px;
    transition: 0.25s;
    background: linear-gradient(to top, rgb(from var(--ThemeBackgroundColor) r g b / 0.8) 10%, rgb(from var(--ThemeSurface) r g b / 0.7) 100%);
}

    .TableRow td[b-besjcxspkm] {
        border-bottom: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.05);
    }

td[b-besjcxspkm], th[b-besjcxspkm] {
    padding-right: 20px;
    padding-left: 16px;
}

tr:not(.TableHeaderRow):hover[b-besjcxspkm] {
    background: rgb(from var(--ThemeForeColor) r g b / 0.03);
}

.StatusBadge[b-besjcxspkm] {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    background: rgb(from var(--ThemeForeColor) r g b / 0.05);
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.06);
}

.AmountBadge[b-besjcxspkm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    border: 1px solid transparent;
}

    .AmountBadge.Positive[b-besjcxspkm] {
        color: mediumseagreen;
        background: rgb(60 179 113 / 0.10);
        border-color: rgb(60 179 113 / 0.15);
    }

    .AmountBadge.Negative[b-besjcxspkm] {
        color: indianred;
        background: rgb(205 92 92 / 0.10);
        border-color: rgb(205 92 92 / 0.15);
    }

/* Mobile list */
.ListContainer[b-besjcxspkm] {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.ListItem[b-besjcxspkm] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgb(from var(--ThemeForeColor) r g b / 0.08);
    background: rgb(from var(--ThemeBackgroundColor) r g b / 0.92);
    box-shadow: 0 12px 28px rgb(from var(--ThemeForeColor) r g b / 0.05);
}

.ListItemTop[b-besjcxspkm] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
}

.ListTypeWrap[b-besjcxspkm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ListType[b-besjcxspkm] {
    font-size: 15px;
    font-weight: 900;
    color: var(--ThemeForeColor);
}

.ListDate[b-besjcxspkm] {
    font-size: 11px;
    color: rgb(from var(--ThemeForeColor) r g b / 0.55);
    font-family: Fredoka;
}

.ListGrid[b-besjcxspkm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.Columns[b-besjcxspkm] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
}

.ColumnTitle[b-besjcxspkm] {
    font-weight: 900;
    color: rgb(from var(--ThemeForeColor) r g b / 0.55);
    flex-shrink: 0;
}

.ColumnValue[b-besjcxspkm] {
    text-align: left;
    color: var(--ThemeForeColor);
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 1150px) {
    .WalletHeroContent[b-besjcxspkm] {
        flex-direction: column;
    }

    .WalletPreviewCard[b-besjcxspkm] {
        width: 100%;
        min-width: unset;
    }

    .WalletStatsGrid[b-besjcxspkm] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .TableContainer[b-besjcxspkm] {
        display: none;
    }

    .ListContainer[b-besjcxspkm] {
        display: flex;
    }

    .TransactionsHeaderCard[b-besjcxspkm] {
        flex-direction: column;
        align-items: stretch;
    }

    .SearchWrap[b-besjcxspkm] {
        min-width: 100%;
    }

    .WalletHeroContent[b-besjcxspkm],
    .BalanceCard[b-besjcxspkm],
    .TransactionsHeaderCard[b-besjcxspkm],
    .ListItem[b-besjcxspkm],
    .TableContainer[b-besjcxspkm] {
        border-radius: 20px;
    }

    .WalletHeroContent[b-besjcxspkm] {
        padding: 18px;
    }

    .PreviewActionRow[b-besjcxspkm] {
        flex-direction: column;
    }

    .PreviewActionButton[b-besjcxspkm],
    .ActionButton[b-besjcxspkm] {
        width: 100%;
    }

    .PreviewStatsGrid[b-besjcxspkm] {
        grid-template-columns: 1fr;
    }

    .WalletHeroText h1[b-besjcxspkm] {
        font-size: 30px;
    }
}

@media (max-width: 520px) {
    .WalletBalanceValue.Current[b-besjcxspkm] {
        font-size: 28px;
    }

    .WalletBalanceValue.Incomming[b-besjcxspkm],
    .WalletBalanceValue.Outgoing[b-besjcxspkm] {
        font-size: 24px;
    }

    .PreviewAmountWrap strong[b-besjcxspkm] {
        font-size: 25px;
    }

    .ListItemTop[b-besjcxspkm],
    .Columns[b-besjcxspkm] {
        flex-direction: column;
        align-items: start;
    }

    td[b-besjcxspkm], th[b-besjcxspkm] {
        padding-right: 14px;
        padding-left: 10px;
    }
}