/* WebPies — auth modal (login + multi-step register). Compiled from
   scss/components-auth.scss. Matches the site: dark default, cream/ink,
   Instrument Serif + JetBrains Mono, lime accent. */
.auth-overlay{
  position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8,9,11,.55); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s, backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease;
}
.auth-overlay.open{ opacity: 1; visibility: visible; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.auth-lock{ overflow: hidden; }

.auth-modal{
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--cream); color: var(--ink); border: 1px solid var(--line); border-radius: 24px;
  padding: 30px 30px 28px; box-shadow: 0 50px 110px -34px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02);
  transform: translateY(40px) scale(.92); opacity: 0; filter: blur(6px);
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .45s ease, filter .5s ease;
  scrollbar-width: none; isolation: isolate;
}
/* decorative lime glow inside the modal */
.auth-modal::before{ content: ""; position: absolute; z-index: -1; top: -40%; right: -30%; width: 80%; height: 70%; background: radial-gradient(circle, rgba(200,242,92,.22), transparent 62%); pointer-events: none; }
.auth-modal::-webkit-scrollbar{ display: none; }
.auth-overlay.open .auth-modal{ transform: none; opacity: 1; filter: none; }

.auth-close{ position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.16,1,.3,1); z-index: 3; }
.auth-close:hover{ background: var(--ink); color: var(--cream); transform: rotate(90deg); }

.auth-brand{ display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.auth-brand .ab-logo{ font-family: 'Instrument Serif', serif; font-size: 22px; }
.auth-eyebrow{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.auth-title{ font-family: 'Instrument Serif', serif; font-size: 34px; line-height: 1.02; letter-spacing: -.01em; margin: 6px 0 6px; }
.auth-sub{ font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 22px; }
.auth-sub b{ color: var(--ink); font-weight: 600; }

/* tabs */
.auth-tabs{ position: relative; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; margin-bottom: 24px; }
.auth-tab{ flex: 1; position: relative; z-index: 1; padding: 9px; border: 0; background: transparent; cursor: pointer; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .3s ease; }
.auth-tab.active{ color: var(--cream); }
html.theme-dark .auth-tab.active{ color: #0d0f12; }
.auth-tabs::before{ content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transition: transform .4s cubic-bezier(.16,1,.3,1); }
html.theme-dark .auth-tabs::before{ background: var(--lime); }
.auth-tabs.on-register::before{ transform: translateX(100%); }

/* fields */
.auth-field{ margin-bottom: 16px; }
.auth-field label{ display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.auth-input{ width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 15px; font-family: inherit; color: var(--ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.auth-input:focus{ border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13,15,18,.06); }
html.theme-dark .auth-input:focus{ box-shadow: 0 0 0 3px rgba(245,241,234,.08); }
.auth-input::placeholder{ color: var(--muted); opacity: .7; }
/* password field with eye toggle */
.auth-pw{ position: relative; }
.auth-pw .auth-input{ padding-right: 44px; }
.pw-eye{ position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px; transition: color .2s ease, background .2s ease; }
.pw-eye:hover{ color: var(--ink); }
html.theme-dark .pw-eye:hover{ color: var(--cream); }
.pw-eye .eye-off{ display: none; }
.pw-eye.on .eye-on{ display: none; }
.pw-eye.on .eye-off{ display: block; }
select.auth-input{ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%236b6b66' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.auth-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-phone{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.auth-phone select[name="dial"]{ width: 118px; flex: 0 0 auto; }
.auth-phone input[name="otherDial"]{ width: 96px; flex: 0 0 auto; }
.auth-phone input[name="phone"]{ flex: 1 1 160px; min-width: 0; }

.auth-err{ color: #c0492a; font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-top: 7px; display: none; }
.auth-field.invalid .auth-input{ border-color: #c0492a; }
.auth-field.invalid .auth-err{ display: block; }
.auth-formerr{ background: rgba(192,73,42,.1); color: #c0492a; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px; display: none; }
.auth-formerr.show{ display: block; }

.auth-btn{ width: 100%; background: var(--ink); color: var(--cream); border: 0; border-radius: 12px; padding: 14px; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s ease, transform .15s ease; }
.auth-btn:hover{ background: #000; transform: translateY(-1px); }
html.theme-dark .auth-btn{ background: var(--lime); color: #0d0f12; }
html.theme-dark .auth-btn:hover{ background: #fff; }
.auth-btn.ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
.auth-btn.ghost:hover{ background: var(--cream-2); }
html.theme-dark .auth-btn.ghost{ color: var(--cream); }

.auth-alt{ text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }
.auth-meta{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 18px; flex-wrap: wrap; }
.auth-check{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.auth-check input{ position: absolute; opacity: 0; width: 0; height: 0; }
.auth-check .ck-box{ width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 5px; display: inline-grid; place-items: center; transition: background .2s ease, border-color .2s ease; position: relative; flex: 0 0 auto; }
.auth-check input:checked + .ck-box{ background: var(--ink); border-color: var(--ink); }
html.theme-dark .auth-check input:checked + .ck-box{ background: var(--lime); border-color: var(--lime); }
.auth-check input:checked + .ck-box::after{ content: ""; width: 4px; height: 8px; border: solid var(--cream); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-top: -1px; }
html.theme-dark .auth-check input:checked + .ck-box::after{ border-color: #0d0f12; }
.auth-link{ background: 0; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.auth-lblrow{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-lblrow .auth-link{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .04em; color: var(--lime-deep); text-transform: uppercase; }
html.theme-dark .auth-lblrow .auth-link{ color: var(--lime); }
.otp-timer{ font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); margin: 10px 0 4px; text-align: center; }
.otp-timer b{ color: var(--ink); font-variant-numeric: tabular-nums; }
html.theme-dark .otp-timer b{ color: var(--cream); }
.otp-timer.expired{ color: #c0492a; }
.otp-timer .auth-link{ font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
html.theme-dark .auth-link{ color: var(--cream); }
.auth-alt button{ background: 0; border: 0; color: var(--ink); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.auth-mini{ font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.auth-mini a{ color: var(--ink); }

/* OTP */
.otp-row{ display: flex; gap: 9px; justify-content: space-between; margin: 4px 0 6px; }
.otp-box{ width: 100%; aspect-ratio: 1; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 22px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.otp-box:focus{ border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13,15,18,.06); }
.otp-demo{ background: rgba(200,242,92,.16); border: 1px dashed var(--lime-deep); border-radius: 10px; padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); margin-bottom: 18px; text-align: center; }
html.theme-dark .otp-demo{ color: var(--cream); }
.otp-demo b{ letter-spacing: .3em; font-size: 14px; }
.otp-resend{ text-align: center; font-size: 12px; color: var(--muted); margin-top: 14px; }
.otp-resend button{ background: 0; border: 0; color: var(--ink); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.otp-resend button[disabled]{ color: var(--muted); cursor: default; text-decoration: none; }

/* step transitions */
.auth-step{ display: none; }
.auth-step.active{ display: block; animation: authIn .35s cubic-bezier(.16,1,.3,1); }
@keyframes authIn{ from{ opacity: 0; transform: translateX(12px); } to{ opacity: 1; transform: none; } }

/* steps progress dots */
.auth-progress{ display: flex; gap: 6px; margin-bottom: 20px; }
.auth-progress span{ height: 3px; flex: 1; border-radius: 2px; background: var(--line); transition: background .3s ease; }
.auth-progress span.on{ background: var(--lime-deep); }

.auth-success{ text-align: center; padding: 8px 0 4px; }
.auth-success .as-mark{ width: 64px; height: 64px; border-radius: 999px; background: var(--lime); color: #0d0f12; display: grid; place-items: center; margin: 0 auto 18px; }
/* button loading spinner */
.auth-spin{ display: inline-block; width: 14px; height: 14px; border-radius: 999px; border: 2px solid currentColor; border-top-color: transparent; animation: authSpin .7s linear infinite; margin-right: 8px; vertical-align: -2px; }
@keyframes authSpin{ to{ transform: rotate(360deg); } }
/* password strength + hints */
.pw-strength{ display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pw-bar{ flex: 1; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pw-bar span{ display: block; height: 100%; width: 0; border-radius: 3px; transition: width .3s ease, background .3s ease; }
.pw-bar span.lvl-weak{ background: #c0492a; } .pw-bar span.lvl-fair{ background: #d98a2b; } .pw-bar span.lvl-good{ background: #9fb83a; } .pw-bar span.lvl-strong{ background: var(--lime-deep); }
.pw-level{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; min-width: 46px; text-align: right; }
.pw-level.lvl-weak{ color: #c0492a; } .pw-level.lvl-fair{ color: #d98a2b; } .pw-level.lvl-good{ color: #7f9a2b; } .pw-level.lvl-strong{ color: var(--lime-deep); }
.pw-hints{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 12px; }
.pw-hints li{ display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); transition: color .2s ease; }
.pw-hints li i{ width: 13px; height: 13px; border-radius: 999px; border: 1px solid var(--line); flex: 0 0 auto; position: relative; transition: background .2s ease, border-color .2s ease; }
.pw-hints li.ok{ color: var(--ink); } html.theme-dark .pw-hints li.ok{ color: var(--cream); }
.pw-hints li.ok i{ background: var(--lime-deep); border-color: var(--lime-deep); }
.pw-hints li.ok i::after{ content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 6px; border: solid #0d0f12; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pw-match{ display: block; margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.pw-match.ok{ color: var(--lime-deep); } .pw-match.bad{ color: #c0492a; }

/* social login */
.auth-or{ display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.auth-or::before, .auth-or::after{ content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-social{ display: flex; flex-direction: column; gap: 10px; }
.auth-soc{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); font-size: 14px; font-family: inherit; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.auth-soc:hover{ background: var(--cream-2); border-color: var(--ink); }
html.theme-dark .auth-soc:hover{ background: rgba(245,241,234,.06); border-color: rgba(245,241,234,.4); }
.auth-soc:active{ transform: scale(.98); }
.auth-soc svg{ flex: 0 0 auto; }

@media (max-width: 480px){
  .auth-modal{ padding: 26px 20px 22px; border-radius: 18px; }
  .auth-title{ font-size: 28px; }
  .auth-row{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .auth-overlay, .auth-modal, .auth-step.active{ transition: none; animation: none; }
}

/* header account control */
.acct-link{ display: none; }
@media (min-width: 640px){ .acct-link{ display: inline-flex; } }
.auth-other-country[hidden]{ display: none; }
.auth-other-country{ grid-column: 1 / -1; }

/* account / forgot / reset page gate (these pages load auth.css, not dashboard.css) */
.dash-gate{ max-width: 460px; margin: 160px auto; text-align: center; padding: 0 20px; }
.dash-gate .auth-title{ font-family: 'Instrument Serif', serif; line-height: 1.02; }