/* RRC MIS login refresh: presentation only; existing authentication remains intact. */
:root { --rrc-navy:#102c69; --rrc-blue:#0879d5; --rrc-ink:#101d34; --rrc-muted:#63728a; --rrc-border:#dce5f1; }
body { background:#f3f7fc; font-family:'Inter',sans-serif; }
.login-page { grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr); min-height:100svh; }
.login-visual { background:radial-gradient(ellipse at 80% 18%,rgba(33,130,232,.35),transparent 42%),linear-gradient(145deg,#061a3b 0%,#103572 56%,#0758a7 100%); color:#fff; padding:clamp(30px,5vw,76px); }
.login-visual::after { content:''; position:absolute; width:530px; height:530px; right:-245px; bottom:-260px; border:1px solid rgba(255,255,255,.17); border-radius:50%; box-shadow:0 0 0 75px rgba(255,255,255,.035),0 0 0 150px rgba(255,255,255,.025); pointer-events:none; }
.visual-grid { opacity:.15; background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px); background-size:48px 48px; }
.login-visual .logo { position:relative; z-index:2; display:inline-flex; align-items:center; gap:14px; width:fit-content; padding:10px 18px 10px 10px; border:1px solid rgba(255,255,255,.19); border-radius:18px; background:rgba(255,255,255,.95); box-shadow:0 12px 35px rgba(0,0,0,.12); text-decoration:none; }
.login-visual .logo .logo-name, .login-visual .logo .logo-name strong { color:#112b60!important; }
.login-visual .site-logo { width:52px; height:52px; object-fit:contain; }
.visual-content { position:relative; z-index:2; max-width:650px; }
.visual-label { color:#c3e2ff!important; letter-spacing:.15em; font-weight:700; }
.visual-content h1 { color:#fff!important; font-size:clamp(48px,5.5vw,86px); letter-spacing:-.055em; line-height:1.02; }
.visual-content h1 span { color:#77c8ff!important; }
.visual-content p { color:#d2e3fa!important; max-width:520px; line-height:1.8; }
.visual-line small, .visual-footer, .visual-footer span { color:#c1d6f2!important; }
.visual-line > span { background:#4fb2ff!important; }
.login-panel { background:linear-gradient(150deg,#f8fbff,#eef4fc); padding:clamp(26px,5vw,70px); }
.login-container { max-width:475px; background:#fff; border:1px solid #e4ebf5; border-radius:28px; padding:clamp(28px,4vw,52px); box-shadow:0 28px 90px rgba(15,43,92,.10),0 4px 18px rgba(15,43,92,.035); }
.login-heading .login-number, .continue-login .login-number { color:var(--rrc-blue)!important; }
.login-heading .login-label { color:var(--rrc-muted)!important; }
.login-heading h2, .continue-login h2 { color:var(--rrc-ink)!important; letter-spacing:-.04em; }
.login-heading h2 span, .continue-login h2 span { color:var(--rrc-blue)!important; }
.login-heading p, .continue-message { color:var(--rrc-muted)!important; }
.form-group label { color:#263b59!important; font-weight:650; }
.input-wrapper { border:1px solid var(--rrc-border)!important; background:#f8fbff!important; border-radius:13px!important; transition:border-color .2s,box-shadow .2s,background .2s; }
.input-wrapper:focus-within { border-color:#288be1!important; box-shadow:0 0 0 4px rgba(8,121,213,.10); background:#fff!important; }
.input-wrapper input { background:transparent!important; color:var(--rrc-ink)!important; }
.input-wrapper i { color:#6d84a3!important; }
.login-checkbox { color:#576a85!important; }
.login-checkbox input { accent-color:var(--rrc-blue); }
.login-button { background:linear-gradient(110deg,#102d6c,#0879d5)!important; color:#fff!important; border:0!important; border-radius:13px!important; box-shadow:0 12px 26px rgba(13,83,173,.19); transition:transform .2s,box-shadow .2s!important; }
.login-button:hover { transform:translateY(-2px); box-shadow:0 17px 30px rgba(13,83,173,.25); }
.back-home { color:#526b8b!important; }
.back-home:hover { color:var(--rrc-blue)!important; }
.form-error { border-radius:12px; }
.continue-user { border-radius:14px; }
.mobile-brand .site-logo { width:48px; height:48px; object-fit:contain; }
@media(max-width:1050px) { .login-page { grid-template-columns:1fr 1fr; } .login-visual { padding:36px; } .login-panel { padding:24px; } .login-container { padding:32px; } }
@media(max-width:800px) { .login-page { display:block; } .login-visual { display:none!important; } .login-panel { min-height:100svh; padding:24px 16px; } .login-container { max-width:480px; padding:clamp(25px,6vw,40px); } .mobile-brand { display:inline-flex; margin-bottom:30px; } }
@media(max-width:420px) { .login-container { border-radius:20px; padding:25px 20px; } }
@media(prefers-reduced-motion:reduce) { .login-button, .input-wrapper { transition:none!important; } }