/* Ported 1:1 from monitor.arisingmedia.us's login.css (itself ported from
   web.audit.arisingmedia.us's .lg-* pattern), so all three AM staff tools share one sign-in
   page. See docs/login-mockup.html for the static preview this was promoted from. */
:root{
  --am-blue:#1B6CB3; --am-green:#22A64F; --am-gold:#F8C112;
  --am-orange:#F0801E; --am-red:#E32728; --am-crimson:#8E2042;
  --am-web:#22A64F;

  --ribbon: linear-gradient(90deg,
    var(--am-blue) 0%, var(--am-green) 20%, var(--am-gold) 40%,
    var(--am-orange) 58%, var(--am-red) 78%, var(--am-crimson) 100%);

  --portal-rail:#0d1322; --portal-canvas:#131c30;
  --portal-card:#1c2c44; --portal-border:#1e3050;

  --color-muted-on-dark:#94b0c9; --color-dark-body:#cdd6e0;
  --text:var(--color-dark-body); --text-mute:var(--color-muted-on-dark);

  --fs-xs:.6875rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1.0625rem;
  --fs-2xl:2rem; --fs-3xl:2.75rem;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-12:48px; --sp-16:64px;

  --radius:8px;
  --ease:cubic-bezier(0.16,1,0.3,1); --dur:220ms;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--portal-canvas)}

.lg-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:var(--portal-canvas)}
@media(max-width:880px){.lg-wrap{grid-template-columns:1fr}}
.lg-brand{position:relative;overflow:hidden;padding:var(--sp-16) var(--sp-12);
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-6);
  background:#05070d;
  background-image:
    radial-gradient(ellipse 70% 60% at 20% 28%,rgba(34,166,79,.30) 0%,transparent 60%),
    radial-gradient(ellipse 60% 55% at 88% 16%,rgba(27,108,179,.24) 0%,transparent 65%),
    radial-gradient(ellipse 82% 62% at 62% 100%,rgba(16,185,129,.16) 0%,transparent 70%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,32px 32px}
.lg-brand::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 68%,#05070d 100%)}
.lg-brand > *{position:relative;z-index:2}
.lg-brand::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:3;
  background:var(--ribbon);background-size:200% 100%;animation:lg-ribbon 9s linear infinite}
@keyframes lg-ribbon{to{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){.lg-brand::before{animation:none}}
.lg-brand img{height:44px;align-self:flex-start;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.lg-brand h2{font-size:var(--fs-3xl);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.01em;max-width:18ch}
.lg-brand p{color:var(--color-muted-on-dark);font-size:var(--fs-md);max-width:42ch;line-height:1.6}
.lg-points{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-2)}
.lg-points span{display:flex;align-items:center;gap:10px;color:var(--text);font-size:var(--fs-sm)}
.lg-tick{width:9px;height:9px;border-radius:50%;background:var(--am-web);flex:0 0 auto;box-shadow:0 0 0 3px rgba(34,166,79,.18)}

.lg-card-logo{display:none}
.lg-panel{display:flex;align-items:center;justify-content:center;padding:var(--sp-12);background:var(--portal-canvas)}
.lg-card{width:100%;max-width:380px}
.lg-card .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--am-web)}
.lg-card .eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--am-web)}
.lg-card h1{font-size:var(--fs-2xl);font-weight:800;color:#fff;margin:10px 0 4px}
.lg-card h1 .nm{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lg-card .lede{color:var(--text-mute);font-size:var(--fs-sm);margin-bottom:var(--sp-6)}
.lg-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;
  border-radius:var(--radius);border:1px solid var(--portal-border);background:#fff;color:#1f2328;
  font-weight:600;font-size:var(--fs-sm);text-decoration:none;margin-bottom:var(--sp-4);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.lg-google:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.28);text-decoration:none;border-color:var(--am-web)}
.lg-google:focus-visible{outline:2px solid var(--am-web);outline-offset:2px}
.lg-alert{background:rgba(224,96,84,.16);color:#e06054;border-radius:var(--radius);
  padding:10px 12px;font-size:var(--fs-xs);margin-bottom:var(--sp-4)}
.lg-note{color:var(--text-mute);font-size:var(--fs-sm);background:var(--portal-rail);
  border:1px solid var(--portal-border);border-radius:var(--radius);padding:12px 14px;margin-bottom:var(--sp-4)}
.lg-note code{color:var(--am-web);font-family:ui-monospace,monospace}
.lg-foot{margin-top:var(--sp-6);font-size:var(--fs-xs);color:var(--text-mute);text-align:center}
@media(max-width:880px){.lg-brand{display:none}.lg-card-logo{display:block;height:34px;margin-bottom:var(--sp-5)}}