/* Login wall. Builds on base.css tokens. */
.lg { min-height: 100vh; }
.lg-wrap { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); min-height: 100vh; }

/* ── brand panel */
.lg-brand {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 48px 48px 40px; border-right: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(236, 48, 19, .16), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(236, 48, 19, .07), transparent 60%),
    linear-gradient(160deg, #150e0d 0%, #0f0b0b 60%, #0c0b0b 100%);
}
/* speed-lines: a fine diagonal hatch plus a few longer streaks */
.lg-brand::before {
  content: ""; position: absolute; inset: -20%; z-index: -2; opacity: .55;
  background: repeating-linear-gradient(-28deg, transparent 0 22px, rgba(236, 48, 19, .07) 22px 23px, transparent 23px 61px, rgba(236, 48, 19, .04) 61px 62px);
  -webkit-mask-image: linear-gradient(110deg, #000 0%, rgba(0,0,0,.7) 45%, transparent 85%);
          mask-image: linear-gradient(110deg, #000 0%, rgba(0,0,0,.7) 45%, transparent 85%);
}
.lg-lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lg-lines i {
  position: absolute; height: 2px; width: 46%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(236, 48, 19, .55) 70%, rgba(255, 140, 110, .9));
  transform: rotate(-28deg); transform-origin: left center; opacity: 0;
  animation: lg-streak 6.5s cubic-bezier(.5, 0, .2, 1) infinite;
}
.lg-lines i:nth-child(1) { left: -10%; top: 78%; animation-delay: .2s; }
.lg-lines i:nth-child(2) { left: 4%; top: 96%; width: 32%; animation-delay: 1.6s; }
.lg-lines i:nth-child(3) { left: 30%; top: 104%; width: 54%; animation-delay: 3.1s; height: 1px; }
.lg-lines i:nth-child(4) { left: -18%; top: 58%; width: 38%; animation-delay: 4.4s; height: 1px; }
.lg-lines i:nth-child(5) { left: 46%; top: 88%; width: 40%; animation-delay: 5.3s; }
@keyframes lg-streak {
  0% { opacity: 0; translate: -18% 0; }
  12% { opacity: .9; }
  38% { opacity: 0; translate: 26% 0; }
  100% { opacity: 0; translate: 26% 0; }
}

.lg-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; width: 100%; }
.lg-logo { width: min(520px, 88%); height: auto; }
.lg-tag { margin: 0; font-size: clamp(15px, 1.35vw, 19px); color: var(--fg); letter-spacing: .01em; }
.lg-tag span { color: var(--red); margin: 0 4px; }

.lg-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; color: var(--mute); font-size: 13.5px; }
.lg-trust li { display: flex; align-items: center; gap: 10px; max-width: 220px; line-height: 1.3; }
.lg-trust svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── form side */
.lg-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 48px 28px 28px; background: radial-gradient(80% 60% at 50% 40%, #141010, var(--bg)); }
.lg-card {
  width: min(420px, 100%); display: grid; gap: 18px; padding: 40px 36px 30px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  position: relative; isolation: isolate;
}
/* light reflection travelling around the card border */
@property --lg-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lg-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--lg-ang), transparent 0deg 250deg, rgba(236, 48, 19, .35) 285deg, #ff6a45 318deg, #ffd2c4 330deg, #ff6a45 342deg, rgba(236, 48, 19, .35) 352deg, transparent 360deg);
  animation: lg-spin 5.5s linear infinite;
}
.lg-card::before {
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes lg-spin { to { --lg-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .lg-card::before { animation: none; --lg-ang: 300deg; }
}
.lg-card h1 { margin: 0; text-align: center; font: 400 40px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.lg-sub { margin: -8px 0 6px; text-align: center; color: var(--mute); font-size: 14px; }
.lg-card .field label { color: var(--fg); font-weight: 500; font-size: 13.5px; }
.lg-card .input { height: 46px; padding: 0 14px; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.lg-card .input::placeholder { color: var(--dim); }
.lg-card .input:focus { box-shadow: 0 0 0 3px var(--red-soft); }
.lg-card .input[aria-invalid="true"] { border-color: var(--red); }
.lg-pass { position: relative; }
.lg-pass .input { padding-right: 48px; }
.lg-eye { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--mute); cursor: pointer; }
.lg-eye:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.lg-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lg-eye .lg-eye-off, .lg-eye[aria-pressed="true"] .lg-eye-on { display: none; }
.lg-eye[aria-pressed="true"] .lg-eye-off { display: block; }
.lg-caps { margin: 2px 0 0; font-size: 12.5px; color: var(--warn); }
.lg-err { margin: -4px 0 -4px; min-height: 0; color: #ff6a52; font-size: 13.5px; line-height: 1.4; }
.lg-err:empty { display: none; }
.lg-err:not(:empty) { padding: 10px 12px; border: 1px solid rgba(236, 48, 19, .35); border-radius: 8px; background: var(--red-soft); }
.lg-go { height: 48px; justify-content: center; font-size: 15.5px; font-weight: 700; letter-spacing: .02em; margin-top: 4px; }
.lg-go:disabled { opacity: .85; cursor: progress; }
.lg-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: lg-rot .7s linear infinite; }
.lg-go.is-busy .lg-spin { display: inline-block; }
@keyframes lg-rot { to { transform: rotate(360deg); } }
.lg-foot { margin: 2px 0 0; text-align: center; color: var(--mute); font-size: 13px; }
.lg-legal { margin: 0; color: var(--dim); font-size: 12px; }
.lg-shake { animation: lg-shake .32s ease-in-out; }
@keyframes lg-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }

@media (max-width: 900px) {
  .lg-wrap { grid-template-columns: 1fr; }
  .lg-brand { border-right: 0; border-bottom: 1px solid var(--line); padding: 36px 20px 26px; gap: 26px; }
  .lg-hero { gap: 14px; }
  .lg-logo { width: min(300px, 76%); }
  .lg-trust { gap: 10px 22px; font-size: 12.5px; }
  .lg-trust li { max-width: none; }
  .lg-side { justify-content: flex-start; padding: 28px 16px 24px; }
  .lg-card { padding: 30px 22px 24px; }
  .lg-card h1 { font-size: 34px; }
}
@media (max-width: 520px) {
  .lg-trust { flex-direction: column; align-items: flex-start; }
}