@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: swap; src: url('./fonts/poppins-regular.ttf') format('truetype'); }
@font-face { font-family: Poppins; font-weight: 500; font-style: normal; font-display: swap; src: url('./fonts/poppins-medium.ttf') format('truetype'); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: swap; src: url('./fonts/poppins-semibold.ttf') format('truetype'); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--font-ui); font-size: var(--text-md); line-height: var(--leading-body); color: var(--color-text); background: var(--color-page); }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--color-link); text-decoration: none; }
a:hover, .text-button:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
button:focus-visible, a:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--space-1); }
.auth-page { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; padding: var(--auth-page-padding); background: linear-gradient(130deg, var(--color-page), var(--color-page-mid) 58%, var(--color-page-end)); }
.background-waves { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.wave { position: absolute; left: -30%; bottom: var(--wave-bottom); width: var(--wave-width); height: var(--wave-height); border-radius: 48%; border-top: var(--border-width) solid var(--color-wave-border); background: linear-gradient(180deg, var(--color-wave-start), var(--color-wave-end) 45%, transparent); rotate: -12deg; animation: wave-sway var(--motion-wave) ease-in-out infinite alternate; }
.wave-secondary { bottom: var(--wave-secondary-bottom); rotate: 15deg; opacity: .5; animation-duration: var(--motion-wave-secondary); background: linear-gradient(180deg, var(--color-wave-secondary), transparent 55%); }
.page-header, .page-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.brand:hover { text-decoration: none; }
.brand-name { display: block; font-size: var(--text-brand); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-heading); }
.brand-caption { display: block; font-size: var(--text-xs); letter-spacing: var(--tracking-caption); color: var(--color-muted); margin-top: var(--space-1); text-transform: uppercase; }
.motion-toggle { min-height: var(--touch-target); padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-tabs); color: var(--color-muted); font-size: var(--text-xs); }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--auth-main-padding); min-width: 0; }
.auth-card { width: 100%; max-width: var(--auth-card-width); padding: var(--auth-card-padding); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: linear-gradient(145deg, var(--color-card-top), var(--color-card-bottom)); box-shadow: var(--shadow-card); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); overflow: hidden; }
.auth-tabs { position: relative; isolation: isolate; display: flex; gap: var(--space-1); padding: var(--space-1); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-tabs); background: var(--color-tabs); margin-bottom: var(--space-6); }
.auth-tabs::before { content: ''; position: absolute; left: var(--space-1); top: var(--space-1); bottom: var(--space-1); width: calc(50% - var(--space-1)); border-radius: var(--radius-sm); background: var(--color-tab-active); box-shadow: inset 0 1px var(--color-highlight); transition: transform var(--motion-switch) var(--motion-easing); z-index: -1; }
[data-mode='register'] .auth-tabs::before { transform: translateX(100%); }
.auth-tab { flex: 1; min-height: var(--touch-target); padding: var(--space-2); display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-muted); font-size: var(--text-sm); transition: color var(--motion-fast); }
.auth-tab[aria-current='page'] { color: var(--color-text); }
.auth-tab:hover { text-decoration: none; color: var(--color-text); }
h1 { margin: 0 0 var(--space-2); font-size: var(--text-title); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); font-weight: var(--weight-medium); }
.form-intro { margin: 0 0 var(--space-5); font-size: var(--text-sm); color: var(--color-muted); }
.field { margin-bottom: var(--space-4); }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
label { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-label); }
.input-wrap { position: relative; }
.field input { width: 100%; height: var(--control-height); padding: 0 var(--control-padding); color: var(--color-text); background: var(--color-input); border: var(--border-width) solid var(--color-input-border); border-radius: var(--radius-input); font-size: var(--text-sm); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.field input::placeholder { color: var(--color-placeholder); }
.field input:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 var(--focus-width) var(--color-focus-soft); }
.field input[aria-invalid='true'] { border-color: var(--color-error); }
.input-wrap:has(.password-toggle) input { padding-right: var(--space-10); }
.password-toggle { position: absolute; right: var(--space-1); top: 50%; translate: 0 -50%; min-width: var(--touch-target); min-height: var(--touch-target); padding: var(--space-1); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--color-link); font-size: var(--text-xs); }
.soft-caret { display: none; position: absolute; top: 50%; left: var(--control-padding); transform: translateY(-50%); width: var(--caret-width); height: var(--caret-height); border-radius: var(--radius-xs); background: var(--color-focus); pointer-events: none; animation: slow-caret var(--motion-caret) ease-in-out infinite; }
.input-wrap[data-caret-active] .soft-caret { display: block; }
.input-wrap[data-caret-active] input { caret-color: transparent; }
.input-wrap[data-caret-active] input::placeholder { color: transparent; }
.field-error, .field-hint { font-size: var(--text-xs); line-height: var(--leading-body); margin: var(--space-1) 0 0; }
.field-error { color: var(--color-error); }
.field-error:empty { display: none; }
.field-hint { color: var(--color-muted); }
.text-button { border: 0; padding: 0; background: none; font: inherit; color: var(--color-link); font-size: var(--text-xs); }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; height: var(--control-height); padding: 0 var(--space-2) 0 var(--space-4); margin-top: var(--space-5); border: var(--border-width) solid var(--color-button-border); border-radius: var(--radius-button); color: var(--color-button-text); background: linear-gradient(110deg, var(--color-button-start), var(--color-button-end)); box-shadow: var(--shadow-button); position: relative; overflow: hidden; isolation: isolate; font-size: var(--text-sm); font-weight: var(--weight-medium); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.primary-button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, var(--color-button-sweep), transparent 70%); translate: -100% 0; transition: translate var(--motion-switch) ease; }
.primary-button:hover { border-color: var(--color-button-hover); box-shadow: var(--shadow-button-hover); }
.primary-button:hover::before { translate: 100% 0; }
.primary-button:disabled { opacity: .6; }
.button-arrow { display: grid; place-items: center; width: var(--button-arrow-size); height: var(--button-arrow-size); border-radius: var(--radius-sm); background: var(--color-arrow); border: var(--border-width) solid var(--color-arrow-border); font-size: var(--text-base); transition: background var(--motion-fast); }
.primary-button:hover .button-arrow { background: var(--color-arrow-hover); }
.switch-account { margin: var(--space-5) 0 0; text-align: center; font-size: var(--text-xs); color: var(--color-muted); }
.switch-account a { margin-left: var(--space-1); font-weight: var(--weight-medium); }
.form-status { color: var(--color-status); font-size: var(--text-sm); margin-top: var(--space-4); }
.form-status:focus { outline: none; }
.page-footer { color: var(--color-muted); font-size: var(--text-xs); }
.logo-mark { display: grid; place-items: center; width: var(--logo-size); height: var(--logo-size); flex: none; }
.capture-computer { width: 1em; height: 1em; position: relative; display: block; font-size: var(--logo-art-size); filter: drop-shadow(var(--shadow-logo)); }
.capture-computer span { position: absolute; display: block; box-sizing: border-box; }
.monitor { left: .01em; right: .05em; top: .07em; height: .65em; border-radius: .08em; background: linear-gradient(130deg, var(--color-logo-start), var(--color-logo-mid) 65%, var(--color-logo-end)); box-shadow: inset 0 .015em var(--color-logo-shine); }
.screen { inset: .05em .05em .1em; border-radius: .035em; background: linear-gradient(140deg, var(--color-logo-screen-start), var(--color-logo-screen-end)); overflow: hidden; }
.screen::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .075em; background: var(--color-logo-toolbar); }
.screen-lines { left: .09em; right: .1em; top: .17em; height: .03em; background: var(--color-logo-lines); box-shadow: 0 .09em var(--color-logo-lines-secondary), 0 .18em var(--color-logo-lines-secondary); }
.monitor-stand { width: .1em; height: .12em; left: .44em; top: .71em; background: var(--color-logo-stand); }
.monitor-stand::after { content: ''; position: absolute; left: -.17em; right: -.17em; bottom: -.025em; height: .045em; border-radius: .04em; background: linear-gradient(90deg, var(--color-logo-mid), var(--color-logo-start)); }
.capture-camera { right: -.04em; top: .48em; width: .44em; height: .32em; border-radius: .055em; background: linear-gradient(130deg, var(--color-camera-start), var(--color-camera-mid) 70%, var(--color-camera-end)); box-shadow: var(--shadow-camera); animation: camera-arrive var(--motion-logo) ease-in-out infinite; z-index: 3; }
.capture-camera::before { content: ''; position: absolute; left: .08em; top: -.065em; width: .17em; height: .08em; border-radius: .025em .025em 0 0; background: var(--color-camera-top); }
.camera-lens { width: .19em; height: .19em; left: .135em; top: .065em; border: .035em solid var(--color-lens-border); border-radius: 50%; background: var(--color-lens); box-shadow: inset 0 0 0 .025em var(--color-lens-inner); }
.camera-dot { left: .045em; top: .06em; width: .03em; height: .03em; border-radius: 50%; background: var(--color-logo-shine); }
.capture-flash { right: -.07em; top: .29em; width: .22em; height: .22em; background: var(--color-flash); clip-path: polygon(50% 0,60% 34%,85% 15%,68% 42%,100% 50%,68% 59%,85% 85%,59% 68%,50% 100%,41% 68%,15% 85%,33% 58%,0 50%,32% 41%,15% 15%,41% 33%); animation: camera-flash var(--motion-logo) linear infinite; z-index: 4; }
.screen-flash { inset: 0; background: var(--color-flash); opacity: 0; animation: screen-flash var(--motion-logo) linear infinite; }
.capture-snapshot { left: .13em; top: .18em; width: .46em; height: .36em; border: .035em solid var(--color-photo-border); border-bottom-width: .07em; border-radius: .025em; background: linear-gradient(140deg, var(--color-photo-start), var(--color-photo-end)); animation: snapshot-save var(--motion-logo) ease-in-out infinite; z-index: 2; }
.capture-snapshot::before { content: ''; position: absolute; inset: .04em; background: linear-gradient(145deg, transparent 45%, var(--color-photo-detail) 46%, var(--color-photo-detail) 64%, transparent 65%), linear-gradient(35deg, transparent 40%, var(--color-photo-detail-secondary) 41%, var(--color-photo-detail-secondary) 65%, transparent 66%); }
.capture-saved { left: .04em; bottom: 0; width: .21em; height: .21em; display: grid !important; place-items: center; background: var(--color-saved); border-radius: 50%; color: var(--color-check); animation: capture-saved var(--motion-logo) ease-in-out infinite; z-index: 4; }
.capture-saved::after { content: '✓'; font-family: sans-serif; font-size: .15em; line-height: 1; }
dialog { width: min(calc(100% - var(--space-8)), var(--auth-card-width)); padding: var(--space-7); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); color: var(--color-text); background: var(--color-page-mid); box-shadow: var(--shadow-card); }
dialog::backdrop { background: var(--color-backdrop); backdrop-filter: blur(var(--space-1)); }
dialog h2 { font-size: var(--text-brand); line-height: var(--leading-heading); }
dialog p { color: var(--color-muted); font-size: var(--text-sm); }
.dialog-close { display: block; margin-left: auto; min-height: var(--touch-target); min-width: var(--touch-target); color: var(--color-text); background: transparent; border: 0; font-size: var(--text-brand); }
[data-motion='paused'] .wave, [data-motion='paused'] .capture-computer * { animation-play-state: paused; }
@keyframes wave-sway { to { translate: 8% -6%; rotate: 4deg; } }
@keyframes slow-caret { 0%,30%,100% { opacity: 1; } 55%,75% { opacity: 0; } }
@keyframes camera-arrive { 0%,10% { opacity: 0; translate: .15em .08em; scale: .8; } 22%,42% { opacity: 1; translate: 0 0; scale: 1; } 43% { scale: .93; } 47%,65% { opacity: 1; translate: 0 0; scale: 1; } 78%,100% { opacity: 0; translate: .1em .04em; scale: .85; } }
@keyframes camera-flash { 0%,40% { opacity: 0; scale: .5; } 42% { opacity: 1; scale: 1.1; } 44% { opacity: 0; } 46% { opacity: .65; } 48%,100% { opacity: 0; } }
@keyframes screen-flash { 0%,41% { opacity: 0; } 42% { opacity: .85; } 47%,100% { opacity: 0; } }
@keyframes snapshot-save { 0%,46% { opacity: 0; translate: 0 0; scale: .8; rotate: 0deg; } 54% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } 72%,88% { opacity: 1; translate: -.11em .36em; scale: .85; rotate: -9deg; } 98%,100% { opacity: 0; } }
@keyframes capture-saved { 0%,70% { opacity: 0; scale: .7; } 77%,91% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .7; } }
/* CSS variables cannot be used in media conditions. See the design-system guide. */
@media (max-width: 37.5rem) {
  :root { --auth-page-padding: 1.5rem 1.25rem; --auth-card-padding: 1.5rem; --auth-main-padding: 2.5rem 0; --text-brand: 1rem; --wave-width: 180%; }
  .field input { font-size: var(--text-base); }
  .page-header { gap: var(--space-2); }
}
@media (max-width: 22.5rem) {
  :root { --auth-page-padding: 1.25rem 1rem; --auth-card-padding: 1.25rem; --text-title: 1.5rem; --tracking-caption: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .capture-camera { opacity: 1; }
  .capture-flash, .screen-flash, .capture-snapshot, .capture-saved { opacity: 0; }
}
/* Account recovery shares the existing input and action tokens. */
#recovery-form .field{margin-top:var(--space-4)}
#recovery-purpose{width:100%;min-height:var(--control-height,48px);padding:12px;color:var(--color-text);background:var(--color-input-bg,#13232e);border:1px solid var(--color-input-border,#496276);border-radius:var(--radius-sm);font:inherit}
#recovery-purpose option{background:#13232e;color:#edfaff}
#reset-title{font-size:var(--font-size-title,28px);font-weight:500;letter-spacing:-.04em}