:root { --login-primary: #14b8a6; --login-primary-dark: #0f766e; --login-navy: #0b172a; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body.radius-login-page { margin: 0; color: #1e293b; background: #f4f7fb; font-family: 'Kanit', sans-serif; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(430px, .95fr); }
.login-visual { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: 2.5rem 4rem; color: #fff; background: radial-gradient(circle at 82% 18%, rgba(20,184,166,.2), transparent 28%), linear-gradient(145deg,#101d31 0%,#07111f 100%); overflow: hidden; }
.visual-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(148,163,184,.16) 1px, transparent 1px), linear-gradient(90deg,rgba(148,163,184,.16) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom right,#000,transparent 80%); }
.login-brand, .mobile-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: .8rem; color: #e2e8f0; font-size: 1.25rem; font-weight: 300; }
.login-brand-mark { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border-radius: 14px; background: linear-gradient(135deg,#2dd4bf,#0f766e); box-shadow: 0 10px 28px rgba(20,184,166,.3); }
.login-brand strong, .mobile-brand strong { color: #fff; font-weight: 600; }
.login-brand small { display: block; color: #64748b; font-size: .55rem; font-weight: 500; letter-spacing: .16em; margin-top: .2rem; }
.visual-content { position: relative; z-index: 2; max-width: 640px; margin: auto 0; padding: 4rem 0; }
.visual-kicker { display: inline-flex; align-items: center; gap: .5rem; color: #5eead4; font-size: .68rem; font-weight: 600; letter-spacing: .14em; }
.visual-content h1 { max-width: 620px; margin: 1.25rem 0 1rem; color: #fff; font-size: clamp(2.35rem,4vw,4.35rem); font-weight: 600; line-height: 1.14; letter-spacing: -.035em; }
.visual-content p { max-width: 540px; color: #94a3b8; font-size: 1rem; font-weight: 300; line-height: 1.8; }
.visual-features { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.visual-features span { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .8rem; color: #cbd5e1; border: 1px solid rgba(148,163,184,.16); border-radius: 999px; background: rgba(255,255,255,.04); font-size: .72rem; }
.visual-features i { color: #2dd4bf; }
.visual-footer { position: relative; z-index: 2; color: #526176; font-size: .68rem; margin: 0; }
.network-orbit { position: absolute; right: -130px; bottom: -190px; width: 500px; height: 500px; border: 1px solid rgba(45,212,191,.13); border-radius: 50%; }
.network-orbit::before, .network-orbit::after { content: ''; position: absolute; border: 1px solid rgba(45,212,191,.1); border-radius: 50%; }
.network-orbit::before { inset: 70px; }.network-orbit::after { inset: 150px; }
.network-orbit span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 7px rgba(45,212,191,.1), 0 0 24px rgba(45,212,191,.8); }
.network-orbit span:nth-child(1) { top: 62px; left: 96px; }.network-orbit span:nth-child(2) { top: 220px; left: -4px; }.network-orbit span:nth-child(3) { top: 116px; right: 24px; }
.login-panel { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 3rem; background: #fff; }
.login-panel-inner { width: 100%; max-width: 430px; }
.mobile-brand { display: none; margin-bottom: 2.5rem; color: #334155; }.mobile-brand strong { color: #0b172a; }
.login-heading { margin-bottom: 2rem; }
.login-kicker { color: var(--login-primary-dark); font-size: .74rem; font-weight: 600; letter-spacing: .06em; }
.login-heading h2 { margin: .4rem 0 .5rem; color: var(--login-navy); font-size: 2rem; font-weight: 600; }
.login-heading p { color: #94a3b8; font-size: .84rem; margin: 0; }
.radius-login-form .form-group { margin-bottom: 1.15rem; }
.radius-login-form label { color: #475569; font-size: .78rem; font-weight: 500; margin-bottom: .45rem; }
.label-row { display: flex; align-items: center; justify-content: space-between; }
.forgot-link { color: var(--login-primary-dark); font-size: .72rem; }
.input-shell { height: 50px; display: flex; align-items: center; border: 1px solid #dce4ee; border-radius: 11px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; overflow: hidden; }
.input-shell:focus-within { border-color: #2dd4bf; box-shadow: 0 0 0 4px rgba(20,184,166,.1); }
.input-shell.is-invalid { border-color: #ef4444; }
.input-shell > i { width: 46px; color: #94a3b8; text-align: center; }
.input-shell .form-control { height: 48px; padding: .75rem .4rem; border: 0; color: #1e293b; background: transparent; box-shadow: none; font-size: .83rem; }
.input-shell .form-control::placeholder { color: #b4bfcc; }.input-shell .form-control.is-invalid { background-image: none; }
.password-toggle { height: 46px; width: 46px; border: 0; color: #94a3b8; background: transparent; cursor: pointer; }
.invalid-message { display: block; color: #dc2626; font-size: .7rem; margin-top: .4rem; }
.login-options { margin: .25rem 0 1.35rem; }
.custom-control-label { color: #64748b !important; font-size: .75rem !important; font-weight: 400 !important; cursor: pointer; }
.custom-control-input:checked ~ .custom-control-label::before { border-color: var(--login-primary-dark); background: var(--login-primary-dark); }
.login-submit { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: .65rem; color: #fff; border: 0; border-radius: 11px; background: linear-gradient(90deg,#0f766e,#0d9488); box-shadow: 0 9px 24px rgba(15,118,110,.22); font-size: .86rem; font-weight: 500; transition: transform .2s ease, box-shadow .2s ease; }
.login-submit:hover, .login-submit:focus { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15,118,110,.28); }
.login-security-note { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-top: 2rem; color: #64748b; font-size: .7rem; line-height: 1.35; text-align: left; }
.login-security-note > i { color: #0f766e; }.login-security-note small { color: #a1adbc; }
.login-copyright { color: #b0bac7; font-size: .65rem; text-align: center; margin: 2.5rem 0 0; }
@media (max-width: 991.98px) { .login-shell { grid-template-columns: 1fr; }.login-visual { display: none; }.login-panel { padding: 2rem; }.mobile-brand { display: flex; }.mobile-brand .login-brand-mark { width: 40px; height: 40px; border-radius: 12px; } }
@media (max-width: 575.98px) { .login-panel { align-items: flex-start; padding: 2rem 1.25rem; }.login-panel-inner { max-width: 100%; }.login-heading h2 { font-size: 1.7rem; }.login-copyright { margin-top: 2rem; } }

/* Flat login theme */
body.radius-login-page { background: #f4f6f8; }
.login-visual {
    background: #172133;
}
.visual-grid,
.network-orbit { display: none; }
.login-brand-mark {
    border-radius: 4px;
    background: #087f72;
    box-shadow: none;
}
.visual-features span {
    border-radius: 4px;
    background: #202f43;
}
.login-panel { border-left: 1px solid #dfe4e8; }
.input-shell {
    border-radius: 4px;
    transition: border-color .15s ease;
}
.input-shell:focus-within {
    border-color: #087f72;
    box-shadow: none;
}
.login-submit {
    border-radius: 4px;
    background: #087f72;
    box-shadow: none;
    transition: background-color .15s ease;
}
.login-submit:hover,
.login-submit:focus {
    background: #06665c;
    box-shadow: none;
    transform: none;
}