/* ============================================================
   login.css — Premium Authentication Experience
   Apple VisionOS inspired login
   ============================================================ */

/* ────────── BOOT SPLASH ────────── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  
  display: grid;
  place-items: center;
  
  background: var(--bg-base);
  
  transition: opacity var(--t-slow) var(--ease-out),
              visibility var(--t-slow);
}

#splash.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-in {
  display: grid;
  justify-items: center;
  gap: var(--s5);
  padding: 0 24px;
  text-align: center;
}

/* Logo with a rotating gold ring behind it — feels like the app is "spinning up" */
.splash-logo-wrap {
  position: relative;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  animation: splashPop 0.7s var(--ease-out) both;
}
.splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--gold);
  border-right-color: var(--gold-light);
  opacity: 0.9;
  animation: splashSpin 1.1s linear infinite;
}
.splash-ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  opacity: 0.4;
}

/* Premium logo container */
.splash-mark {
  width: 92px;
  height: 92px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--gold-wash), transparent);
  border: 2px solid var(--border-gold);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2),
              var(--shadow-gold),
              var(--shadow-xl);
  animation: markFloat 3s var(--ease-in-out) infinite;
}

@keyframes splashPop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes splashSpin { to { transform: rotate(360deg); } }
@keyframes markFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Brand block — staged reveal after the logo */
.splash-brand {
  animation: splashFadeUp 0.7s var(--ease-out) 0.35s both;
}
.splash-word {
  font-family: var(--font-display);
  font-size: clamp(20px, 6vw, 28px);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.14em;
  line-height: 1.05;
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--gold-light), var(--gold) 45%, var(--gold-light));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
.splash-sub {
  font-family: var(--font-display);
  font-size: clamp(12px, 3.6vw, 16px);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  color: var(--gold-light);
  margin-top: 6px;
}
.splash-tag {
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  animation: splashFadeUp 0.7s var(--ease-out) 0.6s both;
}

@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Progress bar */
.splash-bar {
  width: 160px;
  height: 3px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--bg-surface);
  margin-top: var(--s2);
  animation: splashFadeUp 0.6s var(--ease-out) 0.8s both;
}

.splash-bar i {
  display: block;
  height: 100%;
  width: 45%;
  border-radius: var(--r-full);
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    var(--gold-light),
    transparent
  );
  animation: sweep 1.5s var(--ease-in-out) infinite;
}

@keyframes splashRise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sweep {
  from {
    transform: translateX(-150%);
  }
  to {
    transform: translateX(400%);
  }
}

/* ────────── LOGIN VIEW ────────── */
#loginView {
  min-height: 100dvh;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s6);
  
  padding: var(--s8) var(--s5) calc(var(--s8) + env(safe-area-inset-bottom));
  text-align: center;
  
  position: relative;
}

/* Ambient background for the sign-in screen.

   Was gold top-left and BLUE bottom-right, which made the first screen
   of the app read as two different colours fighting each other. It is
   one gold light now — warmer, calmer, and it gives the glass card
   something on-brand to refract. This is the only screen in the app
   that still has a bloom; everything past sign-in is flat black. */
#loginView::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, var(--gold-wash) 0%, transparent 60%),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(245, 158, 11, 0.07) 0%, transparent 55%);
  opacity: 0.85;
  animation: ambientShift 15s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #loginView::before { animation: none; }
}

@keyframes ambientShift {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
}

/* Center container */
.center {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

/* Login header */
.login-head {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  animation: riseUp 0.6s var(--ease-out) both;
}

/* Premium logo */
#loginView .logo {
  width: 112px;
  height: 112px;
  border-radius: var(--r-2xl);
  
  background: linear-gradient(135deg, var(--gold-wash), transparent);
  border: 2px solid var(--border-gold);
  
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15),
              0 0 48px var(--gold-glow),
              var(--shadow-xl);
  
  margin-bottom: var(--s2);
  
  transition: transform var(--t-base) var(--ease-spring);
}

#loginView .logo:hover {
  transform: scale(1.05) rotate(2deg);
}

/* Brand title with gradient */
.brandTitle {
  font-family: var(--font-display);
  font-size: clamp(24px, 7vw, 32px);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  
  background: linear-gradient(
    135deg,
    var(--gold-light),
    var(--gold) 40%,
    var(--gold-dark)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  line-height: 1;
  text-transform: uppercase;
}

/* Subtitle — ANALYSER: larger, spaced, with hairline flanks for a distinct
   'wordmark' feel that balances the big title above it. */
.brandSub {
  font-family: var(--font-display);
  font-size: clamp(13px, 3.6vw, 17px);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--gold-light);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
.brandSub::before,
.brandSub::after {
  content: "";
  height: 1px;
  width: clamp(18px, 8vw, 46px);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}

/* Kicker text */
.login-kicker {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-top: var(--s2);
}

/* ────────── PREMIUM GLASS CARD ────────── */
#loginView .card {
  width: 100%;
  text-align: left;
  
  background: var(--glass-strong);
  
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2xl);
  
  padding: var(--s7) var(--s6) var(--s6);
  
  box-shadow: var(--shadow-2xl),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  
  animation: riseUp 0.6s var(--ease-out) 0.1s both;
}

@keyframes riseUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ────────── FORM FIELDS ────────── */
.field {
  position: relative;
  margin-bottom: var(--s4);
}

.field > label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--s2) 2px;
  transition: color var(--t-fast) var(--ease-out);
}

.field:focus-within > label {
  color: var(--gold);
}

/* Icon in field */
.field .ico {
  position: absolute;
  left: var(--s4);
  top: 44px;
  color: var(--text-tertiary);
  pointer-events: none;
  transition: color var(--t-fast) var(--ease-out);
}

.field:focus-within .ico {
  color: var(--gold);
}

/* Input fields */
#loginView input,
#loginView select {
  width: 100%;
  height: max(44px, calc(56px * var(--zoom-k)));

  background: var(--bg-surface);
  color: var(--text-primary);

  border: 1px solid var(--border-default);
  border-radius: var(--r-md);

  padding: 0 var(--s4) 0 calc(52px * var(--zoom-k));

  font-size: var(--fs-body);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);

  transition: all var(--t-fast) var(--ease-out);
}

#loginView input::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

#loginView input:focus,
#loginView select:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--gold-wash),
              var(--shadow-md);
}

#loginView input[type="password"] {
  letter-spacing: 0.2em;
}

#loginView input[type="password"]::placeholder {
  letter-spacing: 0.12em;
}

/* Select dropdown */
#loginView select {
  appearance: none;
  padding-right: 48px;
  cursor: pointer;
}

.field.sel::after {
  content: "";
  position: absolute;
  right: var(--s5);
  top: 48px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg);
  pointer-events: none;
  transition: border-color var(--t-fast) var(--ease-out);
}

.field.sel:focus-within::after {
  border-color: var(--gold);
}

/* ────────── ACTION BUTTONS ────────── */
#loginView button {
  width: 100%;
  height: 56px;
  
  border: 0;
  border-radius: var(--r-md);
  
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  
  cursor: pointer;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  
  transition: all var(--t-fast) var(--ease-out);
  
  position: relative;
  overflow: hidden;
}

/* The email Sign in / Create account buttons were removed with the
   email-password login. Google sign-in is styled by .google-btn-brand. */

#loginView button:active {
  transform: translateY(0) scale(0.98);
}

#loginView button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Error/message display */
#loginMsg {
  min-height: 20px;
  margin-top: var(--s4);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--danger);
  line-height: var(--lh-relaxed);
}

#loginMsg:empty {
  margin-top: 0;
}

/* ────────── HONESTY STRIP ────────── */
.login-honesty {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  
  max-width: 440px;
  margin-inline: auto;
  padding: var(--s4);
  
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  
  background: var(--gold-wash);
  
  text-align: left;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  
  animation: riseUp 0.6s var(--ease-out) 0.2s both;
}

.login-honesty .ico {
  color: var(--gold);
  margin-top: 2px;
  flex-shrink: 0;
}

/* ────────── RESPONSIVE ────────── */
@media (max-height: 720px) {
  #loginView {
    justify-content: flex-start;
    padding-top: var(--s7);
  }
  
  #loginView .logo {
    width: 88px;
    height: 88px;
    border-radius: var(--r-xl);
  }
  
  .brandTitle {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  #loginView .card {
    padding: var(--s8) var(--s7) var(--s7);
  }
}

/* Google-only sign-in note (replaces the email/password block) */
.login-signin-note{
  margin:12px 2px 4px;
  color:var(--text-tertiary);
  font-size:var(--fs-caption);
  line-height:1.5;
  text-align:center;
}

/* login overflow safety: on short screens the centered card must still
   scroll instead of clipping top/bottom */
#loginView{ overflow-y:auto; }
@media (max-height:640px){ #loginView{ justify-content:flex-start; } }

/* Prominent "Continue with Google" — primary sign-in, sits at the top */
.google-btn-primary{
  width:100%;
  min-height:56px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:6px;
  background:#fff; color:#1f1f1f;
  border:0; border-radius:var(--r-md);
  font-family:var(--font-display); font-size:16px; font-weight:700;
  letter-spacing:.01em; cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.google-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(0,0,0,.45); }
.google-btn-primary:active{ transform:translateY(0); }

/* Legal + publisher block on the sign-in page */
.login-legal{ margin:18px auto 8px; max-width:420px; text-align:center;
  color:var(--text-tertiary); font-size:var(--fs-micro); line-height:1.6; }
.login-legal-links{ display:flex; gap:8px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-bottom:8px; }
.login-legal-links a{ color:var(--gold); text-decoration:none; font-weight:600;
  font-size:var(--fs-caption); }
.login-legal-links a:hover{ text-decoration:underline; }
.login-legal-pub{ margin-bottom:6px; }
.login-legal-pub a{ color:var(--gold); text-decoration:none; }
.login-legal-disc{ opacity:.8; }

/* ══════════════ RICHER SIGN-IN (v45) ══════════════ */

/* Brand-colored "Continue with Google" — replaces the plain white button.
   Uses the app's gold identity with a white chip holding the G logo so the
   Google mark stays on white (brand-compliant) while the button is on-brand. */
.google-btn-brand{
  width:100%;
  min-height:max(48px, calc(54px * var(--zoom-k)));
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:2px 0 4px;
  border:0; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
  color:#1a1200;
  font-family:var(--font-display); font-size:15px; font-weight:var(--fw-heavy);
  letter-spacing:.02em; cursor:pointer;
  box-shadow:0 6px 20px rgba(245,158,11,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
.google-btn-brand .gicon{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2);
  flex:0 0 auto;
}
.google-btn-brand:hover{ transform:translateY(-1px); box-shadow:0 9px 26px rgba(245,158,11,.4), inset 0 1px 0 rgba(255,255,255,.35); }
.google-btn-brand:active{ transform:translateY(0); filter:brightness(.96); }

/* Subtle divider before the language+guide row */
.login-divider{ height:1px; background:var(--border-subtle); margin:16px 0 12px; opacity:.6; }

/* Language + Guide row — placed prominently below sign-in actions */
.login-lang-row{ display:flex; gap:8px; align-items:flex-end; margin-top:10px; }
.login-lang-row .login-lang{ flex:1 1 auto; margin:0; min-width:0; }
.login-lang-row .login-lang label{
  font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-tertiary); display:flex; align-items:center; gap:4px;
  margin:0 0 3px 2px;
}
.login-lang-row .login-lang label .ico{ width:11px; height:11px; }
.login-lang-row .login-lang select{
  height:40px !important; min-height:40px !important;
  font-size:var(--fs-caption) !important;
  padding:0 var(--s3) !important;
}
.guide-cta{
  flex:0 0 auto;
  display:flex; align-items:center; gap:6px;
  height:40px; padding:0 14px;
  border:1px solid var(--gold); border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.05));
  color:var(--gold-light);
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:13px;
  letter-spacing:.02em; cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.guide-cta:hover{ background:linear-gradient(135deg, rgba(245,158,11,.24), rgba(245,158,11,.08)); transform:translateY(-1px); }
.guide-cta:active{ transform:translateY(0); }
.guide-cta .ico{ width:14px; height:14px; flex:0 0 auto; }

/* Card polish — a touch more depth + a hairline gold top accent */
#loginView .login-card{
  position:relative;
  border:1px solid var(--glass-border);
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
#loginView .login-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.7;
}

/* Logo glow on the login head */
.login-head .logo{ filter:drop-shadow(0 6px 18px rgba(245,158,11,.25)); }

/* Consent line under sign-in actions */
.login-consent{
  margin:12px auto 0; max-width:340px; text-align:center;
  font-size:var(--fs-micro); color:var(--text-tertiary); line-height:1.5;
}
.login-consent a{ color:var(--gold); text-decoration:none; }
.login-consent a:hover{ text-decoration:underline; }

/* ══════════ CONSENT CHECKBOX GATE (v46) ══════════ */
.login-consent-check{
  display:flex; align-items:flex-start; gap:9px;
  margin:12px auto 0; max-width:340px;
  font-size:var(--fs-caption); color:var(--text-secondary); line-height:1.5;
  cursor:pointer; padding:9px 11px;
  border:1px solid var(--border-subtle); border-radius:var(--r-md);
  background:var(--glass-medium);
  transition:border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.login-consent-check:hover{ border-color:var(--border-gold); }
.login-consent-check input{ width:18px; height:18px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--gold); cursor:pointer; }
.login-consent-check a{ color:var(--gold); text-decoration:none; }
.login-consent-check a:hover{ text-decoration:underline; }
.login-consent-check.nudge{ animation:consentNudge .4s var(--ease-out); border-color:var(--gold); }
@keyframes consentNudge{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); } 40%{ transform:translateX(5px); }
  60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); }
}
.login-consent-hint{
  max-width:340px; margin:6px auto 0; text-align:center;
  font-size:var(--fs-micro); color:var(--gold-light);
}

/* ══════════ DANGER ZONE (delete my data, bottom of CHECK) ══════════ */
.danger-zone{
  margin:26px auto 8px; max-width:520px; padding:14px 16px;
  border:1px solid rgba(224,108,108,.3); border-radius:var(--r-md);
  background:rgba(224,108,108,.05);
}
.danger-zone .dz-title{
  font-size:var(--fs-caption); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#e06c6c; margin-bottom:6px;
}
.danger-zone .dz-toggle{
  display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  font-size:var(--fs-caption); color:var(--text-secondary); line-height:1.5;
}
.danger-zone .dz-toggle input{ width:18px; height:18px; margin:1px 0 0; flex:0 0 auto; accent-color:#e06c6c; cursor:pointer; }
.danger-zone #btnDeleteData:disabled{ opacity:.45; cursor:not-allowed; }

/* Copyright / IP notice on login footer */
.login-legal-copy{
  max-width:340px; margin:10px auto 0; text-align:center;
  font-size:9px; line-height:1.5; color:var(--text-tertiary);
  border-top:1px solid var(--border-subtle); padding-top:8px;
}

/* ══════════ SIGN-IN COMPACT FIX (v47) ══════════
   The global "#loginView input" rule (ID specificity) was stretching the
   consent checkbox to full width / 56px tall, pushing the "I agree" text
   outside its box. These higher-specificity rules pin the checkbox small,
   keep the label text inside the box, and shrink the language + guide row. */

/* Reset the consent checkbox — override the wide #loginView input rule */
#loginView .login-consent-check input[type="checkbox"],
#loginView input#consentChk{
  width:16px !important;
  height:16px !important;
  min-height:0 !important;
  padding:0 !important;
  margin:1px 0 0 !important;
  border-radius:4px;
  flex:0 0 auto;
  box-shadow:none !important;
  accent-color:var(--gold);
}

/* Compact consent box so the text stays inside */
#loginView .login-consent-check{
  align-items:flex-start;
  gap:8px;
  padding:8px 10px;
  margin-top:10px;
  font-size:11px;
  line-height:1.4;
}
#loginView .login-consent-check span{
  flex:1 1 auto;
  min-width:0;
  word-break:break-word;
}
#loginView .login-consent-hint{ font-size:9px; margin-top:5px; }

/* Compact language + guide row */
#loginView .login-lang-row{ gap:6px; margin-top:8px; align-items:flex-end; }
#loginView .login-lang-row .login-lang{ margin-bottom:0; }
#loginView .login-lang-row .login-lang label{ font-size:8px; margin-bottom:3px; }
#loginView .login-lang-row .login-lang select{
  height:36px !important;
  min-height:36px !important;
  font-size:12px !important;
  padding:0 28px 0 10px !important;
}
/* realign the select's dropdown arrow to the shorter height */
#loginView .login-lang-row .login-lang.sel::after{ top:18px; right:12px; width:8px; height:8px; }
#loginView .guide-cta{
  height:36px;
  padding:0 12px;
  font-size:12px;
  gap:5px;
}
#loginView .guide-cta .ico{ width:13px; height:13px; }

/* ══════════ LANGUAGE DIALOG + APP GUIDE/LANG ROW (v48) ══════════ */

/* Modal that asks preferred language (first run + "change") */
.lang-dialog{
  position:fixed; inset:0; z-index:var(--z-toast);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  /* Solid scrim only — NO backdrop-filter. The app's other full-screen
     fixed overlays (#guideSheet, #loginView) avoid backdrop-filter because
     it creates a compositing layer that intercepts scroll/touch on Android
     & Chrome. Sits above --z-modal so it is never behind the sign-in page. */
  background:rgba(6,6,8,0.92);
  opacity:0; animation:fadeIn var(--t-base) var(--ease-out) forwards;
}
.lang-dialog[hidden]{ display:none; animation:none; opacity:0; }
.lang-dialog-card{
  width:100%; max-width:360px;
  background:rgba(20,20,24,0.99); border:1px solid var(--glass-border);
  border-radius:var(--r-2xl);
  padding:20px 18px;
  box-shadow:var(--shadow-2xl), inset 0 1px 0 rgba(255,255,255,.06);
  animation:scaleIn var(--t-base) var(--ease-spring) forwards;
}
.lang-dialog-head{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.lang-dialog-head .ico{ color:var(--gold); width:26px; height:26px; flex:0 0 auto; margin-top:2px; }
.lang-dialog-title{
  font-family:var(--font-display); font-weight:var(--fw-heavy);
  font-size:17px; color:var(--text-primary); line-height:1.2;
}
.lang-dialog-sub{ font-size:var(--fs-caption); color:var(--text-secondary); margin-top:4px; line-height:1.4; }
.lang-dialog-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lang-opt{
  height:52px;
  border:1px solid var(--border-default); border-radius:var(--r-md);
  background:var(--bg-surface); color:var(--text-primary);
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:15px;
  cursor:pointer; transition:all var(--t-fast) var(--ease-out);
}
.lang-opt:hover{ border-color:var(--gold); background:var(--bg-elevated); transform:translateY(-1px); }
.lang-opt.sel{ border-color:var(--gold); background:var(--gold-wash); color:var(--gold-light); box-shadow:0 0 0 2px var(--gold-wash); }
.lang-opt:active{ transform:translateY(0) scale(.98); }


/* ══════════ MINIMAL LANGUAGE TOGGLE (v49) ══════════
   Replaces the inline dropdown + confirm row on sign-in with one small
   pill. Tapping it opens the language dialog (the full list). */
#loginView .login-lang-row{ display:none; }   /* legacy, no longer used */

#loginView button.lang-toggle{
  width:fit-content !important; min-width:0; max-width:100%;
  height:38px !important;
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:12px auto 0;
  padding:0 14px;
  border:1px solid var(--border-default); border-radius:var(--r-full);
  background:var(--bg-surface); color:var(--text-secondary);
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:13px;
  letter-spacing:.01em; cursor:pointer; overflow:visible;
  box-shadow:none;
  transition:border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
#loginView button.lang-toggle .ico{ width:15px; height:15px; color:var(--text-tertiary); flex:0 0 auto; }
#loginView button.lang-toggle .lt-chev{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; opacity:.7; flex:0 0 auto; }
#loginView button.lang-toggle:hover{ border-color:var(--border-gold); color:var(--text-primary); transform:none; box-shadow:none; }
#loginView button.lang-toggle:active{ transform:scale(.98); }
#loginView button.lang-toggle.ok{ border-color:var(--border-gold); background:var(--gold-wash); color:var(--gold-light); }
#loginView button.lang-toggle.ok .ico{ color:var(--gold); }
#loginView button.lang-toggle.nudge{ animation:consentNudge .4s var(--ease-out); border-color:var(--gold); }

/* the gate checkbox is state-only, never shown */
.lt-gate{ position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden; clip:rect(0 0 0 0); border:0 !important; }

/* Close (×) on the language dialog so it is never a trap (v50) */
.lang-dialog-card{ position:relative; }
.lang-dialog-close{
  position:absolute; top:8px; right:8px;
  width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:transparent; color:var(--text-tertiary);
  font-size:26px; line-height:1; cursor:pointer;
  transition:color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.lang-dialog-close:hover{ color:var(--text-primary); background:var(--bg-surface); }

/* ════════════════════════════════════════════════════════════
   GLASSMORPHISM — applied deliberately, and only where it is safe.

   This app has already been bitten by backdrop-filter. Three separate
   comments in this codebase record it: on a position:fixed, full-screen
   element, backdrop-filter creates a compositing layer that intercepts
   scroll and touch across the whole viewport on Android and Chrome.
   That is the scroll bug. So:

     YES  the sign-in card and the Google button — normal in-flow
          elements inside a scrolling view, layered over the gold bloom
          that this screen still has. This is where glass actually
          reads, because there is something behind it to blur.
     NO   the header and the bottom navigation (position:fixed)
     NO   the sign-in scrim, the language dialog, the guide sheet
          (fixed, full-screen — the documented bug)

   In-app cards are also left alone: over a flat black background there
   is nothing to blur, so it would cost GPU on mid-range phones and
   return a slightly grey panel.
   ════════════════════════════════════════════════════════════ */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  #loginView .card {
    background: rgba(20, 20, 25, 0.55);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 0 1px rgba(245, 158, 11, 0.06);
  }

  /* The Google button is the only thing anyone taps on this screen, so
     it gets a frosted panel of its own rather than a flat fill. */
  .google-btn-brand {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  /* The walkthrough card. Safe because the tour locks page scroll while
     it is open and is removed from the DOM when dismissed. */
  .ob-card {
    background: rgba(20, 20, 25, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
  }
}

/* A soft gold rim on the sign-in card — the "premium" cue, done with a
   border rather than a glow so it stays crisp on low-DPI screens. */
#loginView .card {
  position: relative;
  overflow: hidden;
}
#loginView .card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
              rgba(245, 158, 11, 0.35), transparent 40%,
              transparent 60%, rgba(245, 158, 11, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}