/* 1.3.9.2 — three login looks for phones (≤719px). Desktop layout is untouched.
   ShotGram blue only (#3f92ff); logo keeps its own gradient. */
@media (max-width: 719px) {
  /* ---------- A · Minimal: no picture block, big centred logo ---------- */
  .auth.ls-a .auth-visual { display: none; }
  .auth.ls-a .auth-panel { min-height: 100dvh; padding: 56px 24px 40px; align-items: flex-start; background: radial-gradient(120% 40% at 50% 0%, rgba(63,146,255,.16), transparent 70%), #07090f; }
  .auth.ls-a .auth-mobile-brand { flex-direction: column; justify-content: center; gap: 12px; margin-bottom: 30px; }
  .auth.ls-a .auth-mobile-brand img { width: 68px; height: 68px; }
  .auth.ls-a .auth-mobile-brand .wordmark { font-size: 30px; }
  .auth.ls-a .auth-title { text-align: center; }
  .auth.ls-a .auth-overline { display: none; }
  .auth.ls-a .auth-title h1, .auth.ls-a .auth-title .auth-heading { text-align: center; }
  .auth.ls-a .auth-input { height: 52px; border-radius: 14px; }
  .auth.ls-a .auth-primary { height: 52px; border-radius: 14px; }

  /* ---------- B · Showcase: slim picture band fading into a rounded sheet ---------- */
  .auth.ls-b .auth-visual { min-height: 190px; height: 190px; padding: 14px 20px 0; border-bottom: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .auth.ls-b .auth-gallery { transform: scale(.78); transform-origin: top center; }
  .auth.ls-b .auth-panel { min-height: calc(100dvh - 150px); margin-top: -34px; position: relative; z-index: 2; border-radius: 28px 28px 0 0; background: #0b0e17; border-top: 1px solid rgba(63,146,255,.22); padding: 26px 22px 44px; }
  .auth.ls-b .auth-mobile-brand { margin-bottom: 18px; }
  .auth.ls-b .auth-input { height: 50px; border-radius: 12px; }
  .auth.ls-b .auth-primary { height: 50px; border-radius: 12px; }

  /* ---------- C · Glow: glass card on a calm blue glow ---------- */
  .auth.ls-c .auth-visual { display: none; }
  .auth.ls-c { background: radial-gradient(90% 45% at 50% 8%, rgba(63,146,255,.30), transparent 70%), radial-gradient(80% 40% at 50% 100%, rgba(63,146,255,.12), transparent 70%), #05070d; }
  .auth.ls-c .auth-panel { background: transparent; min-height: 100dvh; padding: 40px 16px 32px; align-items: center; }
  .auth.ls-c .auth-card-shell { padding: 26px 20px 22px; border-radius: 26px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
  .auth.ls-c .auth-mobile-brand { justify-content: center; margin-bottom: 20px; }
  .auth.ls-c .auth-title { text-align: center; }
  .auth.ls-c .auth-input { height: 50px; border-radius: 14px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
  .auth.ls-c .auth-primary { height: 50px; border-radius: 14px; }
}

/* Google button (Android app + website) — white, like Apple's, with the real 4-colour G */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 700; }
.google-btn svg { width: 19px; height: 19px; }
.google-btn:active { transform: scale(.985); }
@media (hover: hover) { .google-btn:hover { background: #f4f5f7; } }

/* Guest button */
.guest-btn { display: flex; align-items: center; justify-content: center; gap: 9px; background: transparent; color: #8cc0ff; border: 1px dashed rgba(63,146,255,.55); font-weight: 700; }
.guest-btn:active { transform: scale(.985); }

/* wall + hero exist in markup for every style but only style D shows them */
.auth-wall, .auth-wall-hero { display: none; }

@media (max-width: 719px) {
  /* ---------- D · Wall: real public reels drifting behind the sheet ---------- */
  .auth.ls-d { position: relative; background: #05070d; }
  .auth.ls-d .auth-visual { display: none; }
  .auth.ls-d .auth-wall { display: grid; position: fixed; inset: -12% -22%; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: rotate(-9deg); opacity: .62; z-index: 0; pointer-events: none; }
  .auth.ls-d .auth-wall::after { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.25) 0%, rgba(5,7,13,.55) 32%, #05070d 62%); transform: rotate(9deg) scale(1.6); }
  .auth-wall-col { display: flex; flex-direction: column; gap: 10px; animation: wall-up 38s linear infinite; }
  .auth-wall-col.c1 { animation-name: wall-down; animation-duration: 46s; }
  .auth-wall-col img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 16px; background: #0d1626; }
  @keyframes wall-up { to { transform: translateY(-50%); } }
  @keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
  .auth.ls-d .auth-wall-hero { display: flex; position: absolute; z-index: 2; top: 9vh; left: 0; right: 0; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #fff; pointer-events: none; }
  .auth.ls-d .auth-wall-hero img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 40px rgba(63,146,255,.35); }
  .auth.ls-d .auth-wall-hero b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
  .auth.ls-d .auth-wall-hero span { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #9fc6ff; }
  .auth.ls-d .auth-panel { position: relative; z-index: 3; background: transparent; min-height: 100dvh; padding: 36vh 14px 30px; align-items: flex-start; }
  .auth.ls-d .auth-card-shell { padding: 22px 18px 20px; border-radius: 28px; background: rgba(8,12,22,.78); border: 1px solid rgba(63,146,255,.22); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 -10px 60px rgba(0,0,0,.5); }
  .auth.ls-d .auth-mobile-brand { display: none; }
  .auth.ls-d .auth-title { text-align: center; }
  .auth.ls-d .auth-input, .auth.ls-d .auth-primary { height: 50px; border-radius: 14px; }
  .auth.ls-d .auth-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
}
@media (prefers-reduced-motion: reduce) { .auth-wall-col { animation: none !important; } }

/* ---------- guest viewer ---------- */
body.guest-open { overflow: hidden; }
.guest-view { position: fixed; inset: 0; z-index: 9000; background: #000; color: #fff; }
.guest-top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px; background: linear-gradient(#000a, transparent); }
.guest-top button { border: 0; color: #fff; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.guest-close { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.guest-close svg { width: 20px; height: 20px; }
.guest-title { font-weight: 800; font-size: 17px; }
.guest-join { padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; background: #3f92ff !important; }
.guest-scroll { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.guest-reel { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; background: #000; }
.guest-reel video { width: 100%; height: 100%; object-fit: cover; }
.guest-shade { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.7)); pointer-events: none; }
.guest-rail { position: absolute; right: 12px; bottom: 110px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.guest-rail button { border: 0; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.guest-rail svg { width: 28px; height: 28px; }
.guest-info { position: absolute; left: 14px; right: 80px; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); display: flex; flex-direction: column; gap: 6px; }
.guest-info span { font-size: 14px; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guest-follow { align-self: flex-start; border: 1px solid #fff9; background: none; color: #fff; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.guest-load { height: 100%; display: grid; place-content: center; text-align: center; color: #9aa4b5; padding: 24px; }
.guest-gate { position: absolute; inset: 0; z-index: 8; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
.guest-gate-card { width: 100%; padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); border-radius: 26px 26px 0 0; background: #0d1220; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.guest-gate-card b { font-size: 20px; }
.guest-gate-card span { color: #9aa4b5; font-size: 14px; margin-bottom: 6px; }
.guest-gate-x { border: 0; background: none; color: #8cc0ff; font-weight: 700; padding: 8px; }

/* ======== photo backgrounds: E Photo wall · F Collage · G Cinema (phones) ======== */
.auth-photos { display: none; }
@media (max-width: 719px) {
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) { position: relative; background: #05070d; }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-visual { display: none; }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-wall-hero { display: flex; position: absolute; z-index: 2; top: 8vh; left: 0; right: 0; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #fff; pointer-events: none; }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-wall-hero img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 40px rgba(63,146,255,.35); }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-wall-hero b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 18px #0008; }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-wall-hero span { font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: #cfe3ff; text-shadow: 0 2px 12px #000a; }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-panel { position: relative; z-index: 3; background: transparent; min-height: 100dvh; align-items: flex-start; padding: 38vh 14px 30px; }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-card-shell { padding: 22px 18px 20px; border-radius: 28px; background: rgba(8,12,22,.66); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 -10px 60px rgba(0,0,0,.45); }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-mobile-brand { display: none; }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-title { text-align: center; }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) :is(.auth-input, .auth-primary) { height: 50px; border-radius: 14px; }
  :is(.auth.ls-e, .auth.ls-f, .auth.ls-g) .auth-input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }

  /* E · Photo wall: three columns of real photos drifting in opposite directions */
  .auth.ls-e .auth-photos.ph-wall { display: grid; position: fixed; inset: -12% -22%; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: rotate(-9deg); z-index: 0; pointer-events: none; opacity: .85; }
  .auth.ls-e .auth-photos.ph-wall::after { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.1) 0%, rgba(5,7,13,.5) 34%, #05070d 66%); transform: rotate(9deg) scale(1.6); }
  .auth-photos.ph-wall .auth-wall-col img { aspect-ratio: 3 / 4; }

  /* F · Collage: tilted printed photos floating above the glass sheet */
  .auth.ls-f .auth-photos.ph-collage { display: block; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 46vh; overflow: hidden; background: radial-gradient(90% 80% at 50% 0%, rgba(63,146,255,.28), transparent 70%); }
  .auth-photos.ph-collage .pc { position: absolute; margin: 0; padding: 5px 5px 16px; background: #f4f6fa; border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.5); animation: pc-float 7s ease-in-out infinite; }
  .auth-photos.ph-collage .pc img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
  .pc0 { width: 34%; height: 24vh; left: 4%; top: 10vh; transform: rotate(-9deg); }
  .pc1 { width: 36%; height: 27vh; left: 32%; top: 2vh; transform: rotate(4deg); animation-delay: -2s !important; z-index: 2; }
  .pc2 { width: 33%; height: 23vh; right: 3%; top: 11vh; transform: rotate(10deg); animation-delay: -4s !important; }
  .pc3 { width: 26%; height: 17vh; left: 14%; top: 31vh; transform: rotate(6deg); animation-delay: -1s !important; z-index: 3; }
  .pc4 { width: 28%; height: 18vh; right: 12%; top: 32vh; transform: rotate(-6deg); animation-delay: -3s !important; z-index: 3; }
  @keyframes pc-float { 50% { translate: 0 -8px; } }
  .auth.ls-f .auth-wall-hero { top: auto; bottom: auto; display: none !important; }
  .auth.ls-f .auth-panel { padding-top: 40vh; }

  /* G · Cinema: one full-screen photo at a time, slow zoom, crossfade */
  .auth.ls-g .auth-photos.ph-cinema { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .auth-photos.ph-cinema .cn { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: cn-fade 28s linear infinite; }
  .auth-photos.ph-cinema .cn1 { animation-delay: 7s; } .auth-photos.ph-cinema .cn2 { animation-delay: 14s; } .auth-photos.ph-cinema .cn3 { animation-delay: 21s; }
  @keyframes cn-fade { 0% { opacity: 0; transform: scale(1); } 5% { opacity: 1; } 25% { opacity: 1; } 32% { opacity: 0; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.12); } }
  .auth.ls-g .auth-photos.ph-cinema::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.2), rgba(5,7,13,.45) 35%, #05070d 72%); }
}
@media (prefers-reduced-motion: reduce) { .auth-photos .pc, .auth-photos .cn { animation: none !important; } .auth-photos .cn0 { opacity: 1; } }

/* ======== Sign in ≠ Sign up buttons ========
   Sign in  → quick: the social providers become a row of round icon buttons (one tap, no long bars).
   Sign up  → guided: full labelled buttons, a little taller, so the choice is explicit. */
.auth-social.kind-login { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.auth-social.kind-login :is(.apple-btn, .discord-btn, .google-btn, .qr-login-btn) { width: 56px; height: 56px; min-width: 56px; padding: 0; border-radius: 50%; flex: none; }
.auth-social.kind-login :is(.apple-btn, .discord-btn, .google-btn, .qr-login-btn) > span:not([aria-hidden]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auth-social.kind-login .qr-login-btn > span[aria-hidden] { font-size: 22px; }
.auth-social.kind-login :is(.apple-btn, .discord-btn, .google-btn) svg { width: 24px; height: 24px; margin: 0; }
.auth-social.kind-login .guest-btn { flex: 1 1 100%; width: 100%; height: 44px; border-radius: 12px; margin-top: 4px; }
.auth-social.kind-signup { display: flex; flex-direction: column; gap: 10px; }
.auth-social.kind-signup :is(.apple-btn, .discord-btn, .google-btn) { height: 52px; border-radius: 16px; justify-content: flex-start; padding: 0 18px; gap: 14px; }
.auth-social.kind-signup :is(.apple-btn, .discord-btn, .google-btn) > span:not([aria-hidden]) { flex: 1; text-align: center; margin-inline-end: 24px; }
.auth-social.kind-signup .guest-btn { height: 44px; border-radius: 14px; }
.auth-social.kind-login { align-items: center; }
.auth-social.kind-login :is(.apple-btn, .discord-btn, .google-btn, .qr-login-btn) { margin: 0; align-self: center; display: inline-flex; align-items: center; justify-content: center; }

/* ======== H · Logo wall — the ShotGram logo itself, tiled and drifting ========
   Change the four colours below to restyle the whole page (use any colours). */
:root {
  --lw-1: #2f7bff;   /* blue   */
  --lw-2: #22b8cf;   /* cyan   */
  --lw-3: #5b6bff;   /* indigo */
  --lw-4: #3f92ff;   /* sky    */
  --lw-bg: #05070d;  /* page behind the tiles */
}
@media (max-width: 719px) {
  .auth.ls-h { position: relative; background: var(--lw-bg); }
  .auth.ls-h .auth-visual { display: none; }
  .auth.ls-h .auth-photos.ph-logo { display: grid; position: fixed; inset: -12% -22%; grid-template-columns: repeat(3, 1fr); gap: 12px; transform: rotate(-9deg); z-index: 0; pointer-events: none; }
  .auth.ls-h .auth-photos.ph-logo::after { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.05) 0%, rgba(5,7,13,.5) 34%, var(--lw-bg) 66%); transform: rotate(9deg) scale(1.6); }
  .ph-logo .lw { display: grid; place-items: center; aspect-ratio: 1; border-radius: 26px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  .ph-logo .lw { position: relative; overflow: hidden; isolation: isolate; }
  .ph-logo .lw img, .auth-wall-col .lw img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 0; }
  /* the tile colour recolours the logo itself (hue blend), so swapping --lw-1…4 changes the whole wall */
  .ph-logo .lw::after { content: ''; position: absolute; inset: 0; background: var(--lw-c); mix-blend-mode: hue; opacity: .95; }
  .ph-logo .lw0 { --lw-c: var(--lw-1); } .ph-logo .lw1 { --lw-c: var(--lw-2); } .ph-logo .lw2 { --lw-c: var(--lw-3); } .ph-logo .lw3 { --lw-c: var(--lw-4); }
  .auth.ls-h .auth-wall-hero { display: flex; position: absolute; z-index: 2; top: 8vh; left: 0; right: 0; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #fff; pointer-events: none; }
  .auth.ls-h .auth-wall-hero img { width: 68px; height: 68px; border-radius: 17px; box-shadow: 0 10px 40px rgba(63,146,255,.4); }
  .auth.ls-h .auth-wall-hero b { font-size: 29px; font-weight: 800; letter-spacing: -.02em; }
  .auth.ls-h .auth-wall-hero span { font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: #cfe3ff; }
  .auth.ls-h .auth-panel { position: relative; z-index: 3; background: transparent; min-height: 100dvh; align-items: flex-start; padding: 38vh 14px 30px; }
  .auth.ls-h .auth-card-shell { padding: 22px 18px 20px; border-radius: 28px; background: rgba(8,12,22,.7); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 -10px 60px rgba(0,0,0,.45); }
  .auth.ls-h .auth-mobile-brand { display: none; }
  .auth.ls-h .auth-title { text-align: center; }
  .auth.ls-h :is(.auth-input, .auth-primary) { height: 50px; border-radius: 14px; }
  .auth.ls-h .auth-input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
}
/* the QR button icon (a real QR glyph instead of the old block character) */
.qr-ic { display: inline-grid; place-items: center; }
.qr-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-social.kind-login .qr-login-btn > .qr-ic svg { width: 24px; height: 24px; }

/* ======== 1.3.9.3 — compact: the whole login fits ONE screen, no scrolling ======== */
@media (max-width: 719px) {
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-wall-hero { top: calc(env(safe-area-inset-top, 0px) + 14px); flex-direction: row; justify-content: center; gap: 10px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-wall-hero img { width: 40px; height: 40px; border-radius: 11px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-wall-hero b { font-size: 24px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-wall-hero span { display: none; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-panel { min-height: 0; padding: calc(env(safe-area-inset-top, 0px) + 78px) 12px calc(env(safe-area-inset-bottom, 0px) + 10px); }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-card-shell { padding: 14px 14px 12px; border-radius: 24px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-title { margin-bottom: 10px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-overline, :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-title p { display: none; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-title h1, :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-title h2 { font-size: 21px; margin: 0; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-form { gap: 9px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) :is(.auth-input, .auth-primary) { height: 46px; border-radius: 13px; font-size: 15px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-forgot { margin: 0; padding: 0; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-divider { margin: 8px 0; font-size: 11px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-social.kind-login { gap: 10px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-social.kind-login :is(.apple-btn, .discord-btn, .google-btn, .qr-login-btn) { width: 46px; height: 46px; min-width: 46px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-social.kind-login .guest-btn { height: 38px; margin-top: 2px; font-size: 14px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-social.kind-signup { gap: 8px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-social.kind-signup :is(.apple-btn, .discord-btn, .google-btn) { height: 46px; border-radius: 14px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-social.kind-signup .guest-btn { height: 38px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-switch { margin-top: 8px; font-size: 14px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-legal { margin: 8px 0 0; font-size: 11px; line-height: 1.35; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-footer-links { display: none; }   /* Terms + Privacy stay in the line above */
}
@media (max-width: 719px) {
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-panel { min-height: 100dvh; align-items: center; padding-top: calc(env(safe-area-inset-top, 0px) + 66px); }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-wall-hero { top: calc(env(safe-area-inset-top, 0px) + 18px); }
}
@media (max-width: 719px) {
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-panel { align-items: flex-end; }
}
/* sign-up: the birthday sits in ONE row and the helper texts are tighter */
@media (max-width: 719px) {
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .birthday-picker { padding: 8px 10px 9px; border-radius: 14px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .birthday-selects { grid-template-columns: 0.9fr 1.9fr 1.2fr !important; gap: 6px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .birthday-select.month { grid-column: auto; order: 0; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .birthday-select { padding: 6px 8px 4px; border-radius: 11px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .birthday-select select { height: 42px; margin-block-start: 6px; font-size: 16px; padding-inline: 0; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .birthday-hint { font-size: 11px; margin-top: 5px; line-height: 1.3; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .field-hint { margin-top: 3px; font-size: 10.5px; line-height: 1.3; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) .auth-form .field { gap: 4px; }
}
@media (max-width: 719px) {
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) #pwMeter { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) #pwMeter .meter-head { display: flex; gap: 6px; font-size: 11.5px; white-space: nowrap; order: 2; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) #pwMeter .meter-bars { flex: 1; order: 1; }
  :is(.auth.ls-d, .auth.ls-e, .auth.ls-g, .auth.ls-h) #pwMeter .meter-hint { display: none; }
}

/* Windows download — a small link inside the sign-in card (desktop computers only),
   so it is still there when the picture side is hidden on narrow windows */
.auth-win-mini { display: none; }
@media (max-width: 719px) {
  html:not(.sg-touch):not(.sg-native) .auth-win-mini { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px auto 0; padding: 9px 14px; border-radius: 12px; width: fit-content; font-size: 13px; font-weight: 700; color: #cfe3ff; background: rgba(63,146,255,.14); border: 1px solid rgba(63,146,255,.35); text-decoration: none; box-shadow: none; }
  .auth-win-mini svg { width: 16px; height: 16px; }
}

/* ======== H · Logo wall on COMPUTERS (≥720px): same design as the phone ======== */
.auth.ls-h .auth-photos.ph-logo .auth-wall-col:nth-child(n+4) { display: none; }
@media (min-width: 720px) {
  .auth.ls-h { position: relative; background: var(--lw-bg); }
  .auth.ls-h .auth-photos.ph-logo { display: grid; position: fixed; inset: -12% -8%; grid-template-columns: repeat(5, 1fr); gap: 16px; transform: rotate(-8deg); z-index: 0; pointer-events: none; opacity: .9; }
  .auth.ls-h .auth-photos.ph-logo .auth-wall-col:nth-child(n+4) { display: flex; }
  .auth.ls-h .auth-photos.ph-logo::after { content: ''; position: fixed; inset: 0; transform: rotate(8deg) scale(1.5); background: linear-gradient(90deg, rgba(5,7,13,.88) 0%, rgba(5,7,13,.55) 45%, rgba(5,7,13,.8) 100%); }
  .ph-logo .lw { display: grid; place-items: center; aspect-ratio: 1; border-radius: 30px; position: relative; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  .ph-logo .lw img, .auth-wall-col .lw img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 0; }
  .ph-logo .lw::after { content: ''; position: absolute; inset: 0; background: var(--lw-c); mix-blend-mode: hue; opacity: .95; }
  .ph-logo .lw0 { --lw-c: var(--lw-1); } .ph-logo .lw1 { --lw-c: var(--lw-2); } .ph-logo .lw2 { --lw-c: var(--lw-3); } .ph-logo .lw3 { --lw-c: var(--lw-4); }
  .auth-wall-col { display: flex; flex-direction: column; gap: 16px; animation: wall-up 60s linear infinite; }
  .auth-wall-col.c1, .auth-wall-col.c3 { animation-name: wall-down; animation-duration: 72s; }
  .auth.ls-h .auth-visual { position: relative; z-index: 1; background: transparent; border: 0; }
  .auth.ls-h .auth-gallery, .auth.ls-h .auth-glow { display: none; }
  .auth.ls-h .auth-panel { position: relative; z-index: 2; background: transparent; }
  .auth.ls-h .auth-card-shell { padding: 26px 24px 22px; border-radius: 28px; background: rgba(8,12,22,.72); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 20px 80px rgba(0,0,0,.5); }
  .auth.ls-h .auth-input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
  .auth.ls-h .desktop-download-card { background: rgba(8,12,22,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
@media (min-width: 720px) {
  .auth.ls-h.auth-layout { grid-template-columns: minmax(0, 1fr) minmax(420px, 480px); }
  .auth.ls-h .auth-photos.ph-logo { opacity: .72; }
  .auth.ls-h .auth-photos.ph-logo::after { background: linear-gradient(90deg, rgba(5,7,13,.94) 0%, rgba(5,7,13,.72) 48%, rgba(5,7,13,.85) 100%); }
  .auth.ls-h .auth-subtitle { color: #c7d2e6; }
}
@media (min-width: 720px) {
  /* wider, shorter card on computers: the title stays on one line and less scrolling */
  .auth.ls-h .auth-panel { padding: 20px 28px; }
  .auth.ls-h .auth-card-shell { width: min(440px, 100%); padding: 20px 22px 16px; }
  .auth.ls-h .auth-title { margin-bottom: 12px; }
  .auth.ls-h .auth-title h1, .auth.ls-h .auth-title h2 { font-size: 26px; white-space: nowrap; }
  .auth.ls-h .auth-title p { margin-top: 4px; font-size: 11px; }
  .auth.ls-h .auth-form { gap: 10px; }
  .auth.ls-h :is(.auth-input, .auth-primary) { height: 46px; }
  .auth.ls-h .auth-divider { margin: 10px 0; }
  .auth.ls-h .auth-switch { margin-top: 10px; }
  .auth.ls-h .auth-footer-links { margin-top: 8px; padding-top: 8px; }
}

/* guest viewer on computers: a phone-shaped column in the middle (it was stretched across the whole window) */
.guest-reel.is-wide video { object-fit: contain; background: #000; }
@media (min-width: 720px) {
  .guest-view { background: radial-gradient(70% 60% at 50% 40%, #0d1b33, #04060b); display: grid; place-items: center; }
  .guest-view .guest-scroll, .guest-view .guest-top { width: min(100vw, calc(100dvh * 9 / 16), 480px); margin: 0 auto; }
  .guest-view .guest-top { position: absolute; left: 50%; right: auto; transform: translateX(-50%); }
  .guest-view .guest-scroll { height: 100dvh; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 120px rgba(0,0,0,.6); }
  .guest-view .guest-gate { left: 50%; right: auto; width: min(100vw, calc(100dvh * 9 / 16), 480px); transform: translateX(-50%); }
}

/* LIVE sound control */
@media (pointer: coarse) { .live-vol-range { width: 84px; opacity: 1; margin-inline-end: 8px; } }

/* LIVE chat in Safari (website on a phone): Safari floats its own arrows / ✓ bar over the bottom of the
   page while the keyboard is open, and it hid the comment box. Lift the bottom controls above it.
   The app itself hides that bar, so this is web only. */
@media (pointer: coarse) {
  html.sg-web body .live-tt.keyboard-open .ltt-bottom { padding-bottom: 62px !important; }
  html.sg-web body .live-tt.keyboard-open .ltt-chat { max-height: 22vh; }
}

/* company verification fee */
.vr-hero { text-align: center; padding: 6px 0 4px; } .vr-hero h3 { margin: 8px 0 2px; }
.vr-price { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px 0 12px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, #1f9d6b 12%, transparent); }
.vr-price b { font-size: 26px; letter-spacing: .2px; }
.vr-points { margin: 0 0 12px; padding-inline-start: 18px; font-size: 14px; line-height: 1.55; }
.vr-terms { margin: 0 0 12px; font-size: 14px; } .vr-terms summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.vr-agree { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 14px; line-height: 1.5; }
.vr-agree input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: #2f6bff; }