/* ZCOD auth — fixed iPhone frame (same size for login / register / forgot) */
:root{
  --auth-phone-w:390px;
  --auth-phone-h:720px;
  --auth-radius:44px;
  --auth-screen-pad:20px;
  --auth-blue:#007aff;
  --auth-fill:rgba(120,120,128,.12);
  --auth-sep:rgba(60,60,67,.18);
}

.dark{
  --auth-fill:rgba(120,120,128,.24);
  --auth-sep:rgba(84,84,88,.65);
}

.auth-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.36);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s cubic-bezier(.4,0,.2,1),visibility .4s;
}
.auth-overlay.open{
  display:grid;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.dark .auth-overlay{
  background:rgba(0,0,0,.55);
}

/* fixed phone shell — never changes size across modes */
.auth-panel{
  position:relative;
  box-sizing:border-box;
  width:var(--auth-phone-w);
  height:var(--auth-phone-h);
  max-width:100%;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--auth-radius);
  background:var(--bg);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 24px 80px rgba(0,0,0,.28);
  transform:translateY(18px) scale(.985);
  transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .7s ease,box-shadow .7s ease;
}
.auth-overlay.open .auth-panel{
  transform:none;
}
.dark .auth-panel{
  border-color:rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 24px 80px rgba(0,0,0,.55);
}

.auth-phone-bar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 0 6px;
}
.auth-phone-island{
  display:flex;
  align-items:center;
  justify-content:center;
  width:210px;
  height:44px;
  padding:0 12px;
  border-radius:26px;
  background:#111;
  overflow:hidden;
}
.dark .auth-phone-island{
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.auth-island-brand{
  position:relative;
  z-index:1;
  color:transparent;
  font-size:24px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  background-image:repeating-linear-gradient(105deg,#fff 0,#fff 82px,#8faeff 95px,#fff 108px,#fff 190px);
  background-size:190px 100%;
  background-repeat:repeat-x;
  background-position:0 0;
  -webkit-background-clip:text;
  background-clip:text;
  animation:auth-island-sheen 2.6s linear infinite;
}
@keyframes auth-island-sheen{
  from{background-position:0 0}
  to{background-position:190px 0}
}
@media(prefers-reduced-motion:reduce){
  .auth-island-brand{
    animation:none;
    background:none;
    color:#fff;
  }
}

.auth-screen{
  box-sizing:border-box;
  position:relative;
  flex:1;
  min-height:0;
  padding:8px var(--auth-screen-pad) 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.auth-nav{
  position:absolute;
  top:0;
  left:var(--auth-screen-pad);
  right:var(--auth-screen-pad);
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
  pointer-events:none;
}
.auth-nav-side{
  width:72px;
}
.auth-nav-side.end{
  display:flex;
  justify-content:flex-end;
  pointer-events:auto;
}
.auth-close{
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:var(--auth-fill);
  color:var(--text);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.auth-close:active{
  transform:scale(.94);
}

.auth-title{
  margin:0;
  color:var(--text);
  font-size:32px;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.1;
  text-align:center;
}
.auth-desc{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  min-height:0;
  text-align:center;
}

.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:14px;
  padding:2px;
  border-radius:10px;
  background:var(--auth-fill);
  flex-shrink:0;
}
.auth-tab{
  min-height:34px;
  padding:0 6px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-size:12px;
  font-weight:650;
  letter-spacing:-.01em;
  cursor:pointer;
}
.auth-tab.active{
  background:var(--surface);
  box-shadow:0 1px 4px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.04);
}
.dark .auth-tab.active{
  background:color-mix(in srgb,var(--surface) 88%,#fff);
  box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.auth-panel[data-mode="register"] .auth-tabs,
.auth-panel[data-mode="forgot"] .auth-tabs{
  visibility:hidden;
  height:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  pointer-events:none;
}

.auth-body{
  position:relative;
  flex:0 1 auto;
  margin-top:12px;
  min-height:0;
  overflow:visible;
}
.auth-form{
  display:none;
  grid-template-rows:auto auto auto;
  align-content:start;
  gap:12px;
  overflow:visible;
}
.auth-form.active{
  display:grid;
}

.auth-group{
  overflow:hidden;
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 0 0 0.5px var(--auth-sep);
}
.auth-field{
  position:relative;
  display:grid;
  gap:0;
}
.auth-field + .auth-field,
.auth-field + .auth-code-row,
.auth-code-row + .auth-field{
  border-top:0.5px solid var(--auth-sep);
}
.auth-field label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.auth-field input{
  box-sizing:border-box;
  width:100%;
  height:44px;
  padding:0 16px;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:17px;
  outline:none;
}
.auth-panel[data-mode="register"] .auth-field input,
.auth-panel[data-mode="forgot"] .auth-field input{
  height:42px;
}
.auth-field input::placeholder{
  color:color-mix(in srgb,var(--muted) 85%,transparent);
}

.auth-code-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:stretch;
}
.auth-code-row .auth-field{
  min-width:0;
}
.auth-code-btn{
  margin:8px 10px 8px 0;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:color-mix(in srgb,var(--auth-blue) 12%,transparent);
  color:var(--auth-blue);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.auth-code-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.auth-code-btn:active:not(:disabled){
  transform:scale(.97);
}

.auth-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.auth-check input{
  width:18px;
  height:18px;
  margin-top:1px;
  accent-color:var(--auth-blue);
}
.auth-check a{
  color:var(--auth-blue);
  text-decoration:none;
}

.auth-actions{
  display:grid;
  gap:6px;
  margin-top:0;
}
.auth-submit{
  height:48px;
  border:0;
  border-radius:14px;
  background:var(--auth-blue);
  color:#fff;
  font-size:17px;
  font-weight:650;
  cursor:pointer;
}
.auth-submit:active{
  transform:scale(.985);
  filter:brightness(.96);
}
.auth-status{
  min-height:16px;
  margin:0;
  color:#ff3b30;
  font-size:13px;
  font-weight:500;
  text-align:center;
}
.auth-status.ok{
  color:#34c759;
}
.auth-recover{
  margin:0;
  padding:8px 12px;
  min-height:36px;
  border-radius:10px;
  background:color-mix(in srgb,var(--auth-blue) 10%,transparent);
  color:var(--auth-blue);
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
}
.auth-recover[hidden]{
  display:block!important;
  visibility:hidden;
  background:transparent;
}

.auth-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
  flex-shrink:0;
}
.auth-links:has(> :only-child){
  grid-template-columns:1fr;
}
.auth-link-btn{
  height:44px;
  border:0;
  border-radius:12px;
  background:rgba(120,120,128,.14);
  color:var(--text);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.auth-link-btn[data-auth-goto="register"]{
  background:rgba(40,180,80,.28);
  color:#157a38;
}
.auth-link-btn[data-auth-goto="forgot"]{
  background:rgba(240,140,20,.28);
  color:#a85200;
}
.auth-link-btn[data-auth-goto="login"]{
  background:rgba(0,122,255,.22);
  color:#0a5fd4;
}
.dark .auth-link-btn[data-auth-goto="register"]{
  background:rgba(52,199,89,.34);
  color:#7ee2a0;
}
.dark .auth-link-btn[data-auth-goto="forgot"]{
  background:rgba(255,159,10,.34);
  color:#ffc56a;
}
.dark .auth-link-btn[data-auth-goto="login"]{
  background:rgba(64,156,255,.32);
  color:#8ec5ff;
}
.auth-link-btn:active{
  transform:scale(.98);
  filter:brightness(.96);
}

/* hide non-essential chrome from previous design system bleed */
.auth-submit:after,
.auth-code-btn:after,
.auth-link-btn:after,
.auth-close:after,
.auth-tab:after{
  display:none!important;
}

@media(max-width:430px){
  .auth-overlay{padding:10px}
  .auth-panel{
    width:var(--auth-phone-w);
    max-width:calc(100vw - 20px);
    height:var(--auth-phone-h);
    max-height:calc(100dvh - 20px);
    border-radius:36px;
  }
}

.auth-title,
.auth-desc,
.auth-tabs,
.auth-body,
.auth-links{
  transition:opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1);
}
.auth-panel.is-switching .auth-title,
.auth-panel.is-switching .auth-desc,
.auth-panel.is-switching .auth-tabs,
.auth-panel.is-switching .auth-body,
.auth-panel.is-switching .auth-links{
  opacity:0;
  transform:translateY(8px);
}
@media(prefers-reduced-motion:reduce){
  .auth-title,
  .auth-desc,
  .auth-tabs,
  .auth-body,
  .auth-links,
  .auth-panel.is-switching .auth-title,
  .auth-panel.is-switching .auth-desc,
  .auth-panel.is-switching .auth-tabs,
  .auth-panel.is-switching .auth-body,
  .auth-panel.is-switching .auth-links{
    transition:none;
    transform:none;
    opacity:1;
  }
}