/* =========================================================
   Yi-Num · Login
   复用 styles.css 的设计变量与氛围层
   ========================================================= */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================
   Header · 语言切换
   ========================================================= */
.lang { position: relative; }

.lang-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 40px; padding: 0 .8rem;
  background: transparent;
  border: 1px solid rgba(20, 20, 15, .12);
  border-radius: 999px;
  font-family: inherit; font-size: .82rem; letter-spacing: .04em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.lang-btn svg { width: 16px; height: 16px; flex: none; }
.lang-btn:hover { color: var(--ink); border-color: rgba(20, 20, 15, .26); background: rgba(255, 255, 255, .5); }
.lang-btn:focus-visible { outline: 2px solid rgba(176, 141, 87, .7); outline-offset: 2px; }

.lang-caret { transition: transform .3s var(--ease); }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  min-width: 190px; margin: 0; padding: .35rem;
  list-style: none;
  background: var(--paper-2);
  border: 1px solid rgba(20, 20, 15, .09);
  border-radius: 14px;
  box-shadow: 0 26px 46px -24px rgba(20, 20, 15, .45);
  animation: menuIn .22s var(--ease) both;
}
.lang-menu[hidden] { display: none; }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.lang-opt {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; padding: .6rem .7rem;
  background: transparent; border: 0; border-radius: 10px;
  font-family: inherit; font-size: .87rem; text-align: left;
  color: var(--ink-soft); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang-opt:hover { background: rgba(20, 20, 15, .05); color: var(--ink); }
.lang-opt[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.lang-opt .check { width: 15px; height: 15px; flex: none; color: var(--gold); opacity: 0; }
.lang-opt[aria-selected="true"] .check { opacity: 1; }

/* =========================================================
   Auth 容器
   ========================================================= */
.auth {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  padding: clamp(1.8rem, 7vh, 4rem) clamp(20px, 5vw, 32px)
           calc(3rem + env(safe-area-inset-bottom));
}

.auth-shell {
  width: 100%;
  max-width: 400px;
  padding: clamp(1.6rem, 5.5vw, 2.4rem);
  background: rgba(251, 249, 241, .72);
  border: 1px solid rgba(20, 20, 15, .055);
  border-radius: 26px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 40px 80px -55px rgba(20, 20, 15, .45),
              inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* ---------- 欢迎语：移动端居左 / PC 居中 ---------- */
.welcome {
  text-align: left;
  margin-bottom: clamp(1.7rem, 5vw, 2.1rem);
}
@media (min-width: 768px) {
  .welcome { text-align: center; }
}

.auth-title {
  margin: 0;
  font-size: clamp(1.65rem, 6.2vw, 2.05rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: .01em;
  color: var(--ink);
}

.auth-sub {
  margin: .7rem 0 0;
  font-size: .9rem;
  line-height: 1.75;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

/* =========================================================
   表单
   ========================================================= */
.form { display: grid; gap: .95rem; }
.field { display: block; }

.input {
  width: 100%; height: 52px;
  padding: 0 1rem;
  background: var(--paper-2);
  border: 1px solid rgba(20, 20, 15, .12);
  border-radius: 14px;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.input::placeholder { color: var(--ink-mute); }

.input:focus {
  outline: none;
  background: #fff;
  border-color: rgba(176, 141, 87, .75);
  box-shadow: 0 0 0 4px rgba(176, 141, 87, .12);
}
.input[aria-invalid="true"] { border-color: #B4443C; }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 68, 60, .12); }

/* 验证码行：输入框与按钮同处一个圆角容器内，保证与邮箱框同宽 */
.field-row {
  display: flex; align-items: center; gap: .4rem;
  padding-right: 6px;
  background: var(--paper-2);
  border: 1px solid rgba(20, 20, 15, .12);
  border-radius: 14px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field-row:focus-within {
  background: #fff;
  border-color: rgba(176, 141, 87, .75);
  box-shadow: 0 0 0 4px rgba(176, 141, 87, .12);
}
.field-row.is-invalid { border-color: #B4443C; }

.input--bare {
  flex: 1 1 auto; min-width: 0; height: 50px;
  background: transparent; border: 0; padding-right: .4rem;
}
.input--bare:focus { background: transparent; box-shadow: none; }

.code-btn {
  flex: none; height: 40px; padding: 0 .8rem;
  background: transparent; border: 0; border-radius: 10px;
  font-family: inherit; font-size: .86rem; letter-spacing: .04em;
  color: var(--gold); white-space: nowrap; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.code-btn:hover:not(:disabled) { background: rgba(176, 141, 87, .1); }
.code-btn:disabled { color: var(--ink-mute); cursor: default; }

.error {
  margin: .5rem 0 0;
  font-size: .78rem; line-height: 1.6; color: #B4443C;
}
.hint {
  margin: .5rem 0 0;
  font-size: .78rem; line-height: 1.6; color: var(--gold);
  word-break: break-all;
}

/* ---------- 登录按钮 ---------- */
.auth-submit {
  width: 100%; max-width: none; height: 52px;
  margin: .7rem 0 0; padding: 0 1.6rem;
  border: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  letter-spacing: .28em; text-indent: .28em;
}

/* =========================================================
   分割线 & Google
   ========================================================= */
.divider {
  display: flex; align-items: center; gap: .9rem;
  margin: 1.7rem 0;
  font-size: .78rem; letter-spacing: .22em; color: var(--ink-mute);
}
.divider::before,
.divider::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: rgba(20, 20, 15, .1);
}

.google-btn {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; height: 52px; padding: 0 1rem;
  background: #fff; color: var(--ink);
  border: 1px solid rgba(20, 20, 15, .18);
  border-radius: 14px;
  font-family: inherit; font-size: .96rem; cursor: pointer;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.google-btn:hover {
  border-color: rgba(20, 20, 15, .34);
  box-shadow: 0 12px 24px -16px rgba(20, 20, 15, .55);
  transform: translateY(-1px);
}
.google-btn:active { transform: translateY(0); }
.google-btn:focus-visible { outline: 2px solid rgba(176, 141, 87, .7); outline-offset: 2px; }
.g-icon { width: 19px; height: 19px; flex: none; }

/* =========================================================
   协议
   ========================================================= */
.agreement {
  margin: 1.8rem 0 0;
  text-align: center;
  font-size: .76rem; line-height: 1.85; color: var(--ink-mute);
}
.agreement a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(20, 20, 15, .28);
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.agreement a:hover { color: var(--ink); text-decoration-color: var(--gold); }

/* =========================================================
   PC 微调
   ========================================================= */
@media (min-width: 768px) {
  .auth { min-height: calc(100svh - 82px); }
}

@media (prefers-reduced-motion: reduce) {
  .lang-menu { animation: none; }
  .google-btn:hover { transform: none; }
}