html,
body,
/* The `html[data-theme]` form is needed to reach . theme.css's dark
safety net carries `html[data-theme="dark"] body { background: }`,
which outranks a bare `body` selector and repainted this page's body with the
app's page grey instead of the login canvas. Same specificity, and login.css
loads after theme.css, so this wins on source order without !important.
data-theme is always present - theme-boot.js stamps it before first paint. */
html[data-theme] body {
height: 100%;
margin: 0;
/* --login-canvas, not --color-primary: that token is the brand's TEXT role
and lightens in dark mode, which is what left this page pale blue behind a
charcoal card. See the login block in shared/theme.css. */
background: var(--login-canvas, #1a2942);
font-family: var(--font-family, 'Inter', sans-serif);
}
.login-wrap {
min-height: 100vh;
/* 100vh alone leaves a light strip under the fold on mobile browsers whose
toolbars change the viewport height; dvh tracks the visible viewport, with
the vh line kept above it as the fallback for older engines. */
min-height: 100dvh;
display: flex;
background: var(--login-canvas, #1a2942);
position: relative;
overflow: hidden;
}
/* --- Left Side: Login Form --- */
.login-left {
flex: 0 0 auto;
width: 100%;
max-width: 580px;
background: var(--login-canvas, #1a2942);
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
z-index: 2;
}
.login-card {
width: 100%;
max-width: 480px;
min-height: 440px;
background: var(--surface-card, #ffffff);
border: 1px solid var(--border-color, var(--slate-200, #e2e8f0));
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 40px 36px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
/* --- Right Side: Branding Area --- */
.login-right {
flex: 1;
display: none;
/* Mobile hidden */
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
padding: 40px;
position: relative;
z-index: 1;
text-align: center;
}
.login-right::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 32px 32px;
opacity: 0.3;
z-index: -2;
}
/* --- Hero Circular Composition --- */
.hero-composition {
position: relative;
width: 540px;
height: 540px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-glow {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
z-index: -1;
border-radius: 50%;
}
.hero-circle-guide {
position: absolute;
top: 50%;
left: 50%;
width: 420px;
height: 420px;
transform: translate(-50%, -50%);
border: 1px dashed rgba(255, 255, 255, 0.15);
border-radius: 50%;
z-index: 0;
}
.hero-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
gap: 22px;
}
.hero-logo-wrap {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--login-logo-disc, #ffffff);
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
box-sizing: border-box;
margin-bottom: 8px;
flex-shrink: 0;
}
.hero-logo {
width: 93%;
height: 93%;
object-fit: contain;
display: block;
}
.hero-icon {
font-size: 48px;
color: #FFFFFF;
margin-bottom: 8px;
opacity: 0.9;
}
.hero-title {
font-size: 38px;
font-weight: 800;
margin: 0;
letter-spacing: 0.5px;
color: #FFFFFF;
}
.hero-tagline {
font-size: 15px;
color: rgba(255, 255, 255, 0.65);
margin: 0;
line-height: 1.6;
max-width: 280px;
}
.orbit-icon {
position: absolute;
top: 50%;
left: 50%;
margin: -24px 0 0 -24px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--login-orbit-bg, rgba(255, 255, 255, 0.08));
border: 1px solid var(--login-orbit-border, rgba(255, 255, 255, 0.15));
border-radius: 50%;
color: var(--login-orbit-fg, #ffffff);
font-size: 20px;
z-index: 1;
}
/* Place icons around a 210px radius circle (420px diameter) */
.icon-1 {
transform: rotate(0deg) translateY(-210px) rotate(0deg);
}
.icon-2 {
transform: rotate(60deg) translateY(-210px) rotate(-60deg);
}
.icon-3 {
transform: rotate(120deg) translateY(-210px) rotate(-120deg);
}
.icon-4 {
transform: rotate(180deg) translateY(-210px) rotate(-180deg);
}
.icon-5 {
transform: rotate(240deg) translateY(-210px) rotate(-240deg);
}
.icon-6 {
transform: rotate(300deg) translateY(-210px) rotate(-300deg);
}
@media (min-width: 992px) {
.login-right {
display: flex;
}
}
/* --- Login Form Elements (Extracted & Preserved) --- */
.login-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 34px;
}
.login-brand strong {
font-size: 24px;
color: var(--text-primary, #0f172a);
font-weight: 800;
letter-spacing: 0.5px;
}
.login-brand span {
font-size: 12.5px;
color: var(--text-secondary, #64748b);
}
.login-title {
font-size: 18px;
font-weight: 600;
margin: 0 0 4px;
color: var(--text-primary, #0f172a);
text-align: center;
}
.login-sub {
font-size: 13.5px;
color: var(--text-secondary, #64748b);
margin: 0 0 24px;
text-align: center;
}
.field {
margin-bottom: 16px;
}
.field label {
display: block;
font-size: 12.5px;
font-weight: 600;
margin-bottom: 6px;
color: var(--text-primary, #0f172a);
}
.input-wrap {
position: relative;
}
.input-icon {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
color: var(--text-muted, #94a3b8);
font-size: 13px;
pointer-events: none;
}
.input-wrap input {
width: 100%;
padding: 9px 12px 9px 34px;
border: 1px solid var(--border-color, #cbd5e1);
border-radius: var(--radius-sm, 6px);
font-size: 13.5px;
outline: none;
transition: border-color var(--transition, 0.2s), box-shadow var(--transition, 0.2s);
font-family: inherit;
box-sizing: border-box;
}
.input-wrap input:focus {
border-color: var(--color-primary, #1976D2);
box-shadow: 0 0 0 3px var(--color-primary-xlight, var(--slate-100, #f1f5f9));
}
.toggle-pw {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted, #94a3b8);
cursor: pointer;
padding: 2px;
font-size: 13px;
}
.toggle-pw:hover {
color: var(--text-primary, #0f172a);
}
.field-error {
display: none;
color: var(--color-danger, #B3453F);
font-size: 11.5px;
margin-top: 4px;
}
.field.invalid .input-wrap input {
border-color: var(--color-danger, #B3453F);
background: var(--color-danger-light, #F6E8E7);
}
.field.invalid .field-error {
display: block;
}
.row-between {
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0 18px;
}
.remember {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--text-secondary, #64748b);
cursor: pointer;
user-select: none;
}
.remember input {
margin: 0;
}
.forgot-link {
font-size: 12.5px;
color: var(--color-primary, #1976D2);
text-decoration: none;
cursor: pointer;
background: none;
border: none;
padding: 0;
font-family: inherit;
}
.forgot-link:hover {
text-decoration: underline;
}
.btn-login {
width: 100%;
padding: 12px 0;
background: var(--color-primary-solid, #1e2d46);
color: #fff;
border: none;
border-radius: var(--radius-sm, 6px);
font-size: 13.5px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background var(--transition, 0.2s);
}
.btn-login:hover {
background: var(--color-primary-solid-hover, var(--slate-700, #334155));
}
.btn-login:disabled {
opacity: .6;
cursor: default;
}
.login-error {
display: none;
background: var(--color-danger-light, #F6E8E7);
color: var(--color-danger, #B3453F);
border: 1px solid var(--color-danger-light, #F6E8E7);
border-radius: var(--radius-sm, 6px);
padding: 9px 12px;
font-size: 12.5px;
margin-bottom: 14px;
}
.login-error.show {
display: block;
}
/* Toast */
.toast {
position: fixed;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
background: var(--gray-900, #111827);
color: #fff;
padding: 10px 18px;
border-radius: var(--radius-sm, 6px);
font-size: 12.5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
z-index: 50;
}
.toast.show {
opacity: 1;
}
html[data-theme="dark"] .toast {
background: var(--surface-inverse);
}