body {
    font-family: var(--font-sans);
    color: var(--print-normal);
    display: flex;
    width: 100%;
    height: 100%;
    padding: var(--pd-xl, 24px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
    background: var(--surface-0, #101014);
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.common-title {
    display: flex;
    align-items: center;
    gap: var(--pd-lg, 18px);
    align-self: stretch;
    color: var(--print-highlight, #CBE1F0);

    /* heading/md */
    font-size: var(--text-lg, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 24px */
    letter-spacing: -0.4px;
}

.common-title svg {
    width: var(--icon-lg, 30px);
    height: var(--icon-lg, 30px);
    fill: var(--print-primary, #CBE1F0);
}

.content-wrapper {
    width: 100%;
    display: flex;
    max-width: 360px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pd-xl, 24px);
}

.card{
    display: flex;
    padding: var(--card-padding-md, 24px);
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: var(--pd-xl, 24px);
    border-radius: var(--radius-xl, 18px);
    border: 1px solid var(--card-border);
    background: radial-gradient(176.77% 114.87% at 50% -14.87%, var(--surface-3) 15.87%, var(--surface-0) 100%), var(--surface-1);
}

.error-message {
    display: flex;
    padding: var(--message-pd-v, 6px) var(--message-pd-outter, 12px);
    align-items: flex-start;
    gap: var(--message-pd-inner, 12px);
    align-self: stretch;
    border-radius: var(--message-radius, 6px);
    background: var(--message-warning-bg);
    color: var(--message-warning-print, #F1F6F9);
}

.error-message svg {
    transform: translateY(3px);
    width: var(--message-icon-size, 18px);
    height: var(--message-icon-size, 18px);
    fill: var(--message-warning-print, #F1F6F9);
}

.error-message-text{
    display: flex;
    padding-top: 1px;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    flex: 1 0 0;
}

input[type="text"].error,
input[type="password"].error,
input[type="email"].error {
    border: 1px solid var(--message-warning-bg, #F1F6F9);
}

form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pd-xl, 18px);
    align-self: stretch;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pd-lg, 18px);
    align-self: stretch;
}

.form-group-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pd-md, 12px);
    align-self: stretch;
}

.form-group-item label {
    color: var(--print-normal, #C8D3DB);
    font-size: var(--text-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
    letter-spacing: 0.24px;
}

.button-group {
    display: flex;
    justify-content: space-between;
    gap: var(--pd-lg);
}

.primary-button {
    display: inline-flex;
    height: var(--button-size-md, 36px);
    padding: 0 var(--button-pd-outter, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--button-pd-inner, 6px);
    flex-shrink: 0;
    border-radius: var(--button-primary-radius);
    color: var(--button-primary-print);
    background: var(--button-primary-bg);
    transition: transform var(--ease-fast-effects),background-color var(--ease-fast-effects),color var(--ease-fast-effects);
    text-align: center;
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

.primary-button:hover {
    color: var(--button-primary-print-hover);
    background: var(--button-primary-bg-hover);
    text-decoration: none;
}

.primary-button:active {
    color: var(--button-primary-print-active);
    background: var(--button-primary-bg-active);
}

.transparent-button {
    display: inline-flex;
    height: var(--button-size-md, 36px);
    padding: 0 var(--button-pd-outter, 12px);
    border-radius: var(--radius-max);
    justify-content: center;
    align-items: center;
    gap: var(--button-pd-inner, 6px);
    flex-shrink: 0;
    background: var(--button-ghost-bg);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    color: var(--button-ghost-print);
}

.transparent-button svg {
    width: var(--button-icon-size-md);
    height: var(--button-icon-size-md);
}

.transparent-button:hover {
    background: var(--button-ghost-bg-hover);
    color: var(--button-ghost-print-hover);
    text-decoration: none;
}

.transparent-button:active {
    background: var(--button-ghost-bg-active);
    color: var(--button-ghost-print-active);
}

a {
    color: var(--button-link-secondary-print, #718EDF);
    font-size: var(--text-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
    letter-spacing: 0.24px;
}

a:hover{
    color: var(--button-link-secondary-print-hover, #8CA0E5);
    text-decoration: underline;
}

a:active{
    color: var(--button-link-secondary-print-active, #255CB2);
    text-decoration: none;
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: var(--pd-lg);
}

.checkbox-container input[type="checkbox"] {
    margin-right: var(--pd-sm);
    transform: scale(1.1);
}

.checkbox-container label {
    margin-bottom: 0;
    font-weight: var(--font-weight-normal);
    font-size: var(--text-sm);
}



.textual-divider {
    width: 100%;
    color: var(--print-subtle);
    opacity: 0.38;
    position: relative;
    text-align: center;
}

.textual-divider::before {
    background-color: var(--print-subtle);
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pd-xl);
    right: 55%;
    height: 1px;
}

.textual-divider::after {
    background-color: var(--print-subtle);
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    right: var(--pd-xl);
    height: 1px;
}

.textual-divider span {
    color: var(--print-subtle);
    position: relative;
    padding: 0 var(--scale-3);
    color: var(--print-subtle);
    font-size: var(--text-sm);
}

.divider {
    width: 100%;
    color: var(--print-subtle);
    opacity: 0.38;
    position: relative;
    text-align: center;
    background-color: var(--print-subtle);
    height: 1px;
}


.foot-link {
    text-align: center;
    width: 100%;
    color: var(--print-subtle);
    font-size: var(--text-xs);
}

.foot-link a {
    color: var(--print-key, #DFAD31);
    font-size: var(--text-xs);
}


input[type="text"],
input[type="password"],
input[type="email"] {
    border: 1px solid transparent;
    outline: none;
    color: var(--input-secondary-print, #CBE1F0);
    display: flex;
    width: 100%;
    height: var(--input-size-md, 36px);
    padding: 0 var(--input-pd-outter, 12px);
    align-items: center;
    gap: var(--input-pd-inner, 6px);
    flex-shrink: 0;
    border-radius: var(--input-secondary-radius, 6px);
    background: var(--input-secondary-bg, #2C303C);
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover
{
    color: var(--input-secondary-prin-hover, #CBE1F0);
    background: var(--input-secondary-bg-hover, #343B49);
}

input::placeholder{
    color: var(--input-print-placeholder);
}


input[type="text"]:focus,
input[type="text"]:active,
input[type="password"]:focus,
input[type="password"]:active,
input[type="email"]:focus,
input[type="email"]:active {
    color: var(--input-secondary-prin-active, #CBE1F0);
    border: 1px solid var(--input-border-active, #8A97A5);
    background: var(--input-secondary-bg-active, #242831);
}


input[type="text"]::placeholder,
input[type="password"]::placeholder {
    color: var(--print-placeholder);
}




.user-info{
    display: flex;
    align-items: center;
    gap: var(--pd-md, 12px);
}

.user-wrapper{
    display: flex;
    padding: var(--pd-sm, 6px) var(--pd-lg, 18px) var(--pd-sm, 6px) var(--pd-sm, 6px);
    align-items: center;
    gap: var(--pd-md, 12px);
    border-radius: var(--radius-max, 9999px);
    border: 1px solid var(--card-border, #242831);
}

.user-avatar-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size-xs, 24px);
    height: var(--avatar-size-xs, 24px);
    border-radius: var(--avatar-radius-xs, 24px);
    background-color: var(--print-subtle, #697786);
}

.user-avatar-image{
    width: var(--avatar-size-xs, 24px);
    height: var(--avatar-size-xs, 24px);
    border-radius: var(--avatar-radius-xs, 24px);
    object-fit: cover;
}

.user-avatar-placeholder-svg{
    width: 16px;
    height: 16px;
    object-fit: cover;
}

.user-text-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--pd-2xs, 2px);
}

.user-display-name{
    color: var(--print-normal, #C8D3DB);
    font-size: var(--text-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
}

.user-handle{
    color: var(--print-subtle, #697786);
    font-size: var(--text-xs, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
}