/* ─── LOGIN SCREEN — scoped under #login-screen ──────────────────────── */
#login-screen {
  position:fixed; inset:0; z-index:200;
  --ls-yellow:#F5C400; --ls-yellow-glow:#FFD83D; --ls-yellow-dim:#A88700;
  --ls-blue-deep:#0B2A66; --ls-blue-mid:#1748B8;
  --ls-ink:#05070E; --ls-ink-2:#0A0E1A;
  --ls-text:#F4F5FA; --ls-muted:rgba(230,233,245,.62); --ls-hint:rgba(230,233,245,.38);
  --ls-hairline:rgba(255,255,255,.08); --ls-hairline-2:rgba(255,255,255,.14);
  --ls-sans:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ls-mono:'DM Mono','SF Mono',ui-monospace,monospace;
  --ls-r:10px; --ls-rl:16px; --ls-rxl:22px;
  font-family:var(--ls-sans);
  color:var(--ls-text);
  -webkit-font-smoothing:antialiased;
}

/* STAGE */
#login-screen .ls-stage {
  position:fixed; inset:0; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(20,26,50,.55), transparent 60%),
    radial-gradient(130% 100% at 50% 50%, #070910 0%, #03050A 70%, #000 100%);
}
#login-screen .ls-floor {
  position:absolute; left:0; right:0; bottom:0; height:62%;
  pointer-events:none; z-index:1;
  background:
    radial-gradient(60% 55% at 50% 100%, rgba(38,92,220,.55) 0%, rgba(20,50,140,.32) 30%, rgba(10,24,70,.12) 55%, transparent 75%),
    radial-gradient(90% 80% at 50% 120%, rgba(12,40,120,.65) 0%, transparent 55%);
  mix-blend-mode:screen; filter:saturate(1.1);
}
#login-screen .ls-rays {
  position:absolute; left:0; right:0; bottom:-5%; height:80%;
  pointer-events:none; z-index:2; opacity:.55;
  background: conic-gradient(from 250deg at 50% 110%,
    transparent 0deg, rgba(80,140,255,0) 18deg, rgba(80,140,255,.22) 22deg,
    transparent 26deg, transparent 42deg, rgba(80,140,255,.18) 46deg,
    transparent 50deg, transparent 66deg, rgba(120,170,255,.28) 70deg,
    transparent 74deg, transparent 85deg, rgba(80,140,255,.22) 88deg,
    transparent 92deg, transparent 100deg);
  -webkit-mask-image:linear-gradient(to top, black 0%, black 30%, transparent 85%);
          mask-image:linear-gradient(to top, black 0%, black 30%, transparent 85%);
  filter:blur(8px); mix-blend-mode:screen;
}
#login-screen .ls-horizon {
  position:absolute; left:0; right:0; bottom:7%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(120,170,255,.55) 30%, rgba(160,200,255,.75) 50%, rgba(120,170,255,.55) 70%, transparent);
  box-shadow:0 0 18px 2px rgba(100,160,255,.55), 0 0 70px 10px rgba(60,120,240,.35);
  z-index:3; pointer-events:none; filter:blur(.3px);
}
#login-screen .ls-stars { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.6; }
#login-screen .ls-stars i { position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; box-shadow:0 0 4px rgba(255,255,255,.55); }

/* GLOBE */
#login-screen .ls-globe-wrap {
  position:absolute; left:50%; top:8%;
  width:min(620px, 62vh); height:min(620px, 62vh);
  transform:translateX(-50%); z-index:4; pointer-events:none;
}
#login-screen .ls-globe-wrap::before {
  content:""; position:absolute; inset:-10%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,216,61,.28) 0%, rgba(245,196,0,.14) 28%, rgba(245,196,0,0) 60%);
  filter:blur(8px); pointer-events:none;
  animation:lsHalo 6s ease-in-out infinite;
}
@keyframes lsHalo { 0%,100%{ opacity:.85; } 50%{ opacity:1; } }
#login-screen .ls-globe { position:absolute; inset:0; }
#login-screen .ls-globe svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#login-screen .ls-globe .ls-bloom  { filter:blur(6px) saturate(1.2); opacity:.85; }
#login-screen .ls-globe .ls-bloom-2 { filter:blur(14px) saturate(1.1); opacity:.55; }
#login-screen .ls-globe-core {
  position:absolute; inset:0;
  background:radial-gradient(52% 52% at 50% 50%, rgba(255,216,61,.06) 0%, rgba(245,196,0,.02) 40%, transparent 62%);
  border-radius:50%; mix-blend-mode:screen;
}

/* VIEWPORT & CARD */
#login-screen .ls-viewport {
  position:relative; z-index:10;
  min-height:100vh; display:flex; align-items:flex-end; justify-content:center;
  padding:0 24px 7vh;
}
#login-screen .ls-card {
  width:100%; max-width:460px;
  position:relative; margin-top:54vh;
  padding:34px 34px 28px; border-radius:var(--ls-rxl);
  background:linear-gradient(180deg, rgba(24,30,50,.48) 0%, rgba(14,18,34,.62) 100%);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 30px 80px rgba(0,0,0,.55), 0 8px 30px rgba(10,20,60,.45);
  animation:lsCardIn .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lsCardIn { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
#login-screen .ls-card::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(110% 50% at 50% -20%, rgba(245,196,0,.18) 0%, rgba(245,196,0,0) 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(40,90,210,.28) 0%, rgba(40,90,210,0) 70%);
  mix-blend-mode:screen;
}
#login-screen .ls-card::after {
  content:""; position:absolute; left:12%; right:12%; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,216,61,.55), transparent);
  border-radius:2px;
}

/* BRAND */
#login-screen .ls-brand { display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
#login-screen .ls-vencom-logo {
  height:54px; width:auto; display:block; max-width:80%;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 10px rgba(80,180,255,.22)) drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
#login-screen .ls-heading { text-align:center; font:600 20px/1.2 var(--ls-sans); letter-spacing:-.005em; margin:0 0 6px; color:var(--ls-text); }
#login-screen .ls-sub { text-align:center; color:var(--ls-muted); font-size:13px; margin:0 0 22px; }

/* FIELDS */
#login-screen .ls-field { margin-bottom:12px; }
#login-screen .ls-field label {
  display:flex; align-items:center; justify-content:space-between;
  font:600 10px/1 var(--ls-sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ls-hint); margin-bottom:6px;
}
#login-screen .ls-field label a { color:var(--ls-yellow); text-decoration:none; font-weight:600; letter-spacing:.02em; text-transform:none; font-size:11px; }
#login-screen .ls-field label a:hover { color:var(--ls-yellow-glow); }
#login-screen .ls-inputwrap { position:relative; display:flex; align-items:center; }
#login-screen .ls-lead {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--ls-hint); pointer-events:none; display:flex; transition:color .15s linear;
}
#login-screen .ls-inputwrap input {
  width:100%; font-family:var(--ls-sans); font-size:14px; color:var(--ls-text);
  background:rgba(10,14,28,.55); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--ls-r); padding:13px 46px 13px 42px; outline:none;
  transition:border-color .18s ease, background .18s ease, box-shadow .2s ease;
}
#login-screen .ls-inputwrap input::placeholder { color:var(--ls-hint); }
#login-screen .ls-inputwrap input:focus {
  border-color:rgba(245,196,0,.55); background:rgba(12,18,34,.72);
  box-shadow:0 0 0 3px rgba(245,196,0,.12), 0 0 18px rgba(245,196,0,.10) inset;
}
#login-screen .ls-inputwrap:has(input:focus) .ls-lead { color:var(--ls-yellow); }
#login-screen .ls-inputwrap input.bad { border-color:rgba(229,72,72,.6); background:rgba(80,20,20,.22); }
#login-screen .ls-toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer; color:var(--ls-muted);
  padding:8px; border-radius:6px; display:flex; align-items:center; justify-content:center;
}
#login-screen .ls-toggle:hover { background:rgba(255,255,255,.06); color:var(--ls-text); }

/* REMEMBER ROW */
#login-screen .ls-rowopts { display:flex; align-items:center; gap:12px; margin:10px 0 20px; }
#login-screen .ls-check { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:12px; color:var(--ls-muted); }
#login-screen .ls-check input { position:absolute; opacity:0; pointer-events:none; }
#login-screen .ls-box { width:16px; height:16px; border:1.5px solid rgba(255,255,255,.24); border-radius:4px; display:inline-flex; align-items:center; justify-content:center; background:rgba(10,14,28,.5); transition:.15s linear; flex-shrink:0; }
#login-screen .ls-check input:checked + .ls-box { background:var(--ls-yellow); border-color:var(--ls-yellow); box-shadow:0 0 10px rgba(245,196,0,.55); }
#login-screen .ls-check input:checked + .ls-box::after { content:""; width:4px; height:8px; border:solid #0B0B10; border-width:0 2px 2px 0; transform:rotate(45deg); margin-top:-2px; }
#login-screen .ls-check:hover .ls-box { border-color:rgba(245,196,0,.55); }

/* CTA */
#login-screen .ls-cta {
  width:100%; padding:14px 18px;
  background:linear-gradient(180deg, #FFD83D 0%, #F5C400 100%);
  color:#0A0A10; border:1px solid rgba(255,216,61,.8); border-radius:var(--ls-r);
  font:700 13px/1 var(--ls-sans); letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
  display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden;
  box-shadow:0 10px 26px rgba(245,196,0,.28), 0 0 24px rgba(245,196,0,.32), inset 0 1px 0 rgba(255,255,255,.45);
}
#login-screen .ls-cta:hover { filter:brightness(1.05); box-shadow:0 12px 32px rgba(245,196,0,.40), 0 0 32px rgba(245,196,0,.50), inset 0 1px 0 rgba(255,255,255,.5); }
#login-screen .ls-cta:active { transform:scale(.985); }
#login-screen .ls-cta[disabled] { opacity:.85; cursor:progress; }
#login-screen .ls-spinner { width:14px; height:14px; border-radius:50%; border:2px solid rgba(10,10,16,.25); border-top-color:#0A0A10; animation:lsSpin .7s linear infinite; display:none; }
#login-screen .ls-cta.loading .ls-spinner { display:inline-block; }
#login-screen .ls-cta.loading .label::after { content:"…"; }
@keyframes lsSpin { to { transform:rotate(360deg); } }

/* DIVIDER */
#login-screen .ls-divider { display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:var(--ls-hint); font:600 10px/1 var(--ls-sans); letter-spacing:.18em; }
#login-screen .ls-divider::before, #login-screen .ls-divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); }

/* SSO */
#login-screen .ls-sso { width:100%; padding:12px 16px; background:rgba(255,255,255,.04); color:var(--ls-text); border:1px solid rgba(255,255,255,.14); border-radius:var(--ls-r); font:600 13px/1 var(--ls-sans); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:background .15s ease, border-color .15s ease; }
#login-screen .ls-sso:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); }

/* INLINE ALERTS */
#login-screen .inline { margin:0 0 14px; padding:10px 12px; border-radius:var(--ls-r); font-size:12px; line-height:1.45; display:flex; align-items:flex-start; gap:8px; animation:lsCardIn .25s ease both; }
#login-screen .inline.err  { background:rgba(229,72,72,.10); color:#FFBFBF; border:1px solid rgba(229,72,72,.28); }
#login-screen .inline.warn { background:rgba(245,196,0,.10); color:#FFE28A; border:1px solid rgba(245,196,0,.28); }
#login-screen .inline.ok   { background:rgba(48,192,111,.10); color:#9EF2C0; border:1px solid rgba(48,192,111,.28); }
#login-screen .inline .dot { width:6px; height:6px; border-radius:50%; background:currentColor; margin-top:5px; flex-shrink:0; }

/* CARD FOOTER */
#login-screen .ls-cardfoot { text-align:center; color:var(--ls-muted); font-size:12px; margin-top:16px; }
#login-screen .ls-cardfoot a { color:var(--ls-yellow); text-decoration:none; font-weight:600; }
#login-screen .ls-cardfoot a:hover { color:var(--ls-yellow-glow); }

/* STATUS + FOOTER STRIPS */
#login-screen .ls-statusline { position:fixed; left:24px; bottom:20px; z-index:12; display:flex; gap:18px; align-items:center; color:var(--ls-muted); font-size:11px; font-family:var(--ls-sans); }
#login-screen .ls-pulse { display:inline-block; width:6px; height:6px; border-radius:50%; background:#30C06F; box-shadow:0 0 0 0 rgba(48,192,111,.55); animation:lsPulseDot 1.6s ease-out infinite; margin-right:6px; }
@keyframes lsPulseDot {
  0%  { box-shadow:0 0 0 0 rgba(48,192,111,.55); }
  70% { box-shadow:0 0 0 8px rgba(48,192,111,0); }
  100%{ box-shadow:0 0 0 0 rgba(48,192,111,0); }
}
#login-screen .ls-val { font-family:var(--ls-mono); color:var(--ls-text); }
#login-screen .ls-sep { width:1px; height:12px; background:var(--ls-hairline-2); }
#login-screen .ls-footright { position:fixed; right:24px; bottom:20px; z-index:12; display:flex; gap:14px; align-items:center; color:var(--ls-muted); font-size:11px; font-family:var(--ls-sans); }
#login-screen .ls-topchip { position:fixed; top:22px; left:24px; z-index:12; display:flex; align-items:center; gap:10px; color:var(--ls-muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-family:var(--ls-sans); }
#login-screen .ls-topchip .ls-sic { height:28px; padding:2px 8px; background:rgba(255,255,255,.04); border:1px solid var(--ls-hairline-2); border-radius:6px; display:flex; align-items:center; }
#login-screen .ls-topchip .ls-sic img { height:20px; width:auto; display:block; mix-blend-mode:screen; }

@media(max-width:640px){
  #login-screen .ls-globe-wrap { width:min(440px,70vw); height:min(440px,70vw); top:5%; }
  #login-screen .ls-card { margin-top:60vh; padding:28px 22px 22px; }
  #login-screen .ls-statusline, #login-screen .ls-footright, #login-screen .ls-topchip { font-size:10px; }
}