/* 登录页(合同 §4.5),仿官网 auth-shell。参考 docs/reference/official-auth.css:
   只借结构与配色,不抄它的 tailwind 变量与类名。字体自托管在 assets/official/fonts/。
   这套样式**只在登录页用**,不与 HUD 令牌混用(合同 §0.6)。 */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/official/fonts/space-grotesk-latin-wght-normal-BhU9QXUp.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/official/fonts/space-grotesk-latin-ext-wght-normal-D9tNdqV9.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/official/fonts/jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/official/fonts/jetbrains-mono-latin-ext-wght-normal-DBQx-q_a.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

:root {
  --font-display: "Space Grotesk", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --radius-gold: .625rem;
  --radius-gold-sm: .375rem;
  --radius-gold-xl: 1rem;
  --cyan-signal: #4591c5;
  --signal-hover: #5b9fcb;
  --coral: #c66370;
  --space-950: #050607;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100dvh;
  background: #050607;
  color: #eef3f6;
  font: var(--fs-15)/1.6 var(--font-display);
  -webkit-font-smoothing: antialiased;
}

/* cosmic 星点底(官方同法:两层径向渐变 + 星点 mask) */
.cosmic-bg {
  background:
    radial-gradient(circle at 18% 10%, rgba(31, 37, 91, .12), transparent 28rem),
    radial-gradient(circle at 85% 78%, rgba(69, 145, 197, .043), transparent 32rem),
    #000;
}
.cosmic-bg::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .25;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .8) .55px, transparent .7px);
  background-size: 37px 37px;
  background-position: 12px 7px;
  mask-image: linear-gradient(#000, transparent 70%);
  -webkit-mask-image: linear-gradient(#000, transparent 70%);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr);
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* ---------- 左:故事区 ---------- */
.auth-story {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  border-right: 1px solid rgba(139, 183, 212, .12);
  background: url("../assets/official/background.webp") 50% / cover no-repeat;
}
.auth-story::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(5, 6, 7, .18), rgba(5, 6, 7, .24) 40%, rgba(5, 6, 7, .93)),
    linear-gradient(90deg, transparent 55%, rgba(5, 6, 7, .72));
}
.auth-story-copy {
  position: absolute; z-index: 2;
  top: clamp(130px, 18vh, 190px);
  left: clamp(34px, 5vw, 78px);
  max-width: 580px;
  animation: .75s cubic-bezier(.16, 1, .3, 1) both landing-enter;
}
.auth-story-copy h2 {
  margin: 0;
  max-width: 12ch;
  color: #f0f4f6;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 4.6rem);
  font-weight: 610;
  line-height: .98;
  letter-spacing: -.04em;
}
.auth-story-copy p { margin-top: 24px; max-width: 460px; color: #9ba6ae; font-size: 1rem; line-height: 1.75; }
.auth-story-eyebrow {
  display: block; margin-bottom: 14px;
  font: 600 var(--fs-10)/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: #69c3db;
}
.auth-story-media {
  position: absolute; z-index: 1;
  bottom: -5%; left: clamp(32px, 4.5vw, 70px); right: 8%;
  border-radius: var(--radius-gold-xl);
  border: 1px solid rgba(139, 183, 212, .16);
  background: #090b0e;
  overflow: hidden;
  transform: rotate(-1.2deg);
  box-shadow: 0 24px 90px rgba(2, 8, 14, .5);
  animation: .9s cubic-bezier(.16, 1, .3, 1) 80ms both auth-media-enter;
}
.auth-story-media img {
  display: block; width: 100%;
  aspect-ratio: 17 / 10; object-fit: cover; object-position: center;
  filter: brightness(.72) saturate(.88);
}

/* ---------- 右:表单区 ---------- */
.auth-form-region {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 110px clamp(28px, 5vw, 78px) 54px;
  background: #070809;
  overflow-y: auto;
}
.auth-card {
  position: relative; z-index: 2;
  width: min(100%, 440px);
  animation: .65s cubic-bezier(.16, 1, .3, 1) 80ms both landing-enter;
}
.eyebrow { font: 600 var(--fs-10)/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: #71717a; }
.auth-card h1 {
  margin: 14px 0 8px;
  font-family: var(--font-display); font-size: 2rem; font-weight: 640; letter-spacing: -.02em;
}
.auth-card > p.sub { margin: 0 0 26px; color: #9ba6ae; font-size: .92rem; }

.field { position: relative; margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; font: 600 var(--fs-11) var(--font-mono); letter-spacing: .1em; color: #8b939b; }
.input {
  width: 100%; min-height: 3rem;
  padding-inline: 1rem; padding-right: 3rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-gold);
  background: rgba(255, 255, 255, .035);
  color: #f4f4f5; font: 400 1rem var(--font-mono);
  transition: border-color .2s, background .2s;
}
.input::placeholder { color: #52525b; }
.input:hover { border-color: rgba(104, 117, 167, .35); }
.input:focus { outline: none; border-color: rgba(69, 145, 197, .55); box-shadow: 0 0 0 2px rgba(69, 145, 197, .3); }

.password-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(calc(-50% + 11px));
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; background: transparent; color: #717b84;
  border-radius: var(--radius-gold-sm); cursor: pointer;
  transition: color .2s, background .2s;
}
.password-toggle:hover { color: #d5dde2; background: rgba(238, 243, 246, .05); }

.primary-button {
  width: 100%; min-height: 2.75rem;
  border: 0; border-radius: var(--radius-gold);
  background: var(--cyan-signal); color: var(--space-950);
  font-family: var(--font-display); font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.primary-button:hover:not(:disabled) { background: var(--signal-hover); }
.primary-button:disabled { opacity: .4; cursor: not-allowed; }

.error-bar {
  display: none;
  margin-bottom: 14px; padding: 9px 12px;
  border: 1px solid rgba(198, 99, 112, .5); border-radius: var(--radius-gold);
  background: rgba(198, 99, 112, .12);
  color: #e39aa4; font-size: .85rem;
}
.error-bar.show { display: block; }

.default-hint {
  display: none;
  margin-top: 18px; padding: 10px 12px;
  border: 1px solid rgba(139, 183, 212, .18); border-radius: var(--radius-gold);
  background: rgba(10, 10, 12, .9);
  color: #9ba6ae; font-size: .8rem; line-height: 1.6;
}
.default-hint.show { display: block; }
.default-hint code { color: #69c3db; font-family: var(--font-mono); }

.auth-foot { margin-top: 22px; color: #52525b; font: 500 var(--fs-10) var(--font-mono); letter-spacing: .08em; }

@keyframes landing-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes auth-media-enter { from { opacity: 0; transform: rotate(-1.2deg) translateY(40px); } to { opacity: 1; transform: rotate(-1.2deg); } }

@media (max-width: 1080px) { .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(430px, .85fr); } }
@media (max-width: 900px) {
  /* 官方同法:窄屏直接隐藏故事区,只留表单 */
  .auth-shell { display: block; overflow: visible; }
  .auth-story { display: none; }
  .auth-form-region {
    min-height: 100dvh;
    padding: 96px 24px 54px;
    background:
      linear-gradient(rgba(5, 6, 7, .78), #070809 42%),
      url("../assets/official/background.webp") top / cover no-repeat;
  }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }