:root {
--auth-bg-card: #ffffff;
--auth-text: #111111;
--auth-text-secondary: #666666;
--auth-text-muted: #999999;
--auth-border: #e5e5e5;
--auth-border-focus: #111111;
--auth-input-bg: #f9fafb;
--auth-primary: #111111;
--auth-primary-hover: #333333;
--auth-primary-text: #ffffff;
--auth-error: #CF0000;
--auth-error-bg: #fef2f2;
--auth-error-border: #fecaca;
--auth-radius: 12px;
--auth-radius-lg: 16px;
--auth-radius-full: 999px;
--auth-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
--auth-transition: 0.2s ease;
}  .page .ast-article-single,
.page .entry-content,
.page #primary,
.page .ast-separate-container .ast-article-single,
.page .ast-separate-container .entry-content {
margin-top: 0 !important;
padding-top: 0 !important;
} .collabable-layout__body:has(.collabable-auth) {
padding-top: 0 !important;
}
.collabable-layout__main:has(.collabable-auth) {
padding-top: 0 !important;
}
.collabable-auth {
display: flex;
align-items: flex-start;
justify-content: center;
padding: 0 20px 80px;
margin-top: 0 !important;
background: none !important;
} .collabable-auth .collabable-auth__container {
width: 100%;
max-width: 440px;
background: var(--auth-bg-card);
border-radius: var(--auth-radius-lg);
padding: 44px 40px 40px;
box-shadow: var(--auth-shadow);
color: var(--auth-text) !important;
position: relative;
} .collabable-auth .collabable-auth__container,
.collabable-auth .collabable-auth__container *:not(svg):not(path):not(line):not(circle):not(rect) {
color: var(--auth-text);
} .collabable-auth .collabable-auth__header {
text-align: center;
margin-bottom: 32px;
}
.collabable-auth .collabable-auth__icon {
display: flex;
justify-content: center;
margin-bottom: 16px;
color: var(--auth-text-muted);
}
.collabable-auth .collabable-auth__icon svg {
stroke: var(--auth-text-muted);
}
.collabable-auth .collabable-auth__title {
font-size: 28px;
font-weight: 700;
color: var(--auth-text) !important;
margin: 0 0 8px 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
.collabable-auth .collabable-auth__subtitle {
font-size: 15px;
color: var(--auth-text-secondary) !important;
margin: 0;
font-weight: 400;
} .collabable-auth .collabable-auth__error {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--auth-error-bg);
border: 1px solid var(--auth-error-border);
border-radius: var(--auth-radius);
margin-bottom: 24px;
}
.collabable-auth .collabable-auth__error,
.collabable-auth .collabable-auth__error span {
color: var(--auth-error) !important;
font-size: 14px;
}
.collabable-auth .collabable-auth__error svg {
flex-shrink: 0;
color: var(--auth-error);
stroke: var(--auth-error);
} .collabable-auth .collabable-auth__form {
display: flex;
flex-direction: column;
gap: 20px;
} .collabable-auth .collabable-auth__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.collabable-auth .collabable-auth__label {
font-size: 14px;
font-weight: 500;
color: var(--auth-text) !important;
}
.collabable-auth .collabable-auth__input {
width: 100%;
padding: 13px 16px;
font-size: 15px;
font-family: inherit;
color: var(--auth-text) !important;
background: var(--auth-input-bg) !important;
border: 1.5px solid var(--auth-border) !important;
border-radius: var(--auth-radius);
transition: border-color var(--auth-transition), box-shadow var(--auth-transition);
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
}
.collabable-auth .collabable-auth__input::placeholder {
color: var(--auth-text-muted) !important;
}
.collabable-auth .collabable-auth__input:focus {
border-color: var(--auth-border-focus) !important;
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
background: #fff !important;
} .collabable-auth .collabable-auth__password-wrap {
position: relative;
display: flex;
align-items: center;
}
.collabable-auth .collabable-auth__password-wrap .collabable-auth__input {
padding-right: 48px;
}
.collabable-auth .collabable-auth__password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none !important;
border: none !important;
padding: 4px;
cursor: pointer;
color: var(--auth-text-muted) !important;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.collabable-auth .collabable-auth__password-toggle svg {
stroke: var(--auth-text-muted);
}
.collabable-auth .collabable-auth__password-toggle:hover svg {
stroke: var(--auth-text);
} .collabable-auth .collabable-auth__options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
margin-top: -4px;
}
.collabable-auth .collabable-auth__remember {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.collabable-auth .collabable-auth__remember,
.collabable-auth .collabable-auth__remember span {
color: var(--auth-text-secondary) !important;
font-size: 14px;
}
.collabable-auth .collabable-auth__remember input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--auth-primary);
cursor: pointer;
margin: 0;
}
.collabable-auth .collabable-auth__link {
color: var(--auth-text-secondary) !important;
text-decoration: none;
font-size: 14px;
font-weight: 400;
transition: color var(--auth-transition);
}
.collabable-auth .collabable-auth__link:hover {
color: var(--auth-text) !important;
text-decoration: underline;
} .collabable-auth .collabable-auth__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 24px;
font-size: 15px;
font-weight: 600;
font-family: inherit;
border-radius: var(--auth-radius);
cursor: pointer;
transition: all var(--auth-transition);
border: none !important;
text-decoration: none;
line-height: 1.3;
box-sizing: border-box;
}
.collabable-auth .collabable-auth__btn--primary {
background: var(--auth-primary) !important;
color: var(--auth-primary-text) !important;
}
.collabable-auth .collabable-auth__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
} .collabable-auth .collabable-auth__divider {
display: flex;
align-items: center;
gap: 16px;
margin: 24px 0;
}
.collabable-auth .collabable-auth__divider::before,
.collabable-auth .collabable-auth__divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--auth-border);
}
.collabable-auth .collabable-auth__divider span {
font-size: 13px;
color: var(--auth-text-muted) !important;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
} .collabable-auth .collabable-auth__social {
display: flex;
flex-direction: column;
gap: 12px;
} .collabable-auth .collabable-social-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 13px 20px;
font-size: 15px;
font-weight: 500;
font-family: inherit;
background: #fff !important;
color: var(--auth-text) !important;
border: 1.5px solid var(--auth-border) !important;
border-radius: var(--auth-radius);
cursor: pointer;
transition: all var(--auth-transition);
text-decoration: none;
margin-bottom: 0;
box-sizing: border-box;
}
.collabable-auth .collabable-social-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
.collabable-auth .collabable-social-btn svg {
flex-shrink: 0;
} .collabable-auth .collabable-oauth-error {
margin-bottom: 12px;
} .collabable-auth .collabable-auth__footer {
text-align: center;
font-size: 14px;
color: var(--auth-text-secondary) !important;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--auth-border);
}
.collabable-auth .collabable-auth__link--strong {
color: var(--auth-text) !important;
font-weight: 600;
text-decoration: none;
transition: color var(--auth-transition);
}
.collabable-auth .collabable-auth__link--strong:hover {
text-decoration: underline;
} .collabable-auth .collabable-auth__content {
text-align: center;
padding: 20px 0;
}
.collabable-auth .collabable-auth__text {
font-size: 15px;
color: var(--auth-text-secondary) !important;
margin: 0 0 24px 0;
} @media (max-width: 480px) {
.collabable-auth {
padding: 0 0 60px;
}
.collabable-auth .collabable-auth__container {
padding: 32px 24px 28px;
border-radius: var(--auth-radius);
}
.collabable-auth .collabable-auth__title {
font-size: 24px;
}
.collabable-auth .collabable-auth__options {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
}