.red-login-main:root{
--brand-h: 350;  /* red-rose hue */
--brand-s: 86%;
--brand-l: 51%;
--accent: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
--accent-600: hsl(var(--brand-h) var(--brand-s) 45%);
--accent-700: hsl(var(--brand-h) var(--brand-s) 38%);
--success: hsl(158 64% 42%);
--warning: hsl(45 100% 51%);
--danger:  hsl(0 72% 48%);
--radius: 14px;
--ring: 2px;
--shadow-lg: 0 10px 30px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.08);
--shadow-md: 0 8px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
--bg: #0b0c10; /* fallback pre-init */
--panel: rgba(255,255,255,.72);
--panel-solid: #ffffff;
--text: #0f1115;
--muted: #475569;
--border: rgba(15,17,21,.12);
--input: rgba(15,17,21,.04);
--grid-line: rgba(255,255,255,.14);
--noise: rgba(0,0,0,.06);
}
html.red-login-main[data-theme="light"]{
--bg: #f7f7fb;
--panel: rgba(255,255,255,.70);
--panel-solid:#fff;
--text:#0f1115;
--muted:#475569;
--border: rgba(15,17,21,.12);
--input: rgba(15,17,21,.04);
--grid-line: rgba(255,255,255,.25);
--noise: rgba(0,0,0,.06);
}
html.red-login-main[data-theme="dark"]{
--bg: #0b0c10;
--panel: rgba(18,20,26,.64);
--panel-solid:#12141a;
--text:#eef2ff;
--muted:#9aa4b2;
--border: rgba(255,255,255,.12);
--input: rgba(255,255,255,.06);
--grid-line: rgba(255,255,255,.08);
--noise: rgba(255,255,255,.05);
}
html.red-login-main[data-contrast="high"]{
--panel: var(--panel-solid);
--border: color-mix(in oklch, var(--text) 16%, transparent);
--input: color-mix(in oklch, var(--text) 8%, transparent);
} 
.red-login-main *, .red-login-main *::before, .red-login-main *::after { box-sizing: border-box; }
body.red-login-main { height: 100%; }
body.red-login-main{
margin:0;
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
color:var(--text);
background: var(--bg);
} 
.red-login-main body {
margin: 0px;
padding: 0px;
}
.red-login-main .hide {
display: none !important;
}
.red-login-main[data-theme="dark"] button, .red-login-main[data-theme="dark"] input, .red-login-main[data-theme="dark"] a {
color: #fff;
}
.red-login-main .shell{
min-height: 100dvh;
display: grid;
grid-template-columns: minmax(0, 1fr);
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
color:var(--text);
background: var(--bg);
}
@media (min-width: 960px){
.red-login-main .shell{
grid-template-columns: 1.2fr 1fr;
}
.logo{
display: none;
}
}
.red-login-main .hero{
position: relative;
overflow: hidden;
display: none;
}
@media (min-width: 960px){.red-login-main .hero{ display:block; } }
.red-login-main .hero-photo{
position:absolute;
inset:0;
background-image: url(/core/templates/assets/img/theme/login.jpg);
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
opacity: .12;
pointer-events: none;
z-index: 0;
}
.red-login-main .field{
position:absolute; inset:0;
background:
radial-gradient(1200px 1200px at 0% 10%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 60%),
radial-gradient(1000px 1000px at 100% 90%, color-mix(in oklch, var(--accent-700) 16%, transparent), transparent 60%),
linear-gradient(180deg, transparent, color-mix(in oklch, var(--text) 4%, transparent));
z-index: 1;
}
.red-login-main .grid{
position: absolute;
inset: -2px;
background-image: linear-gradient(to right, var(--grid-line)
1px, #00000017 1px), linear-gradient(to bottom, rgb(255 255 255) 1px, transparent 1px);
background-size: 64px 64px, 64px 64px;
mask: radial-gradient(80% 80% at 50% 50%, black, transparent 80%);
animation: drift 22s infinite linear;
z-index: 1;
}
@keyframes drift { to { transform: translate3d(-64px,-64px,0); } }
@media (prefers-reduced-motion: reduce){ .red-login-main .grid{ animation:none; } }
.red-login-main .blob{ position:absolute; filter: blur(28px); opacity:.7; z-index: 1; }
.red-login-main .b1{ width:420px; height:420px; background: var(--accent); top:15%; left:6%; border-radius: 50% 40% 60% 50%/ 50% 60% 40% 50%; mix-blend-mode: screen; }
.red-login-main .b2{ width:560px; height:560px; background: var(--accent-700); bottom:10%; right: -6%; border-radius: 60% 50% 40% 50%/ 50% 40% 50% 60%; mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference){
.red-login-main .blob{ animation: float 18s ease-in-out infinite; }
.red-login-main .b2{ animation-duration: 22s; }
@keyframes float{
0%,100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-16px) rotate(6deg); }
}
}
.red-login-main .hero-inner{
position: relative;
z-index: 2;
padding: 48px 56px;
display: flex;
flex-direction: column;
height: 100vh;
}
.red-login-main .brand{
display:flex; align-items:center; gap:12px; font-weight: 700; letter-spacing:.2px;
}
.red-login-main .brand .mark{
width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
color:white; background: var(--accent); box-shadow: var(--shadow-md);
font-weight: 800; text-transform: uppercase;
}
.red-login-main .hero-copy{
margin-top: auto; margin-bottom: 48px; max-width: 560px;
}
.red-login-main .hero h1{
margin: 0 0 8px; font-size: clamp(28px, 4.2vw, 45px); line-height: 1.12;
letter-spacing: -0.02em;
text-wrap: balance;
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 800;
}
.red-login-main .hero p{
margin:0; color: var(--muted); font-size: clamp(14px, 1.4vw, 16px);
}
.red-login-main .subtitle-note{
margin-top: 6px;
margin-bottom: 16px;
}
.red-login-main .hero-footer{
margin-top:auto; color: var(--muted); font-size: 12px;
}
.red-login-main .panel{
position: relative; display:grid; place-items:center; padding: 32px 20px;
}
@media (min-width: 960px){
.red-login-main .panel{ padding: 48px 32px; }
}
.red-login-main .card{
width: min(520px, 92vw);
background: var(--panel);
backdrop-filter: blur(14px) saturate(110%);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 28px;
text-align: center;
}
.red-login-main .card header{
display:flex; align-items:center; justify-content: space-between; gap: 12px;
margin: auto;
background-color: white;
padding: 0;
padding-top: env(safe-area-inset-top);
width: 41px;
border-radius: 27px;
}
.red-login-main .card .logo{
align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
}
.red-login-main .logo .mark{
width:45px; height:45px; border-radius:7px; display:grid; place-items:center;
background: var(--accent); color:white; font-size: 11px; font-weight: 800; text-transform: uppercase;
}
.red-login-main .tops{
display:flex; align-items:center; gap: 6px;
}
.red-login-main .icon-btn{
border: 1px solid var(--border);
background: color-mix(in oklch, var(--panel-solid) 40%, transparent);
padding:8px 10px; border-radius: 10px; cursor:pointer;
display:inline-grid; place-items:center; line-height:0;
}
.red-login-main .icon-btn:focus-visible{
outline: none; box-shadow: 0 0 0 var(--ring) color-mix(in oklch, var(--accent) 40%, transparent);
}
.red-login-main .icon-btn svg{ width:18px; height:18px; }
.red-login-main .title {
margin: 28px 0 0px;
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 800;
font-size: 27px;
letter-spacing: -.01em;
}
.red-login-main .subtitle{ margin:4px 0 43px; color: var(--muted); font-size: 14px; text-align: center; }
.red-login-main .sso-row{ display:grid; /* grid-template-columns: 1fr; */ gap:10px; margin-bottom: 14px; justify-items: center; }
@media (min-width: 480px){ .red-login-main .sso-row{ /* grid-template-columns: 1fr 1fr 1fr; */ } }
.red-login-main .btn{
border:1px solid var(--border); background: var(--panel-solid); padding:17px 12px; border-radius:30px; margin: 35px 1px 2px 1px;
display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; font-weight:600;
}
.red-login-main .btn:not(:disabled):not(.disabled) {
cursor: pointer;
padding: 14px 10px !important;
-moz-appearance: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.red-login-main .btn:hover{ background: color-mix(in oklch, var(--panel-solid) 92%, var(--accent) 8%); }
.red-login-main .btn:active{ transform: translateY(1px); }
.red-login-main .btn svg{ width:18px; height:18px; }
.red-login-main .btn.primary{
background: var(--accent); color: white; border-color: transparent; width: 100%;
}
.red-login-main .btn.primary:hover{ background: var(--accent-600); }
.red-login-main .btn.loading{ pointer-events:none; opacity:.8; position:relative; }
.red-login-main .btn.loading::after{
content:""; width:16px; height:16px; border-radius:50%;
border:2px solid rgba(255,255,255,.6); border-right-color: transparent;
display:inline-block; margin-left:8px; animation: spin .8s linear infinite;
vertical-align:-3px;
}
.red-login-main .btn.rc-login-msg-fade{
animation: rcLoginMsgFade .22s ease-out;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rcLoginMsgFade {
from { opacity: .62; transform: translateY(1px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.red-login-main .btn.rc-login-msg-fade{
animation: none !important;
}
}
.red-login-main .sep{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:14px 0; }
.red-login-main .sep::before, .sep::after {
content:""; height:1px; flex:1; background: var(--border);
}
.red-login-main .tabs{ display:flex; gap:6px; margin-bottom: 12px; display: block;}
.red-login-main .tab{
border:1px solid var(--border); background: var(--panel-solid);
padding:9px 18px; border-radius: 22px; cursor:pointer; font-weight:600; font-size: 14px;
}
.red-login-main .tab[aria-selected="true"]{
background: color-mix(in oklch, var(--accent) 12%, var(--panel-solid));
border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
}
.red-login-main .fld{ display:flex; flex-direction:column; gap:8px; margin-bottom: 12px; }
.red-login-main .lbl{
font-size: 12px;
color: var(--muted);
display: unset;
align-items: center;
gap: 6px;
text-align: left;
border-radius: 44px;
margin: 0px !important;
}
.red-login-main .in{
border:1px solid var(--border); background: var(--panel-solid);
padding: 16px 12px; border-radius: 10px; outline: none;
width: 100%;
}
.red-login-main .in:focus{ box-shadow: 0 0 0 var(--ring) color-mix(in oklch, var(--accent) 38%, transparent); }
.red-login-main .in[aria-invalid="true"]{ border-color: color-mix(in oklch, var(--danger) 60%, var(--border)); }
.red-login-main .muted{ color: var(--muted); font-size: 12px; }
.red-login-main .pw-wrap{ position:relative; }
.red-login-main .pw-toggle{
position:absolute; right:8px; top:50%; transform: translateY(-50%);
border:none; background: transparent; cursor:pointer; padding:6px; border-radius: 8px;
}
.red-login-main .pw-toggle:focus-visible{ outline:none; box-shadow: 0 0 0 var(--ring) color-mix(in oklch, var(--accent) 40%, transparent); }
.red-login-main .caps{ color: var(--warning); font-size: 12px; display:none; }
.red-login-main .caps.on{ display:inline; }
.red-login-main .meter{
height: 8px; background: color-mix(in oklch, var(--text) 10%, transparent);
border-radius: 999px; overflow:hidden; border:1px solid var(--border);
}
.red-login-main .meter > i{
display:block; height:100%; width:0%;
background: linear-gradient(90deg, hsl(0 78% 52%), hsl(25 90% 52%), hsl(82 58% 45%), hsl(158 64% 42%));
transition: width .25s ease;
}
.red-login-main .hint{ font-size: 12px; color: var(--muted); min-height: 18px; }
.red-login-main .row{ display:flex; align-items:center; justify-content: space-between; gap:10px; margin: 0px; }
.red-login-main .check{
display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select: none;
}
.red-login-main .check input{ width:16px; height:16px; }
.red-login-main .error{ color: var(--danger); font-size: 13px; display:none; }
.red-login-main .error.on{ display:block; }
.red-login-main .actions{ margin-top: 6px; display:flex; flex-direction: column; gap:10px; }
.red-login-main .otp{
display:flex; gap:10px; justify-content:center; margin: 8px 0 2px;
}
.red-login-main .otp input{
width: 46px; height: 52px; text-align:center; font-weight: 700; font-size: 20px;
border:1px solid var(--border); background: var(--panel-solid); border-radius: 12px;
}
.red-login-main .otp input:focus{ box-shadow: 0 0 0 var(--ring) color-mix(in oklch, var(--accent) 38%, transparent); outline:none; }
.red-login-main #panel-2fa .otp.otp-anim-ready input,
.red-login-main #panel-2fa #otpAll.otp-anim-ready {
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
will-change: transform, box-shadow, border-color;
}
.red-login-main #panel-2fa .otp input.otp-anim-typed,
.red-login-main #panel-2fa #otpAll.otp-anim-typed {
animation: otpPopIn .14s ease-out both;
}
.red-login-main #panel-2fa .otp.otp-anim-success input {
border-color: #8ec6ff;
box-shadow: 0 0 0 2px rgba(118, 181, 255, .26);
animation: otpSuccessBounce .45s cubic-bezier(.22,.8,.26,1), otpSuccessGlow .45s ease-in-out;
}
.red-login-main #panel-2fa .otp.otp-anim-success input:nth-child(1) { animation-delay: 0ms, 0ms; }
.red-login-main #panel-2fa .otp.otp-anim-success input:nth-child(2) { animation-delay: 55ms, 55ms; }
.red-login-main #panel-2fa .otp.otp-anim-success input:nth-child(3) { animation-delay: 110ms, 110ms; }
.red-login-main #panel-2fa .otp.otp-anim-success input:nth-child(4) { animation-delay: 165ms, 165ms; }
.red-login-main #panel-2fa .otp.otp-anim-success input:nth-child(5) { animation-delay: 220ms, 220ms; }
.red-login-main #panel-2fa .otp.otp-anim-success input:nth-child(6) { animation-delay: 275ms, 275ms; }
.red-login-main #panel-2fa .otp.otp-anim-success,
.red-login-main #panel-2fa #otpAll.otp-anim-success {
animation: otpSuccessGlow .45s ease-in-out;
}
.red-login-main #panel-2fa .otp.otp-anim-error,
.red-login-main #panel-2fa #otpAll.otp-anim-error {
animation: otpErrorNudge .22s ease-in-out both;
box-shadow: 0 0 0 2px rgba(239, 68, 68, .24);
border-color: rgba(239, 68, 68, .65);
}
@keyframes otpPopIn {
0% { transform: scale(.965); }
60% { transform: scale(1.028); }
100% { transform: scale(1); }
}
@keyframes otpSuccessBounce {
0% { transform: translateY(0); }
35% { transform: translateY(-4px); }
70% { transform: translateY(1px); }
100% { transform: translateY(0); }
}
@keyframes otpSuccessGlow {
0% { box-shadow: 0 0 0 0 rgba(118, 181, 255, 0); background-color: var(--panel-solid); }
45% { box-shadow: 0 0 0 4px rgba(118, 181, 255, .22); background-color: rgba(176, 220, 255, .22); }
100% { box-shadow: 0 0 0 0 rgba(118, 181, 255, 0); background-color: var(--panel-solid); }
}
@keyframes otpErrorNudge {
0% { transform: translateX(0) rotate(0deg); }
20% { transform: translateX(-4px) rotate(-.65deg); }
45% { transform: translateX(4px) rotate(.65deg); }
70% { transform: translateX(-2px) rotate(-.35deg); }
100% { transform: translateX(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.red-login-main #panel-2fa .otp.otp-anim-ready input,
.red-login-main #panel-2fa #otpAll.otp-anim-ready,
.red-login-main #panel-2fa .otp input.otp-anim-typed,
.red-login-main #panel-2fa #otpAll.otp-anim-typed,
.red-login-main #panel-2fa .otp.otp-anim-success input,
.red-login-main #panel-2fa .otp.otp-anim-success,
.red-login-main #panel-2fa #otpAll.otp-anim-success,
.red-login-main #panel-2fa .otp.otp-anim-error,
.red-login-main #panel-2fa #otpAll.otp-anim-error {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
.red-login-main .foot{
justify-content: space-between; align-items:center; margin-top: 14px; color: var(--muted); font-size: 14px; text-align: center;
}
.red-login-main .links{ display:flex; gap:16px; }
.red-login-main .sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
#panel-2fa .resendBtn {
background: #000;
border: 1px solid;
margin: 10px 0;
padding: 5px 10px;
border-radius: 25px;
}
.red-login-main .log-logo-bg {
width: 100%;
max-width: 223px !important;
background: #0000002e;
padding: 20px 26px 23px 29px !important;
border-radius: 9px;
cursor: pointer;
background: #e0202d;
}
.red-login-main #g_id_onload {
display: flex;
flex: 1;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;
overflow: visible;
}
.red-login-main #g_id_onload > div {
width: 100% !important;
max-width: 411px !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
}
.red-login-main #g_id_onload iframe {
max-width: 100% !important;
margin: 0 auto !important;
display: block;
}
.red-login-main #g_id_onload [role="button"] {
margin: 0 auto !important;
}
.red-login-main .foot a.create-account-link {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: #111 !important;
background: #fff;
border: 1px solid #d6d9de;
border-radius: 999px;
padding: 4px 10px;
text-decoration: none;
margin-left: 6px;
}
.red-login-main .foot a.create-account-link:hover {
background: #f7f8fa;
}
@media (max-width: 960px) {
.red-login-main .logo {
width: 100%;
}
.red-login-main .card {
width: 100%;
max-width: 520px;
}
.red-login-main .sso-row {
width: 100%;
overflow: visible;
}
.red-login-main #g_id_onload,
.red-login-main #g_id_onload > div {
max-width: 411px !important;
margin: 0 auto !important;
}
.red-login-main #g_id_onload iframe {
max-width: 100% !important;
margin: 0 auto !important;
display: block;
}
}
@media (min-width: 961px) {
.red-login-main #g_id_onload [role="button"] {
width: 97% !important;
margin: 0 auto !important;
}
}
@media (max-width: 430px) {
.red-login-main .lbl {
font-size: 11px;
padding: 0 8px;
border-radius: 22px;
line-height: 1.2;
}
.red-login-main .tab {
padding: 6px 8px;
border-radius: 18px;
font-size: 11px;
}
}