/* Sign-in / sign-up: glassmorphism (black & white). Loaded after auth.css. */
body.auth { background: #050505; }
.auth-art { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.auth-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 0, transparent 75%); mask-image: radial-gradient(ellipse at 50% 35%, #000 0, transparent 75%); }
.auth-art i { position: absolute; display: block; }
.auth-art .o1 { width: 250px; height: 250px; border-radius: 50%; right: -120px; top: 46%; background: linear-gradient(135deg, #fff, #6d6d6d); opacity: .36; }
.auth-art .o2 { width: 190px; height: 190px; border-radius: 58px; left: -90px; top: 64%; background: #fff; opacity: .3; transform: rotate(18deg); }
.auth-art .ring { width: 300px; height: 300px; border-radius: 50%; left: 50%; top: 40px; margin-left: -150px; border: 26px solid rgba(255,255,255,.18); }
.auth-shell { position: relative; z-index: 1; }

/* brand frame */
.auth-brand { display: flex; justify-content: center; padding: 6px 0 0; }
body.auth:not([data-view="entry"]):not([data-view="type"]):not([data-view="signin"]):not([data-view="choose"]) .auth-brand { display: none; }
.ab-frame { position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.07)); border: 1.5px solid rgba(255,255,255,.5); box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.7), 0 0 0 8px rgba(255,255,255,.06); backdrop-filter: blur(22px) saturate(1.5); }
.ab-frame img { width: 58px; height: 58px; border-radius: 17px; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.ab-ring { position: absolute; inset: -13px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.4); animation: abSpin 28s linear infinite; }
@keyframes abSpin { to { transform: rotate(360deg); } }
.auth-head.hide + .auth-brand { padding-top: 22px; }

/* glass surfaces */
.icon-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(14px); }
.progress { background: rgba(255,255,255,.12); }
.type, .field, .field-row, .seg, .otp input, .acc-opt, .btn-ghost {
  background: linear-gradient(135deg, rgba(14,14,14,.62), rgba(14,14,14,.34) 55%, rgba(255,255,255,.14));
  border: 1.5px solid rgba(255,255,255,.3);
  box-shadow: 0 14px 40px rgba(0,0,0,.4), inset 0 1.5px 0 rgba(255,255,255,.45);
  backdrop-filter: blur(26px) saturate(1.6);
}
.type { border-radius: 22px; }
.type.on { border-color: #fff; background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.1)); box-shadow: 0 14px 40px rgba(0,0,0,.4), inset 0 1.5px 0 rgba(255,255,255,.7), 0 0 0 1px #fff; }
.field, .field-row { border-radius: 16px; } .field:focus, .field-row:focus-within, .otp input:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.12), inset 0 1.5px 0 rgba(255,255,255,.45); }
.seg { border-radius: 18px; padding: 4px; } .seg button.on { background: #fff; color: #000; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.btn-primary, .btn-light { background: linear-gradient(180deg, #fff, #dcdcdc); color: #000; box-shadow: 0 1px 0 #fff inset, 0 14px 34px -12px rgba(255,255,255,.55); }
.btn-primary:disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); box-shadow: none; border: 1px solid rgba(255,255,255,.18); }
.btn-ghost { color: #fff; }
.acc-opt { border-radius: 22px; } .acc-opt .av { background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.06)) center/cover; }
.h1 { text-shadow: 0 2px 24px rgba(0,0,0,.5); } .sub, .type-blurb { color: #d0d0d0; text-shadow: 0 1px 10px rgba(0,0,0,.7); } .btn-text, .foot { text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.browse { color: #fff; opacity: .85; }
a { color: #fff; }
.sheet { background: rgba(24,24,24,.72); backdrop-filter: blur(30px) saturate(1.5); border-top: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4); }
.sheet-bg { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.err { color: #ff9a8f; }
@media (prefers-reduced-motion: reduce) { .ab-ring { animation: none; } }

/* ───────── OTP: premium motion ───────── */
#v-code { position: relative; }
.otp { perspective: 700px; position: relative; }
.otp input { transition: transform .22s cubic-bezier(.2,.9,.3,1.4), border-color .2s, box-shadow .25s, background .3s, color .2s; caret-color: #7dd3fc; }
.otp input:focus { transform: translateY(-3px) scale(1.06); border-color: #fff; box-shadow: 0 0 0 4px rgba(125,211,252,.16), 0 0 26px -2px rgba(125,211,252,.45), 0 16px 34px rgba(0,0,0,.5), inset 0 1.5px 0 rgba(255,255,255,.55); }
.otp input.fill { animation: otpPop .34s cubic-bezier(.2,1.2,.3,1); border-color: rgba(255,255,255,.7); background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.07)); text-shadow: 0 0 14px rgba(255,255,255,.7); }
@keyframes otpPop { 0% { transform: scale(.82) translateY(4px); } 55% { transform: scale(1.14) translateY(-4px); } 100% { transform: scale(1) translateY(0); } }

/* checking: a light sweeps across the boxes while the code is verified */
.otp.is-checking input { pointer-events: none; animation: otpWave 1s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); border-color: rgba(125,211,252,.75); }
@keyframes otpWave { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(125,211,252,0); } 40% { transform: translateY(-7px); box-shadow: 0 0 24px 1px rgba(125,211,252,.6), 0 14px 26px rgba(0,0,0,.5); } }

/* right code: boxes lift and glow in a ripple, then the seal draws itself */
.otp.is-ok input { pointer-events: none; animation: otpOk .7s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i) * 55ms); border-color: #bff3d9; color: #eafff4; background: linear-gradient(145deg, rgba(52,211,153,.4), rgba(52,211,153,.08)); }
@keyframes otpOk { 0% { transform: translateY(0) rotateX(0); } 35% { transform: translateY(-14px) rotateX(-22deg) scale(1.1); box-shadow: 0 0 34px 2px rgba(52,211,153,.7); } 100% { transform: translateY(0) rotateX(0); box-shadow: 0 0 22px -2px rgba(52,211,153,.55), inset 0 1.5px 0 rgba(255,255,255,.6); } }

/* wrong code: damped shake + red pulse, then the boxes fall away one by one */
.otp.is-bad { animation: otpShake .52s cubic-bezier(.36,.07,.19,.97) both; }
.otp.is-bad input { border-color: #ff8a8a; color: #ffe3e3; background: linear-gradient(145deg, rgba(248,113,113,.38), rgba(248,113,113,.08)); box-shadow: 0 0 26px -2px rgba(248,113,113,.65), inset 0 1.5px 0 rgba(255,255,255,.4); }
.otp.is-bad::after { content: ""; position: absolute; inset: -10px -4px; border-radius: 26px; border: 1.5px solid rgba(248,113,113,.75); animation: otpRing .6s ease-out both; pointer-events: none; }
@keyframes otpShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); } }
@keyframes otpRing { from { opacity: 1; transform: scale(.92); } to { opacity: 0; transform: scale(1.12); } }
.otp.is-clearing input { animation: otpFall .32s ease-in both; animation-delay: calc(var(--i) * 40ms); }
@keyframes otpFall { to { opacity: .0; transform: translateY(10px) scale(.8); } }

/* the seal */
.seal { position: absolute; left: 50%; top: 215px; width: 168px; height: 168px; margin-left: -84px; pointer-events: none; opacity: 0; display: grid; place-items: center; z-index: 5; }
.seal.on { opacity: 1; }
.seal .halo { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(52,211,153,.55), rgba(125,211,252,.18) 45%, transparent 70%); opacity: 0; transform: scale(.4); }
.seal.on .halo { animation: sealHalo 1s ease-out both; }
.seal .rg { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(190,243,217,.8); opacity: 0; transform: scale(.4); }
.seal.on .rg { animation: sealRing 1.05s cubic-bezier(.1,.7,.2,1) both; } .seal.on .rg.b { animation-delay: .16s; border-color: rgba(125,211,252,.7); }
.seal svg { position: relative; width: 112px; height: 112px; overflow: visible; filter: drop-shadow(0 0 18px rgba(52,211,153,.7)); transform: scale(.6); opacity: 0; }
.seal.on svg { animation: sealIn .55s cubic-bezier(.2,1.3,.3,1) .05s both; }
.seal .c { fill: rgba(16,32,26,.55); stroke: url(#sealGrad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; transform-origin: 48px 48px; transform: rotate(-90deg); }
.seal.on .c { animation: sealDraw .6s cubic-bezier(.5,.1,.2,1) .05s both; }
.seal .k { fill: none; stroke: #fff; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.seal.on .k { animation: sealDraw .45s cubic-bezier(.5,.1,.2,1) .5s both; }
.seal .word { position: absolute; bottom: -24px; font-size: 12px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: #d9fbe9; text-shadow: 0 0 16px rgba(52,211,153,.8); opacity: 0; transform: translateY(6px); }
.seal.on .word { animation: sealWord .5s ease .75s both; }
.seal i { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: var(--col); box-shadow: 0 0 10px var(--col); opacity: 0; }
.seal.on i { animation: sealSpark .9s cubic-bezier(.1,.8,.2,1) var(--t) both; }
@keyframes sealHalo { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes sealRing { 0% { opacity: .9; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sealIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes sealDraw { to { stroke-dashoffset: 0; } }
@keyframes sealWord { to { opacity: 1; transform: translateY(0); } }
@keyframes sealSpark { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(calc(cos(var(--a)) * var(--d)), calc(sin(var(--a)) * var(--d))) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .otp input, .otp.is-checking input, .otp.is-ok input, .otp.is-bad, .otp.is-bad::after, .otp.is-clearing input, .seal *, .seal.on * { animation: none !important; transition: none !important; }
  .seal.on svg, .seal.on .word { opacity: 1; transform: none; } .seal .c, .seal .k { stroke-dashoffset: 0; }
}
.otp.is-ok ~ #resend { opacity: 0; transition: opacity .2s; }

/* ───────── entry: professional or client ───────── */
#v-entry { text-align: center; }
#v-entry .entry-h { font-size: clamp(28px, 7.4vw, 36px); letter-spacing: -.035em; margin-top: 14px; }
.gates { display: grid; gap: 14px; margin-top: 22px; text-align: left; }
.gate { position: relative; overflow: hidden; border-radius: 26px; padding: 18px; isolation: isolate;
  background: linear-gradient(135deg, rgba(14,14,14,.66), rgba(14,14,14,.36) 55%, rgba(255,255,255,.14));
  border: 1.5px solid rgba(255,255,255,.28); box-shadow: 0 22px 54px rgba(0,0,0,.45), inset 0 1.5px 0 rgba(255,255,255,.45);
  backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6);
  animation: gateIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes gateIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
/* a soft sheen follows the pointer across the glass */
.gate::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--x, 50%) var(--y, 0%), rgba(255,255,255,.16), transparent 70%); }
.gate:hover::before { opacity: 1; }
.gate .g-top { display: flex; gap: 14px; align-items: center; }
.gate .g-ic { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: #000; box-shadow: 0 10px 24px -8px rgba(255,255,255,.5); }
.gate .g-ic svg { width: 24px; height: 24px; }
.gate b { display: block; font-size: 19px; letter-spacing: -.02em; }
.gate small { display: block; font-size: 13px; color: #cfcfcf; margin-top: 2px; }
.gate ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gate li { font-size: 12px; font-weight: 600; color: #e6e6e6; padding: 6px 10px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.gate .g-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.gate .g-acts button { height: 48px; border-radius: 99px; font-weight: 800; font-size: 14.5px; cursor: pointer; width: 100%; }
.gate .g-acts .btn-ghost { border-radius: 99px; }
.entry-foot { margin: 22px 0 28px; font-size: 13.5px; } .entry-foot a { color: #e6e6e6; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .gate { animation: none; } }

/* five account panels: compact, so three fit on a phone and the rest scroll into view */
body.auth[data-view="entry"] .ab-frame { width: 72px; height: 72px; } body.auth[data-view="entry"] .ab-frame img { width: 44px; height: 44px; border-radius: 13px; }
#v-entry .entry-h { margin-top: 8px; font-size: clamp(26px, 7vw, 32px); }
.gates { gap: 12px; margin-top: 18px; }
.gate { padding: 14px 16px; border-radius: 22px; }
.gate .g-top { gap: 12px; }
.gate .g-ic { width: 44px; height: 44px; border-radius: 14px; }
.gate .g-ic svg { width: 26px; height: 26px; }
.gate b { font-size: 17px; } .gate small { font-size: 12.5px; }
.gate ul { margin-top: 10px; }
.gate li { font-size: 11.5px; padding: 5px 9px; }
.gate .g-acts { margin-top: 12px; gap: 8px; }
.gate .g-acts button { height: 44px; font-size: 14px; }