/* Primelectrics sign-in.

   Two halves: who we are on the left, the form on the right. On a phone the
   brand half goes — someone signing in on site wants the form, not the pitch.

   Light and dark both live here because this is the one page people see
   before the portal's own theme applies. */

:root, .lg-body[data-theme="dark"] {
  --lg-bg: #05070c;
  --lg-bg-2: #080d16;
  --lg-panel: rgba(13,19,31,.78);
  --lg-line: rgba(255,255,255,.09);
  --lg-line-2: rgba(255,255,255,.14);
  --lg-text: #e9eef7;
  --lg-dim: #93a2ba;
  --lg-faint: #64748b;
  --lg-field: rgba(6,10,18,.72);
  --lg-accent: #2f7df6;
  --lg-accent-2: #1d5fd4;
  --lg-shadow: 0 40px 120px rgba(0,0,0,.7);
}
.lg-body[data-theme="light"] {
  --lg-bg: #eef2f8;
  --lg-bg-2: #ffffff;
  --lg-panel: rgba(255,255,255,.92);
  --lg-line: rgba(16,24,40,.12);
  --lg-line-2: rgba(16,24,40,.2);
  --lg-text: #101828;
  --lg-dim: #475467;
  --lg-faint: #667085;
  --lg-field: #ffffff;
  --lg-accent: #1d6ef0;
  --lg-accent-2: #1552bd;
  --lg-shadow: 0 30px 80px rgba(16,24,40,.16);
}

.lg-body {
  min-height: 100vh; margin: 0; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 620px at 18% -10%, rgba(47,125,246,.16), transparent 62%),
    radial-gradient(900px 520px at 100% 110%, rgba(47,125,246,.10), transparent 60%),
    var(--lg-bg);
  color: var(--lg-text);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lg-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 22px; padding: 32px 24px 22px; }

.lg-shell {
  width: 100%; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.02fr .98fr;
  background: linear-gradient(180deg, var(--lg-panel), color-mix(in srgb, var(--lg-panel) 88%, transparent));
  border: 1px solid var(--lg-line); border-radius: 22px; box-shadow: var(--lg-shadow);
  overflow: hidden; backdrop-filter: blur(8px);
}

/* ── Brand half ───────────────────────────────────────────────────────────
   Always dark, in both themes: the logo is drawn with a glow that needs a
   dark ground, and it is the mark we hand customers on their certificates. */
.lg-brand { padding: 46px 48px; border-right: 1px solid rgba(255,255,255,.09); min-width: 0;
  background:
    radial-gradient(620px 380px at 22% 8%, rgba(47,125,246,.20), transparent 64%),
    linear-gradient(160deg, #070d18, #04070d);
  color: #e9eef7; }
.lg-brand .lg-blurb { color: #93a2ba; }
.lg-brand .lg-points span { color: #7b8ba3; }
.lg-brand .lg-ico { color: #6aa6ff; background: rgba(47,125,246,.14); border-color: rgba(47,125,246,.30); }
.lg-brand .lg-headline span { color: #4d93ff; }
/* The full lockup, on the brand panel's own dark ground — no plate or border
   around it: the artwork carries its own keyline. */
.lg-brand-logo { display: block; width: 100%; max-width: 360px; height: auto;
  margin-bottom: 34px; }
.lg-headline { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 34px; line-height: 1.22;
  font-weight: 700; letter-spacing: -.8px; margin: 0 0 16px; }
.lg-headline span { color: var(--lg-accent); }
.lg-blurb { font-size: 14px; line-height: 1.65; color: var(--lg-dim); margin: 0 0 30px; max-width: 46ch; }

.lg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lg-points li { display: flex; gap: 14px; align-items: flex-start; }
.lg-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--lg-accent); background: color-mix(in srgb, var(--lg-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lg-accent) 26%, transparent); }
.lg-ico svg { width: 19px; height: 19px; }
.lg-points b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.lg-points span { font-size: 12.5px; color: var(--lg-faint); line-height: 1.5; }

/* ── Form half ──────────────────────────────────────────────────────────── */
.lg-panel { position: relative; padding: 46px 48px; display: flex; flex-direction: column;
  justify-content: center; min-width: 0; }
.lg-panel-logo { display: none; width: 250px; margin: 0 auto 22px; }

.lg-title { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 27px; font-weight: 700;
  letter-spacing: -.5px; margin: 0 0 6px; }
.lg-sub { font-size: 13.5px; color: var(--lg-dim); margin: 0 0 26px; }

.lg-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--lg-faint); margin-bottom: 8px; }
.lg-input { position: relative; margin-bottom: 18px; }
.lg-input-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--lg-faint); pointer-events: none; }
.lg-input input {
  width: 100%; box-sizing: border-box; height: 52px; padding: 0 46px;
  background: var(--lg-field); border: 1px solid var(--lg-line-2); border-radius: 12px;
  color: var(--lg-text); font-size: 14.5px; font-family: inherit; outline: none; transition: .16s;
}
.lg-input input::placeholder { color: var(--lg-faint); }
.lg-input input:focus { border-color: var(--lg-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-accent) 18%, transparent); }
.lg-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  border: 0; background: none; color: var(--lg-faint); cursor: pointer; border-radius: 9px;
  display: grid; place-items: center; transition: .15s; }
.lg-eye svg { width: 18px; height: 18px; }
.lg-eye:hover { color: var(--lg-text); }
.lg-eye.on { color: var(--lg-accent); }

.lg-remember { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--lg-dim);
  cursor: pointer; user-select: none; margin: 2px 0 24px; }
.lg-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-check { width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid var(--lg-line-2);
  flex: none; position: relative; transition: .15s; }
.lg-remember input:checked + .lg-check { background: var(--lg-accent); border-color: var(--lg-accent); }
.lg-remember input:checked + .lg-check::after { content: ""; position: absolute; left: 5.5px; top: 2px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lg-remember input:focus-visible + .lg-check { box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-accent) 22%, transparent); }

.lg-btn { width: 100%; height: 54px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--lg-accent), var(--lg-accent-2)); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .2px;
  display: flex; align-items: center; justify-content: center; gap: 10px; transition: .16s;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--lg-accent) 70%, transparent); }
.lg-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.lg-btn:active { transform: none; }
.lg-btn-ico { width: 17px; height: 17px; }
.lg-btn.loading { pointer-events: none; opacity: .8; }
.lg-btn.loading .lg-btn-ico { display: none; }
.lg-spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: lg-spin .7s linear infinite; }
.lg-btn.loading .lg-spin { display: block; }
@keyframes lg-spin { to { transform: rotate(360deg); } }

.lg-hint { font-size: 12px; color: var(--lg-faint); line-height: 1.55; margin: 0 0 18px; }
.lg-foot-line { text-align: center; font-size: 13px; color: var(--lg-dim); margin: 20px 0 0; }
.lg-foot-line a { color: var(--lg-accent); font-weight: 600; text-decoration: none; }
.lg-foot-line a:hover { text-decoration: underline; }

.lg-alert { font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: 11px; margin-bottom: 20px; }
.lg-alert.error { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.32); color: #f87171; }
.lg-alert.ok { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.32); color: #34d399; }

/* ── Theme switch ───────────────────────────────────────────────────────── */
.lg-theme { position: absolute; top: 22px; right: 24px; width: 68px; height: 32px; padding: 0 6px;
  border-radius: 999px; border: 1px solid var(--lg-line-2); background: var(--lg-field);
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.lg-theme-ico { display: grid; place-items: center; width: 20px; height: 20px; color: var(--lg-faint); z-index: 1; }
.lg-theme-ico svg { width: 14px; height: 14px; }
.lg-body[data-theme="light"] .lg-theme-ico.sun,
.lg-body[data-theme="dark"] .lg-theme-ico.moon { color: #fff; }
.lg-theme-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, var(--lg-accent), var(--lg-accent-2)); transition: transform .2s ease; }
.lg-body[data-theme="dark"] .lg-theme-knob { transform: translateX(34px); }

.lg-legal { text-align: center; font-size: 11.5px; color: var(--lg-faint); line-height: 1.7; padding-bottom: 6px; }

/* ── Smaller screens ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .lg-shell { grid-template-columns: 1fr; max-width: 520px; }
  .lg-brand { display: none; }
  .lg-panel-logo { display: block; }
  .lg-panel { padding: 38px 30px; }
}
@media (max-height: 780px) and (min-width: 1081px) {
  .lg-brand, .lg-panel { padding: 32px 40px; }
  .lg-brand-logo { max-width: 290px; margin-bottom: 22px; }
  .lg-headline { font-size: 28px; }
  .lg-blurb { margin-bottom: 20px; }
  .lg-points { gap: 12px; }
}