/* Access uses a decorative calendar made from CSS, with no account content. */

.access-stage {

  --access-bg:#f0f4f1;

  --access-card:#fff;

  --access-ink:#172822;

  --access-muted:#52655b;

  --access-line:#d8e2dc;

  --access-soft:#f3f7f4;

  --access-accent:#075e49;

  --access-action:#075e49;

  --access-action-ink:#fff;

  position:relative;

  isolation:isolate;

  display:grid;

  align-content:center;

  justify-items:center;

  gap:22px;

  min-height:100vh;

  min-height:100dvh;

  overflow:hidden;

  padding:28px 18px;

  background:radial-gradient(ellipse at 18% 12%,#cbe8dc 0%,transparent 50%),var(--access-bg);

  color:var(--access-ink);

}

:root[data-theme=dark] .access-stage {

  --access-bg:#121c18;

  --access-card:#1d2b24;

  --access-ink:#f2f7f3;

  --access-muted:#b4c7ba;

  --access-line:#46594d;

  --access-soft:#26372e;

  --access-accent:#a0ebc8;

  --access-action:#a0ebc8;

  --access-action-ink:#09271b;

  background:radial-gradient(ellipse at 18% 12%,#253d30 0%,transparent 50%),var(--access-bg);

}

.access-art {

  position:absolute;

  z-index:-1;

  inset:13% -7%;

  display:grid;

  align-content:center;

  gap:18px;

  filter:blur(6px);

  opacity:.62;

  pointer-events:none;

  transform:rotate(-7deg);

}

.access-grid {display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:14px}

.access-grid span {

  height:clamp(120px,19vw,255px);

  border:1px solid var(--access-line);

  border-radius:16px;

  background:linear-gradient(var(--access-card) 22%,transparent 22% 74%,var(--access-card) 74%),#94cbb4;

  box-shadow:0 10px 30px #0a302613;

}

.access-grid span:nth-child(3n+1){background-color:#edc694}

.access-grid span:nth-child(3n+2){background-color:#b3afe3}

.access-grid span:nth-child(4n){background-color:#e4aaaf}

.access-stage .access-card {

  width:min(100%,448px);

  max-width:none;

  margin:0;

  padding:clamp(24px,5vw,42px);

  border:1px solid var(--access-line);

  border-radius:28px;

  background:var(--access-card);

  color:var(--access-ink);

  box-shadow:0 24px 80px #122e2530,0 2px 10px #122e250c;

  text-align:left;

}

.access-card header{text-align:center;margin-bottom:24px}

.access-card .auth-brand {

  display:flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  margin:0 0 27px;

  font-size:25px;

  font-weight:700;

}

.auth-emblem {

  display:grid;

  place-items:center;

  width:36px;

  height:36px;

  border-radius:11px;

  background:var(--access-action);

  color:var(--access-action-ink);

}

.auth-emblem i{font-size:23px}

.auth-wordmark{width:160px;height:43px;object-fit:contain}

.access-card .auth-mark-dark,:root[data-theme=dark] .access-card .auth-mark-light{display:none}

:root[data-theme=dark] .access-card .auth-mark-dark{display:block}

.access-card .access-kicker{margin:0 0 8px;color:var(--access-accent);font-size:11px;font-weight:700;letter-spacing:.13em}

.access-card h1{margin:0;color:var(--access-ink);font-size:clamp(28px,6vw,35px);letter-spacing:-.035em;line-height:1.08}

.access-card .access-description{margin:12px 0 0;color:var(--access-muted);font-size:15px;line-height:1.45;overflow-wrap:anywhere}

.access-card form{display:grid;gap:12px;margin:0}

.access-card form[hidden]{display:none}

.access-card label{display:grid;gap:6px;margin:0;color:var(--access-ink);font-size:14px;font-weight:600}

.access-card input {

  width:100%;

  min-height:47px;

  margin:0;

  padding:11px 13px;

  border:1px solid var(--access-line);

  border-radius:11px;

  background:var(--access-card);

  color:var(--access-ink);

  font-size:16px;

}

.access-card input::placeholder{color:var(--access-muted)}

.access-card :focus-visible,.access-stage .auth-privacy:focus-visible{outline:2px solid var(--access-accent);outline-offset:3px}

.access-card .button,.access-card button.primary {

  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;

  width:100%;

  min-height:46px;

  padding:10px 14px;

  border-radius:11px;

  font-size:16px;

  font-weight:600;

  text-decoration:none;

}

.access-card .google-login,.access-card .access-secondary {

  border:1px solid var(--access-line);

  background:var(--access-soft);

  color:var(--access-ink);

}

.access-card .primary{border:1px solid var(--access-action);background:var(--access-action);color:var(--access-action-ink)}

.access-card .primary:hover,.access-card .google-login:hover,.access-card .access-secondary:hover{filter:brightness(.92)}

.access-card .text-button {

  display:block;

  width:fit-content;

  margin:12px auto 0;

  padding:5px;

  color:var(--access-accent);

  font-size:14px;

  text-align:center;

}

.access-card form .text-button{margin:0 auto}

.access-card .access-divider{display:flex;align-items:center;gap:12px;margin:19px 0;color:var(--access-muted);font-size:13px}

.access-divider::before,.access-divider::after{content:"";flex:1;height:1px;background:var(--access-line)}

.access-email{display:flex;align-items:center;justify-content:space-between;gap:8px;overflow-wrap:anywhere;color:var(--access-muted);font-size:14px}

.access-card .access-email .text-button{margin:0}

.access-card small,.access-card [role=status]{color:var(--access-muted);font-size:14px}

.access-card .error-text:empty,.access-card [role=status]:empty{display:none}

.access-card .error-text{margin:0;color:#a5273f}

:root[data-theme=dark] .access-card .error-text{color:#ff9caf}

.access-tip{margin:0 0 14px;padding:11px 12px;border-radius:10px;background:var(--access-soft);color:var(--access-muted);font-size:14px}

.access-stage .auth-privacy{margin:0;color:var(--access-muted);font-size:13px}

.auth-welcome {

  position:fixed;

  z-index:90;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%);

  display:flex;

  align-items:center;

  gap:11px;

  width:max-content;

  max-width:calc(100vw - 32px);

  padding:16px 22px;

  border:1px solid var(--line);

  border-radius:16px;

  background:var(--surface);

  color:var(--ink);

  box-shadow:0 16px 60px #14282435;

  font-size:21px;

  font-weight:600;

  animation:auth-welcome 3s both;

  pointer-events:none;

}

.auth-welcome-mark{color:var(--accent)}

.auth-confetti{position:fixed;inset:0;z-index:89;pointer-events:none;overflow:hidden;display:flex;justify-content:space-around}

.auth-confetti i {

  position:relative;

  top:-16px;

  width:7px;

  height:11px;

  border-radius:2px;

  background:#2fa483;

  animation:auth-fall 2.3s ease-in both;

}

.auth-confetti i:nth-child(3n){background:#9d83cd;height:8px;animation-duration:1.9s}

.auth-confetti i:nth-child(3n+1){background:#edb767;animation-delay:.12s}

.auth-confetti i:nth-child(4n){animation-delay:.25s}

@keyframes auth-fall{0%{transform:translateY(0) rotate(0);opacity:.7}100%{transform:translate(30px,74vh) rotate(340deg);opacity:0}}

@keyframes auth-welcome{0%,100%{opacity:0}10%,86%{opacity:1}}

@media(prefers-reduced-motion:reduce){.auth-confetti{display:none}.auth-welcome{animation:none}}

@media(max-width:480px){.access-art{opacity:.42}.access-stage{padding-block:22px}}



.password-strength{display:grid;gap:4px}

.password-strength meter{width:100%;height:8px;accent-color:var(--accent)}

.password-strength small{color:var(--muted);font-size:13px}

.access-card .password-strength small{color:var(--access-muted)}

.access-card .access-email{flex-wrap:wrap}

:root[data-theme=dark] .auth-wordmark.auth-fallback-dark{background:#fff;border-radius:9px;padding:5px 8px}

.start-space{min-height:100dvh;display:grid;place-items:center;padding:24px 14px;background:var(--soft)}

.start-card{width:min(100%,530px);padding:clamp(18px,4vw,34px);border-radius:22px}

.start-card>header{text-align:center;margin-bottom:20px}

.start-card h1{font-size:clamp(25px,5vw,32px);margin:12px 0 4px}

.start-card .start-mark{font-size:22px;font-weight:700}

.start-card .connections-heading{display:none}

.start-card .network-connections{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:14px}

.start-card .network-connect-card{padding:9px 12px;min-height:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}

.start-card .network-connect-card h3{margin:0;font-size:15px}

.start-card .network-connect-card .instagram-help{flex-basis:100%;margin:0}

.start-card>button.primary{width:100%;margin-top:10px}

.start-card footer{display:flex;justify-content:center;gap:16px;margin-top:16px}

.email-reminder{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:12px 15px;margin:0 0 16px;border:1px solid var(--line);background:var(--soft);border-radius:12px}

.email-reminder small{display:block;margin-top:3px;color:var(--muted)}

.email-reminder button{font-size:13px}

.member-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;max-width:1000px}

.member-settings .panel{margin:0;padding:18px;border-radius:16px}

.member-settings .appearance-panel{max-width:none}

.member-settings .account-security details{margin:8px 0 0}

@media(max-width:760px){.member-settings{grid-template-columns:minmax(0,1fr)}}



.boot-screen{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:12px;background:#fff;color:#20252f}

.boot-wordmark{display:block;width:clamp(180px,35vw,290px);height:68px;object-fit:contain}

.boot-fuse{stroke-dasharray:1;animation:boot-fuse 1.4s ease-in infinite}

.boot-spark{animation:boot-spark .45s ease-in-out infinite alternate;transform-origin:38px 8px}

@keyframes boot-fuse{to{stroke-dashoffset:1}}

@keyframes boot-spark{to{opacity:.35;transform:scale(.5)}}

@media(prefers-reduced-motion:reduce){.boot-fuse,.boot-spark{animation:none}}



.start-card footer .onboarding-skip{background:none;border:0;box-shadow:none;color:var(--muted);padding:8px 12px}

.start-card footer .onboarding-skip:hover{color:var(--accent);text-decoration:underline}

:root[data-theme="dark"] .start-mark .brand-fallback img{filter:brightness(0) invert(1)}


.access-card .access-remember{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400}.access-remember input{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--accent)}