/* M&S Investment Limited — HR Management System · sign-in page */
:root{
  --lg-navy:#0A2463; --lg-navy-deep:#06173F; --lg-gold:#F5A81C; --lg-ink:#0B1B4B;
  --lg-muted:#5B6785; --lg-line:#E3E8F2;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body.mns-login-body{ font-family:'Poppins','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--lg-ink); background:#F4F7FC; }

.lg-page{ position:relative; min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,36%); grid-template-rows:1fr auto; overflow:hidden; background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 38%,#EEF3FB 62%,#E4ECF8 100%); }

/* ---------- Right navy panel with slanted edge + gold accent ---------- */
.lg-panel{ position:absolute; top:0; right:0; bottom:0; width:42%; background:linear-gradient(160deg,#0B2A6B 0%,var(--lg-navy-deep) 100%); clip-path:polygon(22% 0,100% 0,100% 100%,0 100%); z-index:1; }
.lg-gold-corner{ position:absolute; top:0; right:0; width:19%; height:22%; background:var(--lg-gold); clip-path:polygon(55% 0,100% 0,100% 100%); z-index:2; opacity:.95; }
.lg-gold-corner::after{ content:""; position:absolute; inset:0; background:var(--lg-navy); clip-path:polygon(40% 0,60% 0,100% 80%,100% 100%); }

/* ---------- Left: brand + message ---------- */
.lg-left{ position:relative; z-index:3; padding:clamp(28px,4.2vw,64px) clamp(24px,5vw,80px) 0; display:flex; flex-direction:column; min-height:calc(100vh - 64px); }
.lg-logo{ width:clamp(220px,24vw,320px); height:auto; display:block; }
.lg-eyebrow{ margin-top:clamp(28px,5vh,56px); font-weight:700; font-size:clamp(11px,1.05vw,14px); letter-spacing:.2em; color:var(--lg-ink); text-transform:uppercase; }
.lg-eyebrow::after{ content:""; display:block; width:56px; height:3px; background:var(--lg-gold); margin-top:12px; border-radius:2px; }
.lg-title{ margin:clamp(14px,2.4vh,26px) 0 0; font-weight:800; font-size:clamp(38px,5.2vw,82px); line-height:1.03; letter-spacing:-.02em; color:var(--lg-ink); }
.lg-title span{ color:#D99A12; }
.lg-tagline{ margin:clamp(10px,2vh,22px) 0 0; font-weight:500; font-size:clamp(15px,1.5vw,22px); color:#1B2D63; max-width:520px; }
.lg-features{ margin-top:clamp(26px,6vh,64px); display:flex; align-items:stretch; max-width:470px; }
.lg-feature{ flex:1; text-align:center; padding:0 10px; font-size:12.5px; font-weight:600; line-height:1.3; color:var(--lg-ink); }
.lg-feature + .lg-feature{ border-left:1px solid #CBD5E8; }
.lg-feature i{ display:block; font-size:30px; color:var(--lg-navy); margin-bottom:8px; }

/* hero photo, fading softly into both backgrounds */
.lg-hero{ position:absolute; right:clamp(0px,1vw,20px); top:0; bottom:0; aspect-ratio:488/866; z-index:-1; }
.lg-hero img{ height:100%; width:100%; object-fit:cover; display:block;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 78%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 78%,transparent 100%); }
.lg-swoosh{ position:absolute; left:0; bottom:0; width:48%; height:84px; z-index:-1; pointer-events:none; }

/* ---------- Right: sign-in card ---------- */
.lg-right{ position:relative; z-index:4; display:flex; align-items:center; justify-content:center; padding:clamp(24px,4vw,56px) clamp(20px,3.4vw,56px); }
.lg-card{ width:100%; max-width:480px; background:#fff; border-radius:24px; padding:clamp(28px,3vw,42px); box-shadow:0 30px 70px rgba(2,12,45,.38); animation:lg-rise .6s ease both; }
.lg-card-logo{ display:block; width:min(300px,78%); height:auto; margin:0 auto 22px; }
.lg-card h1{ margin:0; text-align:center; font-weight:700; font-size:clamp(20px,1.6vw,28px); color:var(--lg-ink); white-space:nowrap; }
.lg-card .lg-sub{ text-align:center; margin:6px 0 24px; color:#2A3A6B; font-size:15px; }

.lg-alert{ display:flex; gap:10px; align-items:flex-start; border-radius:12px; padding:11px 14px; font-size:13px; margin-bottom:16px; line-height:1.4; }
.lg-alert.error{ background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; }
.lg-alert.success{ background:#ECFDF5; color:#047857; border:1px solid #A7F3D0; }
.lg-alert.warning,.lg-alert.info{ background:#EFF6FF; color:#1D4ED8; border:1px solid #BFDBFE; }

.lg-field{ position:relative; margin-bottom:16px; }
.lg-field > i.lg-ico{ position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--lg-navy); pointer-events:none; }
.lg-input{ width:100%; height:58px; border:1.5px solid var(--lg-line); border-radius:16px; padding:0 52px 0 52px; font:500 15.5px 'Poppins','Inter',sans-serif; color:var(--lg-ink); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s; }
.lg-input::placeholder{ color:#8A94AD; font-weight:400; }
.lg-input:focus{ border-color:var(--lg-navy); box-shadow:0 0 0 4px rgba(10,36,99,.10); }
.lg-eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; background:transparent; border-radius:10px; font-size:21px; color:var(--lg-ink); cursor:pointer; }
.lg-eye:hover{ background:#F1F5FB; }

.lg-row{ display:flex; justify-content:space-between; align-items:center; margin:2px 0 22px; font-size:14px; }
.lg-check{ display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:500; color:var(--lg-ink); }
.lg-check input{ appearance:none; -webkit-appearance:none; width:22px; height:22px; border:2px solid var(--lg-navy); border-radius:6px; background:#fff; cursor:pointer; display:grid; place-content:center; margin:0; }
.lg-check input:checked{ background:var(--lg-navy); }
.lg-check input:checked::after{ content:"\2713"; color:#fff; font-size:14px; font-weight:700; line-height:1; }
.lg-link{ color:#1659D6; font-weight:600; text-decoration:none; }
.lg-link:hover{ text-decoration:underline; }

.lg-btn{ width:100%; height:58px; border:0; border-radius:16px; background:var(--lg-navy); color:#fff; font:700 18px 'Poppins','Inter',sans-serif; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:background .15s, transform .05s, box-shadow .15s; box-shadow:0 10px 24px rgba(10,36,99,.30); }
.lg-btn:hover{ background:#0D2F7E; }
.lg-btn:active{ transform:translateY(1px); }
.lg-btn:disabled{ opacity:.75; cursor:wait; }
.lg-secure{ display:flex; align-items:center; gap:14px; margin-top:26px; color:var(--lg-ink); font-size:13px; font-weight:500; }
.lg-secure::before,.lg-secure::after{ content:""; flex:1; height:1px; background:var(--lg-line); }
.lg-secure i{ color:var(--lg-navy); margin-right:6px; font-size:16px; }

/* ---------- Footer bar ---------- */
.lg-footer{ grid-column:1 / -1; position:relative; z-index:5; height:64px; background:linear-gradient(90deg,var(--lg-navy-deep),#0A2463); color:#E8EEFB; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,4vw,60px); font-size:13px; }
.lg-footer::before{ content:""; position:absolute; left:0; top:-3px; width:46%; height:3px; background:linear-gradient(90deg,var(--lg-gold),rgba(245,168,28,0)); }
.lg-footer b{ font-weight:700; color:#fff; }
.lg-footer .sep{ margin:0 12px; opacity:.5; }
.lg-footer em{ font-style:italic; font-size:15px; }
.lg-footer em i{ color:var(--lg-gold); font-style:normal; margin:0 8px; }

@keyframes lg-rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* ---------- Tablet & phone ---------- */
@media (max-width:1399px){
  .lg-features{ display:none; }
}
@media (max-width:900px){
  .lg-page{ grid-template-columns:1fr; background:linear-gradient(180deg,#FFFFFF 0,#FFFFFF 18%,#EEF3FB 38%,var(--lg-navy-deep) 38%); }
  .lg-card-logo{ display:none; }
  .lg-input{ font-size:14.5px; padding-left:48px; padding-right:48px; }
  .lg-panel,.lg-gold-corner,.lg-hero,.lg-swoosh{ display:none; }
  .lg-left{ min-height:0; padding-bottom:28px; align-items:center; text-align:center; }
  .lg-eyebrow::after{ margin-left:auto; margin-right:auto; }
  .lg-title{ font-size:clamp(34px,9vw,52px); }
  .lg-right{ padding-top:8px; padding-bottom:36px; }
  .lg-footer{ height:auto; min-height:56px; flex-direction:column; gap:4px; padding:12px 16px; text-align:center; }
}
@media (prefers-reduced-motion:reduce){ .lg-card{ animation:none; } }