/*
 * auth.css — shared styling for the pikel.app auth island (/login, /auth/callback,
 * /profile). Reuses the EXACT design tokens from api/redirect.ts (PAGE_CSS) so the
 * authed surface feels continuous with the public SSR previews: dark-default with
 * a drifting aurora + glass cards, Apple system fonts, light-mode via media query,
 * full reduced-motion support.
 */
:root{
  --bg:#07070b; --bg2:#0c0c12;
  --ink:#f5f5f7; --ink-dim:#a1a1a6; --ink-faint:#6b6b73;
  --card:rgba(22,22,28,.72); --card-brd:rgba(255,255,255,.10); --hair:rgba(255,255,255,.08);
  --field:rgba(255,255,255,.04); --field-brd:rgba(255,255,255,.14);
  --accent:#8b6cff; --accent-2:#b79bff; --teal:#2bd4a8; --amber:#ffb23e; --red:#ff6b6b;
  --teal-text:#2bd4a8; --amber-text:#ffb23e;
  --shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 8px 24px -8px rgba(0,0,0,.6);
  --glass-blur:saturate(180%) blur(20px);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#fbfbfd; --bg2:#ffffff;
    --ink:#1d1d1f; --ink-dim:#6e6e73; --ink-faint:#9a9aa1;
    --card:rgba(255,255,255,.82); --card-brd:rgba(0,0,0,.07); --hair:rgba(0,0,0,.08);
    --field:rgba(0,0,0,.025); --field-brd:rgba(0,0,0,.14);
    --accent:#6a3df0; --accent-2:#8a5cff; --teal:#0fae84; --amber:#c97a12; --red:#d23b3b;
    --teal-text:#0a8f6c; --amber-text:#9a5e0c;
    --shadow:0 24px 64px -20px rgba(40,30,90,.22), 0 6px 18px -8px rgba(0,0,0,.10);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
/* The `hidden` attribute must always win. Author rules like `.field{display:flex}`
   otherwise override the UA `[hidden]{display:none}` and leak hidden fields
   (e.g. the signup-only name field showing in sign-in mode). */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  /* dvh (not svh): keeps the page from snapping back when iOS Safari's URL bar
     collapses mid-scroll on tall funnel steps (division list + DUPR gloss). */
  min-height:100dvh; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; align-items:center;
  /* Extra bottom clearance so the inline Continue/Back row never sits under Safari's
     floating bottom toolbar on a fully-scrolled funnel step. */
  padding:max(28px,env(safe-area-inset-top)) 18px calc(64px + env(safe-area-inset-bottom));
  position:relative; overflow-x:hidden;
}
.bg{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.bg::before,.bg::after{content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.55}
.bg::before{width:60vmax; height:60vmax; left:-15vmax; top:-20vmax;
  background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);
  animation:drift1 22s ease-in-out infinite alternate}
.bg::after{width:52vmax; height:52vmax; right:-18vmax; bottom:-16vmax;
  background:radial-gradient(circle at 60% 60%, var(--teal), transparent 60%); opacity:.32;
  animation:drift2 26s ease-in-out infinite alternate}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift1{to{transform:translate(8vmax,6vmax) scale(1.1)}}
@keyframes drift2{to{transform:translate(-7vmax,-5vmax) scale(1.08)}}

/* ---- Global site header (pikel-nav.js) ---- */
body.has-nav{padding-top:0}
.site-nav{position:sticky; top:0; z-index:50; width:100%;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hair)}
.site-nav-in{max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:16px;
  padding:11px max(16px,env(safe-area-inset-left)) 11px max(16px,env(safe-area-inset-right))}
.nav-brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink)}
.nav-brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--teal))}
.nav-brand b{font-size:16px; font-weight:700; letter-spacing:-.02em}
.nav-links{display:flex; align-items:center; gap:2px}
.nav-links a{font-size:14px; font-weight:600; color:var(--ink-dim); text-decoration:none;
  padding:7px 11px; border-radius:9px; transition:color .15s, background .15s}
.nav-links a:hover{color:var(--ink); background:var(--hair)}
.nav-links a[aria-current="page"]{color:var(--ink); background:var(--hair)}
.nav-right{display:flex; align-items:center; gap:10px; margin-left:auto}
.nav-signin{font-size:14px; font-weight:600; color:#fff; text-decoration:none; white-space:nowrap;
  padding:9px 16px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 22px -12px color-mix(in srgb,var(--accent) 70%,transparent); transition:filter .15s, transform .15s}
.nav-signin:hover{filter:brightness(1.05); transform:translateY(-1px)}
.nav-avatar-wrap{position:relative}
.nav-avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--card-brd); padding:0; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--teal)); color:#fff; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.nav-avatar img{width:100%;height:100%;object-fit:cover}
.nav-menu{position:absolute; right:0; top:48px; min-width:210px; padding:8px; display:none; flex-direction:column;
  background:var(--card); border:1px solid var(--card-brd); border-radius:14px; box-shadow:var(--shadow);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur)}
.nav-avatar-wrap.open .nav-menu{display:flex}
.nav-menu-name{font-size:14px; font-weight:700; padding:6px 10px 0}
.nav-menu-mail{font-size:12.5px; color:var(--ink-dim); padding:0 10px 6px; word-break:break-all}
.nav-menu-sep{height:1px; background:var(--hair); margin:6px 0}
.nav-menu-item{display:block; text-align:left; font:inherit; font-size:14px; font-weight:600; color:var(--ink);
  background:none; border:0; padding:9px 10px; border-radius:9px; cursor:pointer; text-decoration:none}
.nav-menu-item:hover{background:var(--hair)}
.nav-menu-item.danger{color:var(--red)}
.has-nav .stage{margin-top:38px}
@media (max-width:560px){ .nav-links a{padding:7px 7px; font-size:13px} .site-nav-in{gap:6px; padding-left:12px; padding-right:12px} .nav-signin{padding:8px 13px} }

.stage{width:100%; max-width:420px; display:flex; flex-direction:column}
.stage.wide{max-width:560px}
.brand{display:flex; align-items:center; gap:9px; justify-content:center; margin-bottom:22px; opacity:.92; text-decoration:none; color:inherit}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--teal))}
.brand b{font-size:16px; font-weight:600; letter-spacing:-.01em}

.card{
  background:var(--card); border:1px solid var(--card-brd); border-radius:26px;
  box-shadow:var(--shadow); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  padding:28px 24px;
}
h1{font-size:clamp(24px,6vw,30px); line-height:1.08; font-weight:700; letter-spacing:-.025em}
.sub{margin-top:8px; color:var(--ink-dim); font-size:15px}
/* Center the auth-card header so the whole login column reads as one centered
   stack (matching the native app), not left header over centered buttons/captions. */
.authhead{text-align:center}

/* Segmented Sign in / Create account */
.seg{display:flex; gap:4px; background:var(--field); border:1px solid var(--field-brd); border-radius:14px; padding:4px; margin:18px 0 20px}
.seg button{flex:1; appearance:none; border:0; background:transparent; color:var(--ink-dim);
  font:inherit; font-weight:600; font-size:14px; padding:9px 0; border-radius:10px; cursor:pointer; transition:color .15s}
.seg button[aria-selected="true"]{background:var(--card); color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.18); border:1px solid var(--card-brd)}

/* The linking-first banner — the no-fork UX defense */
.banner{display:flex; gap:11px; align-items:flex-start; padding:13px 14px; border-radius:14px;
  background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  font-size:13.5px; color:var(--ink-dim); line-height:1.45; margin-bottom:18px}
.banner .bi{flex:0 0 auto; font-size:16px; line-height:1.2}
.banner b{color:var(--ink); font-weight:600}

/* Fork-defense one-liner under the primary Google button — quiet, at the decision
   point, not a page-dominating card. */
.forknote{margin:12px 4px 0; font-size:12.5px; line-height:1.45; color:var(--ink-faint); text-align:center}
.forknote b{color:var(--ink-dim); font-weight:600}

/* Sign in ⇄ Sign up switch (replaces the segmented tabs) — Google stays primary. */
.modeswitch{margin-top:18px; text-align:center; font-size:13.5px; color:var(--ink-dim)}
.modeswitch .tlink{font-weight:600}

/* Fields */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.field label{font-size:13px; font-weight:600; color:var(--ink-dim); letter-spacing:-.005em}
.input{appearance:none; width:100%; padding:13px 14px; border-radius:13px;
  background:var(--field); border:1px solid var(--field-brd); color:var(--ink);
  font:inherit; font-size:16px; letter-spacing:-.01em; transition:border-color .15s, box-shadow .15s}
.input::placeholder{color:var(--ink-faint)}
.input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.input.otp{text-align:center; letter-spacing:.5em; font-size:22px; font-weight:600; font-variant-numeric:tabular-nums}

/* Buttons */
.btn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:14px; border-radius:14px; font-size:16px; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; color:#fff; border:none; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 12px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, filter .18s, opacity .18s}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn:active{transform:translateY(0) scale(.99)}
.btn[disabled]{opacity:.55; cursor:default; transform:none; filter:none}
.btn.secondary{background:var(--field); color:var(--ink); border:1px solid var(--field-brd); box-shadow:none}
.btn.secondary:hover{border-color:var(--accent); filter:none}
.btn.google{background:#fff; color:#1f1f1f; border:1px solid rgba(0,0,0,.12); box-shadow:0 6px 18px -10px rgba(0,0,0,.4)}
.btn.google:hover{filter:none; background:#fafafa}
.btn svg{width:18px; height:18px; flex:0 0 auto}
.btn.danger{background:transparent; color:var(--red); border:1px solid color-mix(in srgb,var(--red) 40%,transparent); box-shadow:none}
.btn.full{margin-top:6px}

/* Divider */
.divider{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-faint); font-size:12.5px; font-weight:600; letter-spacing:.04em}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--hair)}

.linkrow{display:flex; justify-content:space-between; gap:10px; margin-top:14px; font-size:13.5px}
.tlink{background:none; border:0; color:var(--accent-2); font:inherit; font-weight:600; cursor:pointer; text-decoration:none; padding:0}
.tlink:hover{text-decoration:underline}
.muted{color:var(--ink-faint)}

/* Messages */
.msg{margin-top:16px; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.45; display:none}
.msg.show{display:block}
.msg.error{color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent); border:1px solid color-mix(in srgb,var(--red) 28%,transparent)}
.msg.ok{color:var(--teal-text); background:color-mix(in srgb,var(--teal) 12%,transparent); border:1px solid color-mix(in srgb,var(--teal) 26%,transparent)}
.msg.info{color:var(--ink-dim); background:var(--hair); border:1px solid var(--card-brd)}

.foot{margin-top:18px; text-align:center; font-size:12.5px; color:var(--ink-faint); line-height:1.5}
.foot a{color:var(--ink-dim); text-decoration:none}
.foot a:hover{color:var(--ink)}

a:focus-visible,.btn:focus-visible,.tlink:focus-visible,.seg button:focus-visible,.input:focus-visible{
  outline:3px solid var(--accent-2); outline-offset:2px; border-radius:12px}

/* Spinner (callback + async states) */
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--hair);border-top-color:var(--accent);
  animation:spin .8s linear infinite; margin:8px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 0}

/* ---- Profile page ---- */
.phead{display:flex; align-items:center; gap:16px; margin-bottom:6px}
.avatar{flex:0 0 auto; width:64px;height:64px;border-radius:50%; object-fit:cover;
  background:linear-gradient(135deg,var(--accent),var(--teal)); display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:26px; font-weight:700; letter-spacing:-.02em; border:1px solid var(--card-brd)}
.pname{font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.pmail{font-size:14px; color:var(--ink-dim); margin-top:2px; word-break:break-all}
.pchips{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px}
.chip{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:600; border:1px solid var(--card-brd); color:var(--ink-dim)}
.chip.skill{color:var(--accent-2); background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:color-mix(in srgb,var(--accent) 26%,transparent)}

.section-h{margin:24px 0 11px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.rows{display:flex; flex-direction:column; gap:9px}
.rrow{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 15px; border:1px solid var(--hair); border-radius:14px; background:color-mix(in srgb,var(--card) 60%,transparent);
  text-decoration:none; color:inherit; transition:border-color .15s, transform .15s}
a.rrow:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--card-brd)); transform:translateY(-1px)}
.rrow .rl{min-width:0}
.rrow .rn{font-size:15px; font-weight:600; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rrow .rm{font-size:13px; color:var(--ink-dim); margin-top:2px}
.rrow .rr{flex:0 0 auto; text-align:right}
a.rn{color:inherit; text-decoration:none}
a.rn:hover{color:var(--accent-2); text-decoration:underline}
.rcta{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.rcta .tlink{font-size:14px}
.pay{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600}
.pay.paid{color:var(--teal-text); background:color-mix(in srgb,var(--teal) 14%,transparent)}
.pay.pending{color:var(--amber-text); background:color-mix(in srgb,var(--amber) 14%,transparent)}
.pay.none{color:var(--ink-faint); background:var(--hair)}
.placement{font-size:13px; font-weight:700; color:var(--amber-text)}

.empty{text-align:center; color:var(--ink-dim); font-size:14.5px; padding:22px 16px;
  border:1px dashed var(--hair); border-radius:14px}

.cta-app{margin-top:26px; display:flex; flex-direction:column; gap:10px; align-items:center;
  padding:20px; border-radius:18px; border:1px solid var(--card-brd); background:color-mix(in srgb,var(--card) 55%,transparent); text-align:center}
.cta-app p{font-size:14px; color:var(--ink-dim); line-height:1.5}
.stores{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:4px}
.stores a{display:inline-flex; opacity:.92; transition:opacity .2s, transform .2s}
.stores a:hover{opacity:1; transform:translateY(-1px)}
.stores img{height:40px;width:auto}
.stores img.play{height:58px;margin:-9px 0}

/* ---- Homepage ---- */
.home{width:100%; max-width:1000px; display:flex; flex-direction:column; align-items:center}
.hero{max-width:740px; text-align:center; padding:48px 0 30px}
.hero h1{font-size:clamp(36px,8.5vw,64px); line-height:1.03; font-weight:800; letter-spacing:-.04em}
.hero h1 .grad{background:linear-gradient(120deg,var(--accent),var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{margin:18px auto 0; font-size:clamp(16px,2.4vw,20px); color:var(--ink-dim); line-height:1.5; max-width:560px}
.hero-cta{margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero-cta .btn{width:auto; padding:14px 26px}
.browse{width:100%; margin-top:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:720px){ .browse{grid-template-columns:1fr} }
.bcard{display:flex; flex-direction:column; gap:9px; padding:24px; border-radius:20px; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--card-brd); box-shadow:var(--shadow);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), border-color .18s}
.bcard:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 45%,var(--card-brd))}
.bcard .ic{font-size:26px}
.bcard h3{font-size:18px; font-weight:700; letter-spacing:-.02em}
.bcard .bp{font-size:14px; color:var(--ink-dim); line-height:1.5}
.bcard .go{margin-top:6px; font-size:13px; font-weight:700; color:var(--accent-2)}
.home-stores{display:flex; gap:14px; justify-content:center; align-items:center; margin-top:40px}
.home-stores a{transition:transform .2s, opacity .2s; opacity:.94}
.home-stores a:hover{transform:translateY(-2px); opacity:1}
.home-stores img{height:46px;width:auto}
.home-stores img.play{height:66px; margin:-10px 0}
.home-foot{margin-top:44px; padding-bottom:28px; text-align:center; color:var(--ink-faint); font-size:13px}
.home-foot a{color:var(--ink-dim); text-decoration:none; margin:0 2px}
.home-foot a:hover{color:var(--ink)}

/* Entrance */
.rise{opacity:0; transform:translateY(16px); animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}.d4{animation-delay:.28s}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .bg::before,.bg::after{animation:none}
  .rise{animation:none; opacity:1; transform:none}
  .spinner{animation-duration:1.6s}
}