/* Storm sign-in — a standalone page, not a page inside the Mangasto shell.
   It carries its own brand, its own chrome and its own background, so it stays
   dark in both themes: it is a full-bleed branded surface, like the workspace
   boot screen, rather than a document that follows the reader's theme. */

.lg-page {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #08090d;
  color: #e8e8ec;
  overflow: hidden;
}

/* ── the storm behind the card ─────────────────────────────────────────────
   Every layer is transform/opacity only, so the whole thing composites on the
   GPU and costs nothing while someone types. */
.lg-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.lg-blob { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; }
.lg-b1 { width: 44vw; min-width: 420px; height: 38vw; min-height: 360px; left: -8vw; top: -14vw; background: rgba(108,140,255,.26); animation: lgDrift1 24s ease-in-out infinite; }
.lg-b2 { width: 40vw; min-width: 380px; height: 34vw; min-height: 320px; right: -6vw; top: -12vw; background: rgba(168,85,247,.20); animation: lgDrift2 28s ease-in-out infinite; }
.lg-b3 { width: 42vw; min-width: 400px; height: 34vw; min-height: 320px; right: 4vw; bottom: -20vw; background: rgba(244,63,94,.14); animation: lgDrift3 32s ease-in-out infinite; }
@keyframes lgDrift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(80px,50px,0) scale(1.12); } }
@keyframes lgDrift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-60px,70px,0) scale(.92); } }
@keyframes lgDrift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-90px,-40px,0) scale(1.1); } }

/* Three parallax star layers — tiled gradients, one paint each. */
.lg-stars { position: absolute; inset: -50%; }
.lg-stars-far {
  background-image:
    radial-gradient(1px 1px at 14% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 68% 8%,  rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 33% 71%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 88% 47%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 52% 35%, rgba(255,255,255,.60), transparent),
    radial-gradient(1px 1px at 7%  84%, rgba(255,255,255,.50), transparent);
  background-size: 240px 240px;
  animation: lgStarDrift 26s linear infinite, lgTwinkle 4.5s ease-in-out infinite;
}
.lg-stars-mid {
  background-image:
    radial-gradient(1.6px 1.6px at 25% 40%, rgba(190,210,255,.9), transparent),
    radial-gradient(1.6px 1.6px at 77% 63%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.6px 1.6px at 45% 12%, rgba(200,180,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 92% 22%, rgba(255,255,255,.7), transparent);
  background-size: 340px 340px;
  animation: lgStarDrift 15s linear infinite, lgTwinkle 3.2s ease-in-out infinite reverse;
}
.lg-stars-near {
  background-image:
    radial-gradient(2.4px 2.4px at 60% 30%, rgba(255,255,255,.95), transparent),
    radial-gradient(2.4px 2.4px at 18% 66%, rgba(160,190,255,.9), transparent);
  background-size: 460px 460px;
  animation: lgStarDrift 8s linear infinite;
}
@keyframes lgStarDrift { to { background-position: -240px 340px; } }
@keyframes lgTwinkle { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* Meteors: a hot head with a tail, thrown across the frame on staggered loops. */
.lg-meteor {
  position: absolute; width: 220px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(160,190,255,.85), #ffffff);
  box-shadow: 0 0 12px rgba(140,175,255,.9);
  transform: rotate(24deg) translate3d(-380px, 0, 0);
  opacity: 0; animation: lgMeteor 4.6s linear infinite;
}
.lg-m1 { top: 8%;  left: -14%; animation-duration: 3.4s; animation-delay: .2s; }
.lg-m2 { top: 26%; left: -20%; animation-duration: 5.2s; animation-delay: 1.6s; }
.lg-m3 { top: 54%; left: -12%; animation-duration: 4.1s; animation-delay: 3.1s; width: 160px; }
.lg-m4 { top: 74%; left: -18%; animation-duration: 6.0s; animation-delay: .9s;  width: 280px; }
@keyframes lgMeteor {
  0%   { opacity: 0; transform: rotate(24deg) translate3d(-380px, 0, 0); }
  6%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(24deg) translate3d(220vw, 0, 0); }
}

/* Driven rain, masked so it fades out instead of ending on a hard edge. */
.lg-rain {
  position: absolute; inset: -30%; opacity: .26;
  background-image: repeating-linear-gradient(
    105deg, transparent 0 22px, rgba(170,195,255,.5) 22px 23px, transparent 23px 46px);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
  animation: lgRain .7s linear infinite;
}
@keyframes lgRain { to { background-position: -180px 640px; } }

/* Lightning: a double flash, twice, on cycles that never line up. */
.lg-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 70% 50% at 22% 0%, rgba(190,210,255,.5), transparent 70%);
  animation: lgFlash 11s ease-out infinite;
}
.lg-flash-b {
  background: radial-gradient(ellipse 60% 45% at 82% 6%, rgba(200,180,255,.42), transparent 70%);
  animation: lgFlash 17s ease-out infinite; animation-delay: 5.5s;
}
@keyframes lgFlash {
  0%, 100% { opacity: 0; }
  2%  { opacity: .9; }
  4%  { opacity: .1; }
  6%  { opacity: .75; }
  11% { opacity: 0; }
}

/* ── card ──────────────────────────────────────────────────────────────── */
.lg-card {
  position: relative;
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: 44% 1fr;
  border-radius: 20px;
  border: 1px solid #2a2e38;
  background: rgba(24,27,34,.9);
  backdrop-filter: blur(18px);
  box-shadow: 0 44px 90px -26px rgba(0,0,0,.8);
  overflow: hidden;
  animation: lgCardIn .7s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes lgCardIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── artwork panel (the bear lives here) ───────────────────────────────── */
.lg-art {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px;
  min-height: 520px;
  transition: background .5s ease;
}
.lg-art-stage { position: absolute; inset: 0 0 130px; display: flex; align-items: center; justify-content: center; }
.lg-bear { width: 190px; height: 190px; object-fit: contain; user-select: none; animation: lgFloat 7s ease-in-out infinite; }
@keyframes lgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* A slow dashed ring behind the bear, so the panel is never completely still. */
.lg-ring { position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.16); animation: lgSpin 26s linear infinite; }
@keyframes lgSpin { to { transform: rotate(360deg); } }
.lg-art-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, rgba(8,9,13,.9), transparent); pointer-events: none; }

.lg-cap { position: relative; }
.lg-cap-kicker { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.lg-cap-title { font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin-bottom: 8px; }
.lg-cap-text { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.64); text-wrap: pretty; }
.lg-cap.swap { animation: lgCapIn .5s cubic-bezier(.2,.9,.25,1) both; }
@keyframes lgCapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.lg-dots { position: relative; display: flex; gap: 7px; margin-top: 20px; }
.lg-dot { height: 6px; width: 6px; border: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.32); cursor: pointer;
  transition: width .3s cubic-bezier(.4,1.3,.5,1), background .3s ease; }
.lg-dot.on { width: 26px; background: rgba(255,255,255,.92); }

/* ── form panel ────────────────────────────────────────────────────────── */
.lg-form { padding: 34px 36px; display: flex; flex-direction: column; }
.lg-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.lg-mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, #6c8cff, #4d63c9); box-shadow: 0 8px 22px -6px rgba(108,140,255,.85); }
.lg-brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #e8e8ec; }
.lg-head { font-size: 23px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 4px; }
.lg-sub { font-size: 13.5px; color: #9b9ea8; margin-bottom: 20px; }

/* Tabs: real buttons over a pill that slides between them. */
.lg-tabs { position: relative; display: flex; padding: 4px; border-radius: 10px; background: #0b0c10; border: 1px solid #23262f; margin-bottom: 18px; }
.lg-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 7px;
  background: #6c8cff; box-shadow: 0 4px 14px -4px #6c8cff; transition: transform .28s cubic-bezier(.4,1.3,.5,1); }
.lg-pill.right { transform: translateX(100%); }
.lg-tab { position: relative; z-index: 1; flex: 1; border: 0; background: transparent; border-radius: 7px; padding: 8px 12px;
  font: inherit; font-size: 13.5px; font-weight: 650; color: #9b9ea8; cursor: pointer; transition: color .18s ease; }
.lg-tab.on { color: #0b0c10; }
.lg-tab:focus-visible { outline: 2px solid #87a1ff; outline-offset: 2px; }

.lg-fields { display: flex; flex-direction: column; gap: 12px; }
.lg-fields > * { animation: lgFieldIn .42s cubic-bezier(.2,.9,.25,1) both; }
.lg-fields > *:nth-child(1) { animation-delay: .02s; }
.lg-fields > *:nth-child(2) { animation-delay: .07s; }
.lg-fields > *:nth-child(3) { animation-delay: .12s; }
.lg-fields > *:nth-child(4) { animation-delay: .17s; }
@keyframes lgFieldIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lg-field { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 9px 12px 10px;
  font-size: 12.5px; color: #9b9ea8; background: #0b0c10; border: 1px solid #2a2e38; border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.lg-field:focus-within { border-color: rgba(108,140,255,.75); box-shadow: 0 0 0 3px rgba(108,140,255,.16); background: #101219; }
.lg-field input { width: 100%; background: transparent; border: 0; outline: none; color: #e8e8ec; font: inherit; font-size: 14px; padding: 0; }
.lg-field input::placeholder { color: #5c6070; }
/* The eye toggle sits inside the field, aligned to the input row. */
.lg-field .pw-toggle { position: absolute; right: 10px; bottom: 8px; background: none; border: 0; padding: 2px; color: #7e8391; cursor: pointer; line-height: 0; }
.lg-field .pw-toggle:hover { color: #e8e8ec; }
.lg-field:has(.pw-toggle) input { padding-right: 26px; }

.lg-link { align-self: flex-end; font-size: 12px; color: #6c8cff; text-decoration: none; }
.lg-link:hover { color: #87a1ff; }

.lg-cta { position: relative; overflow: hidden; width: 100%; border: 0; border-radius: 10px; padding: 12px 16px;
  font: inherit; font-size: 14px; font-weight: 650; color: #0b0c10; background: #6c8cff; cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(108,140,255,.6); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.lg-cta:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 26px -8px rgba(108,140,255,.75); }
.lg-cta:active:not(:disabled) { transform: translateY(0); }
.lg-cta:disabled { opacity: .6; cursor: default; }
/* A sheen that sweeps every few seconds — stops while the button is busy. */
.lg-cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-160%); animation: lgSheen 3.8s ease-in-out infinite; }
.lg-cta:disabled::after { animation: none; }
@keyframes lgSheen { 0%, 64% { transform: translateX(-160%); } 100% { transform: translateX(360%); } }

.lg-msg { font-size: 13px; color: #ff6b6b; min-height: 1em; }
.lg-msg.info { color: #9b9ea8; }

.lg-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0 13px; }
.lg-sep span:first-child { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #2a2e38); }
.lg-sep span:last-child { height: 1px; flex: 1; background: linear-gradient(90deg, #2a2e38, transparent); }
.lg-sep-txt { font-size: 11.5px; color: #7e8391; }

.lg-oauth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lg-oauth a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px;
  border: 1px solid #2a2e38; border-radius: 10px; background: #1f232c; color: #e8e8ec; font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.lg-oauth a:hover { transform: translateY(-1px); border-color: #3a3f4d; background: #242833; }

.lg-foot { margin-top: auto; padding-top: 18px; text-align: center; font-size: 11.5px; color: #6b7180; }
.lg-foot a { color: #7e8391; text-decoration: none; }
.lg-foot a:hover { color: #9b9ea8; }

.lg-hidden { display: none !important; }
/* honeypot — off-screen, never focusable */
.lg-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── OAuth callback ─────────────────────────────────────────────────────── */
/* The popup's landing page. Small, centred, and it says exactly one thing. */
.cb-card {
  position: relative; width: min(380px, 100%); padding: 34px 30px 30px; text-align: center;
  border-radius: 18px; border: 1px solid #2a2e38; background: rgba(24,27,34,.92);
  backdrop-filter: blur(18px); box-shadow: 0 32px 70px -24px rgba(0,0,0,.8);
  animation: lgCardIn .5s cubic-bezier(.2,.9,.25,1) both;
}
.cb-spin { width: 40px; height: 40px; margin: 0 auto 16px; border-radius: 50%;
  border: 2px solid #2a2e38; border-top-color: #6c8cff; animation: cbSpin .8s linear infinite; }
@keyframes cbSpin { to { transform: rotate(360deg); } }
.cb-check, .cb-cross {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; animation: cbPop .45s cubic-bezier(.3,1.4,.5,1) both;
}
.cb-check { background: #4ade80; box-shadow: 0 10px 26px -8px rgba(74,222,128,.7); }
.cb-cross { background: #ff6b6b; box-shadow: 0 10px 26px -8px rgba(255,107,107,.7); }
@keyframes cbPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.cb-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #e8e8ec; }
.cb-sub { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: #9b9ea8; text-wrap: pretty; }
.cb-btn { margin-top: 20px; }

/* ── phone: the artwork becomes a banner above the form ────────────────── */
@media (max-width: 820px) {
  .lg-page { padding: 0; align-items: stretch; }
  .lg-card { grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; min-height: 100svh; }
  .lg-art { min-height: 0; height: 230px; padding: 20px; }
  .lg-art-stage { inset: 0 0 86px; }
  .lg-bear { width: 128px; height: 128px; }
  .lg-ring { width: 200px; height: 200px; }
  .lg-cap-title { font-size: 18px; }
  .lg-cap-text { display: none; }
  .lg-form { padding: 22px 20px 28px; }
  .lg-brand { display: none; }        /* the brand rides on the artwork instead */
  .lg-art .lg-brand { display: flex; position: absolute; top: 18px; left: 20px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-blob, .lg-stars, .lg-meteor, .lg-rain, .lg-flash, .lg-bear, .lg-ring,
  .lg-card, .lg-fields > *, .lg-cta::after, .lg-cap.swap { animation: none !important; }
}