@charset "UTF-8";

:root {
  color-scheme: light;
  font-family: Inter, "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --auth-navy-950: #061b35;
  --auth-navy-900: #092d50;
  --auth-blue-600: #1178f2;
  --auth-cyan-500: #21d5ed;
  --auth-surface: rgba(236, 248, 255, .32);
  --auth-surface-strong: rgba(249, 253, 255, .72);
  --auth-border: rgba(255, 255, 255, .64);
  --auth-text-soft: rgba(7, 38, 67, .68);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body { margin: 0; }

button,
input,
select { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

.hidden { display: none !important; }

.auth-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #c8e9f7;
  color: var(--auth-navy-950);
}

.auth-backdrop {
  position: fixed;
  z-index: -3;
  inset: -7%;
  background: #bfe7f7 url("./assets/login/ocean-wave-hero.png") center center / cover no-repeat;
  transform: translate3d(-1.2%, -.7%, 0) scale(1.045);
  transform-origin: 48% 50%;
  animation: auth-background-drift 18s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform;
}

.auth-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(1, 19, 40, .38) 0%, rgba(3, 35, 61, .13) 48%, rgba(221, 247, 255, .15) 100%),
    linear-gradient(180deg, rgba(1, 26, 48, .05), rgba(1, 22, 42, .23));
}

.auth-ambient {
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 26% 36%, rgba(23, 215, 236, .15), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .34), transparent 31%),
    linear-gradient(100deg, rgba(1, 19, 40, .24), transparent 58%);
}

@keyframes auth-background-drift {
  from { transform: translate3d(-1.2%, -.7%, 0) scale(1.045); }
  to { transform: translate3d(1.1%, .8%, 0) scale(1.09); }
}

.auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1460px, calc(100% - clamp(48px, 8vw, 132px)));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(38px, 6vh, 72px) 0;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
  align-items: center;
  gap: clamp(54px, 7vw, 112px);
}

.auth-story {
  align-self: center;
  max-width: 760px;
  padding: clamp(20px, 3vw, 42px) 0;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 22, 48, .56);
}

.auth-story h1 {
  display: grid;
  margin: 0;
  gap: 2px;
  font-size: clamp(46px, 5.7vw, 84px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.auth-story h1 span {
  width: max-content;
  max-width: 100%;
  background: linear-gradient(100deg, #ffffff 0%, #b8f9ff 38%, #58e0f4 70%, #72a9ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(0, 34, 63, .32));
}

.auth-story h1 strong {
  color: rgba(244, 252, 255, .96);
  font-weight: 850;
}

.auth-story > p {
  max-width: 700px;
  margin: 30px 0 0;
  color: rgba(239, 252, 255, .9);
  font-size: clamp(18px, 1.75vw, 26px);
  font-weight: 620;
  line-height: 1.65;
  letter-spacing: .025em;
}

.auth-story > p span {
  background: linear-gradient(96deg, #fff 0%, #78efff 45%, #8fc4ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 800;
}

.auth-card {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - 72px);
  padding: clamp(28px, 3vw, 38px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--auth-border);
  border-radius: 30px;
  background: var(--auth-surface);
  box-shadow:
    0 30px 80px rgba(1, 31, 57, .28),
    0 8px 28px rgba(14, 129, 186, .13),
    0 0 48px rgba(44, 204, 242, .10),
    inset 0 1px 0 rgba(255, 255, 255, .62);
  backdrop-filter: blur(30px) saturate(145%);
  scrollbar-width: thin;
}

.auth-card::before {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(141, 230, 255, .36);
  border-radius: inherit;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(145deg, #000, transparent 58%);
}

.auth-card-glow {
  position: absolute;
  z-index: -1;
  top: -170px;
  right: -150px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 220, 249, .27), transparent 70%);
  pointer-events: none;
}

.auth-card-header { margin-bottom: 22px; }

.card-kicker {
  margin: 0 0 7px;
  color: rgba(5, 72, 112, .72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.auth-card h2 {
  margin: 0;
  color: var(--auth-navy-950);
  font-size: clamp(29px, 2.1vw, 35px);
  line-height: 1.2;
  letter-spacing: -.035em;
}

.auth-card-header > p:last-child {
  margin: 9px 0 0;
  color: var(--auth-text-soft);
  font-size: 13px;
  line-height: 1.55;
}

.auth-form { display: grid; gap: 0; }

.auth-register-grid { display: grid; gap: 0; }

.auth-field { margin-bottom: 12px; }

.auth-field > label {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  gap: 5px;
  color: rgba(6, 36, 65, .8);
  font-size: 12px;
  font-weight: 750;
}

.auth-field > label > span[aria-hidden="true"] { color: #d23755; }

.auth-field label small {
  color: rgba(25, 67, 100, .48);
  font-weight: 600;
}

.auth-input-shell {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: center;
  border: 1px solid rgba(114, 179, 214, .54);
  border-radius: 12px;
  background: rgba(248, 253, 255, .56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .22s ease, transform .2s ease;
}

.auth-input-shell:hover {
  border-color: rgba(44, 148, 205, .72);
  background: rgba(255, 255, 255, .72);
}

.auth-input-shell:focus-within {
  border-color: #19bddd;
  background: rgba(255, 255, 255, .88);
  box-shadow:
    0 0 0 4px rgba(33, 213, 237, .14),
    0 0 28px rgba(23, 172, 231, .24),
    inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

.auth-input-shell input {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 8px 13px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--auth-navy-950);
  font-size: 14px;
}

.auth-input-shell input::placeholder { color: rgba(31, 73, 106, .42); }

.auth-verification-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.auth-code-button {
  min-width: 112px;
  padding: 0 14px;
  border: 1px solid rgba(33, 145, 199, .55);
  border-radius: 12px;
  background: rgba(239, 250, 255, .78);
  color: #08649d;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.auth-code-button:hover:not(:disabled) {
  border-color: rgba(15, 132, 190, .82);
  background: rgba(255, 255, 255, .9);
  color: #064f7e;
  transform: translateY(-1px);
}

.auth-code-button:disabled {
  opacity: .62;
  cursor: default;
}

.auth-code-button:focus-visible {
  outline: 3px solid rgba(20, 168, 224, .28);
  outline-offset: 2px;
}

.auth-field > select {
  width: 100%;
  height: 42px;
  padding: 7px 12px;
  border: 1px solid rgba(114, 179, 214, .54);
  border-radius: 12px;
  outline: 0;
  background: rgba(248, 253, 255, .72);
  color: var(--auth-navy-950);
}

.auth-field > select:focus {
  border-color: #19bddd;
  box-shadow: 0 0 0 4px rgba(33, 213, 237, .14), 0 0 28px rgba(23, 172, 231, .2);
}

.field-error {
  display: block;
  min-height: 0;
  margin: 0;
  color: #b61f3d;
  font-size: 11px;
  line-height: 1.5;
}

.field-error:not(:empty) { margin-top: 4px; }

.auth-field.is-invalid .auth-input-shell {
  border-color: rgba(214, 52, 83, .78);
  background: rgba(255, 247, 249, .86);
  box-shadow: 0 0 0 4px rgba(214, 52, 83, .1), 0 0 20px rgba(214, 52, 83, .12);
}

.auth-field.is-invalid > select {
  border-color: rgba(214, 52, 83, .78);
  background: rgba(255, 247, 249, .86);
  box-shadow: 0 0 0 4px rgba(214, 52, 83, .1), 0 0 20px rgba(214, 52, 83, .12);
}

.auth-submit {
  position: relative;
  width: 100%;
  min-height: 46px;
  margin-top: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 12px;
  background: linear-gradient(105deg, #0d68f2 0%, #258afc 54%, #19c4e4 100%);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: 0 13px 30px rgba(17, 112, 238, .27), inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: transform .18s ease, box-shadow .22s ease, filter .2s ease;
}

.auth-submit::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, .34) 48%, transparent 76%);
  transform: translateX(-130%);
  transition: transform .65s ease;
}

.auth-submit:hover:not(:disabled) {
  filter: saturate(112%);
  box-shadow: 0 16px 36px rgba(17, 112, 238, .36), inset 0 1px 0 rgba(255, 255, 255, .42);
  transform: translateY(-1px);
}

.auth-submit:hover:not(:disabled)::before { transform: translateX(130%); }

.auth-submit:active:not(:disabled) { transform: translateY(1px); }

.auth-submit:disabled {
  opacity: .68;
  cursor: wait;
}

.auth-secondary {
  display: inline-flex;
  width: 100%;
  min-height: 41px;
  margin-top: 8px;
  padding: 8px 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 147, 198, .56);
  border-radius: 11px;
  background: rgba(250, 253, 255, .46);
  color: #075fae;
  cursor: pointer;
  font-size: 14px;
  font-weight: 750;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.auth-secondary:hover {
  border-color: rgba(15, 120, 211, .8);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 24px rgba(15, 105, 168, .12);
  transform: translateY(-1px);
}

.auth-submit:focus-visible,
.auth-secondary:focus-visible {
  outline: 3px solid rgba(20, 168, 224, .34);
  outline-offset: 3px;
}

.captcha-slot { min-height: 0; }

.message {
  min-height: 18px;
  margin: 10px 0 0;
  color: rgba(9, 56, 88, .72);
  font-size: 12px;
  line-height: 1.55;
}

.message:empty { min-height: 0; margin-top: 0; }

.message.error { color: #b51f3c; }

.auth-panel { display: grid; gap: 14px; }

.auth-panel > p {
  margin: 0;
  color: var(--auth-text-soft);
  line-height: 1.65;
}

.company-list,
.action-stack { display: grid; gap: 10px; }

.company-list button,
.action-stack > button {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid rgba(94, 164, 207, .52);
  border-radius: 13px;
  background: rgba(248, 253, 255, .58);
  color: var(--auth-navy-900);
  cursor: pointer;
  text-align: left;
}

.company-list button:hover,
.action-stack > button:hover {
  border-color: rgba(15, 122, 216, .7);
  background: rgba(255, 255, 255, .82);
}

.company-list strong,
.company-list span,
.action-stack strong,
.action-stack span { display: block; }

.company-list span,
.action-stack span {
  margin-top: 4px;
  color: rgba(20, 63, 97, .62);
  font-size: 12px;
}

@media (max-width: 980px) {
  .auth-shell {
    width: min(880px, calc(100% - 40px));
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
    gap: 38px;
  }

  .auth-story h1 { font-size: clamp(42px, 6.6vw, 68px); }
}

@media (max-width: 780px) {
  .auth-page { overflow-x: hidden; overflow-y: auto; }

  .auth-backdrop { background-position: 38% center; }

  .auth-shell {
    display: flex;
    width: min(520px, calc(100% - 32px));
    min-height: 100dvh;
    padding: 34px 0 46px;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
  }

  .auth-story {
    width: 100%;
    padding: 8px 4px 0;
  }

  .auth-story h1 {
    display: block;
    font-size: clamp(34px, 9vw, 48px);
  }

  .auth-story h1 span { display: inline; }

  .auth-story h1 strong { margin-left: .2em; }

  .auth-story > p { margin-top: 14px; font-size: clamp(15px, 4vw, 18px); }

  .auth-card {
    max-height: none;
    padding: 28px;
    background: rgba(241, 250, 255, .56);
  }
}

@media (max-width: 520px) {
  .auth-shell {
    width: calc(100% - 22px);
    padding: max(18px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
    gap: 15px;
  }

  .auth-story h1 { font-size: clamp(29px, 9vw, 39px); }

  .auth-story > p { margin-top: 10px; line-height: 1.5; }

  .auth-card {
    padding: 24px 20px 21px;
    border-radius: 23px;
    background: rgba(245, 251, 255, .72);
  }

}

@media (max-height: 700px) and (min-width: 781px) {
  .auth-shell { padding-top: 24px; padding-bottom: 24px; }
  .auth-card { max-height: calc(100dvh - 48px); padding-top: 25px; padding-bottom: 23px; }
  .auth-card-header { margin-bottom: 16px; }
  .auth-field { margin-bottom: 9px; }
  .auth-input-shell, .auth-input-shell input { min-height: 39px; height: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-backdrop { animation: none; transform: scale(1.06); }
  .auth-input-shell,
  .auth-submit,
  .auth-submit::before,
  .auth-secondary { transition: none; }
}