/* Sign-in page (v5.34.9): the live meter beside the form. Loaded only by views/auth/login.ejs,
   after dark.css, so the dark-mode rules at the end of this file are written by hand
   (scripts/build-dark-css.js does not read this file). */
.lg {
  --lg-ink: #0b1f4d; --lg-soft: #4a5875; --lg-field: #f6f8fc; --lg-field-line: #d9e0ec;
  --lg-hero-a: #0a1a42; --lg-hero-b: #13348c; --lg-hero-c: #0b6b78;
  position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  max-width: 1060px; margin: 6px auto 8px; border-radius: 28px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 40px 90px -50px rgba(13, 35, 90, 0.55), 0 12px 30px -22px rgba(13, 35, 90, 0.35);
  animation: lg-in 0.7s cubic-bezier(.2, .8, .2, 1) both;
}
.lg-org { --lg-hero-a: color-mix(in srgb, var(--brand) 55%, #050b1c); --lg-hero-b: color-mix(in srgb, var(--brand) 85%, #0b1f4d); --lg-hero-c: color-mix(in srgb, var(--brand) 50%, #0b6b78); }
@keyframes lg-in { from { opacity: 0; transform: translateY(18px) scale(0.985); } }

/* ---- The picture side ---- */
.lg-hero { position: relative; overflow: hidden; color: #fff; padding: 40px 40px 36px; min-height: 600px;
  background: radial-gradient(120% 90% at 0% 0%, var(--lg-hero-b), transparent 60%), radial-gradient(90% 80% at 100% 100%, var(--lg-hero-c), transparent 65%), var(--lg-hero-a); }
.lg-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 80% at 30% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(120% 80% at 30% 20%, #000 20%, transparent 75%); }
.lg-aurora span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: lg-drift 16s ease-in-out infinite alternate; }
.lg-aurora span:nth-child(1) { width: 340px; height: 340px; background: #2563eb; top: -120px; right: -80px; }
.lg-aurora span:nth-child(2) { width: 300px; height: 300px; background: #14b8a6; bottom: -120px; left: -90px; animation-delay: -5s; }
.lg-aurora span:nth-child(3) { width: 220px; height: 220px; background: #84cc16; top: 45%; right: 10%; opacity: 0.22; animation-delay: -10s; }
.lg-org .lg-aurora span:nth-child(1) { background: var(--brand); }
@keyframes lg-drift { to { transform: translate(-40px, 30px) scale(1.15); } }
.lg-hero { display: flex; flex-direction: column; }
.lg-hero-in { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding-bottom: 84px; }

.lg-kicker { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(6px); }
.lg-ping { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: lg-ping 1.8s infinite; }
@keyframes lg-ping { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } }
.lg-title { margin: 0 0 26px; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; }
.lg-rot { display: inline-block; height: 1.18em; overflow: hidden; vertical-align: bottom; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.lg-rot-in { display: flex; flex-direction: column; animation: lg-rot 9s cubic-bezier(.7, 0, .2, 1) infinite; }
.lg-rot-in span { height: 1.18em; background: linear-gradient(90deg, #7dd3fc, #5eead4 45%, #bef264); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
@keyframes lg-rot { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-1.18em); } 66%, 94% { transform: translateY(-2.36em); } 100% { transform: translateY(-3.54em); } }

/* The meter card */
.lg-meter { --v: 86; position: relative; align-self: flex-start; width: min(100%, 340px); padding: 18px 20px 18px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: lg-rise 0.8s 0.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lg-rise { from { opacity: 0; transform: translateY(24px); } }
.lg-gauge { display: block; width: 100%; height: auto; overflow: visible; }
.lg-track, .lg-arc { fill: none; stroke-width: 14; stroke-linecap: round; }
.lg-track { stroke: rgba(255, 255, 255, 0.12); }
.lg-arc { stroke: url(#lgArc); stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--v)); filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.45));
  transition: stroke-dashoffset 1.4s cubic-bezier(.3, 1.3, .4, 1); }
.lg-ticks line { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; stroke-linecap: round; }
.lg-needle { transform-origin: 120px 120px; transform: rotate(calc(var(--v) * 1.8deg - 90deg)); transition: transform 1.4s cubic-bezier(.3, 1.45, .45, 1); }
.lg-needle path { fill: #fff; }
.lg-needle circle { fill: #fff; }
.lg-needle .lg-hub { fill: var(--lg-hero-b); }
.lg-readout { display: flex; flex-direction: column; align-items: center; margin-top: 4px; line-height: 1.1; }
.lg-readout b { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lg-readout b::after { content: "%"; font-size: 0.5em; margin-left: 2px; opacity: 0.7; }
.lg-readout small { margin-top: 4px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); font-weight: 600; transition: opacity 0.3s; }
.lg-bars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.lg-bars li { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.82); }
.lg-bars span { transition: opacity 0.3s; }
.lg-bars i { display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.lg-bars em { display: block; height: 100%; width: calc(var(--w) * 1%); border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #2dd4bf, #a3e635); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.lg-bars li:nth-child(2) em { transition-delay: 0.1s; }
.lg-bars li:nth-child(3) em { transition-delay: 0.2s; }
.is-swapping .lg-readout small, .is-swapping .lg-bars span { opacity: 0; }

/* Floating cards */
.lg-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 16px; color: #0b1f4d;
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); font-size: 0.8rem; line-height: 1.25;
  animation: lg-pop 0.6s cubic-bezier(.2, 1.4, .4, 1) both, lg-bob 6s ease-in-out infinite; }
.lg-chip b { display: block; font-weight: 700; }
.lg-chip small { color: #56627c; }
.lg-chip-1 { right: -6px; top: 47%; animation-delay: 0.9s, 1.5s; }
.lg-chip-2 { right: 18px; bottom: 6px; animation-delay: 1.2s, 0.4s; }
.lg-chip-3 { left: 0; bottom: 14px; animation-delay: 1.5s, 2.6s; }
@keyframes lg-pop { from { opacity: 0; transform: translateY(16px) scale(0.85); } }
@keyframes lg-bob { 50% { translate: 0 -7px; } }
.lg-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none; }
.lg-ico svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lg-ico-gold { background: linear-gradient(135deg, #fbbf24, #f97316); }
.lg-ico-green { background: linear-gradient(135deg, #22c55e, #0d9488); }
.lg-ico-blue { background: linear-gradient(135deg, #3b82f6, #6366f1); }

/* ---- The form side ---- */
.lg-form { position: relative; padding: 44px 46px 34px; display: flex; flex-direction: column; justify-content: center; color: var(--lg-ink); }
.lg-brand { margin-bottom: 18px; }
.lg-mark { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 35, 90, 0.08), 0 14px 30px -14px rgba(29, 78, 216, 0.55); position: relative; }
.lg-mark::before { content: ""; position: absolute; inset: -3px; border-radius: 20px; padding: 2px; z-index: -1;
  background: conic-gradient(from var(--lg-spin, 0deg), #3b82f6, #14b8a6, #84cc16, #facc15, #f97316, #3b82f6); animation: lg-spin 6s linear infinite; }
@property --lg-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes lg-spin { to { --lg-spin: 360deg; } }
.lg-mark img { width: 40px; height: 40px; }
.lg-logo { display: block; max-height: 48px; max-width: 200px; width: auto; height: auto; }
.lg-orgname { font-weight: 800; font-size: 1.2rem; color: var(--brand); }
.lg-form h1 { margin: 0 0 6px; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; color: var(--lg-ink); }
.lg-sub { margin: 0 0 22px; color: var(--lg-soft); font-size: 0.95rem; }
.lg-fields { display: grid; gap: 14px; }
.lg-field { font-size: 0.86rem; font-weight: 700; color: var(--lg-ink); gap: 6px; }
.lg-input { position: relative; display: block; }
.lg-input > svg { position: absolute; left: 14px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; fill: none; stroke: #8391ab; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke 0.2s; }
.lg-input input { height: 50px; padding: 0 14px 0 44px; border-radius: 14px; border: 1.5px solid var(--lg-field-line); background: var(--lg-field); font-size: 1rem; font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.lg-input input::placeholder { color: #9aa6bd; font-weight: 400; }
.lg-input input:hover { border-color: #b8c3d8; }
.lg-input input:focus { outline: none; border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.lg-input:focus-within > svg { stroke: var(--brand); }
.lg-input input[data-pw] { padding-right: 50px; }
.lg-eye { position: absolute; right: 6px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; display: grid; place-items: center; color: #7a88a3; }
.lg-eye[hidden] { display: none; }
.lg-eye:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); }
.lg-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-eye .lg-eye-x { stroke-dasharray: 23; stroke-dashoffset: 23; transition: stroke-dashoffset 0.25s; }
.lg-eye[aria-pressed="true"] .lg-eye-x { stroke-dashoffset: 0; }
.lg-forgot { display: flex; justify-content: flex-end; margin-top: -4px; font-size: 0.86rem; }
.lg-forgot a { font-weight: 600; text-decoration: none; }
.lg-forgot a:hover { text-decoration: underline; }
.lg-submit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin-top: 4px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 1.02rem; font-weight: 700; color: #fff;
  background: linear-gradient(100deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #0d9488));
  box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--brand) 85%, transparent); transition: transform 0.2s, box-shadow 0.2s; }
.lg-org .lg-submit { background: var(--brand); }
.lg-submit::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); animation: lg-shine 4.5s 1.6s ease-in-out infinite; }
@keyframes lg-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.lg-submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s; }
.lg-submit:hover { transform: translateY(-1px); box-shadow: 0 20px 34px -16px color-mix(in srgb, var(--brand) 95%, transparent); }
.lg-submit:hover svg { transform: translateX(4px); }
.lg-submit:active { transform: translateY(1px); }
.lg-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.lg-submit.is-busy { pointer-events: none; }
.lg-submit.is-busy svg { animation: lg-go 0.8s ease-in-out infinite; }
@keyframes lg-go { 50% { transform: translateX(6px); } }
.lg-note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 0.85rem; color: var(--lg-soft); }
.lg-note svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; font-size: 0.8rem; font-weight: 700; color: var(--lg-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lg-new { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.lg-new a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.lg-new b { font-size: 0.92rem; }
.lg-new small { font-size: 0.76rem; line-height: 1.3; }
.lg-new-main { color: #0b2a63; background: linear-gradient(120deg, #e3edff, #dcfaf3); border: 1px solid #c7dafc; }
.lg-new-main small { color: #3b5683; }
.lg-new-alt { color: var(--lg-ink); border: 1px solid var(--line); background: var(--card); }
.lg-new-alt small { color: var(--lg-soft); }
.lg-new a:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(13, 35, 90, 0.6); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.lg-legal { margin: 20px 0 0; font-size: 0.76rem; color: var(--muted); text-align: center; line-height: 1.5; }
.lg .flash { margin: 0 0 14px; border-radius: 12px; }

/* ---- Compact on computers (v5.34.15): the whole card fits a laptop screen without scrolling ---- */
.lg-line { white-space: nowrap; }
@media (min-width: 901px) {
  .lg { max-width: 980px; margin: 0 auto; border-radius: 24px; }
  .lg-hero { min-height: 0; padding: 26px 32px 22px; }
  .lg-hero-in { padding-bottom: 46px; }
  .lg-kicker { margin-bottom: 12px; font-size: 0.7rem; padding: 5px 11px; }
  .lg-title { margin-bottom: 16px; font-size: clamp(1.45rem, 2.1vw, 1.85rem); }
  .lg-meter { width: min(100%, 250px); padding: 12px 16px 14px; border-radius: 18px; }
  .lg-readout b { font-size: 1.8rem; }
  .lg-readout small { font-size: 0.75rem; margin-top: 2px; }
  .lg-bars { margin-top: 10px; gap: 6px; }
  .lg-bars li { grid-template-columns: 96px 1fr; font-size: 0.72rem; }
  .lg-chip { padding: 7px 12px 7px 7px; font-size: 0.82rem; }
  .lg-ico { width: 28px; height: 28px; border-radius: 9px; }
  .lg-ico svg { width: 16px; height: 16px; }
  .lg-chip-2 { bottom: 0; }
  .lg-chip-3 { bottom: 8px; }
  .lg-form { padding: 22px 38px 16px; }
  .lg-brand { display: none; }
  .lg-form h1 { font-size: 1.5rem; margin-bottom: 4px; }
  .lg-sub { margin-bottom: 14px; font-size: 0.86rem; }
  .lg-fields { gap: 10px; }
  .lg-input input { height: 44px; }
  .lg-submit { height: 46px; margin-top: 2px; }
  .lg-note { margin-top: 12px; font-size: 0.82rem; }
  .lg-or { margin: 12px 0 8px; }
  .lg-new a { padding: 9px 12px; justify-content: center; }
  .lg-new small { display: none; }
  .lg-new b { font-size: 0.86rem; white-space: nowrap; }
  .lg-legal { margin-top: 10px; font-size: 0.7rem; line-height: 1.4; }
}
.page:has(> .lg) { padding-top: 10px; padding-bottom: 10px; }

/* ---- Tablets and phones ---- */
@media (max-width: 900px) {
  .lg { grid-template-columns: 1fr; max-width: 560px; border-radius: 24px; }
  .lg-hero { min-height: 0; padding: 22px 22px 20px; }
  .lg-hero-in { padding-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-template-areas: "kick meter" "title meter"; column-gap: 14px; align-items: start; }
  .lg-kicker { grid-area: kick; margin-bottom: 10px; font-size: 0.68rem; padding: 5px 10px; }
  .lg-title { grid-area: title; margin: 0; font-size: 1.32rem; }
  .lg-meter { grid-area: meter; width: 150px; padding: 10px 10px 8px; border-radius: 18px; }
  .lg-readout { margin-top: 2px; }
  .lg-readout b { font-size: 1.5rem; }
  .lg-readout small { font-size: 0.66rem; margin-top: 1px; text-align: center; }
  .lg-bars, .lg-chip { display: none; }
  .lg-form { padding: 26px 22px 24px; }
  .lg-brand { display: none; }
  .lg-form h1 { font-size: 1.45rem; }
  .lg-sub { margin-bottom: 18px; font-size: 0.9rem; }
}
@media (max-width: 600px) {
  .page:has(> .lg) { padding: 12px 12px 4px; }
}
@media (max-width: 420px) {
  .lg-hero-in { grid-template-columns: minmax(0, 1fr) 120px; }
  .lg-meter { width: 120px; }
  .lg-title { font-size: 1.15rem; }
  .lg-new { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lg, .lg *, .lg *::before, .lg *::after { animation: none !important; transition: none !important; }
}

/* ---- Dark mode ---- */
[data-theme="dark"] .lg { --lg-ink: #e6ecf7; --lg-soft: #9fabc2; --lg-field: #0f1623; --lg-field-line: #2b3649;
  --lg-hero-a: #060d1f; --lg-hero-b: #11286b; --lg-hero-c: #0a4c57;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(125, 168, 255, 0.05); }
[data-theme="dark"] .lg-org { --lg-hero-a: color-mix(in srgb, var(--brand) 30%, #03060f); --lg-hero-b: color-mix(in srgb, var(--brand) 60%, #060d1f); --lg-hero-c: color-mix(in srgb, var(--brand) 30%, #0a4c57); }
[data-theme="dark"] .lg-chip { background: rgba(20, 28, 44, 0.92); color: #e6ecf7; border: 1px solid rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .lg-chip small { color: #9fabc2; }
[data-theme="dark"] .lg-mark { background: #f3f6fb; }
[data-theme="dark"] .lg-input input { border-color: var(--lg-field-line); background: var(--lg-field); color: var(--lg-ink); }
[data-theme="dark"] .lg-input input:hover { border-color: #3c4a62; }
[data-theme="dark"] .lg-input input:focus { background: #121a29; border-color: #6d98ff; box-shadow: 0 0 0 4px rgba(109, 152, 255, 0.18); }
[data-theme="dark"] .lg-input:focus-within > svg { stroke: #7fa8ff; }
[data-theme="dark"] .lg-input input::placeholder { color: #66738c; }
[data-theme="dark"] .lg-input > svg, [data-theme="dark"] .lg-eye { stroke: #7a88a3; color: #8b98b2; }
[data-theme="dark"] .lg-eye:hover { background: rgba(127, 168, 255, 0.12); color: #a9c3ff; }
[data-theme="dark"] .lg-submit { color: #fff; }
[data-theme="dark"] .lg-new-main { color: #dbe7ff; background: linear-gradient(120deg, #13234a, #0d3a3a); border-color: #23407a; }
[data-theme="dark"] .lg-new-main small { color: #a8bde6; }
[data-theme="dark"] .lg-new-alt { color: var(--lg-ink); background: #111826; }
[data-theme="dark"] .lg-orgname { color: #9cbcff; }