/* =============================================================
   ALAPROS · Employee sign-in
   One wide acrylic slab centred in the viewport: the purpose of
   the portal sits to the side of the credentials, not above them.
   Steel-blue ground. Standalone — no shared partials.
   ============================================================= */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}

.pe{
  --red-2:#e11d3a;
  --tx:#f4f2f0; --tx-muted:#a7adb5; --line:rgba(255,255,255,.13);
  --steel:#5f9dc4;
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);

  min-height:100svh;display:flex;flex-direction:column;
  font-family:var(--font-body);color:var(--tx);
  background:
    radial-gradient(760px 620px at 22% 34%,rgba(63,126,166,.42),transparent 64%),
    radial-gradient(600px 520px at 86% 84%,rgba(200,16,46,.14),transparent 62%),
    linear-gradient(155deg,#1b2b38 0%,#14161a 66%);
}

.pe-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px clamp(20px,4vw,52px)}
.pe-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx);font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.pe-brand .mark{width:32px;height:32px;color:var(--red-2)}
.pe-back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--tx-muted);font-size:.86rem;transition:.25s var(--ease)}
.pe-back:hover{color:var(--tx)}
.pe-back svg{width:15px;height:15px}
[dir=rtl] .pe-back svg{transform:scaleX(-1)}

.pe-main{flex:1;display:grid;place-items:center;padding:20px clamp(20px,4vw,52px) 44px}

.pe-slab{width:100%;max-width:940px;display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(28px,4vw,52px);
  padding:clamp(30px,3.4vw,48px);border-radius:26px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 46px 100px -46px rgba(0,0,0,.9)}
.pe-rule{background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}

.pe-badge{width:60px;height:60px;border-radius:17px;display:grid;place-items:center;margin-bottom:24px;
  background:rgba(95,157,196,.18);border:1px solid rgba(95,157,196,.4);color:var(--steel)}
.pe-badge svg{width:29px;height:29px}
.pe-eyebrow{margin:0 0 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--steel)}
.pe-title{margin:0 0 18px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.08;letter-spacing:-.02em}
.pe-purpose{margin:0;font-size:1rem;line-height:1.68;color:var(--tx-muted)}

.pe-form{align-self:center;display:grid;gap:18px}
.pe-label{display:block;margin-bottom:9px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-muted)}
.pe-form input{width:100%;height:52px;padding:0 18px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.10);color:var(--tx);font-family:inherit;font-size:.97rem;transition:.25s var(--ease)}
.pe-form input:focus{outline:none;border-color:var(--steel);background:rgba(255,255,255,.15);box-shadow:0 0 0 4px rgba(95,157,196,.2)}
.pe-submit{margin-top:4px;height:54px;border:0;border-radius:14px;cursor:pointer;font-family:inherit;font-weight:600;font-size:1rem;
  color:#fff;background:linear-gradient(120deg,#e11d3a,#9e0c24);transition:.28s var(--ease)}
.pe-submit:hover{transform:translateY(-2px);box-shadow:0 18px 42px -16px rgba(225,29,58,.85)}

.pe-alert{margin:0;padding:12px 16px;border-radius:12px;font-size:.86rem;
  border:1px solid rgba(225,29,58,.45);background:rgba(225,29,58,.14);color:#ffd9df}
.pe-notice{margin:2px 0 0;font-size:.79rem;line-height:1.6;color:var(--tx-muted)}

.pe-foot{padding:22px clamp(20px,4vw,52px);text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(167,173,181,.6)}

@media(max-width:900px){
  .pe-slab{grid-template-columns:1fr;gap:30px}
  .pe-rule{height:1px;background:var(--line)}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.1ms!important}}