/* Log masuk (handoff/design/v5/Login.dc.html) */
.lg { position: relative; overflow: hidden; min-height: 640px; display: flex; align-items: center; justify-content: center; padding: 56px 32px; box-sizing: border-box; } /* padding simetri: jarak atas = bawah supaya kad seimbang antara nav dan footer */
.lg__blob { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.lg__blob--1 { left: 8%; top: 5%; background: radial-gradient(circle, rgba(61,123,255,.32), transparent 65%); animation: lg-drift 18s ease-in-out infinite; }
.lg__blob--2 { right: 6%; bottom: 0; background: radial-gradient(circle, rgba(139,92,255,.28), transparent 65%); animation: lg-drift2 22s ease-in-out infinite; }
.lg__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(11,27,63,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,27,63,.06) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%); }
.lg__card { position: relative; width: min(100%, 480px); padding: 36px 36px 40px; border-radius: 28px; background: rgba(255,255,255,.85); border: 1px solid rgba(11,27,63,.12); box-shadow: 0 30px 70px rgba(47,91,234,.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }
.lg__card h1 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.035em; }
.lg__sub { margin: 0; color: var(--ink-2); }
.lg__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(18,163,107,.1); border: 1px solid rgba(18,163,107,.35); font: 600 12px var(--font-mono); letter-spacing: .08em; color: #0F7B4A; }
.lg__led { width: 7px; height: 7px; border-radius: 50%; background: #12A36B; animation: lg-pulse 2s ease-in-out infinite; }
.lg__alert { padding: 14px 16px; border-radius: 14px; background: rgba(225,29,72,.08); border: 1px solid rgba(225,29,72,.4); color: #9F1239; font-weight: 500; }
.lg__alert--warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); color: #92400E; }
.lg__form { display: flex; flex-direction: column; gap: 16px; }
.lg__form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.lg__form input { min-height: 54px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(11,27,63,.25); background: #fff; color: var(--ink); font: 400 16px var(--font-body); }
.lg__btn { min-height: 56px; border-radius: 14px; border: 0; background: linear-gradient(135deg, #2F5BEA, #7B4DF0); color: #fff; font: 600 17px var(--font-body); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
.lg__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(47,91,234,.4); }
.lg__back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: #043093; text-decoration: underline; text-underline-offset: 4px; }
@keyframes lg-drift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.15); } }
@keyframes lg-drift2 { 0%, 100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-60px,40px) scale(.95); } }
@keyframes lg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(18,163,107,.6); } 50% { box-shadow: 0 0 0 6px rgba(18,163,107,0); } }
@media (prefers-reduced-motion: reduce) { .lg__blob, .lg__led { animation: none; } .lg__btn { transition: none; } .lg__btn:hover { transform: none; } }
@media (max-width: 520px) { .lg { padding: 40px 16px; min-height: 0; } .lg__card { padding: 28px 22px 32px; } .lg__card h1 { font-size: 32px; } }

/* Halaman kakitangan: latar rata #F4F7FF seperti mockup (tiada aurora kuning global). */
body.page-staff { background: #F4F7FF; }