:root {
  --ink: #1a1a2e;
  --purple: #3d0099;
  --lavender: #e1dfff;
  --lilac: #d1cfff;
  --paper: #f9f9ff;
  --copy: #4a4a4a;
  --mint: #8cff86;
  --font-display: 'Poppins', sans-serif;
  --font-mono: 'Geist Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--lavender); color: var(--ink); font-family: var(--font-display); -webkit-font-smoothing: antialiased; }
p, h1 { margin: 0; }
img { display: block; }

.mono { font-family: var(--font-mono); }

/* Layout */
.login { display: grid; min-height: 100dvh; overflow-x: hidden; background: var(--paper); }
.brand-panel { display: none; }

/* Brand panel (desktop) */
.brand-panel { position: relative; min-height: 100dvh; overflow: hidden; background: var(--ink); color: var(--paper); padding: 2rem 2.5rem; flex-direction: column; }
.brand-panel__top { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; }
.brand-mark { display: flex; align-items: center; gap: .75rem; }
.brand-mark img { width: 2rem; height: auto; }
.mono--brand { font-family: var(--font-mono); font-size: .62rem; line-height: 1; letter-spacing: .16em; color: var(--lilac); }
.mono--meta { font-size: .6rem; line-height: 1; letter-spacing: .1em; color: rgb(209 207 255 / .7); }

.brand-panel__body { position: relative; z-index: 10; margin: auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, .72fr); align-items: center; gap: 1rem; }
.welcome { max-width: 36rem; }
.status { margin-bottom: 1.75rem; display: flex; align-items: center; gap: .75rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .13em; color: var(--lilac); }
.status__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 1rem var(--mint); }
.welcome__title { font-size: clamp(3rem, 5vw, 6rem); font-weight: 700; line-height: .9; letter-spacing: -.065em; }
.welcome__title span { color: var(--lilac); }
.welcome__lead { margin-top: 2rem; max-width: 28rem; font-size: 1rem; line-height: 1.75rem; color: rgb(209 207 255 / .75); }

.brand-panel__foot { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgb(209 207 255 / .2); padding-top: 1.25rem; font-size: .58rem; letter-spacing: .08em; color: rgb(209 207 255 / .55); }

.login-noise { position: absolute; inset: 0; pointer-events: none; opacity: .15; background-image: radial-gradient(rgba(225, 223, 255, .55) .05rem, transparent .05rem); background-size: 1rem 1rem; -webkit-mask-image: linear-gradient(to bottom, transparent, black 35%, black); mask-image: linear-gradient(to bottom, transparent, black 35%, black); }

/* Stage */
.login-stage { position: relative; min-height: 31rem; }
.login-stage__orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(209, 207, 255, .22); border-radius: 50%; transform: translate(-50%, -50%); }
.login-stage__orbit::after { position: absolute; top: -.3rem; left: 50%; width: .6rem; height: .6rem; border-radius: 50%; background: var(--lilac); content: ''; box-shadow: 0 0 1.2rem var(--lilac); }
.login-stage__orbit--outer { width: 27rem; height: 27rem; animation: login-orbit 15s linear infinite; }
.login-stage__orbit--inner { width: 20rem; height: 20rem; animation: login-orbit 11s linear infinite reverse; }
.login-stage__bubble { position: absolute; z-index: 4; top: 18%; right: -2%; padding: .7rem 1rem; border: .12rem solid var(--ink); border-radius: 999px 999px 999px .25rem; background: var(--paper); color: var(--purple); font: 500 .62rem var(--font-mono); animation: login-bubble 2.8s ease-in-out infinite; }
.login-stage__badge { position: absolute; z-index: 4; right: 2%; bottom: 12%; display: flex; flex-direction: column; padding: .85rem 1rem; border: 1px solid rgba(209, 207, 255, .28); border-radius: .8rem; background: rgba(26, 26, 46, .72); -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem); }
.login-stage__badge span { color: var(--paper); font: 600 1.35rem var(--font-display); }
.login-stage__badge small { color: var(--lilac); font: 400 .48rem var(--font-mono); letter-spacing: .08em; }

/* Robot */
.adnex-bot { position: absolute; z-index: 3; top: 50%; left: 50%; width: 13.75rem; height: 13.75rem; transform: translate(-50%, -50%) scale(1.42); transform-origin: center; animation: adnex-login-float 3.2s ease-in-out infinite; filter: drop-shadow(.8rem 1rem 0 rgba(0, 0, 0, .17)); }
.bot { position: relative; width: 220px; height: 220px; overflow: visible; }
.bot > * { position: absolute; }
.bot__foot { top: 176px; width: 22px; height: 24.54px; border-radius: 6.77px; border: 2.54px solid #8395a6; background: #dde7ed; }
.bot__arm-wrap { width: 31.787px; height: 41.03px; display: flex; align-items: center; justify-content: center; }
.bot__arm-rot { flex: none; }
.bot__arm { position: relative; width: 23.69px; height: 36.38px; border-radius: 9.31px; border: 3.38px solid #112; background: #6760ff; }
.adnex-wave-arm > div { transform-origin: 50% 20%; animation: adnex-login-wave 1.6s ease-in-out infinite; }
.bot__body { left: 64.31px; top: 126.9px; width: 93.08px; height: 59.23px; border-radius: 13.54px; border: 4.23px solid #112; background: #dde7ed; }
.bot__ear { top: 74.46px; width: 27.92px; height: 33.85px; }
.bot__head { left: 40.62px; top: 38.08px; width: 138.8px; height: 101.5px; border-radius: 21.15px; border: 4.23px solid #112; background: #dde7ed; }
.bot__screen { left: 50.77px; top: 48.23px; width: 118.5px; height: 79.54px; border-radius: 14.38px; border: 2.54px solid #4285f4; background: #6760ff; }
.bot__eye { top: 72.77px; width: 14.38px; height: 23.69px; border-radius: 6.77px; background: #1a1a2e; }
.bot__belly { left: 91.38px; top: 143px; width: 39.77px; height: 28.77px; display: flex; align-items: center; justify-content: center; border-radius: 6.77px; background: #6760ff; }
.bot__belly img { width: 20px; height: auto; }
.bot__shine { left: 60.92px; top: 55px; width: 29.62px; height: 3.38px; border-radius: 1.69px; background: #fff; opacity: .6; }
.bot__smile { left: 94.77px; top: 101.5px; width: 30.46px; height: 10.15px; }
.bot__smile span { position: absolute; inset: -12.51% -4.17%; }
.bot__smile img { width: 100%; height: 100%; max-width: none; }
.bot__glint { top: 75.31px; width: 3.38px; height: 4.23px; }
.bot__ground { left: 38.08px; top: 200.5px; width: 143.8px; height: 11px; }

/* Form panel */
.form-panel { position: relative; display: flex; min-height: 100dvh; flex-direction: column; background: var(--lavender); padding: 1.25rem; }
.form-panel__top { display: flex; align-items: center; justify-content: space-between; }
.brand-mark--mobile { align-items: center; }
.mono--purple { font-size: .62rem; letter-spacing: .16em; color: var(--purple); }
.pill { border-radius: 999px; border: 1px solid rgb(61 0 153 / .15); background: rgb(249 249 255 / .6); padding: .5rem 1rem; font-size: .56rem; letter-spacing: .08em; color: var(--purple); }

.form { margin: auto; width: 100%; max-width: 31rem; padding: 1.5rem 0; }
.form__head { margin-bottom: 1.5rem; }
.mono--eyebrow { margin-bottom: .75rem; font-size: .62rem; letter-spacing: .13em; color: var(--purple); }
.form__title { font-size: 2.25rem; font-weight: 700; line-height: 1.02; letter-spacing: -.05em; color: var(--ink); }
.form__lead { margin-top: .75rem; font-size: .875rem; line-height: 1.5rem; color: var(--copy); }

.form__error { margin-bottom: 1.25rem; border: 1px solid rgb(61 0 153 / .25); border-radius: 1rem; background: rgb(249 249 255 / .8); padding: .875rem 1.25rem; font-size: .8125rem; line-height: 1.35rem; color: var(--ink); }

.google-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: .75rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); padding: 1rem 1.5rem; font-family: var(--font-display); font-size: .875rem; font-weight: 600; color: var(--ink); text-decoration: none; box-shadow: .35rem .35rem 0 var(--purple); transition: transform .2s, box-shadow .2s; }
.google-btn:hover { transform: translate(-.125rem, -.125rem); box-shadow: .5rem .5rem 0 var(--purple); }
.google-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }

.divider { margin: 1.25rem 0; display: flex; align-items: center; gap: 1rem; }
.divider span { height: 1px; flex: 1; background: rgb(61 0 153 / .15); }
.divider p { font-size: .58rem; letter-spacing: .12em; color: rgb(74 74 74 / .7); }

.fields > div + div { margin-top: .75rem; }
.field-label { display: block; margin-bottom: .5rem; font-size: .58rem; letter-spacing: .1em; color: var(--purple); }
.field-row { margin-bottom: .5rem; display: flex; align-items: center; justify-content: space-between; }
.field-row .field-label { margin-bottom: 0; }
.forgot { font-size: .56rem; color: var(--purple); text-decoration: underline; text-decoration-color: rgb(61 0 153 / .3); text-underline-offset: 4px; }
.field { display: flex; width: 100%; min-height: 3rem; align-items: center; border-radius: 1rem; border: 1px solid rgb(61 0 153 / .2); background: rgb(249 249 255 / .8); padding: 0 1.25rem; font-family: var(--font-display); font-size: .875rem; color: var(--ink); transition: border-color .15s; }
.field:hover { border-color: rgb(61 0 153 / .45); }
.field:focus, .field--password:focus-within { outline: 2px solid var(--purple); outline-offset: 2px; }
.field::placeholder { color: rgb(74 74 74 / .5); opacity: 1; }
.field--password { justify-content: space-between; gap: .75rem; }
.field--password input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; font-family: var(--font-display); font-size: 1.125rem; letter-spacing: .25em; color: var(--copy); outline: none; }
.field--password input::placeholder { color: var(--copy); opacity: 1; }
.show-btn { border: 0; background: none; padding: 0; cursor: pointer; font-size: .56rem; letter-spacing: normal; color: var(--purple); }
.show-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }

.signin-btn { position: relative; margin-top: 1.25rem; display: flex; width: 100%; align-items: center; justify-content: center; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); padding: .875rem 1.5rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: #fff; cursor: pointer; transition: background-color .2s; }
.signin-btn:hover { background: var(--purple); }
.signin-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.signin-btn span { position: absolute; right: 1.5rem; font-size: 1.25rem; color: var(--lilac); }

.form-panel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; font-size: .54rem; letter-spacing: .06em; color: rgb(74 74 74 / .55); }

/* sm */
@media (min-width: 640px) {
  .form-panel { padding: 1.75rem 2.5rem; }
  .form { padding: 2rem 0; }
  .form__head { margin-bottom: 2rem; }
  .form__title { font-size: 3rem; }
  .form__lead { margin-top: 1rem; }
  .divider { margin: 1.5rem 0; }
  .fields > div + div { margin-top: 1rem; }
  .field { min-height: 3.5rem; }
  .signin-btn { margin-top: 1.5rem; padding: 1rem 1.5rem; }
}

/* lg */
@media (min-width: 1024px) {
  .login { height: 100dvh; min-height: 0; grid-template-columns: minmax(0, 1.08fr) minmax(28rem, .92fr); overflow: hidden; }
  .brand-panel { display: flex; }
  .form-panel { height: 100dvh; min-height: 0; overflow-y: auto; padding: 2rem clamp(2.5rem, 5vw, 6rem); }
  .form-panel__top { justify-content: flex-end; }
  .brand-mark--mobile { display: none; }
  .form { padding: 1.5rem 0; }
}

/* xl */
@media (min-width: 1280px) {
  .brand-panel { padding: 2.5rem 4rem; }
  .brand-panel__body { grid-template-columns: minmax(0, 1fr) minmax(18rem, .82fr); gap: 2rem; }
}

/* 2xl */
@media (min-width: 1536px) {
  .brand-panel { padding: 3rem 5rem; }
  .form__title { font-size: 3.75rem; }
}

@keyframes login-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes login-bubble { 50% { transform: translateY(-.4rem) rotate(-2deg); } }
@keyframes adnex-login-float { 50% { transform: translate(-50%, -56%) scale(1.42) rotate(-1.5deg); } }
@keyframes adnex-login-wave { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(-68deg); } }

@media (prefers-reduced-motion: reduce) {
  .login-stage *, .adnex-bot, .adnex-bot * { animation: none !important; }
  .google-btn, .signin-btn, .field { transition: none; }
}