.bg-deco{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg-tile{
  position:absolute;opacity:.06;font-size: 4rem;font-weight:800;
  color:var(--gold);transform:rotate(-15deg);user-select:none;
  transition:opacity .6s ease
}
/* Splash state: the DUPLICS letters stand out on their own for a moment,
   then dim back to faint decoration once the rest of the page is revealed. */
body.splash .bg-tile{opacity:.22}
.bg-deco .bg-tile:nth-child(1){top:8%;left:5%}
.bg-deco .bg-tile:nth-child(2){top:15%;right:8%}
.bg-deco .bg-tile:nth-child(3){top:35%;left:12%}
.bg-deco .bg-tile:nth-child(4){top:55%;right:5%}
.bg-deco .bg-tile:nth-child(5){top:70%;left:4%}
.bg-deco .bg-tile:nth-child(6){bottom:12%;right:15%}
.bg-deco .bg-tile:nth-child(7){bottom:8%;left:30%}

#auth-page{opacity:0}
/* The two tabs have different heights (4 fields on "create account" vs 2 on "login"),
   so vertically centring the page would slide the DUPLICS logo up and down when
   switching tabs - and up under the iOS front camera on the taller tab. Anchoring the
   page to the top (the safe-area inset comes from .auth-page in style.css) keeps the
   logo at one fixed height, clear of the notch, whichever tab is active. */
.auth-page{position:relative;z-index:1;justify-content:flex-start}
.login-logo-wrap{margin-bottom:28px;text-align:center}
.login-logo-wrap .logo-tiles{justify-content:center;margin-bottom:8px}
.anon-desc{margin-top:12px}

.auth-tabs{
  display:flex;background:var(--raised);border-radius:var(--r-sm);
  padding:4px;margin-bottom:24px
}
.auth-tab{
  flex:1;padding:9px 12px;font-size: 0.875rem;font-weight:600;text-align:center;
  border-radius:6px;color:var(--t3);cursor:pointer;transition:all .2s
}
.auth-tab.active{background:var(--card);color:var(--t1);box-shadow:var(--sh-sm)}

.panel{display:none}
.panel.active{display:block}

.forgot-link{
  font-size: 0.8125rem;color:var(--primary);text-align:right;
  display:block;margin-top:-8px;margin-bottom:16px
}

.auth-footer{text-align:center;font-size: 0.8125rem;color:var(--t3);margin-top:2px}
.guest-btn{
  display: none;align-items:center;justify-content:center;gap:8px;
  padding:14px;border-radius:var(--r);border:1.5px dashed var(--border);
  color:var(--t2);font-size: 0.9375rem;font-weight:500;width:100%;cursor:pointer;
  transition:all .2s;margin-top:10px;background:transparent
}
.guest-btn:hover{border-color:var(--t2);background:var(--raised)}
.anon-desc{
  display: none;
}

/* Google sign-in / sign-up */
.auth-google{margin-top:20px}
.auth-or{
  display:flex;align-items:center;gap:12px;
  color:var(--t3);font-size: 0.75rem;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:16px
}
.auth-or::before,.auth-or::after{
  content:"";flex:1;height:1px;background:var(--border)
}
.google-signin-wrap{position:relative;display:flex;justify-content:center}
/* Transparent, over the whole GIS button: takes its first tap for the warning popup. */
.google-signin-guard{position:absolute;inset:0;cursor:pointer}

/* Native apps: our own "Continue with Google" button (GIS button is web-only) */
.google-native-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:280px;max-width:100%;margin:0 auto;padding:0 16px;height:44px;
  border-radius:22px;border:1px solid var(--border);
  background:var(--surface);color:var(--t1);
  font-family:inherit;font-size: 0.9375rem;font-weight:500;cursor:pointer;
  transition:background .2s,border-color .2s
}
.google-native-btn:hover{border-color:var(--primary)}
.google-native-btn:active{opacity:.85}
.google-native-icon{width:20px;height:20px;flex:0 0 auto}

/* iOS app: Sign in with Apple button. Apple's brand guidelines mandate the exact colours
   (solid black background, white logo + text), so — like the Google logo colours — these
   are intentionally fixed literals, not themeable custom properties. */
.apple-signin-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:280px;max-width:100%;margin:12px auto 0;padding:0 16px;height:44px;
  border-radius:22px;border:1px solid #000;
  background:#000;color:#fff;
  font-family:inherit;font-size: 0.9375rem;font-weight:500;cursor:pointer;
  transition:opacity .2s
}
.apple-signin-btn:active{opacity:.85}
.apple-signin-icon{width:17px;height:20px;flex:0 0 auto;margin-top:-2px}

.lang-bar{
  margin-top:20px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap
}
.lang-btn{
  padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:transparent;color:var(--t2);font-size: 0.8125rem;font-weight:500;
  cursor:pointer;transition:all .2s;font-family:inherit
}
.lang-btn:hover,.lang-btn.active{border-color:var(--primary);color:var(--primary)}