/* ============================================================
   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;
}

/* Premium ambient background for login */
#loginView::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: 
    radial-gradient(circle at 30% 20%, var(--gold-wash) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, var(--blue-wash) 0%, transparent 40%);
  opacity: 0.8;
  animation: ambientShift 15s ease-in-out infinite;
}

@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 ────────── */
.login-actions {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s6);
}

#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;
}

/* Primary sign-in button */
#btnSignIn {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--bg-base);
  
  box-shadow: var(--shadow-md),
              0 0 32px var(--gold-glow);
}

#btnSignIn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    transparent 35%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: sheen 6s var(--ease-in-out) 1.5s infinite;
}

@keyframes sheen {
  0%, 100% {
    transform: translateX(-100%);
  }
  20%, 80% {
    transform: translateX(150%);
  }
}

#btnSignIn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg),
              0 0 48px var(--gold-glow);
}

/* Secondary sign-up button */
#btnSignUp {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  box-shadow: none;
}

#btnSignUp:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

#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);
  }
}

/* "or" divider between email/phone and Google sign-in */
.login-or{ display:flex; align-items:center; gap:12px; margin:14px 0 10px; color:var(--text-tertiary); font-size:var(--fs-caption); }
.login-or::before, .login-or::after{ content:""; flex:1; height:1px; background:var(--border-subtle); }

/* 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); }

/* Divider "or use email" */
.login-or{ position:relative; text-align:center; margin:14px 0 10px; }
.login-or span{ position:relative; z-index:1; background:var(--bg-surface); padding:0 12px;
  color:var(--text-tertiary); font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; }
.login-or::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--border-subtle); }

/* 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); }

/* Small Guide + Language row in the app, above "Sign out" */
.app-guide-lang{ display:flex; gap:10px; align-items:flex-end; }
.app-guide-lang .login-lang{ position:relative; flex:1 1 auto; margin:0; min-width:0; }
.app-guide-lang .login-lang > label{
  font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-tertiary); display:flex; align-items:center; gap:5px;
  margin:0 0 4px 2px;
}
.app-guide-lang .login-lang > label .ico{ width:12px; height:12px; }
.app-guide-lang .login-lang select{
  width:100%; height:38px; appearance:none; -webkit-appearance:none;
  background:var(--bg-surface); color:var(--text-primary);
  border:1px solid var(--border-default); border-radius:var(--r-md);
  padding:0 30px 0 12px; font-size:var(--fs-caption); font-family:var(--font-body); cursor:pointer;
}
.app-guide-lang .login-lang.sel::after{
  content:""; position:absolute; right:12px; bottom:15px; width:8px; height:8px;
  border-right:2px solid var(--text-tertiary); border-bottom:2px solid var(--text-tertiary);
  transform:rotate(45deg); pointer-events:none;
}
.app-guide-lang .guide-cta{ flex:0 0 auto; height:38px; padding:0 14px; }

/* ══════════ 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); }