:root {
      color-scheme: light;
      --navy: #081629;
      --navy-2: #0c2444;
      --navy-3: #11375b;
      --sky: #52c5ff;
      --aqua: #70eadc;
      --blue: #1760ef;
      --ink: #152b4b;
      --muted: #6b829e;
      --stroke: rgba(213,229,247,.85);
      --font: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    }
    * { box-sizing: border-box; }
    html { min-height: 100%; }
    body {
      isolation: isolate;
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      overflow-x: hidden;
      font-family: var(--font);
      background: var(--navy);
      color: #fff;
      -webkit-font-smoothing: antialiased;
      display: flex;
      flex-direction: column;
    }
    button, input { font: inherit; }
    button { cursor: pointer; }

    /* Option 43: conveyor manufacturing workshop, with a readable navy tint. */
    .site-backdrop {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
      background-color: #081629;
      background-image:
        linear-gradient(115deg, rgba(4,20,42,.48), rgba(5,24,48,.46)),
        url("../images/industrial-conveyor-bg.webp");
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }
    .site-backdrop::before,
    .site-backdrop::after { content: none; display: none; }
    .ambient-dot { display: none; }

    .topbar {
      position: absolute;
      z-index: 3;
      top: 0; left: 0; right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 23px clamp(20px,3.7vw,64px);
      pointer-events: none;
    }
    .topbar-brand { display: flex; align-items: center; gap: 12px; }
    .topbar-mark {
      width: 42px; height: 42px;
      display:grid; place-items:center;
      border-radius: 13px;
      border:1px solid rgba(107,220,247,.38);
      background: rgba(62,166,244,.13);
      color: #72e7e0;
      font-size: 19px;
    }
    .topbar-title { display:block; font-weight:800; font-size:17px; letter-spacing:.035em; }
    .topbar-subtitle { display:block; margin-top:3px; color:#95b3d2; font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
    .topbar-right { display:flex; align-items:center; gap:8px; color:#a4bed9; font-size:11px; font-weight:650; letter-spacing:.045em; }
    .topbar-right i { color:#68e0ce; }

    /* Equal outer columns ensure the card is centered on the full viewport. */
    .workspace-shell {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1540px;
      margin: 0 auto;
      flex: 1 0 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(390px,460px) minmax(0,1fr);
      align-items: center;
      column-gap: clamp(22px,3.1vw,60px);
      padding: 70px clamp(22px,3.2vw,52px) 14px;
    }

    .module-section {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 344px;
      justify-self: center;
    }
    .module-section-title {
      margin: 0 0 9px;
      font-size: 13px;
      color: #f1f8ff;
      font-weight: 750;
      letter-spacing: -.015em;
    }
    .module-section-kicker {
      display:inline-flex;
      align-items:center;
      gap:7px;
      color: #8fb6db;
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .13em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .module-section-kicker .kicker-line { display:block; width:20px; height:2px; background:var(--aqua); border-radius:2px; }
    .module-grid {
      display:grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      column-gap: 22px;
      row-gap: 22px;
      margin-top: 24px;
    }
    .module-tile {
      position: relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:14px;
      min-height: 122px;
      padding: 17px 10px;
      border-radius: 17px;
      border: 1px solid rgba(182,220,255,.18);
      background: linear-gradient(143deg,rgba(202,230,255,.11),rgba(67,131,198,.065));
      box-shadow: 0 11px 28px rgba(2,10,25,.15), inset 0 1px 0 rgba(255,255,255,.10);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      text-align:center;
      transition: transform .22s, border-color .22s, background .22s;
    }
    .module-tile:hover { transform:translateY(-3px); border-color: rgba(122,222,252,.36); background:rgba(134,195,247,.13); }
    .module-tile-icon {
      display:grid; place-items:center;
      width:44px; height:44px;
      border-radius:13px;
      background:linear-gradient(145deg,rgba(87,192,255,.19),rgba(50,112,210,.10));
      border:1px solid rgba(131,212,255,.15);
      color: #a0d9ff;
      font-size:20px;
    }
    .module-tile:nth-child(3n+2) .module-tile-icon { color: #88eee3; background:rgba(67,216,201,.10); }
    .module-tile:nth-child(3n+3) .module-tile-icon { color: #c5c3ff; background:rgba(126,129,255,.11); }
    .module-tile-label { color:#d9e8f7; font-size:11px; font-weight:700; letter-spacing:.018em; line-height:1.25; }
    .module-note { margin: 25px 0 0; color:#7e9dbd; font-size:11px; line-height:1.7; }

    /* True center login form */
    .login-card {
      position: relative;
      grid-column: 2; /* Keep login card in the exact center after removing module panels. */
      width: 100%;
      isolation: isolate;
      color: var(--ink);
      border: 1px solid rgba(255,255,255,.78);
      border-radius: 26px;
      background: linear-gradient(155deg,rgba(255,255,255,.96),rgba(241,248,255,.91));
      box-shadow: 0 34px 90px rgba(0,12,31,.38),0 0 0 8px rgba(150,202,255,.045),inset 0 1px 0 #fff;
      backdrop-filter:blur(24px) saturate(1.35);
      -webkit-backdrop-filter:blur(24px) saturate(1.35);
      padding: 31px 34px 25px;
      overflow:hidden;
    }
    .login-card::before {
      content: "";
      position: absolute;
      top:0; left:0; right:0;
      height:4px;
      background:linear-gradient(90deg,#168fff,#29c4de,#52dfba);
      z-index: 1;
    }
    .login-card::after {
      content: "";
      position:absolute;
      width:280px; height:280px;
      top:-180px; right:-100px;
      border-radius:50%;
      background:rgba(115,182,255,.14);
      filter:blur(24px);
      z-index:-1;
      pointer-events:none;
    }
    .login-topline {
      display:flex; align-items:center; justify-content:center; gap:7px;
      margin-bottom: 17px;
      font-size:10px; color:#5d83aa; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
    }
    .login-topline i { color:#279e99; }
    .logo-wrap { text-align:center; margin-bottom:23px; }
    .logo-ring {
      margin: 0 auto 12px;
      width:78px; height:78px;
      display:grid; place-items:center;
      border-radius:22px;
      border:1px solid #dce9f6;
      background:#fff;
      box-shadow:0 12px 28px rgba(33,89,147,.12);
    }
    .login-logo { width:68px; height:68px; object-fit:contain; }
    .brand-heading { margin:0; color:#173965; font-size:24px; font-weight:800; letter-spacing:-.035em; }
    .brand-subheading { margin:6px 0 0; color:#7890aa; font-size:11px; font-weight:650; letter-spacing:.035em; }
    .login-heading { margin:0 0 22px; text-align:left; }
    .login-heading h1 { margin:0 0 5px; color:#173254; font-size:25px; letter-spacing:-.035em; font-weight:800; }
    .login-heading p { margin:0; color:#7186a0; font-size:12px; line-height:1.65; }
    .alert-error {
      display:flex; align-items:flex-start; gap:10px;
      padding:12px 13px; margin-bottom:18px;
      border:1px solid #ffccce; border-radius:11px;
      background:#fff1f3; color:#aa364d;
      font-size:12px; line-height:1.6;
    }
    .alert-error i { margin-top:3px; }
    .form-group { margin-bottom:16px; }
    .form-label { display:block; font-size:12px; font-weight:750; color:#344d6b; margin:0 0 8px; }
    .field {
      display:flex; align-items:center;
      width:100%; height:51px;
      border-radius:12px;
      background:rgba(255,255,255,.94);
      border:1px solid #d9e6f3;
      transition:border-color .2s,box-shadow .2s;
    }
    .field:focus-within { border-color:#4a9fff; box-shadow:0 0 0 4px rgba(40,126,240,.11); }
    .field > i { width:43px; flex:0 0 43px; color:#8da3bb; text-align:center; font-size:14px; }
    .field input {
      flex:1; width:100%; min-width:0; height:100%;
      background:transparent; border:0; outline:0;
      color:#162d4d; font-size:13px; padding:0 12px 0 0;
    }
    .field input::placeholder { color:#93a5ba; opacity:1; }
    .field input::-ms-reveal { display:none; }
    .password-toggle {
      display:grid;place-items:center;
      width:42px;height:42px;flex:0 0 42px;
      background:transparent;border:0;border-radius:10px;
      color:#7890a9;margin-right:4px;
    }
    .password-toggle:hover, .password-toggle:focus-visible { background:#f0f6fd; color:#2668ba;outline:none; }
    .caps-warning { display:none;color:#945f21;font-size:11px;margin:7px 2px 0; }
    .caps-warning.active { display:block; }
    .extra-row {
      display:flex;justify-content:space-between;align-items:center;gap:10px;
      margin:7px 1px 17px;
      font-size:12px;
    }
    .remember-label { display:inline-flex;align-items:center;gap:8px;color:#5e748f;font-size:12px;cursor:pointer; }
    .remember-label input { width:15px;height:15px;margin:0;accent-color:#237af0; }
    .extra-row a { color:#1768cc;font-weight:700;text-decoration:none;font-size:12px; }
    .extra-row a:hover { text-decoration:underline; }
    .help-text { color:#8094aa;font-size:11px; }
    .turnstile-wrap {
      width:100%;min-height:79px;
      display:flex;align-items:center;justify-content:center;
      padding:9px 4px; margin:0 0 17px;
      border:1px solid #e3edf7;border-radius:12px;
      background:rgba(248,252,255,.88);
      overflow:hidden;
    }
    .cf-turnstile { display:flex;justify-content:center;width:100%;max-width:330px; }
    .turnstile-fallback { color:#b43448;font-size:12px; }
    .login-button {
      display:flex;align-items:center;justify-content:center;gap:10px;
      width:100%;min-height:51px;
      border:0;border-radius:12px;
      color:#fff;
      background:linear-gradient(103deg,#1168e9 0%,#237ef4 58%,#239dea 100%);
      box-shadow:0 12px 21px rgba(33,115,225,.22);
      font-size:14px;font-weight:800;
      transition:transform .2s,box-shadow .2s,filter .2s;
    }
    .login-button:not(:disabled):hover { transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 17px 28px rgba(33,115,225,.28); }
    .login-button:focus-visible { outline:3px solid rgba(41,132,239,.35);outline-offset:3px; }
    .login-button:disabled { background:#9fb7cf;box-shadow:none;cursor:not-allowed; }
    .login-button i { font-size:13px; }
    .login-secure-badge { display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0;color:#667f99;font-size:11px; }
    .login-secure-badge i { color:#139e92; }
    .login-assistance { text-align:center; margin:13px 0 0; color:#8296aa; font-size:11px; line-height:1.6; }
    .login-assistance strong { color:#4a657f;font-weight:700; }
    /* Semantic HTML footer: regular document flow, real clickable links. */
    .page-footer {
      position: relative;
      z-index: 3;
      width: 100%;
      margin-top: auto;
      padding: 18px clamp(20px,3.7vw,64px);
      background: transparent;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      color: #9ab6d2;
      font-size: 12px;
      line-height: 1.6;
    }
    .footer-inner {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px 22px;
    }
    .page-footer a {
      color: #e7f5ff;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color .18s, border-color .18s;
    }
    .page-footer a:hover { color: #7ce6e3; border-color: currentColor; }
    .page-footer a:focus-visible { outline: 2px solid #8edaff; outline-offset: 4px; border-radius: 2px; }
    .footer-powered { white-space: nowrap; }
    .footer-powered a { color: #89e9dc; }
    .footer-rights { color: #809fbd; }

    @media (max-width: 1230px) {
      .workspace-shell { column-gap:16px; padding-inline:24px; grid-template-columns: minmax(0,1fr) minmax(380px,442px) minmax(0,1fr); }
      .module-section-kicker { font-size:9px; }
      .module-grid { column-gap: 15px; row-gap: 18px; }
      .module-tile { min-height: 111px; padding: 12px 5px; }
      .module-tile-label { font-size:10px; }
      .module-tile-icon { width:39px;height:39px;font-size:18px; }
    }
    @media (max-width: 1050px) {
      .workspace-shell { display:flex;justify-content:center;align-items:center;padding:90px 20px 34px; }
      .module-section { display:none; }
      .login-card { width:100%;max-width:460px; }
    }
    @media (max-width: 560px) {
      .topbar { padding:16px 16px 0; }
      .topbar-mark { width:36px;height:36px;font-size:16px;border-radius:11px; }
      .topbar-title { font-size:14px; }
      .topbar-subtitle { font-size:9px; }
      .topbar-right { display:none; }
      .workspace-shell { padding:83px 12px 28px; }
      .login-card { padding:25px 20px 22px;border-radius:21px; }
      .logo-wrap { margin-bottom:18px; }
      .logo-ring { width:67px;height:67px;border-radius:19px; }
      .login-logo { width:58px;height:58px; }
      .brand-heading { font-size:22px; }
      .login-heading h1 { font-size:22px; }
      .page-footer { padding:15px 18px 19px; font-size:11px; }
      .footer-inner { flex-direction:column; text-align:center; gap:6px; }
      .footer-powered { white-space:normal; }
    }
    @media (max-width: 370px) {
      .login-card { padding:22px 14px; }
      .extra-row { flex-wrap:wrap; }
    }
    /* Keep the card comfortably centered on standard 768px-height laptops. */
    @media (max-height: 850px) and (min-width: 561px) {
      .workspace-shell { padding-top: 68px; padding-bottom: 13px; }
      .module-grid { row-gap: 16px; column-gap: 17px; margin-top: 17px; }
      .module-tile { min-height: 104px; gap: 8px; padding: 10px 7px; }
      .module-section-kicker { margin-bottom: 8px; }
      .module-note { margin-top: 14px; }
      .login-card { padding: 21px 30px 18px; }
      .login-topline { margin-bottom: 9px; }
      .logo-wrap { margin-bottom: 15px; }
      .logo-ring { width: 64px; height: 64px; margin-bottom: 8px; }
      .login-logo { width: 56px; height: 56px; }
      .brand-heading { font-size: 21px; }
      .brand-subheading { margin-top: 3px; }
      .login-heading { margin-bottom: 16px; }
      .login-heading h1 { font-size: 23px; }
      .form-group { margin-bottom: 11px; }
      .form-label { margin-bottom: 6px; }
      .field { height: 46px; }
      .extra-row { margin: 4px 1px 11px; }
      .turnstile-wrap { min-height: 71px; margin-bottom: 11px; padding: 4px 3px; }
      .login-button { min-height: 47px; }
      .login-secure-badge { margin-top: 12px; }
      .login-assistance { margin-top: 8px; }
    }
    @media (prefers-reduced-motion:reduce) {
      *,*::before,*::after { transition:none!important;animation:none!important; }
    }
  

/* Password recovery pages reuse the SAME login appearance and background. */
.recovery-card .logo-wrap { margin-bottom: 16px; }
.recovery-card .login-heading { margin-bottom: 22px; }
.recovery-card .recovery-info { color:#5f7895; font-size:12px; line-height:1.7; margin:0 0 20px; }
.recovery-card .recovery-back { margin-top:18px; text-align:center; font-size:13px; }
.recovery-card .recovery-back a { color:#1768cc; font-weight:750; text-decoration:none; }
.recovery-card .recovery-back a:hover { text-decoration:underline; }
.recovery-card .form-group { margin-bottom:18px; }
.recovery-card .field input { padding-left:12px; }
.recovery-card .field .field-icon { flex:0 0 43px; text-align:center; color:#8da3bb; }
.recovery-card .field .field-icon + input { padding-left:0; }
.recovery-card .recovery-success { display:flex; align-items:flex-start; gap:10px; border-radius:12px; border:1px solid #bde7d5; background:#ecfbf3; color:#23644d; padding:13px 14px; font-size:12px; line-height:1.7; margin-bottom:17px; }
.recovery-card .recovery-success i { margin-top:4px; }
.recovery-card .recovery-error { border-radius:12px; border:1px solid #ffccce; background:#fff1f3; color:#a02c45; padding:13px 14px; font-size:12px; line-height:1.6; margin-bottom:18px; }
.recovery-card .recovery-hint { color:#7186a0; font-size:11px; margin:6px 0 0; line-height:1.5; }
.recovery-card .login-button { margin-top:4px; }
.recovery-card .login-button:disabled { cursor:not-allowed; }
@media (max-width:560px) { .recovery-card .login-heading { margin-bottom:18px; } }