/* 钛云 V2 auth 静态预览 · 方向 A · 仅预览 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--ty-font);
  color: var(--ty-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: var(--ty-accent); text-decoration: none; }
a:hover { opacity: 0.82; }

.scene {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ty-sp-6) var(--ty-page-x) var(--ty-sp-8);
  overflow: hidden;
}
.scene-login { background: var(--ty-scene-login); }
.scene-register { background: var(--ty-scene-register); }
.scene-reset { background: var(--ty-scene-neutral); }

/* 角落光晕：蓝 / 玫红，放在猫后面引视线 */
.glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.glow::before,
.glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}
.glow::before {
  width: min(52vw, 420px);
  height: min(52vw, 420px);
  top: -6%;
  left: 8%;
  background: rgba(42, 140, 255, 0.42); /* #2a8cff */
}
.glow::after {
  width: min(48vw, 380px);
  height: min(48vw, 380px);
  top: 4%;
  right: 4%;
  background: rgba(255, 45, 85, 0.28); /* #ff2d55 */
}
.scene-reset .glow::before { background: rgba(42, 140, 255, 0.28); }
.scene-reset .glow::after { background: rgba(255, 45, 85, 0.18); }

.stack {
  position: relative;
  z-index: 1;
  width: min(100%, var(--ty-auth-card-w));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 猫：原样引用 auth-cat-v6 海报，圆形裁切叠在卡片顶边 */
.cat {
  position: relative;
  z-index: 2;
  width: 148px;
  height: 148px;
  margin-bottom: -56px; /* 叠在卡片顶边 */
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 8px 28px -8px rgba(40, 30, 90, 0.28),
    0 0 0 3px rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.35);
}
.cat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
  display: block;
}

.card {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 28px; /* 用户 brief 锁定 28；token --ty-r-2xl 为 32，见报告 */
  padding: var(--ty-sp-7); /* 32 desktop */
  padding-top: calc(var(--ty-sp-7) + 40px); /* 给叠猫留空 */
  background: var(--ty-glass-2);
  backdrop-filter: var(--ty-blur-2);
  -webkit-backdrop-filter: var(--ty-blur-2);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    var(--ty-shadow-2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: #ffffff; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ty-sp-2);
  margin-bottom: var(--ty-sp-4);
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ty-ink); color: #fff;
  display: grid; place-items: center;
  font-size: var(--ty-fs-subhead); font-weight: 700;
}
.brand-name {
  font-size: var(--ty-fs-footnote);
  color: var(--ty-ink-3);
  font-weight: 600;
  letter-spacing: 0.02em;
}

h1 {
  margin: 0 0 var(--ty-sp-2);
  font-family: var(--ty-font-display);
  font-size: var(--ty-fs-large); /* 34 */
  font-weight: 700;
  line-height: var(--ty-lh-tight);
  letter-spacing: -0.02em;
  color: var(--ty-ink);
}
.subtitle {
  margin: 0 0 var(--ty-sp-6);
  font-size: var(--ty-fs-footnote); /* 13 */
  line-height: var(--ty-lh-body);
  color: var(--ty-ink-2);
}

.field { margin-bottom: var(--ty-sp-4); }
.field label {
  display: block;
  margin-bottom: var(--ty-sp-2);
  font-size: var(--ty-fs-caption1); /* 12 */
  font-weight: 500;
  color: var(--ty-ink-3);
}
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap .icon {
  position: absolute;
  left: 12px;
  width: 18px; height: 18px;
  color: var(--ty-ink-4);
  pointer-events: none;
  display: grid; place-items: center;
}
.input-wrap .icon-right {
  left: auto; right: 12px;
  pointer-events: none;
  color: var(--ty-ink-3);
}
.input-wrap.has-left > input { padding-left: 40px; }
.input-wrap.has-right > input { padding-right: 40px; }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"] {
  width: 100%;
  height: var(--ty-hit); /* 44 */
  border: 1.5px solid transparent;
  border-radius: var(--ty-r-sm); /* 10 */
  padding: 0 14px;
  font: 400 var(--ty-fs-callout)/1.2 var(--ty-font); /* 16 */
  color: var(--ty-ink);
  background: var(--ty-surface-strong);
  outline: none;
  transition: border-color var(--ty-dur) var(--ty-ease), box-shadow var(--ty-dur) var(--ty-ease);
}
input::placeholder { color: var(--ty-ink-4); }
input:focus {
  border-color: var(--ty-accent);
  box-shadow: 0 0 0 3px var(--ty-accent-soft);
}
input[readonly] {
  color: var(--ty-ink-2);
  background: rgba(255, 255, 255, 0.72);
  cursor: default;
}

.row-code {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ty-sp-2);
  align-items: stretch;
}
.btn-code {
  height: var(--ty-hit);
  padding: 0 var(--ty-sp-4);
  border: 0;
  border-radius: var(--ty-r-sm);
  background: var(--ty-fill-2);
  color: var(--ty-accent);
  font: 600 var(--ty-fs-footnote)/1 var(--ty-font);
  white-space: nowrap;
  cursor: pointer;
}
.btn-code:hover { background: var(--ty-accent-soft); }

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ty-sp-3);
  margin: 0 0 var(--ty-sp-5);
  font-size: var(--ty-fs-footnote);
}
.remember {
  display: inline-flex;
  align-items: center;
  gap: var(--ty-sp-2);
  color: var(--ty-ink-2);
  cursor: pointer;
  user-select: none;
}
.remember input {
  width: 16px; height: 16px;
  accent-color: var(--ty-accent);
  margin: 0;
}

.invite-hint {
  margin: calc(var(--ty-sp-2) * -1) 0 var(--ty-sp-4);
  font-size: var(--ty-fs-caption1); /* 12 */
  color: var(--ty-accent);
  line-height: var(--ty-lh-body);
}

.agree {
  display: flex;
  align-items: flex-start;
  gap: var(--ty-sp-2);
  margin: 0 0 var(--ty-sp-5);
  font-size: var(--ty-fs-footnote);
  color: var(--ty-ink-2);
  line-height: var(--ty-lh-body);
}
.agree input {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--ty-accent);
  flex-shrink: 0;
}

.btn-primary {
  display: block;
  width: 100%;
  height: var(--ty-hit);
  border: 0;
  border-radius: var(--ty-r-pill); /* 黑胶囊；token Primary 为 --ty-r-md 14，见报告 */
  background: var(--ty-btn);
  color: var(--ty-on-strong);
  font: 600 var(--ty-fs-callout)/1 var(--ty-font); /* 16 */
  cursor: pointer;
  transition: transform var(--ty-dur-fast) var(--ty-ease), background var(--ty-dur-fast) var(--ty-ease);
}
.btn-primary:hover { background: var(--ty-btn-pressed); }
.btn-primary:active { transform: scale(var(--ty-press)); }

.foot-link {
  margin: var(--ty-sp-5) 0 0;
  text-align: center;
  font-size: var(--ty-fs-footnote);
  color: var(--ty-ink-3);
}
.foot-link a { font-weight: 600; }

.back-link {
  display: block;
  margin-top: var(--ty-sp-5);
  text-align: center;
  font-size: var(--ty-fs-subhead); /* 15 */
  font-weight: 600;
}

@media (max-width: 720px) {
  .scene { padding: var(--ty-sp-4) var(--ty-page-x) var(--ty-sp-5); }
  .card { padding: var(--ty-sp-5); padding-top: calc(var(--ty-sp-5) + 32px); } /* 20 + cat room */
  .cat { width: 112px; height: 112px; margin-bottom: -44px; }
  h1 { font-size: var(--ty-fs-title1); /* 28 */ }
  .subtitle { margin-bottom: var(--ty-sp-4); }
  .field { margin-bottom: var(--ty-sp-3); }
  .agree { margin-bottom: var(--ty-sp-4); }
  .foot-link { margin-top: var(--ty-sp-4); }
  .row-between { margin-bottom: var(--ty-sp-4); }
}